HTTP Methods
클라이언트가 웹서버에게 사용자 요청의 목적/종류를 알리는 수단
이 Method중 Axios 통신하면서 가장 많이 사용되는 메소드를 정리해보았다.
- GET
GET : 입력한 url에 존재하는 자원에 요청을 한다.
문법
axios.get(url,[,config])
Q) Get이 데이터를 받아오는 것이라고 했는데, 저는 로그인을 구현할때 GET을 사용했는데요?
GET으로 로그인을 구현했을때 웹 사이트 주소창의 형태를 잘 보면 이러한 형태가 나온다.
www.server.com/login?id=Hnk&pw=1234 // 실제로 없는 사이트이다, 이해를 돕기 위해서 추가했다. 오해하지 말자.
웹 사이트 뒤에 쿼리스트링이 붙여진 것을 확인할 수 있다.
✅ GET은 서버에서 어떤 데이터를 가져와서 보여준다거나 하는 용도이다.
주소에 있는 쿼리스트링을 활용해서 정보를 전달하는 것이지 GET메서드는 값이나 상태등을 바꿀 수 없다.
예제 코드
//가상으로 보여주는 코드와 response 형태이다. 참고만 하길 바란다.
import axios from 'axios';
axios.get('https://localgost:3000/sewon/user')
.then((Response)=>{console.log(Response.data)})
.catch((Error)=>{console.log(Error)})
[
{ id: 1, pw: '1234', name: 'sewon' },
{ id: 2, pw: '1234', name: 'hongil' },
{ id: 3, pw: '1234', name: 'daeyeon' }
]응답은 json 형태로 넘어온다.
- POST
POST : 새로운 리소스를 생성(create)할 때 사용한다.
문법
axios.post("url주소",{
data객체
},[,config])POST 메서드의 두 번째 인자는 본문으로 보낼 데이터를 설정한 객체 리터럴을 전달한다.
Q) Post는 새로운 리소스를 생성할 때 사용되는데 그러면 언제 POST를 사용하나요?
✅ 로그인, 회원가입 등 사용자가 생성한 파일을 서버에다가 업로드할때 사용한다.
Post를 사용하면 주소창에 쿼리스트링이 남지 않기때문에 GET보다 안전하다.
예제 코드
axios.post( 'url',
{
contact: 'Sewon',
email: 'sewon@gmail.com'
},
{
headers:{
'Content-type': 'application/json',
'Accept': 'application/json'
}
}
) .then((response) => { console.log(response.data); })
.catch((response) => { console.log('Error!) });
3. Delete
REST 기반 API 프로그램에서 데이터베이스에 저장되어 있는 내용을 삭제하는 목적으로 사용한다.
문법
axios.delete(url,[,config]);
✅ Delete메서드는 HTML Form 태그에서 기본적으로 지원하는 HTTP 메서드가 아니다.
Delete메서드는 서버에 있는 데이터베이스의 내용을 삭제하는 것을 주 목적으로 하기에 두 번째 인자를 아예 전달하지 않는다.
예제 코드
axios.delete("/thisisExample/list/30").then(function(response){
console.log(response);
}).catch(function(ex){
throw new Error(ex)
}- PUT
REST 기반 API 프로그램에서 데이터베이스에 저장되어 있는 내용을 갱신하는 목적으로 사용된다.
문법
axios.put(url[, data[, config]])
✅ PUT메서드는 HTML Form 태그에서 기본적으로 지원하는 HTTP 메서드가 아니다.
PUT메서드는 서버에 있는 데이터베이스의 내용을 변경하는 것을 주 목적으로 하고 있다.
마지막 회고~
2차 프로젝트가 마무리 되었다.
사실 마무리는 좋지 않았다...
개인적인 생각은 결과가 어떻든 발표는 마무리 하는게 좋다고 생각하지만 팀원들 대부분이 발표를 안하는걸로 의견이 모아져서 나도 따를 수 밖에 없었다.
이 부분은 요즘은 비전공자들이 많은 추세이고, 우리 팀 역시 비전공자들이 대부분이었다. 비전공자 자체가 문제가 아니라, 경험이 있는 사람이 진도가 빠른 편이다. 전공자 혹은 현직자 한명이 이끌고 가는 팀도 분명히 있을 것이다. 3주라는 시간이 길지 않다고 생각을 하는데, 완성이 되어도 되지않아도 포기하지 않고 달려왔다는 증거가 되는게 발표라고 생각했는데, 다른 사람이 많이 부끄럽다면... 그렇게 생각한다면 어쩔 수 없는 거다.
나는 부끄럽지 않기 때문에.. 완성 못하면 뭐 어때..
다른 프로젝트 또 하면 되지.. ㅎ
솔직히 말하자면 나는 적극적인 사람이 아니다.
답답하면 의견을 제시하지만 따르는걸 좋아하고, 몸을 맡기고 물 흐르듯 흘러가는 걸 좋아하는 사람이다.
그니까 나도 잘한건 없다는 얘기다.
팀에서 적극적인 사람이 많으면 도움이 된다.
각자 할 일을 나눌 때, 하고 싶은 것을 맡는 것 보다 일의 우선 순위를 정하고 억지로라도 정하는 것이 좋다.
우리팀은 각자 하고싶은 파트를 맡아 했는데 시간관리에도 실패했고 각자 맡은 파트를 끝까지 붙잡고 있었다.
감을 못잡고 있는 나에게 언니가 mui를 활용해서 대충이라도 css를 만들면서 기능을 만들라고 했는데, 나에겐 도움이 많이 되었다.
내가 잘 모르는 탓에 joy를 써버려서 ㅎ 조금 당황했지만
그래도 그나마 진도가 빨리 나갔던 것 같다.
로그인 회원가입 구현을 처음 해보았는데 생각보다 여러가지 구현할게 많아서 힘들었다. 형식검사, 중복검사, 형식검사를 못하면 중복검사를 못하게하는 로직 등
겨우 구현을 완료했을 땐 백엔드 쪽에서 오류가 나서 서로 소통을 오랫동안 하면서 고쳐나갔는데 오류 없이 완료되었을 땐 기분이 좋았다.
솔직히 말하자면, 1차 프로젝트 때는 잘하시는 분이 하드캐리해주셔서 괴로운 마음이 컸는데, 이번에는 괴로운 마음은 많이 없었다 ㅎ
그래도 이번 프로젝트로 나는 기획을 할 때 더 재밌고 즐거운 사람인걸 깨달았다.
오히려 사람들과 소통하고, 내 의견이 되지 않아도 이걸 추진해나가는 재미도 있었고 이런걸 재밌어하는구나 라는걸 많이 느꼈다.
