Chapter05. (번외) node.js 서버 다루기

<< 학습 목표 >>

1. 노드 제이에스 서버를 설치할 수 있다.

2. 노드 제이에스 서버를 실행시킬 수 있다.

3. 노드 제이에스 서버에 컨트롤러를 만들 수 있다.

4. 노드 제이에스 서버가 클라이언트에게 쿠키를 보낼 수 있다.

5. 노드 제이에스 서버가 세션에 데이터를 저장할 수 있다.

---

이번 Chapter에서는 Cookie, Session, Axios, File Upload / Download 를 배울 것임

이러한 내용들을 배우려면 서버가 필요함

가장 빠르게 배워 간단하게 사용할 수 있는 서버가 node.js ( 이하 노드 제이에스 라 칭함 ) 이므로 이번 Chapter 를 시작하기 전 노드 제이에스를 간략하게 배우자

 

단, 여기서는 Cookie, Session, Axios 를 배우기 위해 노드 제이에스의 최소한만 배우는 것이니 노드 제이에스 서버와 관련된 지식을 쌓을 순 없음

또한 여기서 사용하고 있는 용어가 이해되지 않는다면 그냥 따라오기만 해도됨

꼭 이해하고 싶다면 별도로 JSP/Servlet 관련 서적을 보고 우선 서버를 공부하고 오자

 

노드 제이에스 외에 Servlet, Spring, Spring Boot 등으로 서버를 구축할 수 있다면 이번 글은 넘어가도 됨

---

노드 제이에스로 서버를 구축하기 위해 프로젝트를 만들자

우선은 빈 프로젝트를 만들고 그 안에 노드 제이에스를 설치하는 과정임

 

<< 빈 프로젝트 생성 >>

(1). vs code -> [ 탐색기 ] 내 빈 영역 우클릭 -> [ 새 폴더 ]

(2). 폴더 이름은 임의로 지정 / 여기서는 node_server 로 했음

 

<< 노드 제이에스 설치 >>

방금 생성한 빈 프로젝트에 노드 제이에스를 설치하자

(1). vs code 터미널 창에서 빈 프로젝트로 이동

 빈 프로젝트로 이동하기 위한 명령 : cd (프로젝트명)

(2). 노드 제이에스 서버 설치

  노드 제이에스 서버 설치 명령 : npm install express

 

 

이제 빈 프로젝트에 클라이언트의 요청을 받을 수 있도록 컨트롤러를 추가하자

 

<< 파일 추가 >>

(1). 노드 제이에스 서버를 설치한 프로젝트 명 우클릭 -> [ 새 파일 ]

(2). 파일 이름을 임의로 짓고 파일의 확장자는 반드시 js 어야함 / 여기선 app.js 로 만듬

 

<< 컨트롤러 코드 추가 >>

방금 추가한 파일에 아래 코드 추가

const express = require('express');
const app = express();
const port = 3001;

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

app.listen(port, () => {
  console.log(`Example app listening at http://localhost:${port}`);
});

<< 코드 설명 >>

(1). 서버의 포트는 3001 번으로 지정

(2). 클라이언트가 GET 방식으로 http://localhost:3001/ 에 접근했을 경우 'Hello World!' 를 응답

 

여기까지 클라이언트의 요청을 받을 수 있는 준비가 다 됐음

 

 

이제 서버를 실행시키자

서버를 실행 시킬 때는 터미널 창에서 node (컨트롤러파일명) 명령을 입력하면 됨(1)

 

이제 브라우저를 열어 주소창에 http://localhost:3001/ 을 입력해 접근해보자

화면에 Hello World! 가 출력됐다면 노드 제이에스 서버가 제대로 실행된 것이고 그렇지 않다면 다시 이 글을 따라 올 것

이 글대로 따라오는데 되지 않는다면 따로 인터넷에 찾아보길

---

<< 클라이언트가 보낸 데이터 꺼내기 >>

클라이언트가 서버의 / 경로로 GET 방식으로 요청을 보낸다고 상상해보자

이때 클라이언트가 name=홍길동, age=20, tel=010-1111-1111 파라미터를 함께 보내는 상황임

클라이언트가 보낸 데이터를 꺼낼 때는 다음과 같음

 

아래 코드를 컨트롤러 파일에 덮어 씌우자

