req 객체

  • req.app : req 객체를 통해 Express.js의 app객체에 접근한다.
  • req.ip : 요청한 클라이언트의 ip 주소가 담겨 있다.
  • req.body : Request를 호출할 때 body로 전달된 정보가 담긴 객체다. ( express.json() 미들웨어를 이용해야 해당 객체를 사용할 수 있다. ) 
  • req.params : 라우터 매개변수 ( Path Params )에 대한 정보가 담긴 객체다.
  • req.query : Request를 호출할 때 쿼리 스트링으로 전달된 정보가 담긴 객체다.
  • req.cookies : Request를 호출할 때 Cookie 정보가 담긴 객체다. ( cookie-parser 미들웨어를 이용해야 해당 객체를 사용할 수 있다. )
  • req.get(Header) : 헤더에 저장된 값을 가져오고 싶을 경우 사용한다.

req.body, req.params, req.query 차이

1. req.body

 1-1. JSON 등의 바디 데이터를 담을 때 사용

 1-2. 주로 POST로 유저의 정보 또는 파일 업로드를 보냈을 때 사용

 1-3. 요청 본문에 제출 된 키-값 데이터 쌍을 포함한다.

 

클라 코드

await axios.post('www.example.com/post/1/jun', { 
    name: 'nomad', // post 로 보낼 데이터
    age: 11,
    married: true
});

 

서버 코드

app.use(express.json()); // json 형식 폼 요청 들어오면 파싱

// 요청온 url : www.example.com/public/100/jun
router.post('/:id/:name', (req, res, next) => {

  // public/100 부분이 담기게 된다.
  console.log(req.params) // { id: '100', name: 'jun' }
  
  // post보낼때 담은 객체 부분이 담기게 된다.
  console.log(req.body) // { name: 'nomad', age: 11, married: true }
  
});

 

 

2. req.params

 2-1. 라우터의 매개변수

 2-2. 예를 들어 /:id/:name 경로가 있으면 ":id"속성과 ":name"속성을 req.params.id, req.params.name으로 사용할 수 있다.

 

예제 )

// 요청온 url : www.example.com/public/100/jun
router.get('/:id/:name', (req, res, next) => {

  //../100/jun 부분이 담기게 된다.
  console.log(req.params) // { id: '100', name: 'jun' }
});

 

 

3. req.query

 3-1. 경로의 각 쿼리 문자열 매개 변수에 대한 속성이 포함 된 개체 ( 주로 GET 요청에 대한 처리 )

 3-2. 예를 들어 www.example.com/post/1/jun?title=hello! 이면, title=hello! 부분을 객체로 매개변수의 값을 가져온다. 

 

예제) 클라 코드

// 클라이언트 단에서, 자바스크립트로 get요청을 보냄

// 방식 1
await axios.get(`www.example.com/post/1/jun?title=hello!`)

// 방식 2
await axios({
  method: "get",
  url: `www.example.com/post/1/jun`,
  params: { title: 'hello!' },
})

 

서버 코드

// 요청온 url : www.example.com/public/100/jun?title=hello!
app.use(express.urlencoded({ extended: false })); // uri 방식 폼 요청 들어오면 파싱

router.get('/:id/:name', (req, res, next) => {

  //../100/jun 부분이 담기게 된다.
  console.log(req.params) // { id: '100', name: 'jun' }
  
  // title=hello! 부분이 담기게 된다.
  console.log(req.query) // { title : 'hello!' }
});

 

res 객체

  • res.app : res 객체를 통해 Express.js의 app 객체에 접근할 수 있다.
  • res.status(코드) : Response에 HTTP 상태 코드를 지정한다.
  • res.send(데이터) : 데이터를 포함해 Response를 전달한다. ( 예 ) res.send('안녕');
  • res.json(JSON) : JSON 형식으로 Response를 전달한다. ( 예) res.json({ message: '안녕' });
  • res.end() : 데이터 없이 Response를 전달한다.
  • res.redirece(주소) : 리다이렉트할 주소화 함께 Response를 전달한다. ( 예 ) res.redirect('https://naver.com');
  • res.cookie(Key, Value, Option) : 쿠키를 설정할 때 사용한다.
  • res.clearCookie(Key, Value, Option) : 쿠키를 제거할 때 사용한다.

 

Express.js의 Response 살펴보기

서버에서 클라이언트에게 보내는 메시지를 응답(Response)라고 부른다.

status는 서버가 클라이언트에게 응답(Response)를 보낼 때 Http 상태 코드를 전송하는것을 나타내며, send, json은 서버가 클라이언트에게 응답(Response) 데이터를 전송하는 방법을 나열한 것이다.

 

res.status( 상태 코드 )

