Chapter2. 웹 서버 만들기

본격적으로 node를 이용하여 웹 서버를 만들어 보자.

진행하기에 앞서 localhost에 대해 설명할까 한다.

localhost란?

localhost는 이름에서 알 수 있듯이 현재 자신이 사용하는 컴퓨터를 의미한다.  이 이름은 IPv4 혹은 IPv6 루프백 주소에 흔히 쓰는 별명이라고 생각하면 된다.  만약 SSH 등을 통해 원격 컴퓨터에 연결한다면, localhost는 그 컴퓨터가 아닌 자신의 컴퓨터임을 염두하자.

1. Hello World

---

Sublime text 3를 열어 다음과 같은 내용의 helloWorld.js 파일을 만들자.

이해를 돕기 위해 각 문단에 대해 설명하자면

1) require는 모듈을 불러오는 문법이다. import와 비슷하다고 생각하면 이해가 쉽다.

3) http.createServer 메소드는 호스트 컴퓨터를 Server로 만드는 메소드인데, 함수를 매개변수로 받고 있다. 이는 HTTP요청이 존재할 때마다 서버를 만들도록 도와준다. function의 매개변수로 req와 res를 받고 있는데, 이것이 무엇을 의미하는 지 몰라서 검색을 해 보았다.

찾아본 결과, 다음과 같은 정보를 얻을 수 있었다.

req : 이벤트를 발생시키는 HTTP요청에 대한 정보를 담고있는 객체(requset)

res: req에 대한 반응으로, HTTP에 대한 요청에 대한 응답을 보내기 위해 사용(response)

6) listen( ) 의 괄호같은 경우, 포트번호라고 이해하면 된다. 이 경우엔 서버에 localhost:3000을 통해 접속할 수 있다. 

console 창을 열어 node helloWorld.js를 입력해보자. (나같은 경우엔 helloWorld.js 파일명이 "helloworld"이기 때문에 차이가 존재한다.)

이후, 웹 브라우저 url에 localhost:3000을 입력하면 다음 그림과 같이 홈페이지 화면이 나온다.

이렇게 간단한 웹 서버를 만들어 보았다!! 좀 더 나아가보자!

2. Simple Homepage(라우팅)

---

라우팅에 대해서 책에선 이렇게 설명한다.

라우팅이란 요청받은 콘텐츠를 클라이언트에 보내는 메커니즘이다.

웹 기반 클라이언트/서버 애플리케이션에서는 클라이언트가 원하는 콘텐츠를 URL에 표시, 즉 경로와 쿼리스트링에 표시한다.

나는 "URL이라는 Route(노선)을 통해 우리가 원하는 콘텐츠를 불러오는 것이군"이라고 이해했다.

경로와 쿼리스트링은 후에 좀 더 자세히 알아보기로 하고,  지금은 라우팅을 이용해 좀 더 심화된 예제를 통해 간단한 홈페이지를 만들어보자.

Switch 문의 내용을 통해 라우팅을 구현하게 된다.  각 문단에 대해 이해해보자.

6) path라는 변수에 요청하는 url의 값을 저장하는데, 쿼리스트링과 슬래시를 ' '(공백)으로 지우고, 소문자로 정규화한다.

7) switch(path) // path 변수의 값에 따라 출력되는 화면이 다르게 나타난다. 

실행을 통해 어떻게 결과가 출력되는 지를 확인해보자.

console창에 node simpleHomepage.js를 입력하자.

이번에는 localhost:3000/about , localhost:3000/?foo, localhost:3000/foo 를 각각 입력해보자. 

그림 /about 입력

switch문에서 '/about'의 경우엔 About을 출력하라고 했는데, 옳은 결과가 출력된 것을 확인할 수 있다.

그림 /?foo 입력

'?'은 쿼리스트링으로 '?' 다음은 변수처리 되기때문에 'foo'가 url입력값으로 처리되지 않기때문에, 

switch문에서 ' '의 결과가 출력되는 것을 확인할 수 있다. '?foo=bar'를 url에 입력해도 똑같은 결과를 확인할 수 있을 것이다.

그림 /foo 입력

'foo'같은 겨우 switch문에서 어디에도 해당하지 않는 default에 해당하기 때문에 Not Found가 출력되는 것을 확인할 수 있다.

이러한 기타 URL은 404페이지로 이동한다고 이해할 수 있다.

3. 정적 자원 전송

---

정적 자원이란, HTML이나 로고 이미지같이 홈페이지에서 변하지 않는 부분을 의미한다. 

한 가지 알아둘 점은 아파치나 IIS경우 HTML 파일을 만들어 클라이언트가 그 파일로 이동하게 하고 브라우저가 자동으로 그것을 전송하게 하는 방식이지만,  노드같은 경우 파일을 열고 내용을 읽어서 콘텐츠를 브라우저에 전송하는 작업을 직접 해야 한다.

그렇다면 이제 정적 자원을 홈페이지로 전송하는 작업을 해 보도록 하자.

먼저 public 디렉토리를 만들고 그 안에 home.html, about.html, 404.html을 만들자 또한 서브디렉토리 img를 만들고 그 안에 img/logo.jpg 이미지도 만든다. HTML 파일에서 로고를 참조하는 방법은 <img src='img/logo.jpg' alt='logo'> 이다. 

simpelHomepage.js를 다음과 같이 수정하자. 나의 경우엔 새로 만들어 app.js로 만들었다.

보조함수 serveStaticFile이 필요한 작업 대부분을 수행하고 있다. fs.readFile은 파일을 읽는 비동기적 메소드인데, 동기적 메소드인 fs.readFileSync 대신 이것을 쓰는 것을 더 추천한다. fs.readFile을 호출해 파일콘텐츠를 읽고 콜백 함수를 실행한다. 

__dirname은 실행 중인 스크립트가 들어 있는 디렉토리로 해석된다. 따라서 스크립트가 /home/sites/app.js에 들어 면 __dirname은 /home/sites로 해석한다. 이 전역 변수를 자주 사용하는 것을 책에서는 추천하고 있다.

다음부터는 "익스프레스"라는 Node.js의 유용한 프레임워크를 이용해 홈페이지를 만들고 꾸미는 작업을 해보도록 하자.