const express = require('express');
const app = express();
const port = 3001;

app.get('/', (req, res) => {
  const name = req.query.name;
  const age = req.query.age;
  const tel = req.query.tel;

  console.log("<< 클라이언트가 보낸 데이터 >>");
  console.log("name => " + name);
  console.log("age => " + age);
  console.log("tel => " + tel);

  res.sendStatus(200);
});

app.listen(port, () => {
  console.log(`Example app listening at http://localhost:${port}`);
});

<< 코드 설명 >>

(1). 클라이언트가 보낸 데이터는 req.query.(name) 으로 꺼낼 수 있음

 

컨트롤러 코드가 변경 됐으니 노드 서버를 종료 시키고 다시 실행시키자

노드 서버를 종료 시킬 때는 터미널 창을 한번 클릭 한 후 Ctrl + C 를 누르면 됨

그 후 다시 노드 서버를 실행시키는 명령 ( node (컨트롤러 파일명) ) 을 입력하면 됨

 

브라우저의 주소창에 localhost:3001/?name=홍길동&age=20&tel=010-1111-1111 다음과 같이 입력해 클라이언트가 보낸 값이 제대로 꺼내지는지 확인해보자

 

노드 서버에서 console.log 로 출력하면 터미널 창에 출력되니 브라우저에서 위 URL을 입력해 요청을 보낸 뒤 터미널 창을 보면 클라이언트가 보낸 값이 출력될 것

---

<< 클라이언트에게 쿠키 보내기 >>

클라이언트에게 쿠키를 보낼 때는 다음과 같이 함

 

아래 코드를 컨트롤러에 덮어 씌우자

const express = require('express');
const app = express();
const port = 3001;

app.get('/', (req, res) => {
    const cookieOptions = {
        expires: new Date(Date.now() + 3600000)
    };
    
    res.cookie('myCookie', '12345', cookieOptions);

    res.sendStatus(200);
});

app.listen(port, () => {
  console.log(`Example app listening at http://localhost:${port}`);
});

<< 코드 설명 >>

(1). 이름이 myCookie인 쿠키를 생성해 그 안에 12345 를 저장

(2). 쿠키의 옵션으로 만료 시간 지정

  만료 시간은 밀리초 단위로 여기서 설정한 만료 시간은 1시간(60 * 60 * 1000) 뒤 임

 

노드 제이에스 서버를 재시작 한 후 브라우저의 주소창에 http://localhost:3001/ 를 입력해 접근해보자

쿠키는 당연히 눈에 보이지 않으니 개발자 도구로 확인해야함

브라우저 내 개발자 도구 -> 응용 프로그램(1) -> 쿠키(2) 를 확인해보자

---

<< 세션에 데이터 저장하기 >>

 

노드 제이에스 서버에서 세션을 사용하려면 세션 라이브러리를 설치해야함

서버를 중지 시키고 세션 라이브러리를 설치하자

(1). 세션 라이브러리를 설치하는 명령

 

이제 컨트롤러 파일에 아래 코드를 덮어 씌우자

const express = require('express');
const session = require('express-session');
const app = express();
const port = 3001;

app.use(session({
    secret: 'key',
    resave: false,
    saveUninitialized: true
}));

app.get('/', (req, res) => {
    if(req.session.userId === undefined) {
        req.session.userId = 12345;
    } else {
        console.log(req.session.userId);
    }

    res.sendStatus(200);
});

app.listen(port, () => {
  console.log(`Example app listening at http://localhost:${port}`);
});

<< 코드 설명 >>

(1). 세션을 사용하기 위한 import

(2). 세션의 보안 관련 설정

(3). 세션이 제대로 동작하는지 확인하기 위한 if문으로 세션이 제대로 동작한다면 두 번째 접근 부터는 터미널에 userId에 저장해둔 값인 12345 가 출력될 것

 

이제 서버를 재시작하고 브라우저의 주소창에 http://localhost:3001/ 를 입력해 접근해보자

---

여기까지 이번 Chapter에서 배울 내용을 위한 최소한의 노드 제이에스 서버 관련된 것들을 배웠음

이 글에 있는 내용을 이해하고 싶다면 별도로 노드 제이에스 또는 JSP/Servlet 관련 서적으로 서버에 대한 내용을 깊게 배우면 됨