Node로 기본적인 웹 서버 만들기

Choi Rim·2021년 9월 25일

JavaScript express nodejs

Node & Express

목록 보기

2/3

Node로 기본적인 웹 서버를 만들어보자 🏄🏻

노드 설치

노드 홈페이지 에 접속하여 LTS (Recommended for Most Users) 버튼을 클릭한다.
- 여기서 LTS는 오랫동안 지원된다는 뜻이며, Current 버전이라고 표시된 것보다 조금 더 안정적이다.
- Current 버전은 최근 기능을 포함하고 있고 성능이 조금 더 개선된 버전이다.
윈도우나 맥OS에서는 설치 파일을 내려받아 실행한다.
- 리눅스에서는 패키지 매니저를 사용하는 편이 더 빠르다.

npm

노드 패키지를 위한 패키지 매니저
npm에서 다른 사람이 만든 패키지를 설치할 수 있다.
- 거대하고 활발한 자바스크립트 커뮤니티를 활용할 수 있게 된다!
패키지 매니저의 임무는 패키지를 설치하고 의존성을 관리하는 것이다.
- npm은 빠르고, 사용하기 쉬우면서도 필요한 기능은 다 갖춘 패키지 매니저이다.
npm은 노드를 설치할 때 함께 설치된다.

npm install 명령어

npm install

npm에서 가장 많이 사용할 명령어
예를 들어, nodemon 을 설치하려면 콘솔에서 다음과 같이 명령한다.
- 노드몬은 소스 코드를 수정했을 때 자동으로 노드 프로그램을 재시작하는 널리 쓰이는 유틸리티이다.

npm install -g nodemon

-g 플래그는 패키지를 전역으로(globally) 설치하라는 의미이다.
- 패키지를 전역으로 설치하면 시스템 전체에서 해당 패키지를 사용할 수 있다.
- 노드몬 같은 자바스크립트 유틸리티는 일반적으로 전역으로 설치하며 특정 웹 앱이나 프로젝트에서만 사용하는 패키지는 전역으로 설치하지 않는다.

노드로 만드는 단순한 웹 서버

about.html 파일을 만들어 적당한 디렉터리에 넣으면 브라우저에서 http://localhost/about.html 로 이동할 수 있다.
- 웹 서버의 설정에 따라서는 확장자인 .html을 생략할 수도 있다.
- URL과 파일 이름의 관계는 명확하다.
- 웹 서버는 파일이 컴퓨터 어디에 있는지 확인하고 브라우저에 그 파일을 전송한다.
노드는 전통적인 웹 서버와는 다른 패러다임을 제시한다.
- 노드에서는 앱이 곧 웹 서버다 🤭
- 노드는 웹 서버를 만들 수 있는 프레임워크를 제공할 뿐이다.

본격적으로 웹 서버를 만들어보자

첫 발자국은 역시 Hello World 😎

// helloworld.js
const http = require('http');
const port = process.env.PORT || 3000;

const server = http.createServer((req, res) => {
  res.writeHead(200, { 'Content-Type': 'text/plain' })
  res.end('Hello world!')
})

server.listen(port, () => console.log(`server started on port ${port}; press Ctrl-C to terminate....`))

디렉토리를 하나 생성하고 위와 같은 파일을 만든다.

node [파일명] 을 입력하고 실행하면 우리가 파일에 입력한 텍스트가 뜨는 것을 볼 수 있다.
터미널에서 위를 확인하고 브라우저에 접속해 http://localhost:3000 에 접속한다.

우리가 입력한 Hello world! 가 아주 잘 보인다 🤟🏻

// helloworld.js
const http = require('http');
const port = process.env.PORT || 3000;

const server = http.createServer((req, res) => {
  res.writeHead(200, { 'Content-Type': 'text/plain' })
  res.end('Hello world!')
})

server.listen(port, () => console.log(`server started on port ${port}; press Ctrl-C to terminate....`))

