Express로 서버 실행하기

Express는 node.js로 서버를 만드는 framework입니다. node.js와 Express를 사용해서 초간단 웹서버를 만들어 봅시다.
git, node js/NPM, atom 에디터는 모두 설치되어 있겠지요?

git bash를 실행한 후 프로젝트 폴더(hello-world)를 생성하고 해당 폴더에 git 저장소를 생성해 줍니다.

현재 폴더에 node 프로젝트를 생성하기 위해 npm init을 실행해줍니다. 이 명령어를 실행하면 프로젝트에 대한 질의 응답이 아래와 같이 나오는데, 일단 아무것도 입력하지 않고 계속 엔터를 쳐서 넘깁니다. 이 질문들을 바탕으로 package.json 파일을 생성하게 되는데, 그냥 엔터를 쳐서 넘기게 되면 해당 질문에 해당하는 항목이 생성되지 않거나, 질문의 기본값(괄호안의 값)이 있는 경우 해당값이 입력됩니다.

혹시 Is this ok? (yes)에서 엔터를 친 후에 다음으로 넘어가지 않는 경우에는 Ctrl+C를 눌러서 종료시켜줍니다. git bash 버그인지 NPM 버그인지는 모르겠는데 가끔 이럽니다.

{
  "name": "hello-world",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

현재 폴더에 위와 같이 package.json 파일이 생성되었습니다. 사실 npm init 명령어는 이 파일을 생성하는 것이 전부입니다. 이번강의에서 눈여겨 봐야 할 항목은 "main"으로 프로젝트의 실행코드가 들어있는 파일입니다. index.js가 기본값으로 입력이 되었는데요, 즉 이 node 프로젝트를 실행하면 index.js파일의 코드가 가장 먼저 실행됩니다. 아직 index.js파일이 생성되지 않았으므로 생성해 봅시다.

다음으로 Express를 설치합니다. Express는 npm package 입니다.

참고로 설치한 package들은 현재폴더/node_modules에 저장됩니다.

지금까지의 과정이 잘 이해가 되지 않으시면 Node JS 첫걸음/개발 환경 구축을 다시 읽어 주세요. 자세히 읽어보면 다 설명된 내용입니다.

현재폴더를 atom 에디터로 엽니다.

왼쪽 파일 시스템창에서 Express가 설치된 모습이 보입니다. package.json에 dependencies에도 express가 올라가 있는 것을 볼 수 있습니다.

참고로 파일및 폴더의 생성, 삭제, 이동, 복사, 이름 변경 등은 atom에서도 가능합니다.
파일 시스템창에서 마우스 오른쪽 버튼을 눌러서 확인해 보세요.

index.js에 다음을 입력해 줍니다.

//index.js

var express = require('express'); // 설치한 express module을 불러와서 변수(express)에 담습니다.
var app = express(); //express를 실행하여 app object를 초기화 합니다.

app.get('/',function (req,res) { // '/' 위치에 'get'요청을 받는 경우,
 res.send('Hello World!'); // "Hello World!"를 보냅니다.
});

app.listen(3000, function(){ //3000번 포트를 사용합니다.
 console.log('Server On!'); //서버가 실행되면 콘솔창에 표시될 메세지입니다.
});

express 모듈을 express에 담고, app object를 초기화 하는 것은 express에서 항상 하는 것이므로 왜 이렇게 해야하는 지는 지금은 몰라도 됩니다.

app.get('/',function (req,res) { // '/' 위치에 'get'요청을 받는 경우,
 res.send('Hello World!'); // "Hello World!"를 보냅니다.
});

이 이번 포스팅에서 가장 중요한 부분인데요,

app.HTTP method('route', 함수, 함수, 함수...)의 구조를 하고 있습니다.

위에서는 함수를 하나만 사용했지만 함수사이에 ","를 넣어서 여러개의 함수를 넣을 수도 있습니다.

함수에는 req, res, next의 parameter들(이 순서만 중요할 뿐 이름은 바꿔도 상관없습니다)이 자동으로 전달됩니다.

req

request에 관련된 값들과 함수들이 저장되어 있는 object.
HTTP request header, 요청 url, cookies, query, body 등의 정보가 저장되어 있습니다.
이 object의 전체 구조를 확인하고 싶을땐 console.log(req)를 이용해서 안을 확인해 보세요.

res

response에 관련된 값들과 함수들이 저장되어 있는 object.
HTTP response header, cookies, HTTP code 등의 정보를 확인하고 값을 변경할 수도 있습니다.
또한 어떠한 방식으로 response할지도 정할 수 있습니다. 위 예제에서는 res.send를 사용해서 텍스트를 response하였습니다.
이 object의 전체 구조를 확인하고 싶을땐 console.log(res)를 이용해서 안을 확인해 보세요.

next

다음번 함수를 호출 하는 함수입니다. next()를 사용하면 다음 함수로 이동합니다. 위 예제에서는 함수가 하나뿐이므로 parameter에 적지도 않았습니다.

위 코드에서 주석을 빼고 입력하면 atom에서 이렇게 보이겠죠.

hello world강좌라 정말 한 스텝 한 스텝 마다 스크린샷을 찍었습니다.

이제 서버를 실행시킬 차례입니다.

$ node index.js

위 명령어를 입력하면 우리가 코딩한 대로 'Server On!'이라는 메세지가 뜨면서 서버가 실행됩니다.

브라우저를 켜고 http://localhost:3000 에 접속해 봅시다.

저는 여기에 .gitignore, README.md(project의 소개를 담고 있는 파일)을 추가했지만 여러분들한테 꼭 필요한 내용은 아니라서 생략했습니다.