[nodeJS express로 서버 구성하기] [#1] express 기본기

서론

프로그래밍 언어를 처음 배우면 과연 이 언어로 무엇을 할 수 있는 건가 하는 고민을 하게 됩니다. Javascript는 언어 특성상 가장 먼저 프론트엔드 프레임워크 (ReactJS, VueJS, AngularJS)를 배우시는데 이미 Javascript를 알고 있다면 서버에서도 같은 언어를 사용해서 Full Stack Javascript를 운영해보는 것도 좋은 경험입니다.

필수 지식

  1. 이번 연재는 nodeJS 프레임워크와 express 프레임워크 그리고 handlebars에 대한 강의입니다. 기본적인 Javascript 지식은 있다는 가정하에 진행하므로 Javascript 문법에 대한 설명은 추가적으로 하지 않습니다. (추후 Javascript 강의도 기획 중입니다.)
  2. 기본적인 JS 문법 체크가 가능한 IDE가 필요하십니다. 저는 모든 강의에서 Intellij IDEA를 사용하고 있으나 Visual Studio Code 또는 Atom 같은 다른 IDE를 사용하셔도 문제없습니다.

nodeJS 그리고 express

Javascript를 서버에서 사용하려면 구글의 V8 엔진을 기반으로 한 nodeJS 프레임워크를 사용해야 합니다. nodeJS 프레임워크를 사용하면 Apollo 형태와 REST 형태의 서버를 모두 구현할 수 있는데 이번 연재에서는 REST 서버를 구성해보도록 하겠습니다.

nodeJS를 사용한 REST 서버를 편리하게 구현하게 해주는 프레임워크로는 Koa, Hapi, express 등이 있습니다. 저희는 그중 가장 대중화된 express를 사용하도록 하겠습니다. 우선 아래 링크로 이동해서 nodeJS v10 이상을 설치해주세요.

nodeJS 다운로드

설치가 완료되시면 아래 커맨드를 이용해 설치가 잘 되었는지 확인하실 수 있습니다.

node --version

아래와 비슷한 응답이 오면 잘 설치하신겁니다.

nodejs version

프로젝트 생성하기

원하시는 위치에 프로젝트 디렉터리를 생성해주시고 프로젝트 루트 폴더에서 아래 커맨드를 실행해주세요.

npm init -y

npm 은 nodeJS에서 여러 패키지들을 설치하고 관리할 때 사용되는 패키지 매니저로 위 커맨드를 실행할 시 프로젝트 폴더 내에서 package.json이라는 파일이 생성될 겁니다. 강의를 진행하며 npm을 사용해 패키지를 설치할 때마다 package.json의 dependency 부분에 설치한 패키지들의 이름과 버전이 입력되는 걸 보실 수 있으실 겁니다. 이는 소스코드 사이즈를 최소화해 다른 환경에 코드를 옮길 때 설치한 모듈들을 같이 이동하지 않고 package.json 과 package-lock.json만 이동하여 이를 새로운 환경에서 참조하여 동일한 패키지들을 설치할 때 사용됩니다. 아래 커맨드를 사용하여 express 서버 구현에 필요한 express 패키지를 설치하도록 하겠습니다.

npm install --save express

아래와 같은 응답이 오셨으면 성공적으로 설치가 되신 겁니다.

nodejs version

기존에 프로젝트를 초기화하며 생성되었던 package.json 파일을 열어보시면 아래와 같이 express라는 패키지가 맨 아래 dependencies라는 키 아래에 존재하는 걸 볼 수 있습니다.

{
  "name": "medium-nodejs-express",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/serendipity1004/medium-nodejs-express.git"
  },
  "author": "",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/serendipity1004/medium-nodejs-express/issues"
  },
  "homepage": "https://github.com/serendipity1004/medium-nodejs-express#readme",
  "dependencies": {
    "express": "^4.16.4"
  }
}

