[영상후기] 한시간만에 Node.js 백엔드 기초 끝내기 (ft. API 구축)

Node.Js 필요성

• 자바스크립트 코드를 브라우저에서 해석하여 보여줌
• 하지만 백엔드로서 서버에서 동작하게 하기 위해 자바스크립트 코드를 해석하기 위해 Node.Js 설치 필요
• npm : Module 수가 많음
• stack overflow 점유율 1위

npm이란?

• Node Packaging Manager의 약자
  • express : 웹 프레임워크
• npm install 000 형태로 설치
• figlet : 글자 아스키 아트 모양 만들어 주는 모듈
• npm init 패키지명 : 상세 설정하며 설치 가능
• npm 설치 시 package.json에 설치된 모듈들을 정리해줌(버전 등)
  • package.json : 버전 등 대략적 확인
    • dependencies에 버전 대략 정보
  • package-lock.json : 상세한 버전 정보 확인
• node_modules 폴더 안에 설치한 모듈이 다 기록됨
• 모듈 삭제 : npm uninstall 모듈 이름

패키지 사용 예시 - figlet

• npm문서 내 simple usage 따라하기
• figlet 예시

// figlet이라는 모듈 변수에 넣기
var  figlet  =  require ( "figlet" ) ; 

figlet ( "Hello World!!" ,  function  ( err ,  data )  { 
  if  ( err )  { 
    console . log ( "뭔가 잘못되었습니다..." ) ; 
    console . dir ( err ) ; 
    return ; 
  } 
  console . log ( data ) } 
) ;

• 모듈을 다운 받고 사용법에 따라 사용하면 됨

express Module

• node.js 기반 web framework
• 설치
  • npm install express
• 실행
  • node index.js
• 종료 : ctr + c

const express = require('express')
const app = express()
const port = 3000
// HTTP 메소드(라우팅, 콜백함수)
// app.get으로 요청 받고난 뒤에 뒤에 함수를 실행해라 라는 뜻
app.get('/', function (req, res) {
  res.send('Hello World')
})

app.listen(port, () => {
  console.log(`Example app listening on port ${port}`)
})

• 콜백함수 : 함수 실행이 끝난 뒤 그 다음에 실행할 함수

  • 함수(끝나고 실행할 함수)

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

  • 보통 함수의 실행 순서 지정, 나중에 실행될 것을 함수에 넣음

• 라우팅 만들기 예제

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

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

app.get('/dog', function (req, res) {
    res.send('강아지')
})
/*
app.get('/dog', function (req, res) {
// object 형태
    res.send({ 'sound': "멍멍" })
    
})

app.get('/dog', function (req, res) {
// 명시적으로 json이라 할 수도 있음
    res.json({ 'sound': "멍멍" })
})
*/

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

app.listen(port, () => {
    console.log(`Example app listening on port ${port}`)
})

• axios : 요청을 보냄
• express : 응답을 보냄

GET : params, query

app.get('/user/:id', (req, res) => {
  const p = req.params;
  console.log(p);
  const q = req.query;
  console.log(q);
  
  res.send({'message' : 'Hello World!'});
});

• 파라미터 : /:파라미터명 으로 받음

  • Spring의 @PathVariable과 유사
  • req.params; 로 받을 수 있음
  • 위 코드에서 /user/cheor 로 GET요청을 보내면
    • console.log(p) => { id : "cheor"} 형태로 출력됨

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

  

• 쿼리 : q=jocoding 형태로 받는 방식

  • key : value 구조

  • 변수=값 형태

  • Spring의 @RequestParam 유사

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

  • http://localhost:3000/user/cheor?q=jocoding&age=20

    • 

POST : params, body

app.use(express.json());
app.post('/user/:id', (req, res) => {
  const p = req.params;
  console.log(p);
  const b = req.body;
  console.log(b);
  
  res.send({'message' : 'Hello World!'});
});

• param은 get과 동일
• post는 axios or fetch => body로 들어옴

실습 : 동물 소리 API

• 요구사항
  • name에 따라 다른 울음소리 출력
  • GET /sound/:name
  • 반환 : JSON

    app.get('/sound/:name', function (req, res) {
      const param = req.params
      let kind = param[name]
      // 밑에처럼 중괄호 안에 KEY를 명시해주면 해당 키만 가져옴
      // const { name } = req.params
      // console.log(name) // name으로 바로 사용 가능
      
      if (kind === "dog") {
          res.json({ 'sound': "멍멍" })
      }
      else if (kind === "cat") {
          res.json({'sound' : "야옹"})
      }
      else if (kind === "pig") {
        res.json({'sound' : "꿀꿀"})
      }
      else {
        res.json({'sound': '알수없음;})
      }
    })

CORS

• 다른 서버에서 요청해도 응답할 수 있도록 설정
  • html에서 요청했을 시 거부 안됨
  • fetch로 요청보냈을 때 기본적으로 막힘
• npm 모듈 설치

const cors = require('cors')
// 어디 요청 승인 or 거부 설정 가능
// 빈 괄호면 모든 요청 허용
app.use(cors())