익스프레스에서 라우팅하기

라우팅 : 각 요청 URL별로 다른 내용을 표시하도록 하는 것.

익스프레스에서의 라우팅 기본형
app.Method(path, handler)

기본형에서의 용어
1. app : express로 만든 인스턴스.
2. Method : GET, POST, PUT, DELETE 같은 HTTP에서 요청하는 메서드.
- GET 요청 : 해당 URL에서 정보를 가져와야 할 때, POST 요청 : 해당 URL로 정보를 보낼 때 사용
3. path : 요청 URL(경로).
4. handler : 실행할 콜백 함수.
* app.get이나 app.post 등의 함수를 합쳐 app.Method 함수라고 한다.

// 루트(/)경로에서 GET 요청을 하면 뒤에 오는 콜백 함수를 실행한다.

app.get("/", (req, res)=> {

    res.status(200).send("Hello Node"); // 응답 객체인 res객체에서 send함수를 사용하면 응답을 화면에 표시할 수 있다.

}); staus와 send가 붙어있음

** 메서드 체이닝 : 콜백 함수 안에서 여러 개의 함수(메서드)를 연결해서 사용하는 것 **

라우트 코드 작성하기

// 모든 연락처 가져오기

app.get("/contacts", (req, res) => {

    res.status(200);

    res.send("Contacts Page");

});

// 새 연락처 추가하기

app.post("/contacts", (req, res) => {

    res.status(201);

    res.send("Create Contact");

});

라우트 파라미터 : 아이디 값을 사용해 필요한 값만 가져오려면?
=> 요청 URL 뒤에 가져와야 하는 조건을 지정한다.
(주로 아이디값을 사용하는데 이름이나 다른 조건을 붙일 수 있음)
즉, 라우트 파라미터 => 요청 URL에 함께 담아서 요청하는 값
기본형
/요청 URL/:id

라우트 파라미터로 동적 URL 처리하기

// 익스프레스를 사용해 서버를 만드려면 익스프레스 패키지를 가져온다.

const express = require("express");

 // express를 실행하면 app이라는 서버가 만들어짐, app 객체에서는 익스프레스의

 // 모든 기능을 사용할 수 있다.

 const app = express();

 // 포트 번호를 port 변수에 따로 할당했다.

 const port = 3000;

// 루트(/)경로에서 GET 요청을 하면 뒤에 오는 콜백 함수를 실행한다.

app.get("/", (req, res)=> {

    res.status(200); // 응답 코드를 200번으로 설정.

    res.send("Hello Node"); // 응답 객체인 res객체에서 send함수를 사용하면 응답을 화면에 표시할 수 있다.

});

// 새 연락처 추가하기

app.post("/contacts", (req, res) => {

    res.status(201);

    res.send("Create Contacts")

});

// 모든 연락처 가져오기

app.get("/contacts/:id", (req, res) => {

    res.status(200);

    res.send(`View Contact for ID : ${req.params.id}`);

});

// 연락처 수정하기

app.put("/contacts/:id", (req, res) => {

    res.status(201);

    res.send(`Update Contact for ID : ${req.params.id}`);

});

// 연락처 삭제하기

app.delete("/contacts/:id", (req, res) => {

    res.status(200);

    res.send(`Delete Contact for ID : ${req.params.id}`);

});

// listen 함수는 지정한 포트로 요청이 들어오는지 리스닝하고, 요청이 오면 콜백 함수를 실행한다.

app.listen(port, () => {

    console.log(`${port}번 포트에서 감자 서버 실행 중!`);

});

** 요청 URL은 같지만 요청 방식을 어떻게 지정하느냐에 따라서 연락처를 보고, 수정하고, 삭제할 수 있다. **
결과는 thunder client 서버 실행 결과에 있음(밑)

thunder client로 서버 실행 결과 확인하기

VS CODE에서 thunder client를 내려받으면 VS 내부에서 서버 실행 결과를 확인할 수 있다.

HTTP 응답은 응답 헤더와 응답 본문으로 구성된다.
thunder 클라이언트의 응답창에 Headers를 누르면 응답 헤더를 확인할 수 있다.

* 주의! 새로운 변경 사항이 있을 때, thunder client로 서버 실행 결과를 확인할 때에는 서버를 켜자! *

GET

PUT

DELETE

POST