[코드잇 - Node.js 기본기] 3. 초간단 웹서버 만들기

01. 서버와 클라이언트 

# 서버

 : 클라이언트로부터 요청을 받아 응답을 내려준다.

# 클라이언트

 : 서버에 데이터를 요청하고 응답을 받는다. 

 

# 프로토콜(Protocol)

: 클라이언트와 서버가 서로 통신하기 위해 사용하는 통신규약 

- 클라이언트는 서버로부터 어떤 식으로 데이터를 보내줘야 하고, 서버는 어떤 식으로 데이터를 보내줘야 하는지에 관한 규약 

- ex) ftp, telnetm ssh, pop3, smtp, http, https

- 브라우저 주소 창에서 쉽게 볼 수 있는 http, https (http보다 더 안전한 방식, secure) 가 중요 

 

# 127.0.0.1

 : 컴퓨터 자기 자신을 나타내는 주소로 특별히 약속된 주소

- 외부의 서버와 통신하기 위해 사용되는 것x

- 개발 시 테스트 용도로 주로 사용 

- 127.0.0.1 대신 localhost를 써도 동일 

 

# 포트(port)번호 

 : 클라이언트가 서버에 요청을 보내려고 할 때, 서버에서 실행되고 있는 여러 프로그램 중 어느 프로그램과 통신할 것인지를 나타내기 위해 지정하는 번호 

- 서버에서 실행되는 모든 프로그램 중 클라이언트와의 통신이 필요한 것들은 처음에 포트 번호를 할당받은 상태에서 실행됨 

- 특정 프로토콜로 통신을 하는 서버 프로그램은 특정 포트 번호를 사용하도록 정해져 있음 

      - ex) http - 80번 , https - 443번 

- 본격적인 서비스로 배포하려면 정해진 포트 번호를 사용해야 함 

 

# createServer (req, res) 메소드 

- req 객체 : 요청에 관한 정보 담고 있는 객체

- res 객체 :  응답에 관한 정보 담고 있는 객체 

 

 

const http = require('http');

let server = http.createServer((request, response) =>{
  response.end('<h1>Hello World!</h1>');
});
server.listen(3000);

 - 127.0.0.1:3000 접속 

 

---

02. URL의 구조 

# URL (Uniform Resource Locator)

: 웹 상의 특정 자원 (HTML, CSS, JavaScript, 이미지, 영상 등) 의 위치를 나타낸 문자열 

let url = new URL('https://comic.naver.com/webtoon/detail?titleId=597447&no=469&weekday=sat');

console.log(url.protocol);
console.log(url.host);
console.log(url.pathname);
console.log(url.search); // 쿼리

 

---

03. 도메인 네임과 IP 주소

# 도메인 네임(Domain Name)

 : Domain Name System이라는 체계를 바탕으로 생성되는 문자열 이름으로, 인터넷 세계에 존재하는 수많은 영역을 추상적으로 나타내기 위해 사용되는 개념 

- 하나의 도메인 네임은 여러개의 도메인으로 구성됨 

- 더 상위의 도메인일수록 도메인 네임 중에서 오른쪽에 있음 

- 사람이 IP주소보다는 의미있는 문자열을 외우기가 더 쉽기 때문에 사용 

 

# 루트 도메인(Root Domain)

 : 인터넷 전체를 나타내는 단위

- 빈 문자열로 나타내고, 도메인 네임을 입력할 때도 표시되지 않는 경우 많음 

- 루트도메인까지 나타내려면 오른쪽 끝에 점을 하나 더 찍음 

     - google.com  -> goole.com.  : 이론적으로 더욱 완벽한 도메인 네임 

 

# Top-Level Domain(TLD) 

: 루트 도메인 바로 하위 / 사이트가 속한 국가 또는 사이트가 제공하는 서비스의 카테고리 나타냄

- ex) .kr , .jp , .net , .gov 등 

 

# Second-Level-Domain 

: Top-Level Domain 하위 / 서비스를 대표하는 이름

- ex) google, naver, daum, codeit 등 

---

04. Domain Name Resolution의 원리

- 브라우저에서 도메인 네임만으로도 특정 컴퓨터와 통신할 수 있는 것은 본격적인 통신을 시작하기 전에 도메인 네임을 IP주소로 변환해주는 절차가 존재하기 때문

---

# Domain Name Resolution

- ex)  ▼ 브라우저에 code.it 이라고 쓰고 엔터를 쳤을 때 발생하는 일 