app.post('/', (req, res) => {
  return res.status(201).json({key: 'Value'});
});

 

  • 서버가 클라이언트에게 응답 ( Response )을 보냈을 때, 상태 코드를 전달할 때 사용한다.
  • HTTP 상태 코드는 HTTP 요청이 어떠한 상태로 처리 되었고, 완료되었는지를 나타낸다. ( 예 ) 200 은 요청이 성공적, 404는 요청한 리소스가 서버에 존재하지 않음 )
  • Express에서 상태 코드를 명시하지 않으면, 상태 코드는 200으로 자동 전달된다.
  • https://developer.mozilla.org/ko/docs/Web/HTTP/Status
 

HTTP 상태 코드 - HTTP | MDN

HTTP 응답 상태 코드는 특정 HTTP 요청이 성공적으로 완료되었는지 알려줍니다. 응답은 5개의 그룹으로 나누어집니다: 정보를 제공하는 응답, 성공적인 응답, 리다이렉트, 클라이언트 에러, 그리고

developer.mozilla.org

 

res.json ( JSON ), res.send ( 데이터 )

app.post('/', (req, res) => {
  return res.status(201).json({key: 'Value'});
});

 

  • 서버가 클라이언트에게 응답 ( Response )을 보냈을 때, 데이터를 전달할 때 사용한다.
  • res.json() 메서드는 JSON 형식의 데이터만 보낼 수 있다. Response Header의 Content-Type이 'application/json으로 설정된다.
  • res.send() 메서드는 다양한 유형의 데이터를 보낼 수 있다. Response Header의 Content-Type을 데이터 유형에 따라 다르게 설정할 수 있다. ( Content-type은 서버가 클라이언트에게 전달하는 데이터의 타입을 지정할 때 사용한다. )
  • https://developer.mozilla.org/ko/docs/Web/HTTP/Headers/Content-Type
 

Content-Type - HTTP | MDN

Content-Type 개체 헤더는 리소스의 media type을 나타내기 위해 사용됩니다.

developer.mozilla.org

 

Express.js의 Request 살펴보기

클라이언트에서 서버로 보내는 메시지를 요청 ( Request ) 이라고 부른다. body, params, query는 클라이언트가 서버에 요청 ( Request )을 보낼 때 데이터를 어떤 방식으로 전송하는지에 대한 여러가지 방법들을 나열한 것이다.

 

req.body: ( Body )

app.post('/', (req, res) => {
  // Request에서 body 데이터를 ReqBody 변수에 할당한다.
  const ReqBody = req.body;

  return res.status(201).json({});
});
  • 클라이언트가 요청 ( Request )을 보냈을 때, Body에 데이터를 삽입했을 때 사용한다.
  • req.body를 사용하기 위해서는 express.json() 미들웨어를 사용해야 한다.
  • Key-Value의 데이터 형식을 가지고 있고, 대표적으로 JSON 형태를 띄고 있다.
  • Body는 Query String, Path Variable(params)과 다르게, URL만을 가지고 어떤 데이터를 전달했는지 확인할 수 없는 특징을 가지고 있다.
  • 데이터를 생성하거나 수정이 필요한 데이터의 전달을 위해 사용한다. ( 예 ) 사용자의 ID, 사용자의 Password, 게시글 제목 등 )
  • POST, PUT 과 같은 HTTP Method에서 사용한다.

req.query : ( Query String )

app.get('/', (req, res) => {
  // Request에서 Query String 데이터를 ReqQuery 변수에 할당한다.
  const ReqQuery = req.query;

  return res.status(200).json({});
});
  • 클라이언트가 요청 ( Request ) 을 보냈을 때, URL에 원하는 Key-Vqlue를 삽입해 데이터를 전달한다.
  • URL의 마지막에 ? 기호를 이용해 Query String을 사용할 수 있다. ( 예 ) https://naver.com?name=얌생&gender=남자 )
  • 특정 컨텐츠의 위치를 표시하거나 웹 페이지에 특정한 옵션을 설정할 때 사용한다. ( 예 ) 게시글의 정렬, 특정 날짜의 게시글만 출력하는 옵션 설정 등 )
  • 주로 서버의 리소스를 필터링하거나 정렬하는 데 사용한다. ( 예 ) https://naver.com/posts?sort=desc&page=3&limit=20 )  limit=20 : 1 페이지당 20개의 게시글을 조회한다. page=3 : 3 페이지를 조회한다. sort=desc : 게시글을 내림차순으로 정렬한다.
  • GET 과 같은 HTTP method에서 사용한다.

req.params: ( Query String )

app.get('/:name', (req, res) => {
  // Request에서 Path Params 데이터의 name Key를 가진 Value를 name 변수에 할당한다.
  const { name } = req.params;

  return res.status(200).json({});
});
  • 클라이언트가 요청 ( Request )을 보냈을 때, URL에 원하는 데이터를 삽입해 전달한다.
  • URL 특정 경로를 매개 변수로써 사용한다.
  • 특정 게시글을 선택하거나 명확한 리소스를 지정해야할 때 사용한다. ( 예 ) 게시글의 상세 정보 조회, 사용자의 상세 정보 조회 )

+ Recent posts