[Node.js] Node.js 백엔드 기초(2, 완) - express 프레임워크 설치, express로 간단한 API 만들기

이전 포스트

https://dev-traveler.tistory.com/53

[Node.js] node.js 시작하기, npm 정의와 기본 개념, npm 모듈 설치, 삭제 해보기

 

 

 

express란, node.js기반의 웹 프레임워크이다. (자바의 Spring, 파이썬의 장고 같은 웹 프레임워크)

 

 

* 웹 프레임워크란

웹 애플리케이션을 쉽게 개발할 수 있게 필요한 기능을 미리 제공하는 코드 구조(틀)이다.

서버, 라우팅, 데이터베이스 연동, 보안, 인증 등의 기능이 포함되어 있다.

프레임워크의 규칙에 따라 코드를 작성하면 빠르고 안정적인 웹애플리케이션을 개발할 수 있다.

 

클라이언트와 서버 사이에 요청 request, 응답 response이 발생한다.

express라는 프레임워크를 이용하여 클라이언트 요청에 대한 응답 처리를 만들어줄 것이다.

이걸 서버 개발이라 한다.

 

 

 

express를 설치해보자

npm을 통해 설치할 것이므로, 공식사이트에서 express를 검색해본다.

 

https://www.npmjs.com/package/express

express

 

 

공식 문서가 알려준대로 npm install express 하여 설치하였다.

package.json에 의존성에 express가 추가되었고, node_modules에도 관련 라이브러리가 아주 많이 설치되었다.

 

 

현재 프로젝트 상태는 위와 같다.

 

 

 

const express = require('express')

const app = express()

app.get('/', function (req, res) {

  res.send('Hello World')

})

app.listen(3000)

 

공식 문서에 나와있는 예제 코드를 index.js에 붙였다.

app.listen(3000)의 의미는 port 번호 3000으로 접근하는 걸 listen 하고 있겠다는 의미다.

app.get('/', function(req,res){})의 의미는 get 방식으로 "/" 주소로 접근할 때, 콜백함수를 실행하겠다는 뜻이다.

 

req는 요청, res는 응답의 약자이고, 각각 요청정보, 응답정보가 담겨있다.

res.send('Hello World')는 서버가 클라이언트에게 보내주는 정보(응답 정보)로,

브라우저 쪽으로 Hello World 메세지를 send 하라는 뜻이다.

 

 

node index.js 하여 실행했더니 아무 반응이 없다.

localhost:3000 으로 접속해보자!

 

 

* localhost: 뒤에 붙은 숫자 3000은 port 번호이고, 하나의 서버에 여러개의 port를 사용할 수 있다.

* 하나의 IP, 여러개의 port  := 하나의 대표번호, 여러개의 내선번호 같은 개념

* 1번 port에는 node.js 프로그램, 2번 port에는 다른 프로그램 이런식으로 쓸 수 있다.

 

 

화면에 코드가 잘 찍혔다.

다시 VSCode 돌아와서 Ctrl+C 로 서버를 종료해보자.

 

 

 

 

express 공식 사이트

https://expressjs.com/

Express - Node.js web application framework

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

app.get('/', (req, res) => {
  res.send('Hello World!')
})

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

공식 홈페이지에서 안내하는 예제 코드는 위와 같다. 사실상 똑같은 내용인데 한번 더 설명 ㄱㄱ

 

 

 

app.get('/', ()=>{}) 의 의미

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

: '/' 주소에 대한 get 요청일 때(주소창에 localhost:3000/ 입력하여 접속할 때), ()=>{}를 실행하라는 의미

 

 

* HTTP 메소드 : 요청의 목적, 종류를 알리는 수단이다. GET 방식과 POST 방식이 있다. (PUT, DELETE 도 있음)

* GET방식은 파라미터를 주소창에 노출하여 전달, POST방식은 내부적으로 body에 데이터를 담아서 전달

* 보통 함수는 함수(파라미터) 형식으로 생겼는데, 함수(함수) 형태로 되어있을 경우,

  앞에 적힌 함수를 실행한 후, 뒤에 적힌 함수를 실행하라-라는 뜻의 콜백함수가 된다.

 

 

* 대표적인 콜백함수 setTimeout( 함수, 초 )

setTimeout( () => console.log("hello"), 5000 );

5000msec(5초) 후에, console.log 를 출력하라는 함수.

