[Node.js] URL의 구조와 활용 - (4)

URL의 구조

우선 URL을 활용하기 전에 URL이 어떻게 생겼는지부터 간단하게라도 파악해야 한다.

http://amazingwebsite.com:3000/main?id=0&page=3

1. http는 프로토콜에 관한 부분으로써 어떤 방식으로 통신할 지에 대한 통신 규칙을 의미한다.
2. amazingwebsite.com은 도메인 네임 및 호스트 네임을 의미한다. 즉, 이 웹페이지를 제공하기 위해 연결되어 있는 컴퓨터(서버)를 표현하는 부분이다.
3. :3000은 포트 번호를 의미한다. 만약 웹페이지를 제공하는 컴퓨터 내에 서버가 여러 개가 존재한다면 클라이언트가 접속을 시도할 때 어느 서버와 통신할 지가 애매할 수 있다. 그렇기 때문에 포트 번호를 통해 통신하고자 하는 서버를 특정하여 통신을 하게 되는 것이다. https 통신 시에 포트 번호를 생략한다면 기본적으로 웹서버로 통용되는 80번 포트에 접속하게 된다.
4. main은 path를 의미하며, 웹페이지를 제공하는 컴퓨터 내의 어떤 디렉토리에 접근할 지를 표현하는 부분이다.
5. ?id=0&page=3는 query string을 의미하며, 이 부분을 통해 서버에 구체적인 통신 요청을 할 수 있다. 즉, 예시의 경우 id=0이면서 page=3에 해당하는 부분의 데이터를 반환해달라고 요청하게 되는 것이다.

이 중에서 5번의 query string에 대한 부분이 URL을 활용하여 데이터를 출력하는데에 있어 가장 핵심인 부분이라고 볼 수 있다.

Query String(쿼리 스트링) 활용하기

쿼리 스트링을 활용하기 위해 우선 main.js를 수정해야 한다.

// main.js
const http = require("http");
const fs = require("fs");

const app = http.createServer((req, res) => {
  const url = new URL(req.url, `http://${req.headers.host}`); // 추가된 부분 (1)
  const query = url.searchParams; // 추가된 부분 (2)
  if (req.url === "/") {
    req.url = "/index.html";
  }
  res.writeHead(200);
  res.end(query.get("id")); // 수정된 부분(1)
});

app.listen(3000);

// 추가된 부분 (1)
const url = new URL(req.url, `http://${req.headers.host}`);
// 추가된 부분 (2)
const query = url.searchParams;

new URL(input[,base])을 활용하면 현재 화면에 보이는 페이지의 URL에 대한 정보를 객체로 생성할 수 있다. 그리고 이 url을 활용하면 url.pathname의 경우 URL의 path에 대한 정보를, url.searchParams의 경우 URL의 쿼리 파라미터에 대한 정보를 불러오는 등의 작업을 할 수 있다. 여기에선 query에 url.searchParams로 쿼리 파라미터에 대한 정보를 담아주었다.

// 수정된 부분(1)
// res.end(fs.readFileSync(__dirname + url));
res.end(query.get("id"));

이전에 있던 fs를 활용한 로컬 파일 불러오기 대신에 get(불러오고자 하는 파라미터) 메서드를 활용하여 현재 쿼리 파라미터에 따라 화면에 출력되는 내용이 바뀌도록 해보았다. 이 상태에서 http://localhost:3000/?id=HTML로 접속해보면 화면에 쿼리 파라미터의 id에 해당하는 HTML이 출력되는 것을 확인할 수 있다. URL을 활용하는 방법을 확인했으니 이제 이것을 기반으로 동적인 웹페이지를 만들어 볼 수 있게 되었다.

참고: Node.js 공식문서