HTTP(HyperText Transfer Protocol) - 하이퍼텍스트(HTML) 문서를 교환하기 위해 만들어진 프로토콜(통신규약)
1. Request Message 기본 구조
Start Line Get /test.html HTTP/1.1 - HTTP Method, target, version 등 HTTP 기본 정보
Headers Host: google.com : 보내는 주소 Accept: text/html : 미디어 타입 Accept-Encoding : 한글/일본어 등의 인코딩 정보 Authorization : 인증/인가(로그인) 권한 정보 - Host의 주소, 포트 및 미디어 타입 등 Request에 대한 추가 정보.
Body ?search="test"&page=20&total=100 - Request가 전송하는 데이터(파라미터)를 담고 있는 부분
예시
2. HTTP에서 데이터 전달 방법 3가지
Param(파라미터) - 주소에 변수(데이터를) 포함시켜 전달하는 방법 - 서버에서 보통 Path Variable로 명명 예> https://naver.com/post/12345
Query(쿼리) - 주소와 구분(&로 연결)하여 변수를 담는 방법 - 서버에서 보통 Query Parameter로 명명한다. - 예> https://naver.com/post?search=”test”&key=value
Body(바디) - JSON, XML, Multi Form(이미지, 파일 등) 등의 데이터 전달 방법 - 일반적으로 데이터가 노출되지 않지만 툴을 이용하면 확인 할 수 있다.
3. Query vs Body
Query - 일반적으로 GET, DELETE 요청시에 사용 - 데이터가 노출되어도 관계 없을 경우 사용 - 주소줄에 최대 텍스트 제한이 있으므로 많은 양의 데이터 전달을 불가능 - req.query을 이용하여 데이터를 가져옴
Body - 일반적으로 POST, PUT 요청시 사용 - 데이터가 노출되지 않아야 할 경우 사용 - req.body를 이용해 데이터를 가져옴 - Body에서 데이터를 가져오기 위해서는 모듈을 설치하고 따로 설정이 필요하다.
Body 모듈 설치 및 설정 모듈 설치 : npm i body-parser 설정 : const bodyparser = require('body-parser'); app.use(bodyparser.urlencoded({extended: false})) app.use(bodyparser.json())
Query와 Body 에서의 파라미터 보내기 - GET, DELETE 방식일때 query로 파라미터를 보내야 한다. - 그럴 때는 params 로 묶어줘서 보내야 한다.- POST, PUT 방식일 때는 Body로 파라미터를 보내야 한다. - 그럴 때는 따로 묶어서 보내지 않아도 된다.
4. 예시
Client
- axios("요청 주소", 보낼 데이터).then(res => {});
- 요청 주소와 같이 보낼 데이터를 변수로 보내주면 된다.
- 그러면 서버에서 req.body 또는 req.query로 파라미터를 받을 수 있다.
import axios from "axios";
import React, {useState} from "react";
const HttpExam = (props) => {
const [data, setData] = useState("서버와 통신을 합시다...")
const onClickGet = () => {
// GET 방식에서 Node-axios관계에서는 밑에처럼
// 묶어줘야 query로 데이터를 보낼 수 있다.
const data = {
params: {title: "프론트엔드", label: "안녕하세요!"}
}
// GET 방식으로 data를 쿼리로 같이 보냄
axios.get('/api/hello', data).then(res => {
console.log(res)
setData(res.data)
})
}
const onClickDelete = () => {
// Delete 방식에서 Node-axios관계에서는 밑에처럼
// 묶어줘야 query로 데이터를 보낼 수 있다.
const data = {
params: {title: "프론트엔드", label: "안녕하세요!"}
}
// Delete 방식으로 data를 쿼리로 같이 보냄
axios.delete('/api/hello', data).then(res => {
console.log(res)
setData(res.data)
})
}
const onClickPost = () => {
// Post는 body로 보내기 때문에 params를 따로 안 적어도 됨
const data = {title: "프론트엔드", label: "안녕하세요!"}
axios.post('/api/hello', data).then(res => {
console.log(res)
setData(res.data)
})
}
const onClickPut = () => {
// Put는 body로 보내기 때문에 params를 따로 안 적어도 됨
const data = {title: "프론트엔드", label: "안녕하세요!"}
axios.put('/api/hello', data).then(res => {
console.log(res)
setData(res.data)
})
}
return (
<>
<h1>{data}</h1>
<button onClick={onClickGet}>GET 통신</button>
<button onClick={onClickPost}>POST 통신</button>
<button onClick={onClickPut}>PUT 통신</button>
<button onClick={onClickDelete}>DELETE 통신</button>
</>
)
}
export default HttpExam
Server
// node_modules의 express 패키지를 가져온다.
const express = require("express");
const path = require("path");
const app = express();
// Body로 파라미터를 받기 위한 설정
const bodyparser = require('body-parser');
app.use(bodyparser.urlencoded({extended: false}))
app.use(bodyparser.json())
// 조회
app.get("/api/hello", (req,res) => {
console.log("========================> [GET]/api/hello call req.query로 데이터를 가져온다.")
console.log(req.query)
res.send("[GET]서버에서 데이터를 가져온다.")
})
// 삭제
app.delete("/api/hello", (req,res) => {
console.log("========================> [DELETE]/api/hello call req.query로 데이터를 가져온다.")
console.log(req.query)
res.send("[DELETE]서버에서 데이터를 가져온다.")
})
// 삽입
app.post("/api/hello", (req,res) => {
console.log("========================> [POST]/api/hello call req.body로 데이터를 가져온다.")
console.log(req.body)
res.send("[POST]서버에서 데이터를 가져온다.")
})
// 수정
app.put("/api/hello", (req,res) => {
console.log("========================> [PUT]/api/hello call req.body로 데이터를 가져온다.")
console.log(req.body)
res.send("[PUT]서버에서 데이터를 가져온다.")
})
const http = require("http").createServer(app);