setTimeout 은 5000msec 를 기다리라는 함수인데, 끝난 후 console.log가 찍힌다.

 

 

app.listen(port, ()=>{}) 의 의미

port번호로 들어오면, 콜백함수를 실행하라는 의미

 

 

GET 요청

app.get('/', (req, res) => {
  res.send('Hello World!')
//  res.send({'title':'hello world'})  //JSON 데이터 보내기 가능
//  res.send('<h1> 제목 </h1>')  //html 태그 문법 보내기 가능

})

위 코드에서는 res.send 인자에 Hello Word 라는 문자열이 들어가 있다.

이 인자에는 JSON 데이터, html 태그, html 파일 모두 들어갈 수 있다.

 

app.get('/', (req, res) => {
  res.json({'title':'hello world'})
})

인자로 JSON 데이터를 보내려고 한다면 res.send로 써도 되지만 res.json으로 쓰면 절차가 더 짧아진다고 한다.

 

 

 

GET 요청에 파라미터 보내기

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

주소창에 url 경로를 작성하여 요청하는 방식을 GET 요청이라고 했다.

GET 요청 시, 파라미터도 함께 넘길 수 있다.

/user/ 뒤에 :id 로 작성하여, 클라이언트에서 넘어오는 파라미터 키 값을 id라고 지정했다.

 

위처럼 파일 작성 후, localhost:3000/user/testId 로 접속해보았다.

 

화면

 

VSCode 터미널창

다음과 같은 결과가 출력되었다.

 

서버에 요청이 오면 req에 요청 정보가 담기는데,

주소창에 입력한 파라미터 정보는 req.params에 담긴다. 

그때의 키값은 id가 되고, 밸류값은 testId 가 된다.

그래서 const q = req.params 의 값을 console.log(q) 찍은 것이 { id : 'testId' } 로 출력된다.

 

 

 

GET 요청에 쿼리스트링 보내기

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

  res.json({'userId':q.id});

})

q = req.query 로 받게 수정했다.

 

 

http://localhost:3000/user/testId?id=devtraveler&num=0&age=20 라는 주소로 요청을 보내보았다.

 

주소창의 user/ 뒤의 testId는 req.params 안에 담기는 파라미터이고,

? 뒤에 id=devtraveler&num=0&age=20 는 req.query 안에 JSON 형식으로 값이 담긴다.

query로 넘길 때는 물음표 뒤에 key=value 값을 넘기고, 값이 여러개 있을 경우 &로 연결하여 넘긴다.

 

 

*정리

GET요청시 파라미터는 params, query 두가지로 받을 수 있다.

 

 

Axios

- 클라이언트에서 서버에게 요청을 보낼 때 사용하는 HTTP 요청 라이브러리

- Node.js 환경에서 API 요청을 보낼 때 유용하게 사용되는 라이브러리

- npm으로 설치 가능

- post 요청을 할 때는 Axios나 Fetch를 이용하여 body에 데이터를 담아 전달한다. (요청 파라미터 req.body에 데이터가 담긴다)

* 주소창에 어떤 화면을 "요청" 하는 행위를 Axios가 같은 요청 라이브러리가 하고,

그 요청에 대한 "응답"을 express 같은 응답 프레임워크가 한다고 생각하면 된다.

 

 

 

API 서버 만들기

GET/sound/:name으로 호출할 때, name에 따라 내용 출력하도록 하는 API를 만들어보자.

 

const express = require('express')

const app = express()

const port = 3000

app.get('/sound/:name', (req, res) => {  

  const {name} = req.params; //destructuring 문법

  if (name == 'dog'){

    res.json({'sound':'멍멍'});

  }else if (name == 'cat'){

    res.json({'sound':'야옹'});

  }else{

    res.json({'sound':'none'});

  }

})

app.listen(port, () => {

  console.log(`Example app listening on port ${port}`)

})

   

index.js 코드는 위와 같이 작성했다.

 

 

* destructuring 문법

주소창에 /sound/:name로 던져준 name 값은 req.params에 {name : 입력값} 으로 담기게 되고,

const p = req.params;

const name = p.name;

위와 같이 2step 으로 변수 지정을 할 수도 있지만

const {name} = req.params;  과 같이

{ 중괄호 } 안에 key 값을 입력하면 한번에 변수 선언이 가능하다. 

 

 

name을 dog로 주었을 때 결과창이다.

 

 

 

여기까지 index.js라는 하나의 파일에서 express로 서버를 만들고,