서버를 실행시켜 봤으니 위에서 작성한 코드를 하나하나 뜯어보도록 하자.
1. ```
const http = require('http');
```
- nodejs는 require 함수를 사용해 필요한 라이브러리를 로드한다.
- 인수에 가져올 라이브러리 이름을 지정하면 해당 라이브러리가 로드되어 반환된다.
- 위는 http라는 라이브러리를 로드한것이다.
  - http의 각종 기능을 요약
1. ```
const port = process.env.PORT || 3000;
```
- 포트 번호를 3000으로 지정한다.
1. ```
const server = http.createServer((req, res) => {
    res.writeHead(200, { 'Content-Type': 'text/plain' })
    res.end('Hello world!')
})
```
```
function 함수명 ((req, res) =>{
...... 필요한 처리 ...... 
})
```
- 위는 요청을 받았을 때 처리하기 위한 함수 형태이다.
  - req, res 와 같은 인수 두개가 존재한다.
    - request는 클라이언트의 요청에 대한 기능을 정리하고
    - response는 서버에서 클라이언트로 리턴되는 응답에 대한 기능을 정리한다.
  - req & res 를 사용하여 요청을 받았을 때 처리를 만들 수 있다.
- res.writeHead(200, { 'Content-Type': 'text/plain' })
  - 헤더 정보 내보내기
  - wirteHead는 response 객체의 메소드에서 헤더 정보를 응답에 작성해서 내보내는 것이다.
  - 첫번째 인자는 상태코드를 지정하고 두번째 인수는 헤더 정보를 연관 배열로 정리한 것이다.
  - content-type이라는 헤더 정보에 'text/plain'의 값을 설정하는 있는 것을 알 수 있다.
    - "이 콘텐츠는 표준 텍스트"라는 정보를 클라이언트에게 전달한다.
- res.end()
  - 내용 내보내기가 완료되면 마지막으로 response의 "end"를 호출하여 콘텐츠 출력을 완료한다.
  - 여기서 인수로 내보낼 내용의 값을 지정할 수 있다.
  - 이 end로 인해 응답 처리는 종료되고, 요청 처리가 완료된다.
- http.createServer
  - http 라이브러리의 createServer 메서드를 호출하여 http.Server 개체를 만든다.
  - Nodejs의 서버가 되는 부분
1. ```
server.listen(port, () => console.log(`server started on port ${port}; press Ctrl-C to terminate....`))
```
- http.Server 가 준비되면 listen 메소드를 실행한다.
- 실행 후, 서버는 대기 상태가 되고 클라이언트에서 요청이 들어오면 그것을 처리할 수 있다.

이벤트 주도 프로그래밍 (event-driven programming)

노드의 배경이 되는 철학
어떤 이벤트가 일어날지, 그 이벤트에 어떻게 반응해야 할지 프로그래머는 이해해야 한다.
- 사용자가 뭔가를 클릭하면, 프로그래머는 클릭 이벤트를 처리한다.
- 프로그래머는 사용자가 언제 클릭할지, 또는 클릭을 하긴 할지조차 알 수 없고 통제도 불가능하다
우리가 위에서 웹 서버를 실행하기 위해 작성한 코드에 이벤트가 숨어있다.
- 바로 HTTP 요청이다!
  - http.createServer는 함수를 매개변수로 받는다.
  - HTTP 요청이 일어날 때마다 이 함수를 호출한다.
  - 위 예제에서는 콘텐츠 타입을 평문(text/plain)으로 맞추고 'Hello world!'라는 문자열을 보낸다.
사용자가 애플리케이션의 한 영역(페이지)에서 다른 영역으로 이동하는 것도 이벤트이다.
- 이런 내비게이션 이벤트에 애플리케이션이 어떻게 반응할지 정하는 것을 라우팅이라고 부른다.
- 라우팅은 다음 글에서 이어 소개하도록 하겠다! 👋🏻