req는 클라이언트로 부터 받아오는 정보를 저장하고 사용
res는 서버가 클라이언트로 보내는 데이터를 저장
- 요청 (Request, req):
- req 객체는 HTTP 요청을 대표하며, 요청 쿼리 문자열, 파라미터, 본문, HTTP 헤더 등의 속성을 가지고 있습니다.
- 간단히 말해서, 이 객체는 클라이언트(주로 웹 브라우저)에서 서버로 보내는 모든 데이터를 담고 있습니다. 예를 들어, 사용자가 웹 폼에 입력한 데이터나 URL의 파라미터 등이 이에 해당합니다.
- 응답 (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)
})
- 앱(서버)이 요청을 대기합니다: app.get("/contact", ...) 부분에서, Express.js 애플리케이션(서버)은 클라이언트로부터 "/contact" 경로로 오는 GET 요청을 대기하고 있습니다. 즉, 사용자가 웹 브라우저에서 http://서버주소/contact 주소로 접근하면 이 요청을 처리하겠다는 의미입니다.
- 요청과 응답 객체가 함수에 전달됩니다: ... (req, res) => { ... } 부분에서, 서버는 요청 객체(req)와 응답 객체(res)를 해당 함수에 전달합니다. 여기서 req는 클라이언트의 요청에 관한 정보를 담고 있고, res는 서버가 클라이언트에 응답을 보내는데 사용되는 객체입니다.
- 응답을 생성합니다: res.render("contact")는 서버가 "contact.ejs" 템플릿 파일을 사용해 HTML을 생성하고, 이 HTML을 클라이언트에게 응답으로 보냅니다.
이해를 돕기 위해 주체별로 구분해 보겠습니다:
- GET 요청을 하는 주체: 클라이언트 (예: 웹 브라우저)
- req, res를 사용하는 주체: 서버 (Express.js 애플리케이션)
- 작업의 흐름: 클라이언트가 "/contact" 경로로 GET 요청 → 서버가 해당 요청을 받음 → 서버가 "contact.ejs"를 렌더링하여 HTML 생성 → 생성된 HTML을 클라이언트에게 응답
즉, GET 요청은 클라이언트에서 시작되어 서버로 전달되며, 서버는 이 요청을 받아 처리한 후 응답을 클라이언트에게 다시 보내는 구조입니다.
POST 요청은 GET 요청에 비해 더 많은 데이터를 안전하게 전송할 수 있으며, URL에 데이터가 노출되지 않는다는 점에서 보안상 유리하다는 차이가 있다는게 유의미하다.
- 앱(서버)이 요청을 대기합니다: app.post("/contactProc", ...) 부분에서, Express.js 애플리케이션(서버)은 클라이언트로부터 "/contactProc" 경로로 오는 POST 요청을 대기하고 있습니다. 사용자가 웹 브라우저나 다른 클라이언트를 통해 http://서버주소/contactProc 주소로 POST 요청을 보내면 이를 처리하겠다는 의미입니다.
- 요청과 응답 객체가 함수에 전달됩니다: ... (req, res) => { ... } 부분에서, 서버는 요청 객체(req)와 응답 객체(res)를 해당 함수에 전달합니다. req는 클라이언트의 요청에 관한 정보를 담고 있으며, res는 서버가 클라이언트에 응답을 보내는 데 사용됩니다.
- 서버가 데이터를 처리합니다: const name = req.body.name; 등의 코드는 클라이언트로부터 전송된 데이터(이름, 전화번호, 이메일, 메모)를 추출합니다. 여기서 req.body는 URL의 쿼리 파라미터를 통해 전송된 데이터를 포함하고 있습니다.()
- 응답을 생성합니다: let a = ...; res.send(a);는 서버가 수집한 데이터를 사용하여 문자열을 생성하고, 이를 클라이언트에게 응답으로 보냅니다.
주체별로 구분해 보면 다음과 같습니다:
- POST 요청을 하는 주체: 클라이언트 (예: 웹 브라우저, 폼 제출 등)
- req, res를 사용하는 주체: 서버 (Express.js 애플리케이션)
- 작업의 흐름: 클라이언트가 "/contactProc" 경로로 POST 요청 → 서버가 해당 요청을 받음 → 서버가 요청에서 데이터를 추출 → 서버가 데이터를 사용하여 응답 생성 → 생성된 응답을 클라이언트에게 보냄
이 구조에서, POST 요청은 클라이언트에서 시작되어 서버로 전달되며, 서버는 이 요청을 받아 처리한 후 그 결과를 클라이언트에게 다시 보내는 방식으로 동작합니다.(post의 구조도 get과 별반 다르지 않다는 것.)
그러나 여기서 중요한 점은 POST 요청을 통해 서버로 전송된 데이터가 URL에 노출되지 않는다는 것이다.
'Web App Project' 카테고리의 다른 글
node 폴더 경로[ 상대/절대경로 비교]['__dirname'을 꼭 사용하자] (0) | 2024.01.09 |
---|---|
input 폼 및 기본 웹페이지 골조 만들기 [node, express, mysql ] (0) | 2024.01.08 |
초기 개발 세팅 고정(백엔드, 프론트) (0) | 2024.01.08 |
로그인 기능 만들기(react, node, mysql)[post란? 검사맡으러 가기] (0) | 2024.01.04 |
react, node.js, mysql 연결[db 연결내용은 숫자도 문자열로 전달] (0) | 2024.01.02 |