req.body/ req.params / req.query 의 차이점 +번외 (Get,Post방식의 차이점)

요청을 보내기전 axios에 대해 간략하게 짚고 넘어가자

🥕 axios란?

axios는 브라우저, Node.js를 위해서 만들어진 
Promise API를 활용하는 HTTP 비동기 통신 라이브러리임

 

axios 설치

npm install --s axios

 

아래의 경로에 다음과 같은 axios 파일을 만들어준다

/src/axios.js

import axios from 'axios';

const instance = axios.create({
    baseURL: "http://localhost:3001"
});
export default instance;

 

=> 사용자 정의 인스턴스 기본 설정

🤔  axios 파일을 왜 만들어서 사용할까?

⇒ axios 인스턴스를 만들 때 구성 기본 값 설정해주어 통신할 때 필요한 baseURL, 쿼리, 헤더, 바디 등등 여러 데이터를 함께 보낼 수 있다

👉 "http://localhost:3001"로 baseURL 설정해주어 baseURL 을 생략해서 쓸수 있다 !!

import axios from '../axios';

const CheckId = ()=>{
    console.log('checkId function')
    axios.post('http://localhost:3001/user/checkId', {
      id : idRef.current.value
    }).then ( res =>{
      console.log(res) 
    }
)}

 

위의 코드가 axios를 통해 baseURL를 설정 후 사용해주면 아래와 같이 바뀜

import axios from '../axios';

const CheckId = ()=>{
    console.log('checkId function')
    axios.post('/user/checkId', {
      id : idRef.current.value
    }).then ( res =>{
      console.log(res) 
    }
)}

 

 

👉 이제 본론으로 들어가자

클라이언트에서 서버로 요청을 보내는 방식 2가지

// 방식 1
await axios.post('/blog', { 
    name: '김아무개', 
    age: 20,
    married: true
});

// 방식 2
await axios({
  method: "post",
  url: '/blog',
  data: { 
  	name: '김아무개',
    age: 20,
    married: true
  },
})

 

🥕 req.params (url parameter)

클라이언트

axios.get('/login/김아무개', {

  })

서버

app.get('/login/:id' , (req,res)=>{
	console.log(req.params)
}
// {id : '김아무개'}

 

❓ 여러개의 params를 받아오고 싶을 때

axios.get('/login/김아무개/20', {

  })

app.get('/login/:id/:age' , (req,res)=>{
	console.log(req.params)
}
// {id : '김아무개', age : 20}

🥕 req.query (query string)

클라이언트 ( ? key=value 전송)

axios.get('/login?age=20', {

  })

서버

app.get('/login' , (req,res)=>{
	console.log(req.query)
}
// {age : 20}

 

❓ 여러개의 query를 받아오고 싶을 때

axios.get('/login?age=20&name=김아무개', {

  })

app.get('/login' , (req,res)=>{
	console.log(req.query)
}
// {age : 20, name : '김아무개'}

 

😐 => 단점 :  params , query 는 URL로 정보를 받아오기 때문에 간단한 데이터들 보낼때 사용하기

ex) detail/dress

 

보안상 이슈가 있는 것들은 body로 받아오거나 form태그를 쓰자~!

🥕 req.body

• 주로 HTML form이나 AJAX요청과 같이 POST방식으로  데이터를 전송할 때 사용( JSON 등의 바디 데이터를 담을때 사용)
• req.body를 사용하기 전에는 미들웨어 등록이 필요함 ( app.use(express.json())

클라이언트

axios.post('login', {
	id : 'abc',
    pw : 123,
    name : '김아무개',
    nick : 'any'
   }

서버

app.get('login', (req, res) => {
	console.log(req.body)
   }
// {id : 'abc', pw : 123, name : '김아무개', nick : 'any'}

 

이렇게 사용하다보니 생긴 궁금한 점!!

🤔  post와 get방식은 차이가 무엇일까?

get은 가져오는 것, post는 수행하는 것

 

Html method중 가장 많이 쓰이는 것으로,

get = 서버에서 어떤 데이터를 가져와서 보여줄 때 사용 (글의 내용 보여줄때)

post = 서버상의 데이터 값이나 상태를 바꾸기 위해서 사용 (글의 내용 저장, 수정)

 

🥕 Get 방식 : 간단한 데이터를 URL에 넣도록 설계된 방식

개인정보가 포함되지 않는 상황에서 캐싱을 하여 속도를 높이거나 즐겨찾기를 편리하기 위해 사용

(CURD기능에서 R(Read) : 조회)

• 데이터를 읽거나, 검색할 때 사용
  • 오로지 데이터를 읽을 때만 사용되고 수정할 때는 사용하지 않음
• get요청은 URL 주소 끝에 파라미터로 포함되어 전송 (쿼리스트링이라고 함)
• 데이터의 변형의 위험이 없음 (데이터가 바뀌지 않는 경우에 사용)
• URL 길이가 제한이 있기 때문에 전송 데이터 양이 한정
• 캐시가 가능(속도 높일수있음), 브라우저 히스토리에 남음

 

🥕 Post 방식 : GET방식은 URL에 데이터를 붙여서 전송하는 반면에 POST방식은 BODY에 데이터를 넣어서 전송

(CURD기능에서 C(Create) : 생성) - 수정, 삭제 기능도 함

• body에 담아 전송할 때 주로 사용
• 데이터 값이나 상태를 바꾸기 위해서 사용 (생성, 수정, 삭제)
• 대용량 데이터 전송 가능 (길이 제한 없음)
• 캐시 되지 않으며, 브라우저 기록에 남지 않음
• 단, post요청도 크롬의 개발자도구, fiddler와 같은 툴로 요청 내용을 확인할 수 있기 때문에 민감한 데이터의 경우, 반드시 암호화해 전송할 것