Node.js #3 (실습 1~5)

0. 실습 전 세팅 몇 가지 

A ) 크롬 확장 프로그램 : "JSON Viewer" 설치 

 

B) 제어판에서 한국어가 안 깨지도록 사전 설정하기 (※ 적용 후 재부팅 필요)

 

 

1. OK를 반환하는 서버 만들기

chapter03/code3-1-ok-server.js

const http = require("http");

const server = http.createServer((req, res) => {
    res.setHeader("Content-Type", "text/html");     // 응답의 헤더 설정
res.end("OK")       				// "OK"를 응답하고 종료
})

server.listen("3000", () => console.log("OK 서버 시작!"));      // 접속 대기

 

2. 라우터 만들기

chapter03/code3-2-implement-router.js

const http = require("http");
const url = require("url");     // url 모듈 로딩


http
    .createServer((req, res) => {
        const path = url.parse(req.url, true).pathname;     // 패스명 할당
        res.setHeader("Content-Type", "text/html");

        if(path === "/user") {
            res.end("[user] name: andy, age: 30");      // /user 결괏값 설정
        } else if (path === "/feed") {
            res.end(`<ul>
                <li>picture1</li>
                <li>picture2</li>
                <li>picture3</li>
                </ul>
            `);     				// /feed에 대한 결괏값 설정
        } else {
            res.statusCode = 404;
            res.end("404 page not found");      // 결괏값으로 에러 메시지 설정
        }
    })

    .listen("3000", () => console.log("라우터를 만들어보자!"))

 

위 코드에서 /user와 /feed에 대해서만 페이지가 나오도록 구현했기 때문에

그 외의 경로에서는 404 페이지가 나오게 된다.

 

3. createServer() 리팩터링하기

chapter03/code3-3-implement-router.js

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

http
    .createServer((req, res) => {

        const path = url.parse(req.url, true).pathname;
        res.setHeader("Content-Type", "text/html")


        if (path === "/user") {
            user(req, res);             // user() 함수 실행
        } else if (path === "/feed") {
            feed(req, res);             // feed() 함수 실행
        } else {
            notFound(req, res);         // notFound() 함수 실행
        }
    })

    .listen("3000", () => console.log("라우터를 만들어보자!"));


const user = (req, res) => {
    res.end(`[user] name: andy, age: 30`);
};

const feed = (req, res) => {
    res.end(`<ul>
        <li>picture1</li>
        <li>picture2</li>
        <li>picture3</li>        
        `)
};

const notFound = (req, res) => {
    res.statusCode = 404;
    res.end('404 page not found');
};

 

※ 결과는 2번의 결과와 같음.

 

4. 동적으로 응답하기

 

chapter03/code3-4-implement-router2.js

정의된 user의 코드만 수정해서 동적으로 응답이 바뀌게끔 해보자.

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

http
    .createServer((req, res) => {

        const path = url.parse(req.url, true).pathname;
        res.setHeader("Content-Type", "text/html")


        if (path === "/user") {
            user(req, res); 
        } else if (path === "/feed") {
            feed(req, res);
        } else {
            notFound(req, res);
        }
    })

    .listen("3000", () => console.log("라우터를 만들어보자!"));


const user = (req, res) => {
    const userInfo = url.parse(req.url, true).query;
    // 쿼리 스트링 데이터를 userInfo에 할당
    res.end(`[user] name: ${userInfo.name}, age: ${userInfo.age}`)
    // 결괏값으로 이름과 나이 설정
};

const feed = (req, res) => {
    res.end(`<ul>
        <li>picture1</li>
        <li>picture2</li>
        <li>picture3</li>        
    `)
};

const notFound = (req, res) => {
    res.statusCode = 404;
    res.end('404 page not found');
};

 

# URL에 아래와 같이 입력
http://localhost:3000/user?name=mike&age=20

 

5. 라우터 리팩터링하기

chapter03/code3-5-refactoring-router.js

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

http
    .createServer((req, res) => {
        
        const path = url.parse(req.url, res).pathname;
        res.setHeader("Content-Type", "text/html")

        if (path in urlMap) {               // urlMap에 path가 있는지 확인
            urlMap[path](req, res);         // urlMap에 path값으로 매핑된 함수 실행
        }

        else {
            notFound(req, res)
        }
    })

    .listen("3000", () => console.log("라우터를 리팩터링해보자!"));


const user = (req, res) => {
    const userInfo = url.parse(req.url, true).query;
    res.end(`[user] name: ${userInfo.name}, age: ${userInfo.age}`)
};

const feed = (req, res) => {
    res.end(`<ul>
        <li>picture1</li>
        <li>picture2</li>
        <li>picture3</li>        
    `)
};


// 라우터 규칙 매핑 키로 path가 들어가고 값에 함수를 할당
const notFound = (req, res) => {
    res.statusCode = 404;
    res.end('404 page not found');
};


const urlMap = {
    "/": (req, res) => res.end("HOME"),
    "/user": user,
    "/feed": feed,
}