Today's topic is about Node.js There are many back-end frameworks, and I'm going to use Node.js First, I'll introduce what Node.js is If you've heard of Python in the previous lecture, you know I installed Python on my computer, wrote Python code, and executed it But JavaScript didn't have this process So why didn't we install JavaScript? Because JavaScript was running on the browser It wasn't run on the computer, but on the browser There was an interpreter, so I interpreted JavaScript and executed it So I've never installed JavaScript on my computer But my goal is to run this on my computer or server To run it on a back-end, you need to install Node.js You can run JavaScript So all computers that can install Node.js Can run JavaScript without a browser First, I'll briefly introduce how good Node.js is The job trend about Node.js It's the size of the job we investigated on the site Indeed.com If you look at the job of Node.js, you can see that the graph is very steep So if you learn Node.js, you can use it a lot There are many places where Node.js is used globally Module counts, modules are like pre-made code So we don't make all the code from the beginning I told you that I put the material in the shopping mall like shopping That's the module So if there is a module, you don't have to make a code It's a function module that can be downloaded and used In Node.js, it's called npm It's going to come out later There are overwhelmingly many modules compared to other languages To summarize, there are so many things to use In other words, when you say that you are boiling budae jjigae There are so many kinds of ham and ramen You can easily bring and boil very delicious budae jjigae Stack overflow In recent 2022 research, Node.js is number one The highest response rate among web frameworks Node.js ranked first Node.js, which is ranked first, is a huge point In fact, it's good to learn a lot of technology As I said at the beginning, coding is Rather than making a code directly When you get a call from the internet or bring a code made by others Or when considering a job It's better to learn the technology used by various companies So I chose a one-day point rate like this So let's install Node.js To install this, I'll leave a link here Installation is stable and reliable LTS is probably a long time support I recommend using this stable version So you will receive an installation file called msi If you click this, the installation window opens You can keep installing it I installed this Just show you the process Just click Next Python and Visual Studio Build Tools It is said that it is necessary for a specific module So if you check this, you can run this normally It is said to install Python and Visual Studio Build Tools Of course, there is nothing bad about installing this It won't be necessary today Momyung, you can also install Macbook It will probably proceed similarly Check and install here Installation is going on and Node.js is installed You can install it by pressing Install Let's test what it is I turned on Visual Studio Code Let's open a folder Click Open Folder on the file I made this folder I also ran the web of C drive here I made a folder called Week 4 If you work on a folder with Korean There are times when errors occur due to Korean So I recommend that you do this folder in English I opened the folder like this I entered a folder called Week 4 I made a folder to test You don't have to worry about this I'll make a file called index.js by pressing New Let's think about how we did it until the previous week of JavaScript I did it like this Open the console window in the browser The browser is in a state where the browser can run JavaScript So if you enter here, you can run JavaScript code Now my computer doesn't have that environment Now that I've installed Node.js, I can run it Then I'll run it on my computer here I'll start with Hello World using console.log Printing this text called Hello World It wasn't originally running How to open a terminal If you are in Korean, open a new terminal If you open the terminal, you will see a window like this If you see a window like this, check if it is in the folder called Week 4 If you are here, you can use the command node because you have installed it After you have done one space, enter index.js If you have heard of Python lectures, you may have seen it Python and something.py Like that, you can run a file called node index.js as a node If you press Enter, you can see that the text Hello World is good like this This is also a little tip If you make a mistake, this is a very common thing If you just put a error message on Google There are many ways to solve it I don't think it's coming out here now This may not be common Because it is a specific file that you have designated yourself Erase this If you search like this, there are people who have the same error It is a problem of authority It is said that you can do CMD I think it would be good to refer to this If you search for errors on Google, you will get more than 90% of the answers Erase file names and run as it is If you are ready, let's go Now this is good enough to install node.js It's all ready Then let's go to the next step Let's learn about npm What is npm? npm has a site Let's see this build amazing thing It's the abbreviation of node package manager npm As I explained earlier, it doesn't make sense to create all the codes yourself So some of you who misunderstand about coding Some people think that You have to make all the code Not at all If you have tools like npm Search here, take it, download it and use it So today I'm going to use a module called Express Express is a web framework In this way, a lot of things implemented in a framework or a java script You can download and use it in this npm So there are a lot of modules here It's almost 400,000 It's 2017 now, so it's probably more There's a huge module So you don't have to develop anything You can download the module and use it Even that was very famous I saw it on the humor site There are people who made and uploaded it as a node module to determine odd
numbers and even odd numbers So there are a lot of people who made it into a module that is so useless Most functions are in modules So for those of you who use Windows When installing a program PowerPoint, Excel Or the node.js installed today You can also run a file like setup.exe You install it with this On Windows PC But when installing it on node.js Using the terminal NPM install something If you just write the name of this module like this It automatically downloads and installs So it's the same as this Click setup.exe on Windows Install this on your Windows computer When we use the node Just put npm, install, and install If you enter the module name This will download, install, and install on node.js So using this command This is installed on npm I'll install this So I was looking for the lightest thing to use There was an npm module called Figlet I'll download, install, and use this I'll search on the npm site If you search for Figlet It pops up here This is also very down Have you ever seen this? This is called ASCII art Figlet is expressed using this text So there are people who leave comments like this I draw and leave This is called ASCII art This is the module that makes this So I'll install this and run it So of course, the usage method is different for each module How to use it There is a manual here So I'll follow the manual Then you have to install the module on node.js But the command to install is as I said before npm install This is too long, so I use it as i If you enter i and figlet The module called Figlet is installed I'll install it Copy this Oh, there's something to do before that You can do this, you can do it like this You can do it, but a little better I'm going to use npm now So what are the modules downloaded here? It's good to organize So to organize There is an command called npm init In other words, I'm going to download packages using npm I'm going to start that Init is the abbreviation of the English word initialize If you enter the command to start npm The explanation comes out This is what package name will be What version will be What will be the description explanation Something like this comes out You just have to hit enter Then something is automatically applied Package.json is created We only had index.js When npm init was done, There was a package.json What is this Now we are using npm You're going to download and apply various modules So when you download and apply What did you download And what is the name of this project now What is the version, what is the explanation What is the main thing to do It's a space to enter these things So in this package.json If there are things installed, it will be recorded here Even if you don't make package.json You can just install npm and use it I'm just trying to manage it neatly So it's okay to do without this LVC App Center is right After installation, a folder called node modules is created This can be a little confusing, so I'll remove it To have the same environment as you You have to do this You have to install it on the terminal What we've done so far is Using npm init I said I would start npm And now to really install the module There's an installation command on the npm site NPM install figlet If you copy and paste it into the command window But you can give an option here What is the option Save like this In the old version, you have to enter this It's entered in package.json here Oh, this is used in this project It was recorded This has become a default these days So you don't have to enter it You can get rid of this Also, Minus G, the space of the house Minus G is Originally, if you just install it like this It's only installed on this project in the folder called week 4 But if you put this minus G Not only this project It's applied to my entire computer No matter where you go D drive folder or C drive In a completely different path You can use figlet as an order This package log is without G I'll just install this project I'm just installing it here So this is the command to install this If you press enter Added one package Something was installed Then, as LVC App Center said earlier There is a package log What's written So what is this Package.json I said I was going to manage it here If you look here, there is a dependency Figlet 1.52 It was created like this What is this In this project we will use Figlet MPM module was used This module was installed at this version It's just a rough description If you look at the package log It's very specific So I installed a module called Figlet on the module What is the version of it Where did you install it This exact information is recorded in the package log In other words, package.json is roughly To find out quickly and widely Package log is a little more detailed This kind of detailed version information These things are written You can think of it as a more detailed package Bangbalja, if you install it on the whole, is there a high possibility of
collision? That can be The whole computer is managed only with one It can be done on the whole So it would be better to do it in project units If you do it in project units There is also a folder called node modules What is this There wasn't before But if you press this, you have a figlet here In other words, the things we installed in this module It went in here and was downloaded So if you go in here, there are various packages There is a package here too If you go in, the JavaScript files are just complicated So we don't need to do this at all Just bring it from the npm outside You can install it like this So I'll install it like this and continue using it Then, first of all, you have to enter the javascript code Of course, it doesn't make sense to enter it from the beginning Because I can't memorize all the usage methods You always have to look at the official document If you look at npm, it's basically with the official document If you look at the official document, here's a simple usage There's a way to use it I'll copy this and use it I copied it and put an example code in index.js Then if you look at this example code In this way, require is a word that requires It requires a module called figlet So I put this in like this Bring this require In other words, we installed figlet Bring this module and put it in this variable This is a variable that can use the figlet module If you use this, you can do various things So if you look at the basic code If you look at it now, it's a function called hello world It's a function that runs this Enter the word hello world There's a function that prints some data from console.log data Then I'll run this If you run index.js, you can run node index.js If you press enter, it's like this You can see that the word hello world is well made Because the image is not in the comment window You can use this to write cool letters If you change this, it will change as you change If you enter the code, the code will come out cool I downloaded and used a module that can do this So there are so many modules like this Among them, we can easily install and use I used a module called light figlet In this way, almost everything you imagine is a module This is how to download and use the module ASCII art is not just letters Image like this I've seen a lot of images like this Expressing images with dots or letters When making this, it is called ASCII art These are all modules So download this module and use it Depending on how you use it, install it in the encode If you follow the instructions, you can use it all Then, in this time, I will learn about Express What is the express module? Create a web framework using Node.js So what is the web framework? While explaining the web structure, the front-end and back-end I gave you this explanation If you have a front-end screen, when you click here When you send a request to the back-end Receive this request and process it in the back-end Calculate, view DB, and so on It's a web framework that returns it to the answer So, it's the role of Express to create and use this web framework I'll proceed with this Then, I'll install the basic express Then, I'll run the hello world example Then I used Figlet If you try to delete it, NPM uninstall and figlet This can be deleted NPM uninstall and delete module It would be nice to erase the module that you don't use Then it was deleted So here it was deleted The folder is gone It disappeared from the package This is also gone If you don't use it like this, what happens is Node.js will have an error module not found There is no module Because I required it, but if there is no module, it will not run So I explained that it can be erased like this Then I'll install Express Express is the same NPM here Express If you search, it comes out like this I'll download the module called Express and proceed Then there is something installed on the right side If you click this, the installation command is automatically copied If you copy this and press enter The web framework called Express is installed So if you look at the package here, Express is installed If you install it like this, it's installed well Now that the installation of Express is complete, I will use it Then, like Express, there is an example code So let's run this Put the example code of Express Ctrl V If this happens, it's not saved If you press Ctrl S here, it will be saved I put the basic code like this I'll run the code To run it, node index.js It's still like this It's still like this So if it's running like this, what can I do now? If you go to localhost 3000 I was able to check that the word hello world came out There is a hello world here So to turn off this server, Ctrl C is the command to turn off the server After that, if you try to go back here It doesn't work anymore It doesn't connect while spinning In other words, we run index.js Listen something 3000 times When you're listening 3000 times, this is running I was able to execute this command Then, let's find out what each of these means If you learn this, you can understand and use Express I explained the standard as an example on the Express official website Actually, the code is the same So I'll change it to this standard and explain The code is almost the same This port was just in 3000 This is like this So I'll copy this and replace it with this It's the same The difference is this much There is a difference in the message Actually, the rest is the same So I'll explain this as a standard Then first, what is app.Listen? Then the port number goes in 3000 just went in What this command is I think you need to understand the port What is a port? Usually, this originates from Hangu In the first landing This is the first landing If this is the second landing Of course, when the ship comes in, this ship has to come to number one This ship has to come to number two I know this is called a port So this is a port, so it's the same as this So you've heard of USB ports on laptops or something like this HDMI port, LAN port You can see it as an entrance that can be entered on the computer So each port is different This concept is also applied to the server So I told you that the server has an address So I change this to a domain address and use it Not just server address, IP address There is a separate port There will be 3000 times that I used earlier There are 80 times There are various ports like this This is the entrance So when I asked We thought we were just going into the server Basically, all the ports are open It goes into a specific port So here you have to listen like this Now when you come in, you can do something To explain more specifically Basically, there is a standard that determines how many ports to use It's out here It says TCP UDP port list Ha-Eum-I gave a very accurate comparison IP is the representative number After calling the representative number, how many times is the counselor
connected? What is it? Like that, these ports are set It can be connected in detail there What we just used unconsciously 80 times here is called HTTP web page transfer If you look at this, if you go into something like Naver We know that we just went into Naver.com I just input it If you look at the principle properly, it's actually 80 times Also, a little different 80 times port is just HTTP It's set as 443 This is 443 to enter as HTTPS So in the case of Naver, this port is connected to 443 It's the same as just entering it like this So basically we didn't use the port In fact, it is a concept called a port internally I think it would be good to understand So in the end, the port should be listening When you connect to this server, the program is executed You can respond So you can run different programs for each port So here we are We turned on the node.js server for port 3000 In other 100s, you can turn on another program You can turn on several in one server So far, we've looked at this listen About this, how many ports are you listening to? I found out what this command means Then this is a function This console log listening on the port That is, I'm listening to this port I'm just trying to print a message This is not functional So you don't have to use it It's complicated, so you can erase it If you just run it, you just print letters like this So I'm going to mark it as example app listening on port 3000 I'm listening to it on port 3000 If you say localhost 3000, you can access it here Some of you may be wondering what a localhost is Localhost can connect to my computer through IP When you go into localhost 3000 This doesn't have to use my computer's IP It's called a localhost So when you connect to my computer, you can use it like this So my computer is listening to 3000 now If you go in here, this will be executed Then the second one What is this app.get? It's called HTTP method Slash is routing Callback function is now in the back If you know what this world is, you'll say it's easy If you don't know, you'll say what this is I'll explain it one by one First of all, let's look at the function of this HTTP method The HTTP method is a method used to tell the purpose or type of request when
making a request There is a request for get and a request for post This is a form tag that I used to use when I made a Google clone page There is a request method called get method There is a request method called post method To summarize, the get method is a method that transfers data from the address
window The post method is not an address window You can think of it as sending a request with some information about the body When you send a request from front-end to back-end There is a get method and a post method There's more behind If you understand these two, the rest is easy If you send an HTTP method with get or post method You can handle it accordingly Then, before that, app.get That is, it means that you will receive something that came in as a get method
among HTTP methods I'm listening now It's a mark that says, come here So you understand this HTTP method Then what is routing When I entered this server, I told you that there is a port like this But even if you enter a certain port There will be many files in this port For example, when I said I was turning on YouTube Here, every time I go into the search bar after youtube.com, it changed Feed, explore, it changed like this If you go into any page like this, the channel ID behind the YouTube channel
changed In this way, this is called routing So, according to routing, the HTML page shown here changes This is called routing Here, slash is the home page If you put about at the back, the page to introduce about should come out here If you put board, the board board page should come out If you put board, the page to write should come out This is called routing So this was written earlier This is routing, slash and the basic address So you can change this to about or board And now there's a big one left behind This request response arrow and something strange As you may know from the last time, this is a function It's easy to use the function as an arrow function This is called callback function I tried to deal with this in more detail, but I thought it would be too
complicated This is different next time or separately To briefly explain the callback function Inside the function, the function and the horizontal inside are originally
parameters Parameters, something like this, I put in a parameter like this I put in a name or something like this The function that will run after this function is called the callback function In other words, the callback function means the function that will run after
this function So this is a specific example There is a function called setTimeout like this If you use this quickly, you can erase this and setTimeout So setTimeout takes two parameters First, I took a function and then I took a second So it's not milliseconds, but setTimeout has a callback function This function has a millisecond time So this function is setTimeout The function that will run after 1000 milliseconds is already created So this function is basically set Then here, console.log.1second.json If you enter this and run it, If you run node.index.js At first, nothing was opened, but after 1 second, it was released If you change it to 5 more, it will not run for 5 seconds Then after 5 seconds, it was marked as 5 seconds In other words, this function called setTimeout This is a function that says to wait for 5 seconds after it is executed It's a function that sets the order to call this after 5 seconds So when you adjust the order of the function, you usually use a function called
callback This is to understand the concept of non-initial and initial Rather than explaining in detail, Just understand that you put the things that will be executed later in the
function I will explain this in detail later Anyway, as if you put a callback function here This callback function goes in here Request response is a parameter It says response.send behind this function This is a callback function In other words, if you come in here and execute this function Then run this code Then you understand to some extent If I explain the code as a whole First, listen, here is the port, I specified it as 3000 I'm listening to the 3000 port So what will you do when you come in as a localhost 3000? First of all, this is also a callback This also contains a function I'll take this console log It means that this will be executed after the listen is executed And app.get is this express app that came in as a localhost So when routing comes in as the root of this express app It means that this function will be executed You also asked me a question What is this req, res? If you ask me, this is it This server is ultimately answering some request So there is a request and an answer This is the abbreviation of request, response, and request request And the abbreviation of response is res The req contains all the request information And the response contains all the information about the answer In other words, response.send means that I will send a send to the answer It means that I will send a text called hello world to the answer Then, if you summarize this and think about why localhost 3000 came up We were listening to the 3000 port We were waiting for 3000 and we used the address window to connect to the
browser Then the information used by the address window is the get method So, because the address window was entered in the get method, we entered this
address like this It's the root of the app.get address, so this routing is correct So, because it went into this address, the callback function behind it is
executed The callback function is response, that is, the response to send It means that I will send a text called.send hello world So, sending it like this is marked as hello world If you think about the server, the server is the part that we always see I'm used to HTML, but the server is actually the part that I can't see Even if there is something a little less familiar, the concept is the same This picture is all If you remember this, it's over So there is a request and a response We are using this framework called Express to create a backend server So this is how the backend development goes I saw the explanation of the basic express code Yes, Mr. Hongjahi, when you enter this address, the get function is executed When you enter the port, the listen function is executed But if you look at the order relationship, listen is always doing So I'm always listening, so I'll show you a picture I'm always listening Then the request came in We sent an HTTP request to port 80 If you went into the browser, you sent an HTTP request from the frontend Now I'm listening from the backend, so I'm in Then the app.get method came in as a root Through response.send, the response was returned to the frontend I said that the concept was unfamiliar This is the part that the backend can't see It's true that we use it very daily It's a little unfamiliar because it's not visible But if you know this, when you enter all websites You can think of it as a principle like this Most websites will have at least an API I think it would be good to think of this structure as how to receive it by
requesting it If you summarize the core again, listen I'm listening, but I'm getting this information It's about where to process this In order, listen is always doing Listen is just that the server is on This get depends on the path you enter Now routing is root It's basically a root, so when you don't enter anything, you enter this If routing is separate, it will go to another I will explain this while making an example Then I'll make an example Let's make a simple example API What is it? Dog routing in get method What is this routing? This is the routing that you enter by doing a slash and dog If you enter it like this, you can't do it now Because we don't have anything set When you enter this, Jason data With the key value of sound, a value called dog comes out Let's make an API that returns this jason data And when you enter a cat, you can return the sound as a cat I'll make this API I'm going to proceed with this example Now we only had a route This is called a route It's called a route with only a slash I didn't enter anything I only had this I'll copy this and extend it I extended it like this I'll extend one more If the line doesn't fit, you can shift and go back and forth To organize at once, select the whole thing with Ctrl A Right-click on the mouse and select Format Document It's automatically organized like this If you look at the code, there are three app.get But since all routings are the same, you can't do this I'll separate them one by one like this When you go to the dog routing in get method, you can say that this is executed When you go to the cat routing in get method, you can say that this is handled Then, not just jason data I'll print out a text called dog and cat After this, I'll run the server I have to listen to get in To run this, you have to run the node index.js file This server will run I'll run it Yes, then it ran well If you do this, you go to the route The route with no slash is the route The route is well done Then, what comes out when you go to the slash dog? The dog came out well This is implemented So I told you this dog is routing Now I'm using the browser, so it's get method It came in here and it went here and it was executed So, the response, turning it to the frontend It says, return a text called puppy The puppy went like this Then what happens when you do cat? Not a dog, but a cat This is also the same as the cat routing This code is executed I returned the cat to the frontend Bitcoin-flavored cookie What should I do with the dog-cat-cat? I'll explain this at once You can just send jason data like this You can send an html file with get You can just send it like this Here's the puppy's h1 tag This is just a string, but I sent it in html h1 tag is the biggest letter, the biggest headline Then you have to start over after modifying it So I told you that ctrl c is the server type To call the previous command, press the keyboard arrow up The previous command comes out again When you run it, it's running again Now let's go to the dog Yes, you can see that it's getting thicker Because there is h1 tag The word thick puppy came out So, in this way, html files can be delivered like this Then you can link it If you put the link here It's linked like this Start over again and go to the dog Now the a tag link is sent here So if you click the link like this I've made a link to move to Jocoding YouTube You can send everything through sand like this What's the difference between communicating with exios? This is making a backend now Exios is sending a request There is a library called exios It can also be installed as npm That's when you send a request So this is a response after receiving a request That's a function that the library uses express to return Exios is a function that shoots and receives it In a way, it feels like the attack defense has changed Exios is attacking This is a function that returns what you received I think you can think of it as such a role Oh, Myodan, you pointed it out very accurately It's a response by asking for exios and expressing it Exios is a browser role As I said, if you send a request to a local host here, This is the response This is the role of exios So you send a request and receive a response Then I made a server You have to send the results as you want We don't send HTML We have to send JSON data JSON is the abbreviation for JavaScript Object Notation It's a JavaScript object You can change the data of it In the end, you enter a key called sound between the middle and the end colon and then If you enter it like this Oh, it's in a string You have to remove the string To enter it as JSON In this sand JavaScript object data This is JSON data This is not JSON JavaScript object goes in here You will send this After this, you can restart the server If you go to the slash dog Now I went to the dog like this This one went to the dog The response is now sound This JSON object came in like this You can use it like this If you want to use it more explicitly You can use it like this Even if you don't change this Everything is normal But if I tell you a little more If you specify it as JSON here Oh, send JSON data The steps are a little shorter The same goes for sand You can use sand If you want to be more specific, you can use JSON You can use JSON like this So if you do this If you replace this data like this Instead of a dog If you say meow When I tried to restart Even if you go into cat This is a good sound I made the API well like this The API document is like this When you request a URL in a get method At that time, a response What JSON data is coming out It's an API document We implemented it according to this API document We implemented it so that the sound dog comes out If you type Korean in the back, there is an error Korean doesn't work So if you want to put Korean in the URL You have to change the encoding Have you ever seen this? It's not Korean in the keyword Strange letters like this Once you surf the Internet You've seen it before This should change the Korean like this So in this address, Korean should not be entered You always have to change the encoding like this So if you want to go back and forth There is probably a site for encoding conversion If you convert this to read If you encode, the lean changes like this You have to enter this Now, let's move on to the next step Among the questions you gave me earlier You gave me a very accurate question Can you give it as a variable? Can you give it as a variable? I can give it So let's practice that We just did a response I've only tried sending it with a hello world But there's a variable called request Request is a request Response is to receive and process requests and send them out You can send some information in the request Get method is a method of using address windows I explained that I could summarize it simply When delivering some information in get method There are two ways There are two ways to use parameters, params and queries Let's find out both ways First, the parameter How do parameters work in real life? Let's go to YouTube I'm enjoying watching this kind of YouTuber If you go in here, it's like this There's an user slash behind the YouTube user Remember this now Next, wooakgood Wooakgood YouTube is very interesting If you go into this channel, it's the same as the user here But there's wooakgood in the back This is zilioner83 This is wooakgood It's the same as the first one Only the back one changes There are a lot of YouTubers It doesn't make sense to route each YouTuber one by one We did dog and cat Not at this level There are a lot of YouTubers in Korea To make each one I have to keep making this Then the code will be tens of thousands of lines It doesn't make sense So the way to receive this variable It's a way to use parameters In other words, it's not just like this You can get variables here You have to show the screen differently according to the ID Then I'll show you how to get the ID with code If you follow the example I got an ID behind the user I got an ID behind a user Then I have to get that ID to handle something When you get an ID like this, you write a colon Write a colon The name of the parameter behind it It could be an ID or a name This could be a lot of things This is the name of the variable You can decide freely Then how do you print this? If you do this, you can make a variable In the variable q request.params The request is a request Among the requests Bring the value of.params I'll put this in the variable q Put it here console.log Let's see what q is I can run this again run nodeindex.js Then I have to go into this routing I have to go behind the user Copy this Instead of here, I'll go to the localhost Behind the localhost This is how you approach it It's the user's ID This.id should actually be something else I got an ID called jocoding This is what happens What kind of user ID I got an ID called jocoding How does this come into the server? If you get the value of user's colon ID in the address bar like this This variable ID Request request has come in This request came in the address bar If you take a picture of params It goes in like this That is, this ID is this ID This is the actual value of jocoding The value that the ID actually entered here It goes in like this So you have to get some value and process it on the server Among them, the get method is the method of receiving using the address bar If you enter some value here In the name of the variable ID You can get some value LVC App Center Whenever you enter the terminal, the control C you use is to end the server When you end the server Control C is the end of the server Then, if you select the ID from the queue You can only use jocoding and gam So, like this, instead of a dog User ID If you say you're turning it like this Run again and connect here again Yes, like this, I put the jocoding in the user's ID Jocoding went into the user ID like this This is the value of the queue's Q point ID I put it in like this Now the user ID is here You can check that it was printed with jocoding There are two ways like this I understood one It's going to be a blue water In other words, if you write a colon and a variable name I learned that the value here comes in And there is a second way How to use query You may have seen it when I was in the CSS lecture in the second week If you search something on Google The rest is useless I learned this while making a Google clone site You know this is routing There's a question mark on the back Q is all ASTF I sent it like this In other words, this is what Q variable It's connected to this value If you change this to jocoding Yes, the search page is actually It was searched with jocoding Q is some value This is also a key value structure It's a key value If you've learned Python, you'll know what dictionary is Or if you know Jason Jason data is also like this Name, value, key, value, key, value This is the structure It's a structure like Jason or dictionary In the URL, the query is also like this Q is jocoding Or you can connect the value like this You can send multiple parameters to the query So connect it to the end Key value You can send it like this So if you look at it again How to send parameters You can get it with params You can get it with query I'll get it with query If you do this for a while If you press control and slash, it will be processed into a column This is not running Control plus slash is a column processing So this is made of code that doesn't run I'll get the value again Make a variable and get it back with Q I'll get a request.query If you get it with request.query Let's see what value Q comes out If you type console.log Q When you run this, you go into the localhost When sending this query, the question mark at the address window Q is jocoding end name is end age is 20 Like this Q is jocoding name is jo age is 20 What happens if you send parameters like this? I'll run it If you run it It came out like this If you send q as jocoding In this way, the value of q is jocoding with json data If you send end name as jo Name is jo age is 20 age is 20 It's received like this Then here, q.q Q is this You can call it q.q q.name will come out as jo q.age will come out as this So if you want to return the value you want If you put it in the response side The request is the side that was requested The response is the side that returns After receiving it like this If you turn it on and run it again Now you can see that it is well printed by receiving the name of q as jo There are two ways like this There is a way to receive it as params If params assigns a variable name after a colon This is how you receive it as params And the second way to receive it as query After writing a question mark Enter it as a key value like this This is how you use query So I learned about two ways to receive variables Then how do you get the post method? This may be a little difficult The post method is the same params are the same params receive the id as it is This is not a request by address window So it's not an address window Exos you mentioned earlier Or fetch you learned last time You can request it by post method At that time, the value of the body is included So I brought the value of the body This is also just JSON data If you take a picture of it like this You can use it the same So I don't have to show you this now Because I'm going to use it later anyway Just like this, you can get the parameters You can process it based on the data you received For example, when the user ID is a code Show the code youtube Show the code youtube when the ID comes in That's the youtube server So we've implemented the role of the youtube server So this value behind the youtube channel It's the value that goes to the server with the variable 00id If you understand this, you can understand This is the basic routing and the value delivery method I explained it in more detail Then I'll make an API server as a practice What I'm going to make is I'm going to apply it and make it the same So let's make an animal sound API server Like this, if you give the variable name after get and sound This can include a dog, a cat, or something else I'll get a lot of things and make them sound different I'll make an API that returns it I'll show you another cry following the name If you make an API server At first, we have to input all of this from get.cat But if you look at the requirements again I'll get a name after the sound I'll return the other cry to the json data according to the animal's name Then not cat I'll get a variable called sound slash and name I can get a variable called name Then I have to get a variable from the request I'll declare the variable This is from the parameter I'll make it P I got it from request.params Then I can get this name value But I got it twice before After this, you have to put the P.name Now the value of P is saved There is a way to make it a little easier If you enter this like this This was json data before So if you enter name here This is used a lot I think it would be good to know this skill This is used as a middle With json data, name is dog This is it This is the value of dog This value goes into this name right away I use it a lot like this If you want to put this value at once with this name I'll set it all the same Then if you put this key value The value goes into the variable name right away I'll show you what happens console.log name I have to unify I won't use it all I don't have to use it all Run If you write it like this, let's see how the name comes out Write sound Write dog at the back If you press enter, it came out here The dog came out How did this come out? The request.param of the name is now in dog This value went in here Then this parameter As you saw earlier, the name is dog The dog went in here The dog was printed here Do you understand this? Yes, it went in this structure This yang came out because it was a string If you do this, the name value becomes dog If you change this to cat This was printed as a cat I can express it like this How to do this differently JavaScript grammar is used at this time If the name is dog Dog Copy this It's not a meow, it's a dog I made the sound as a dog And there was a grammar called else if Those who have heard of JavaScript time will know The name is not dog When the name is cat The sound is meow Shall we do one more? What else is there? Pig Pig is honey Enter like this Else None of these are true It's not a pig, it's not a cat, it's nothing I can't know with response I'll enter like this I'll wait for you to enter like this It's not that difficult So when I enter this address I got this name as a variable I can extract this variable by requesting After extracting it I'll check the name with if-moons It's different from that If you do it again, turn it off and on again And if you go into the sound cat, the sound becomes a meow If you go into the dog, a dog comes out Then if you go into the pig, honey comes out Did you understand how to handle this? If you understood this Now the back-end is almost done This is almost the core If you understood this Get this parameter and back-end What kind of processing The concept of returning is perfectly understood So you can handle it like this Then it will work no matter what variable comes I've done this pig If you enter anything, you'll get an unknown Then here, not pig If you do something like this I didn't register it now The unregistered one is well known So if you look here, you can't know The sound is unknown, so the json data is well entered If you do this, you have completed the api You have completed the animal sound api If you have this, what animal makes what sound Because it consists of all back-end api Depending on the request, what kind of sound you make You have completed an api server that returns json data So I completed the animal sound api server like this In addition, this api server It was a big problem last time The issue of cors was a big problem What is this When you request a server from an html file This may be requested from a strange place Basically, it is blocked So what the html file requested If you don't set the cors, it will block it Because it was requested from another place If you look at this, why is cors a problem? It's a little more detailed Because there is a cors error You have to solve this In other words, even if you request it anywhere in html You need to make it respond well That way, even if you request it from another server I can respond well So I'll deal with this How to deal with You have to install the module You have to install and apply this require cors To do that, as I looked at it at first I will install the cors module using npm If you look at npm again There is a node middleware called cors It's being installed a lot It is a module that is used a lot So, here, too, I will copy this and paste it here I'll install it Then let's see some changes It's basically a lot of things here This is what I got from the express while installing the express If you look at the package, now there is only express There is only express If you install cors Cors is downloaded and installed Cors has been added to the dependency Cors has been added to the package lock What kind of module is installed in the node like this What are you using? You can see it in detail through package json and package lock Then I installed the cors module Now I can use the cors module I'll use this code I put this code in the data You can use this Or of course there is also an official homepage You can use it like this This is simpler After calling it as require Use cors This is all allowed So copy this and paste it here I'll use this and use it here Then cors app is now talking about this server The express server is running here This is the app That is, I will use this server You can set up conditions for cors Where to request is allowed Where to request is rejected You can set these things If you just leave it empty, you will allow all requests So after doing this, save it It's the same when you run it If you run node index.js There is no problem Because this is a cors setting Nothing has changed here Even if you enter the same thing, you can't know If you enter the tool, it comes out like this If there is no cors, there would have been an error When requested by the front-end In another html But this one stopped the error It would be better to show this I'll show you one I'm going to make an html file here I'll make index.html I'll make an html and make a request here This is the Korean page I'll write the title as Thank you for your sponsorship Make a button Send an epi request here Make an input Value is not needed ID is I'll do this a little faster If you saw this last time You will know what it is OnClick event Get sound I request a function In the script Make a function called get sound Get sound is brought using fetch Fetch is of course Never memorize the grammar You must copy and paste It's a waste of time if you memorize it The fetch address is now It's like example.com You can request this as a localhost localhost This address is Go to the localhost Copy this and put it here Then it becomes a fetch Now take the data to the console It's done now Not only taking a console I'll add it Add a middle and a long line You can increase it in this way Here, document getElement by ID Select this I'll put data in the value Then I'll see how it comes out If I explain this code for a moment I have to add a little more Then I have to send a variable named name to the sound If you just use it as a down arrow I can't put this variable This is the key on the left of the number 1 on the keyboard If you wrap a string using this You can add variables like this This is it I just pressed this key I pressed this If you enter this and use it in the middle of the dollar You can put a variable in here When you use a variable in JavaScript, you use it like this Then the value of name I'd like to get it here document getElement by ID Name value If you do this, you get the value input in the input Save it to the name When you request the name API I'll put it in here and send it This is what happened And this is the ID Set it to sound I'll put it in the innerHTML of the sound I did this a little faster If you saw it last time, you'll probably understand I got the value in this input Send API request as a fetch request I'll get the result and put it in the h1 tag So let's open this up Then I opened the HTML file like this Open the developer tool because it's also taken on the console Enter dog here If you send an API request, it's done This is an object If you look at what's on the console, you can see the object Dog sound So you can see that Jason data called sound dog is in here Then if you enter cat here, you'll get a meow If you enter pig here, you'll get honey I've received requests from the frontend HTML file This is because I've set up a cors If you use it again after disabling this, If you send it to the dog, it works well Can I empty the cache? Oh, it's done. Oh, it was a problem with the cache It's real time, so there was an error in the middle API was a problem caused by cache This is the cors error If you look at the code, you can use the method called get sound We send a request to the API address we have designated as a fetch When you send a request, it's basically blocked like this If you look here, you've violated the cors policy Because this is the localhost you're asking for You're asking for a file right now That's the root of this error message To solve that, I'm using the cors module here I'm going to respond to all of these requests That's what I set up So I set it up like this, save it, run it, and then empty the cookie again If you send a request to the dog, you can see that it's now blank and it's
coming in well So to solve the cors, I told you that you have to add this So it would be better to mark this value To mark the value, it's not data, it's sound So if you want to put this HTML in, you can approach it with a key and bring the
value So if you approach it with a key and bring the sound Then you can bring this sound value and put it in the inner HTML If you enter it like this and send the dog again, it's blank like this And if you send it again, it's blank If you send a cat, it's changed to a cat You can see that the API is well completed If you put something else here, you can see that it's blank when you request an
API So far, I've made a front-end HTML page I've made a back-end API and connected two But this is connected to the front-end page and back-end API locally on our
computer It would be better to deploy this and upload it to the server So I'm going to learn how to upload a back-end server If I introduce what to do next, I'll learn Git, Github I'll practice the process of deploying based on that Oh, Tongdak, can't you follow because of port collision? Then you may be using port 3000 Tongdak, the value here is set to 3000 So you can use anything else, 8080, etc. You can use 1234 So this port is up to you If you use 8080, it will go into the port here You can listen to the listen from another port If there is a port collision, enter it like this Now, if you run it, you'll be listening to 8080 Let's go into 8080 Now, when you enter 8080, Hello World will appear You can change the port as much as you want If there is a collision, you can change it to the value you want So, to add something, this is an API we made ourselves Depending on the cry, the return value is different Then you can connect it to something else There was a person who connected the API that threw a cat picture during
homework Among the things you sent me, there is this There is a person who uses the cat picture API If you press cat, it will appear If you press it again, another cat picture appears If you press it again, another cat picture appears Like this, we combined other APIs with the API we made Now, we only give the dog and the cat You can add a cat picture To do that, instead of the sound, use the second key Image address, cat image address If you copy this, image address copy You can enter the cat image address with the image key If you enter this, the cat image will appear If you give it this far, it will be a rich API Not only sound, but also image Then you can get that image from the front-end and display it on the screen This is really up to you to make an API If you add any function you want, you can make your own back-end API