"/sound/:name"으로 들어오는 get 요청 처리를 만들어 보았다.

현재로썬 아무 문제 없이 잘 작동하나, 프론트엔드에서 이 파일(서버)를 호출할 경우 CORS 이슈가 발생할 수 있다.

 

 

CORS 이슈란

 

HTML 파일에서 서버에 요청했을 때, CORS 설정이 없으면 호출이 차단되는 문제가 발생한다.

보안상 이상한데서 요청이 올 수 있기 때문에 기본적으로 HTML에서의 호출을 막아두기 때문이다.

그러므로, 반드시 CORS 설정을 해주어야 한다.

 

 

CORS 설치 및 적용

https://www.npmjs.com/package/cors

npm에서 cors를 검색하여 관련 문서를 참고하자.

VSCode에서 npm install cors 로 설치한다.

 

그다음 문서에서 안내하는 것을 참고한다.

Simple Usage 를 살펴보면

상단에 var cors = require('cors') 선언을 하고,

app.use(cors()) 하면 모든 html 파일에서의 호출이 허용된다고 한다.

 

 

 

테스트 파일 만들어서 직접 확인해보기

실습을 하던 폴더 nodeJsPractice 아래에 index.html 파일을 생성한다.

 

 

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

</head>

<body>

    <h1 id="sound"></h1>

    <input id="name" type="text" />

    <button onclick="getSound()">API 요청</button>

    <script>

        function getSound(){

           const name = document.getElementById('name').value;

            fetch(`http://localhost:3000/sound/${name}`)

            .then((response) => response.json())

            .then((data) => {

                console.log(data);

                document.getElementById('sound').innerHTML=data.sound;

            })

            .catch((error) => console.log("error:", error));

        }

    </script>

</body>

</html>

'

위와 같이 index.html 파일을 작성해주었다.

* VSCode 에서 html 양식 호출 단축키는 느낌표(!)+tab 을 누르면 자동으로 작성된다.

 

 

파일 우클릭 하여 Reveal in File Explorer 해서 파일을 연다.

 

그럼 작성한 html 파일 폼이 뜬다.

input 창에 dog 작성 후 버튼을 클릭해보자.

 

 

CORS 정책을 위반했다라고 뜬다..

 

 

 

const express = require('express')

const cors = require('cors')    // cors 선언

const app = express()

const port = 3000

app.use(cors()) // cors 허용

app.get('/sound/:name', (req, res) => {  

  const {name} = req.params;

  if (name == 'dog'){

    res.json({'sound':'멍멍'});

  }else if (name == 'cat'){

    res.json({'sound':'야옹'});

  }else{

    res.json({'sound':'none'});

  }

})

app.listen(port, () => {

  console.log(`Example app listening on port ${port}`)

})

   

다시 index.js 로 돌아와서 상단에 cors 선언하고, app.use(cors()) 작성한다.

서버를 내렸다가 다시 켠 후, html 파일에서 다시 실행해본다.

 

 

dog 작성 후 버튼 클릭했더니 데이터가 잘 호출되었다.

 

 

코드 흐름 설명

//index.html 코드 일부

function getSound(){
	const name = document.getElementById('name').value;

    fetch(`http://localhost:3000/sound/${name}`)
    .then((response) => response.json())
    .then((data) => {
        console.log(data);
        document.getElementById('sound').innerHTML=data;
    })
    .catch((error) => console.log("error:", error));
}

input에 dog 작성 후 API 요청 버튼을 클릭하면, getSound() 함수가 실행된다.

fetch에 의해 http://localhost:3000/sound/dog 가 호출이 된다.

 

index.js API 요청 코드

/sound/:name 의 get 요청은 index.js 파일에서 작성해두었다.

name == 'dog' 인 분기로 들어가고,

응답 데이터 res에 json 데이터 {'sound':'멍멍'} 을 보내준다. 

이 데이터는 index.html가 받게 되고, fetch의 then 구절의 data로 들어온다.

 

 

index.html

fetch의 then 구절의 data 는 {'sound':'멍멍'} 이고,

id가 sound인 영역에 data의 key값인 sound의 value를 찍어주도록 하였다.

 

 

 

출처 : 

https://youtu.be/Tt_tKhhhJqY?feature=shared

 

조코딩 님의 한시간만에 Node.js 백엔드 기초 끝내기 (ft. API 구축) 참고하였습니다. (17분 ~ 끝)