Web App Project

예시로 알아보는 get, post / req,res

하얀성 2024. 1. 8. 15:49

req는 클라이언트로 부터 받아오는 정보를 저장하고 사용

res는 서버가 클라이언트로 보내는 데이터를 저장

  1. 요청 (Request, req):
    • req 객체는 HTTP 요청을 대표하며, 요청 쿼리 문자열, 파라미터, 본문, HTTP 헤더 등의 속성을 가지고 있습니다.
    • 간단히 말해서, 이 객체는 클라이언트(주로 웹 브라우저)에서 서버로 보내는 모든 데이터를 담고 있습니다. 예를 들어, 사용자가 웹 폼에 입력한 데이터나 URL의 파라미터 등이 이에 해당합니다.
  2. 응답 (Response, res):
    • res 객체는 서버의 HTTP 응답을 대표합니다. 이 객체를 통해 클라이언트에게 데이터를 보내거나, 특정 응답을 할 수 있습니다.
    • 이 객체를 사용하여 클라이언트에게 HTML 페이지, JSON 데이터, 상태 코드 등을 보내고, 요청이 성공했는지, 오류가 발생했는지 등의 정보를 전달합니다.

app.get("/contact", (req, res) => {
  res.render("contact")
})
app.post("/contactProc", (req, res) => {
  const name = req.body.name;
  const phone = req. body .phone;
  const email = req. body .email;
  const memo = req. body .memo;

  let a = `안녕하세요 ${name} ${phone} ${email} ${memo}`
  res.send(a)
})

 

  1. 앱(서버)이 요청을 대기합니다: app.get("/contact", ...) 부분에서, Express.js 애플리케이션(서버)은 클라이언트로부터 "/contact" 경로로 오는 GET 요청을 대기하고 있습니다. 즉, 사용자가 웹 브라우저에서 http://서버주소/contact 주소로 접근하면 이 요청을 처리하겠다는 의미입니다.
  2. 요청과 응답 객체가 함수에 전달됩니다: ... (req, res) => { ... } 부분에서, 서버는 요청 객체(req)와 응답 객체(res)를 해당 함수에 전달합니다. 여기서 req는 클라이언트의 요청에 관한 정보를 담고 있고, res는 서버가 클라이언트에 응답을 보내는데 사용되는 객체입니다.
  3. 응답을 생성합니다: res.render("contact")는 서버가 "contact.ejs" 템플릿 파일을 사용해 HTML을 생성하고, 이 HTML을 클라이언트에게 응답으로 보냅니다.

이해를 돕기 위해 주체별로 구분해 보겠습니다:

  • GET 요청을 하는 주체: 클라이언트 (예: 웹 브라우저)
  • req, res를 사용하는 주체: 서버 (Express.js 애플리케이션)
  • 작업의 흐름: 클라이언트가 "/contact" 경로로 GET 요청 → 서버가 해당 요청을 받음 → 서버가 "contact.ejs"를 렌더링하여 HTML 생성 → 생성된 HTML을 클라이언트에게 응답

즉, GET 요청은 클라이언트에서 시작되어 서버로 전달되며, 서버는 이 요청을 받아 처리한 후 응답을 클라이언트에게 다시 보내는 구조입니다.


 

POST 요청은 GET 요청에 비해 더 많은 데이터를 안전하게 전송할 수 있으며, URL에 데이터가 노출되지 않는다는 점에서 보안상 유리하다는 차이가 있다는게 유의미하다.

 

  1. 앱(서버)이 요청을 대기합니다: app.post("/contactProc", ...) 부분에서, Express.js 애플리케이션(서버)은 클라이언트로부터 "/contactProc" 경로로 오는 POST 요청을 대기하고 있습니다. 사용자가 웹 브라우저나 다른 클라이언트를 통해 http://서버주소/contactProc 주소로 POST 요청을 보내면 이를 처리하겠다는 의미입니다.
  2. 요청과 응답 객체가 함수에 전달됩니다: ... (req, res) => { ... } 부분에서, 서버는 요청 객체(req)와 응답 객체(res)를 해당 함수에 전달합니다. req는 클라이언트의 요청에 관한 정보를 담고 있으며, res는 서버가 클라이언트에 응답을 보내는 데 사용됩니다.
  3. 서버가 데이터를 처리합니다: const name = req.body.name; 등의 코드는 클라이언트로부터 전송된 데이터(이름, 전화번호, 이메일, 메모)를 추출합니다. 여기서 req.body는 URL의 쿼리 파라미터를 통해 전송된 데이터를 포함하고 있습니다.()
  4. 응답을 생성합니다: let a = ...; res.send(a);는 서버가 수집한 데이터를 사용하여 문자열을 생성하고, 이를 클라이언트에게 응답으로 보냅니다.

주체별로 구분해 보면 다음과 같습니다:

  • POST 요청을 하는 주체: 클라이언트 (예: 웹 브라우저, 폼 제출 등)
  • req, res를 사용하는 주체: 서버 (Express.js 애플리케이션)
  • 작업의 흐름: 클라이언트가 "/contactProc" 경로로 POST 요청 → 서버가 해당 요청을 받음 → 서버가 요청에서 데이터를 추출 → 서버가 데이터를 사용하여 응답 생성 → 생성된 응답을 클라이언트에게 보냄

이 구조에서, POST 요청은 클라이언트에서 시작되어 서버로 전달되며, 서버는 이 요청을 받아 처리한 후 그 결과를 클라이언트에게 다시 보내는 방식으로 동작합니다.(post의 구조도 get과 별반 다르지 않다는 것.)

그러나 여기서 중요한 점은 POST 요청을 통해 서버로 전송된 데이터가 URL에 노출되지 않는다는 것이다.