Node.js 백엔드 기초쌓기

해당 게시글은 유튜브 - 한 시간만에 Node.js 백엔드 기초 끝내기(ft.API 구축)
를 학습하며 정리한 글입니다.

게시글에 작성된 그림은 모두 업로드된 유튜브 영상에서 캡처해온 것입니다.

---

1. node.js

• node.js란 무엇일까요?
  자바스크립트는 파이썬을 컴퓨터에 설치하는 것과 달리 브라우저 자체에서 실행되기 때문에 설치하지 않아도 실행이 됩니다. 그러나 서버에서 돌리기 위해선(백엔드에서 돌리기 위해선) node.js를 설치해야 자바스크립트를 실행가능합니다.

---

2. npm

• npm이란 뭘까요?
  npm(Node Package Manager)은 필요한 툴을 검색해서 다운받아 사용할 수 있습니다. express라는 모듈을 사용해볼 예정입니다. 웬만한건 사이트에서 다운 받은 모듈로 충분합니다. 짝수-홀수를 구분하는 것도 모듈로 나올 정도로 모든 게 모듈로 있습니다.

npm init // 터미널에 입력 후, 엔터를 눌러주면 package.json이 만들어지고  내가 설치한 라이브러리들이 정리됩니다.

ascii art 'figlet' 모듈을 node.js에서 설치하기 위해선 다음과 같이 작성하면 됩니다. npm에 작성되어 있는 예시를 따라 작성하면 됩니다.

npm install figlet

var figlet = require('figlet');

figlet('Hello World!!', function(err, data) {
    if (err) {
        console.log('Something went wrong...');
        console.dir(err);
        return;
    }
    console.log(data)
});

삭제를 희망한다면,

npm uninstall figlet

---

3. Express

• express란?
  node.js를 이용해 웹 프레임워크를 만드는 것입니다. 웹 프레임워크란 프론트엔드에서 발생한 요청(Request)에 따라 db 값을 조회하는 등의 행위를 거쳐 다시 응답(Response)하는 역할을 말합니다.
  

아래 코드를 실행하면, localhost:3000에 접속 시 hello world 화면을 만날 수 있습니다.

const express = require('express')
const app = express()

app.get('/', function (req, res) {
  res.send('Hello World')
})

app.listen(3000)

• app.listen은 뭘까요?
  포트 : 들어올 수 있는 입구. 서버도 주소가 있습니다. 각 port가 따로 있고 특정 포트로 연결되는 것입니다. 포트마다 정해진 규격이 있습니다. TCP/UDP 포트 목록을 살펴보면, 자주 사용하는 포트 번호 80은 HTTP(웹페이지 전송)입니다. 우리가 naver.com으로 들어가면 정확히는 포트 80으로 들어간 것입니다. 포트마다 다른 프로그램을 실행할 수 있습니다.

• 로컬호스트는 뭘까요?
  내 컴퓨터의 IP를 표기하지 않고 Localhost로 접속하면 됩니다.

• app.get('/', () => {}) HTTP메소드, 라우팅, 콜백함수

  

1. HTTP 메소드 : 요청의 목적, 종류를 알리는 수단입니다. GET요청(주소창에서 데이터 전달), POST요청(내부적으로 body에 데이터 전달)이 각각 있습니다. 즉 위 코드에서 get방식으로 전달이 되면 app.get()을 수행하라는 것을 의미합니다.
   

2. 라우팅 : port를 들어가도 여러 가지 파일이 있을 것입니다.
   
3. 콜백함수 : 다른 코드의 인수로서 넘겨주는 실행가능한 코드

예시를 보면, 1000ms가 지난 후 console.log가 실행됨

setTimeout(()=>{console.log("1초지남")}, 1000)

---

4. GET 활용하기

만약 get 부분 복사 후에 줄맞춤이 되지 않았다면 'shift+alt+f' 를 눌러 자동 줄맞춤을 해주자!

res.send 함수는 인자로 text, html, url 등 다양하게 받을 수 있습니다.

app.get('/dog', function (req, res) {
  res.send('강아지')
})

app.get('/cat', function (req, res) {
  res.send('고양이')
})

app.get('/ngngs', function (req, res){
  res.send("<a href ='https://velog.io/@ngngs'>내 벨로그가기</a>")
})

• res.send의 인자로 json(JavaScript Object Notation)을 받을 수 있습니다!
  res.send 대신에 res.json이라고 써주면 더욱 명확하게 표현할 수 있습니다.

app.get('/dog', function (req, res) {
  res.send({'sound' : '멍멍'})
})

app.get('/cat', function (req, res) {
  res.json({'sound' : '야옹'})
})

• 유튜브를 살펴보자.
  

이미 수많은 유튜버가 존재하는데, 그 때마다 app.get('/유튜버')을 작성한다면 얼마나 많은 라인의 코드가 생겨날까요? 이를 해결하기 위해, 파라미터를 사용할 수 있습니다. 파라미터는 변수명 앞에 ':'를 붙혀줍니다.

app.get('/user/:id', (req, res) => {
  const q = req.params
  console.log(q)

  res.json({'sound' : '으아아아'})
})

localhost:3000/user/thisismyid에 접속하게 되면 터미널에는 아래와 같이 출력됩니다.

listening port 3000
{ id: 'thisismyid' }

• 쿼리값 받는 방법
  쿼리(query)를 이용해 받을 때는 맨 뒤에 ?를 붙힌 이후 작성하면 됩니다.
  console.log를 활용하여 어떤 값을 받았는 지 확인해봅시다.

app.get('/user/:id', (req, res) => {
  const q = req.query
  console.log(q)

  res.json({'userid' : q.id})
})

url창에 localhost:3000/user/ngngs?q=moon&name=jo&age=20라고 입력하면 터미널에는 아래와 같이 출력됩니다.

{ q: 'moon', name: 'jo', age: '20' }

---

5. 동물소리 API 서버 만들기

url에 입력되는 동물에 따라 다른 동물 소리를 출력해보십다.

app.get('/sound/:name', (req, res) => {
  const { name } = req.params
  
  if(name == 'dog'){
  res.json({'sound' : '멍멍'})
  } else if(name == 'cat'){
    res.json({'sound' : '야옹'})
  } else if(name == "pig"){
    res.json({'sound' : '꿀꿀'})
  } else {
    res.json({'sound' : '알수없음'})
  }
})

---

6. Deploy

• CORS
  HTML파일로 서버에 요청이 왔을 때, 보안상 차단됩니다. CORS의 역할은 HTML 요청이 입력되었을 때 응답이 잘 되도록 하게 해줍니다. 먼저, NPM으로 가서 CORS를 설치해줍시다.

npm i cors

설치가 완료되었다면, package.json으로 가서 다음과 같이 cors를 확인합니다.

 "dependencies": {
    "cors": "^2.8.5",
    "express": "^4.18.2"
  }