▶ 1단계 : 네임 서버에 codeit.kr의 IP주소를 알려달라는 요청을 보냄  

•  네임 서버: 도메인 네임을 IP 주소로 변환하는 과정에 참여하는 서버들
• 내 컴퓨터에서 맨 처음 어떤 네임 서버에 요청할 것인지는 미리 설정되어 있고, 기존의 설정에서 다른 네임 서버로 바꾸는 것도 가능
• 내 컴퓨터가 사용하는 네임 서버에 관한 설정은 OS마다 다름

▶ 2, 3단계 : 내 컴퓨터의 요청을 받은 네임 서버는 루트 네임 서버(Root Name Server)에 '.kr'로 끝나는 도메인 네임들을 관리하는 네임 서버의 주소를 알려달라는 요청하고,  루트 네임 서버는 '.kr' 네임 서버의 IP 주소를 알려줌

 

▶ 4, 5단계 : 네임 서버는 '.kr' 네임 서버에게 'codeit.kr'의 IP 주소를 알려줄 수 있는, 'codeit.kr' 네임 서버의 IP 주소를 알려달라고 요청하고,  '.kr' 네임 서버는 'codeit.kr' 네임 서버의 IP 주소를 알려줌

 

▶ 6, 7단계 : 네임 서버는 'codeit.kr' 네임 서버에게 'codeit.kr'의 IP 주소를 알려달라고 요청하고, 마침내, 네임 서버는 'codeit.kr'의 실제 IP 주소를 응답으로 얻게 됨

 

▶ 8단계 : 네임 서버는 내 컴퓨터에게 codeit.kr의 IP 주소를 알려주고, 내 컴퓨터는 이 IP 주소를 갖고 코드잇 서버와 본격적인 통신을 시작

---

- 접속할 때마다 매번 1부터 8까지의 단계가 항상 발생하는 것은 아님

- 이미 한번 codeit.kr의 IP 주소를 받은 후에는 OS가 그 IP 주소를 보통 별도로 저장해두고 계속 사용하기 때문

- 가장 근처의 네임 서버 또한 자주 요청받는 도메인 네임에 대해서는 별도로 외부에 요청할 필요가 없도록 캐시(cache)로 관리하는 경우가 많음

- 즉, 1~8 까지의 과정이 일어나는 경우는 일반적으로 처음 접속하는 도메인 주소인 경우 

---

05.  http 모듈로 라우팅해보기 

-> split을 써야하고, if문을 계속 써야해서 복잡하다.

 

# 라우팅 (URL 라우팅) 

 : 특정(최적의) 경로로 데이터를 전송하는 법  

- 요청이 들어온 URL에따라 서버가 다르게 처리

const http = require('http');

users = ['Tom', 'Andy', 'Jessica', 'Paul'];

let server = http.createServer((request, response) => {
  if (request.url === '/') {
    response.end('<h1>Welcome!</h1>');
  } else if (request.url === '/users') {
    response.end(`<h1>${users}</h1>`);
  } else if (request.url.split('/')[1] === 'users') {
    const usersIdx = request.url.split('/')[2];
    response.end(`<h1>${users[usersIdx - 1]}</h1>`);
  }
  else {
    response.end('<h1>Page Not Available</h1>');
  }
});
server.listen(3000);

---

06.  express 모듈로 라우팅해보기 

- > split을 쓰지 않아도 되고, if문 대신 get 메소드를 사용하여 코드가 더 간결 

 

# Express 

 : node.js에서 실행될 서버 프로그램을 간편하게 만들 수 있게 해주는 프레임워크

- 서버 프로그램이 갖춰야하는 기능을 편하게  구현할 수 있음 

const http = require('http');

const express = require('express');

const app = express();

const users = ['Tom', 'Andy', 'Jessica', 'Paul'];

app.get('/',(request, response) => {
  response.end('<h1>Welcome!</h1>');
});
app.get('/users',(request, response)=>{
  response.end(`<h1>${users}</h1>`);
});
app.get('/users/:id',(request, response)=>{ 
  const userName = users[request.params.id - 1];
  response.end(`<h1>${userName}</h1>`);
});
app.get('*',(request, response)=>{ // * : 나머지 모든 URL  
  response.end('<h1>Page Not Available</h1>');
});

app.listen(3000);

- 순서대로 확인하고 출력하기 때문에 나머지 모든 URL을 의미하는 '*' 에 대한 코드는 순서를 고려해 마지막에 써야 정상적으로 출력된다