MERN 스택 학습 37일 차

MERN 스택 학습 여정의 37일 차입니다.

어제는 /about 및 /contact와 같은 페이지를 위한 깔끔한 라우팅을 설정했습니다. 오늘은 백엔드 데이터 통신에 집중했습니다. URL 파싱과 쿼리 파라미터(query parameters)에 대해 공부했습니다.

웹사이트에서 제품을 검색할 때, 사이트는 URL을 통해 데이터를 전송합니다. 주소창의 물음표 뒤에 추가적인 텍스트가 붙어 있는 것을 자주 볼 수 있는데, 이것이 바로 쿼리 데이터(query data)입니다.

Node.js의 url 모듈을 사용하여 이 데이터를 읽는 방법을 배웠습니다. 이 모듈은 긴 URL 문자열을 구조화된 객체로 변환해 줍니다.

데이터가 분해되는 방식은 다음과 같습니다:

url 모듈을 사용하면 이 데이터를 코드에서 쉽게 사용할 수 있습니다. 문자열을 JavaScript 객체로 변환해 주기 때문입니다.

예제 코드:

const http = require("http");
const url = require("url");

const server = http.createServer((req, res) => {
    let parsedUrl = url.parse(req.url, true); 
    let pathname = parsedUrl.pathname;
    let queryData = parsedUrl.query;

    if (pathname === "/search") {
        res.writeHead(200, { "Content-Type": "text/plain" });
        res.end(`Searching logs for user: ${queryData.name} with ID: ${queryData.id}`);
    } else {
        res.end("Standard Endpoint View");
    }
});
server.listen(8000);

URL 파싱을 배우면 동적인 웹사이트를 구축하는 데 도움이 됩니다. 이제 웹 주소에서 사용자의 입력을 직접 캡처할 수 있습니다.

Source: https://dev.to/ali_hamza_589ec7b3eb6688d/day-37-of-learning-mern-stack-4758