비기너와 뉴비를 위한 설치부터 시작하는 Node.js & Express.js (1)

 

시작하기 전

스택오버플로우 2019년 개발자 대상 설문조사에서 가장 많이 사용하는 프레임워크로 Node.js가 압도적으로 1위를 할 정도로 굉장히 인기있는 프레임워크입니다.

0

그리고, Express.js스택오버플로우 2019년 개발자 대상 설문조사에서 가장 좋아하는 웹 프레임워크 중 3위를 차지하고 있습니다.

0_1

그래서 더욱 많은 분들이 인기있는 테크기술을 다양하게 사용했으면 하는 마음으로 준비했습니다.

비기너와 뉴비를 위해 설치부터 시작하는 Node.js & Express.js로 웹 구축하기 강좌를 포스팅을 하려합니다.
이 강좌를 따라하기 위해서 준비할 것은 시간 외에는 아무것도 없습니다.
장황하고 길게 설명을 하면 오히려 지루해지고, 어렵게 느껴질 듯하여서 핵심 포인트만 간결하게 적고, 자세히 알고싶은 분들을 위해 공식 문서로 링크를 첨부할 것입니다.
이 강좌의 최종 목표는 나만의 TODO 리스트만들기 입니다.
Let’s Start!

Editor

코드작성을 더 편하게 하기 위해서 텍스트편집기나 IDE를 설치하는 것을 권장합니다. 저는 라이센스를 보유하고 있어 Webstorm을 사용하고 있습니다.
무료 에디터로 Brackets, Atom, VScode를 추천합니다.

Node.js

Node.js란 무엇인가
  • Chrome V8 JavaScript 엔진으로 빌드된 JavaScript 런타임입니다.
  • event-driven, non-blocking I/O model을 사용합니다.
  • 추가 내용은 Nodejs.org 참고
Node.js를 사용하는 곳

넷플릭스, 페이팔 등이 알려져있습니다.

설치하기

Nodejs.org에서 LTS버전으로 다운받아 설치합니다. 저는 현재 최신 LTS 버전인 10.15.3으로 설치하였습니다.
NPM 즉, Node Package Manager도 같이 설치가 됩니다. NPM은 다양한 오픈소스 모듈들을 쉽게 사용할 수 있는 장점이 있습니다.

1

Setting

프로젝트 폴더를 생성하면 이제 코드를 작성할 준비가 완료됩니다. Node.js로 개발을 하다보면 npm으로 다양한 모듈과 라이브러리를 설치하게 됩니다. 설치한 항목들과 패키지의 내용을 package.json 파일로 목록화해서 관리합니다.

npm init 명령어로 package.json파일을 생성할 수 있습니다. 저는 모든 항목을 변경하지않고, 기본으로 설정하기 위해 -y 옵션을 주었습니다.

npm init -y

2

생성된 package.json을 열어보면, 기본값들로 설정되어있는 것을 볼 수 있습니다.
저는 main을 app.js 그리고 license는 MIT 로 변경하였습니다.

  • name : 이름
  • version : 버전
  • description : 프로젝트에 대한 설명
  • main : 프로젝트의 시작점
  • scripts : docs.npmjs.com/misc/scripts 참고
{
  "name": "Begin-Nodejs",
  "version": "1.0.0",
  "description": "",
  "main": "app.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "MIT"
}

package.json에 대해 더 자세히 알고싶다면 docs.npmjs.com/files/package.json을 참고바랍니다.

Express.js

Express.js란 무엇인가

Express는 웹 및 모바일 애플리케이션을 위한 일련의 강력한 기능을 제공하는 간결하고 유연한 Node.js 웹 애플리케이션 프레임워크입니다.
자세한 내용은 expressjs.com을 참고바랍니다.

설치하기

npm 명령어를 통해서 Express를 설치합니다. 프로젝트폴더에 node_modules가 생성됩니다.

  • –save 옵션을 주면, 자동으로 package.json에 업데이트가 됩니다.
npm install express --save

3

Run Server

프로젝트 폴더에 app.js 파일을 생성합니다.

Express.js

방금 설치한 Express.js를 사용하기 위해서 모듈을 require 해야합니다. 그리고, app object에 express 어플리케이션을 생성합니다.

app.js
const express = require('express');
const app = express();

Routing

라우팅은 URI(또는 경로) 및 특정한 HTTP 요청 메소드(GET, POST 등)인 특정 엔드포인트에 대한 클라이언트 요청에 애플리케이션이 응답하는 방법을 결정하는 것을 말합니다.
app.METHOD(PATH, HANDLER) 의 구조를 가집니다.

  • METHOD : HTTP 메소드
  • PATH : 경로
  • HANDLER : 실행되는 함수

’/’와 ‘/me’에 응답하는 코드를 작성합니다.

  • ’/’로 접속하면, res(response / 응답)로 This is my world! 를 전송합니다.
  • ‘/me’로 접속하면, 응답으로 And I’m the Best를 전송합니다.
app.js
app.get('/', function (req, res) {
    res.send('This is my world!');
});

app.get('/me', function (req, res) {
    res.send('And I\'m the Best');
});

참고 : app.get 문서

listen

서버를 시작하기 위해 listen 메소드를 사용합니다.

  • 3000번 포트로 서버를 시작합니다.
  • 서버가 시작되면 로그를 출력합니다.
app.listen(3000, function () {
    console.log('Example app listening on 3000!');
});

참고 : app.listen 문서

Start

Webstorm등의 IDE를 사용하고 있다면 run을 클릭해 시작하고, 텍스트에디터를 사용 중이라면 터미널에서 명령어로 서버를 시작합니다.

node app.js

a

이제 localhost:3000 으로 접속하면, 서버에 접속할 수 있습니다. localhost:3000localhost:3000/me 로 접속하여 결과를 확인합니다.

b

마치며

Node.js는 방금 짠 코드 단 10줄로 서버를 시작시킬 수 있는 엄청나게 간단하지만 강력한 프레임워크입니다.
익숙해지면 다양한 API도 쉽게 활용할 수 있고, 좋은 모듈들도 이용해 많은 웹, 소프트웨어 등을 제작할 수 있습니다.

github.com/MiryangJung/Begin_Nodejs/tree/First에서 이번 포스팅의 풀코드를 볼 수 있습니다.