이 package.json을 이용해 소스코드가 이동할 때마다 동일한 모듈 및 버전을 설치하여 다른 환경에서도 손쉽게 프로그램을 실행할 수 있습니다. 추가적으로 nodemodules라는 폴더가 생성되고 그 안에 굉장히 많은 폴더들이 생성되는 걸 보실 수 있으십니다. nodemodules 폴더에서 스크롤 해서 내려가시다 보면 아래처럼 express라는 폴더가 존재하는 걸 볼 수 있으실 겁니다. 이 폴더에 저희가 설치한 express 패키지가 위치하고 있습니다.

이제 루트 폴더에 server.js라는 파일을 만들고 아래 코드를 복사하여 붙여 넣도록 해보겠습니다.

const express = require('express');
const app = express();
const port = process.env.PORT || 3000;

app.get('/', (req, res) => {
    res.json({
        success: true,
    });
});

app.listen(port, () => {
    console.log(`server is listening at localhost:${process.env.PORT}`);
});

위 코드는 express 서버를 가장 간단한 상태로 구현한 것입니다. 줄별로 추가 설명을 드리도록 하겠습니다.

1번줄

require는 nodeJS에서 다른 패키지를 불러올 때 사용되는 키워드입니다. 1번 줄처럼 특정 path 가 지정이 되지 않는다면 예) ./src/express 기본적으로 nodemodules 폴더 또는 NODEPATH 환경 변수에 설정한 위치에서 express라는 모듈을 찾게 됩니다. 현재 코드는 node_modules에서 express라는 모듈을 활용한다는 뜻으로 이해하시면 되겠습니다.

2번줄

app이라는 변수에 express 함수의 변환 값을 저장하였습니다. 이 app이라는 변수로 REST End Point들을 생성하게 될 겁니다.

3번줄

process.env는 nodeJS에서 환경 변수를 가져올 때 사용됩니다. 환경 변수가 입력되지 않을 시 port에 3000번을 지정하는 코드입니다. 환경 변수에 대해서는 나중에 더 자세히 배워보도록 하겠습니다.

4-10번줄

4줄부터 10번 줄까지는 REST API의 한가지 종류인 GET 리퀘스트를 정의하는 부분입니다. app.get이라고 작성했기 때문에 get 요청으로 정의가 되고 app.post로 작성할 경우 post 요청으로 정의가 됩니다. REST API의 종류 (get, post, update, delete 등등)을 사용하여 End Point를 작성하실 수 있습니다.

위와 같이 엔드 포인트 생성 시 파라미터는 두 가지를 받습니다. 첫 번째 파라미터는 URL 정의 (‘/’) 두 번째 파라미터는 해당 url에서 수행할 작업 및 응답을 정의할 수 있습니다. 두 번째 파라미터 함수에는 두 개의 파라미터를 받는데 요청에 해당하는 req (request) 와 응답에 해당하는 res (response)입니다. 요청에 대한 정보는 req에 저장되어있고 응답할 때 res 파라미터를 사용하여 응답 정보를 송신합니다. 위 코드는 res 파라미터에 json 형태의 {success:true}를 전송하는 코드가 되겠습니다.

11-13번줄

11번 줄부터 마지막까지는 express 서버를 실행할 때 필요한 포트 정의 및 실행 시 callback 함수를 받습니다. 첫 번째 파라미터에는 저희가 3번 줄에 저장한 port 3000번을 적용하여 express를 3000번 포트에 실행하라고 지정하였고, 두 번째 파라미터인 콜백 함수에서 express 서버 구축 성공 시 server is running at localhost:3000이라는 로그를 실행하도록 하였습니다.

nodeJS 어플리케이션 실행하기

터미널에서 프로젝트 루트로 이동하신 후 아래 명령어를 사용하여 express 서버를 실행해보도록 하겠습니다

node server.js

아래와 같은 응답이 오시면 성공하신 것입니다.

node server.js

이제 http://localhost:3000에 크롬 브라우저를 사용해 이동하셔서 서버가 잘 작동하는 걸 확인해보겠습니다. 화면에 저희가 ‘/’ path에 지정한 아래와 같은 응답이 오면 성공하신 겁니다.

node server.js

다음 시간부터는 postman을 사용하여 조금 더 복잡한 express 라우트를 설정해보도록 하겠습니다.

©Code Factory All Rights Reserved