UMC_WEB_라우팅, Node.js, Express

Falco·2022년 5월 18일

UMC UMC_WEB js nodejs

UMC2기_WEB

목록 보기

9/9

핵심 키워드

router
api
Node.js
웹서버

(route) 라우팅이란??

라우팅은 URI(또는 경로) 및 특정한 HTTP 요청 메소드(GET, POST 등)인 특정 엔드포인트에 대한 클라이언트 요청에 애플리케이션이 응답하는 방법을 결정하는 것을 의미한다.

Node.js의 라이브러리인 express를 사용하여 라우팅 및 api를 만드는 경험을 해보자.

npm init
npm install express

express에서 라우팅은 다음과같이 정의된다.

app.METHOD(PATH, HANDLER)

// 예제
app.get('/Home', (req, res) => {
    res.status(200).send("Hello");
});

이와같은 HTTP 메소드들을 통해 CRUD를 구현 가능하다.

Node.js의 패키지에 대한 간단한 설명

package.json : 설치된 패키지들을 확인가능
package-lcok.json : express 패키지에는 다른 패키지도 다운됨 -> 여기서 다른 패키지도 확인 가능
node_modules -> 다운받은 패키지들이 들어간다.

express 사용해보기

expressJs 공식문서

일단 다른패키지에도 쓸 수 있게 global하게 nodemon 패키지를 설치하고 이를바탕으로 실행하자.

npm -g nodemon // 설치 명령어

nodemon app.js // 실행 명령어

// In app.js
const express = require('express')
const app = express()
const port = 3100

// reqest 사용자 요청, ressponse 응답 값
// '/'홈으로 들어올 때 Hello World를 출력해 준다.
app.get('/', (req, res) => {
  res.send('Hello World!')
});

// 홈으로 들어가면 Welcome출력
app.get('/home', (req, res) => {
    res.send('Welcome')
  });

app.listen(port, () => {
  console.log(`Example app listening on port ${port}`)
})

잘 작동한다.

request, response 예제는
ExpressJs 에 자세히 나와있다.
서버 내부 배열에다가 일단 CRUD를 만들어 보는 실습을 해보자.

const users = [
{
    id : 1,
    name : "Lee",
    email : "Lee@gmail.com",
    phonenumber : "123-456-789",
},
{
    id : 2,
    name : "Kim",
    email : "Kim@gmail.com",
    phonenumber : "654-213-5233",
},
{
    id : 3,
    name : "Sin",
    email : "Sin@gmail.com",
    phonenumber : "213-4532-3259",
},
];

app.get('/users', (req, res) => {
    // json으로 출력해줌
    res.json(users);
});

localhost:5500/users

status 코드 추가하자.

이는 프론트와 서버와의 협업에서 사용되는 코드들이며 서버쪽에서 프론트의 요청에따라 status Code를 같이 보내주어 프론트에서의 오류처리를 일반화한다..

Read

req Param 보내서 reponse 확인

app.get('/users/:userId', (req, res) => {
	// req.params로 path로 온 변수를 확인가능하다.
    const user = users.find((user) => user.id === parseInt(req.params.userId));
    res.json(user);
});

Create

app.post("/users", (req, res) =>{
    // 서버내에 저장된 index는 서버쪽에서 임의로 저장
    const newUser = req.body;

    if(Object.keys(newUser).length === 0){
        res.status(400).send(`user에 관한 정보를 입력해주세요`);
    }else if(Object.keys(newUser).length <3){
        res.status(400).send(`user를 추가하기 위해 모든 정보를 입력해주세요`);
    }else{
        users.push({
            // id : users.length + 1, 이것보다는 삭제하고 추가하는데 id가 겹칠 수 있음
            id : users[users.length-1].id + 1,
            ...newUser // 스프레드 연산자
        });
    }
    
    res.json(users)
    // newUser의 키들만 뽑아서 배열로 만들어줌
});

스프레드 연산자를 사용하면 배열, 문자열, 객체 등 반복 가능한 객체 (Iterable Object)를 개별 요소로 분리할 수 있다.

ES6의 스프레드 연산자는 신이다.. 이게 말이되나?

Update

app.put("/users/:userId",(req,res)=>{
    const userIndex = users.findIndex(user => user.id === parseInt(req.params.userId));
    if(userIndex == -1){
        res.status(400).send(`userId가 존재하지 않습니다.`);
    }
    users[userIndex] = {
        // 나머지 보존 users[userIndex]를 넣어놈
        ...users[userIndex],
        ...req.body
    }
    res.status(200).json(users);
})

PATCH와 PUT의 차이??
PUT : 자원의 전체 교체, 자원교체 시 모든 필드가 필요하다.
PATCH : 자원의 부분 교체, 자원교체시 일부 필드 필요

users[userIndex] = {
        // 나머지 보존 users[userIndex]를 넣어놈
        ...users[userIndex],
        ...req.body
    }

위의 소스도 결국에는 users의 배열의 값을 모두 교체하는 것을 의미한다.

users[userIndex] = {
        ...req.body
    }

다음과 같은 소스로 진행하였을 때는

name과 email을 제외한 나머지 부분이 전부 사라짐을 알 수 있다.

app.patch("/users/:userId",(req,res)=>{
    const userIndex = users.findIndex(user => user.id === parseInt(req.params.userId));
    if(userIndex == -1){
        res.status(400).send(`userId가 존재하지 않습니다.`);
    }
    users[userIndex].name = req.body.name
    res.status(200).json(users);
})

Delete

app.delete("/users/:userId",(req,res)=>{
    const userId = req.params.userId;
    const userIdx = users.findIndex((user) => user.id === parseInt(userId));
    console.log(userIdx)
    if(userIdx == -1){
        res.status(400).send(`userId가 존재하지 않습니다.`);
    }else{
        users.splice(userIdx,1);
        res.status(200).json(users);
    }
})