[Node.js] express로 다양한 라우팅 작성하고 테스트 하기, 썬더 클라이언트 설치

서론

HTTP 메서드에는 GET, POST, PUT, DELETE 가 있다.

• URL에 어떤 경로를 작성하고 enter를 치는 행위는 GET 요청
• form에 데이터를 작성하고, submit 버튼을 클릭하여 서버에 데이터를 넘겨주는 것은 POST 요청
• 수정은 PUT, 삭제는 DELETE 

 

get 요청과 post 요청 작성하기

const express = require('express');
const app = express();

app.get("/", (req, res)=>{
    res.send("Hello Node!");
})

app.get("/contacts", (req, res)=>{
    res.send("contacts 페이지 조회");
})

app.post("/contacts", (req, res)=>{
    res.send("contacts 데이터 create");
})

app.listen(3000, () =>{
    console.log("서버 실행중");
})

위와 같이 app.js 를 작성하였다.

app.get 요청 테스트는 그냥 브라우저에 경로를 작성하면 되는데,

app.post 요청은 화면 구현이 되어있지 않다면 테스트 하기 어렵다.

 

 

이럴 때 VSCode 확장 프로그램인 썬더 클라이언트(Thunder Client)를 사용하면 쉽게 테스트할 수 있다.

* postman과 비슷한 프로그램

 

썬더 클라이언트 설치

왼쪽 아이콘 선택 → 검색창에 'thunder' 입력하여 'Thunder Client' 설치

 

정상적으로 설치되었을 경우, 번개 아이콘이 추가된다.

 

번개 아이콘 클릭 → New Request 클릭 → HTTP 요청 방식과 URL 작성 → Send 클릭

하단 콘솔창에 결과가 출력된다.

 

post 요청으로 /contacts 경로로 테스트 해보았더니,

콘솔창에 결과가 잘 출력되고 있다.

 

 

이런식으로 get 요청 뿐만 아니라 post, put, delete도 테스트 해볼 수 있다.

 

 

라우트 파라미터

특정 조건을 지정할 때, 라우팅 코드에서 요청 URL 뒤에 : 붙인 후 변수 작성

id='1' 인 데이터를 조회하려면 /contacts/1 이라는 경로로 get 요청을 하면 된다.

 

위와 같이 특정 라우트 파라미터가 필요한 URL은 다음과 같다.

요청 방식	요청 URL	역할
GET	/contacts/:id	id에 맞는 연락처 가져오기
PUT	/contacts/:id	id에 맞는 연락처 수정하기
DELETE	/contacts/:id	id에 맞는 연락처 삭제하기

 

 

GET, POST, PUT, DELETE 테스트 코드 작성 및 테스트

const express = require('express');
const app = express();

//메인 화면
app.get("/", (req, res)=>{
    res.send("Hello Node!");
})
//연락처 목록 조회
app.get("/contacts", (req, res)=>{
    res.send("contacts 목록 조회");
})
//연락처 조회(특정 id)
app.get("/contacts/:id", (req, res)=>{
    res.send(`특정 id ${req.params.id}의 연락처 조회`);
})
//연락처 신규저장 
app.post("/contacts", (req, res)=>{
    res.send("contacts 데이터 create");
})
//연락처 수정(특정 id)
app.put("/contacts/:id", (req, res)=>{
    res.send(`특정 id ${req.params.id}의 연락처 수정`);
})
//연락처 삭제(특정 id)
app.delete("/contacts/:id", (req, res)=>{
    res.send(`특정 id ${req.params.id}의 연락처 삭제`);
})

app.listen(3000, () =>{
    console.log("서버 실행중");
})

위와 같이 전체 코드를 작성하였다.

* 요청 URL 뒤에 /:id 는 요청 데이터 req의 속성 params 안에 담기는 값으로, req.params.id 하여 값을 출력할 수 있다.

 

서버 실행 후, 썬더 클라이언트로 테스트 해보았다. 

 

위와 같이 HTTP 메서드와 URL 경로를 잘 작성하여 테스트해보면 된다.

 

 

express 요청 객체(req)의 속성

위에서 :id 값은 req.params.id 값에 담긴 걸 확인했다.

req 객체에는 다양한 속성이 있는데 그 내용을 살펴보자.

속성	설명
req.body	서버로 POST 요청할 때 넘겨준 정보를 담고 있다. 예를 들어 로그인 버튼을 눌렀을 때 사용자 아이디와 비밀번호가 req.body에 들어 있다.
req.cookies	클라이언트에 저장된 쿠키 정보를 서버로 함께 넘겼을 경우, 쿠키 정보를 담고 있다.
req.headers	서버로 요청을 보낼 때 같이 보낸 헤더 정보를 담고 있다.
req.params	URL 뒤에 라우트 파라미터가 포함되어 있을 경우, 파라미터 정보를 담고 있다.
req.query	요청 URL에 포함된 질의 매개변수(쿼리) 를 담고 있다. 예를 들어 검색 사이트에 검색어를 입력하고 검색 버튼을 눌으면, 검색어와 관련된 질의 매개변수가 req.query에 담겨있다. https://www.google.com/search?q=express 위와 같이, ?q=express 와 같은 내용을 질의 매개변수(쿼리) 라 한다. 매개변수가 여러개 있을 경우 ?data1=aaa&data2=bbb 이런식으로 &로 연결하여 작성한다.

 

 

express 응답 객체(res)의 함수

함수	설명
res.download	파일 다운로드
res.end	응답 프로세스 종료
res.json	JSON 응답 데이터 전송
res.jsonp	JSONP 지원을 통해 JSON 응답 데이터 전송
res.redirect	요청 경로를 재지정하여 강제 이동
res.render	뷰 템플릿을 화면에 렌더링
res.send	어떤 유형이든 res.send() 괄호 안의 내용을 전송
res.sendFile	지정한 경로의 파일을 읽어서 내용을 전송
res.sendStatus	상태 메세지와 함께 HTTP 상태 코드 전송
res.status	응답의 상태 코드 설정

 

 

 

https://youtu.be/O0TGHlIny5A?feature=shared