미니프로젝트 주차 시작 소감
이번주차부터 시작된 프론트&백엔드 협업 프로젝트..!!!
여태까지 리액트 기초-숙련-심화 과정을 거치면서 리액트랑 친해지는 것 만으로도 미션이었는데, 이번에는 그 모든 기술들을 총 동원 + 백엔드 분들과 원활한 소통까지 필요해서 더욱 신경쓸게 많은 것 같다.
무엇보다도 지금까지는 회원가입/로그인은 파이어베이스 auth를 사용하고 이미지 업로드 같은 경우도 storage를 이용했는데, 처음으로 백엔드분들과 작업을 진행하려니 이런 부분들을 어떻게 처리해야할지 모르겠어서 막막함이 컸던 것 같다.
무엇보다도 팀에 민폐가 되지 않기위해..ㅜㅜ 내가 맡은 역할은 잘 해내고 싶은데, JWT토큰을 이용한 로그인 인증 처리를 실제로 작업해보려니 그거에 대한 가이드라인도 없고, 구글링해서 나오는 자료는 너무 방대하고, 프론트에서는 어느정도까지 처리를 해야하는건지 모르겠어서 그런것들을 위주로 찾아보고 공부하느라 진이 다 빠졌던 것 같다.
우선 백엔드분들이 너무 깊게 빠지지말고, 로그인 우선 처리해서 정리되면 알려줄테니 프론트에서 데이터 연결하고 API 통신하는것부터 진행하면 될 것 같다고 방향을 잡아주셔서 우선 내가 해오던 작업에 집중해보기로 했다!!!
이번에도 팀원분들 운이 좋은 것 같다..ㅜㅜ 다들 으쌰으쌰 하면서 서로 배려하고 도우려는게 느껴져서 너무 고마웠다.
데이터가 준비돼서 연결하고나면 그때부터 실제로 테스트 해보면서 감을 잡지 않을까 싶다!
이번주차 시작된 금요일부터 어제인 토요일까지 저런 고민들때문에 머릿속이 너무 혼란스러웠는데.. 결국엔 의지는 앞서가는데 지식은 부족하고 부담을 너무 가진게 문제인 것 같다. 내일부터는 우선 내가 할 수 있는 작업부터 집중해서 진행해봐야겠다!!! 화이팅!!!!!
Axios?
Axios 개념
서버와 클라이언트는 REST API를 통해 소통하는데, 클라이언트가 REST API를 호출하면 서버는 응답을 보내준다. 그리고 이 통신을 쉽게 할 수 있도록 돕는게 HTTP 비동기 통신 라이브러리인데 그 중 하나가 Axios이다.
XMLHttpRequest를 배이스로한 프라미스 기반의 라이브러리이며, node 런타임과 브라우저 양측에서 모두 돌아간다.
Axios의 특징
- 운영 환경에 따라 브라우저의 XMLHttpRequest 객체 또는 Node.js의 http api 사용
- Promise(ES6) API 사용
- 요청과 응답 데이터의 변형
- HTTP 요청 취소
- HTTP 요청과 응답을 JSON 형태로 자동 변경
Axios 문법과 주요 파라미터
axios({
url: 'https://test/api/cafe/list/today', // 통신할 웹문서
method: 'get', // 통신할 방식
data: { // 인자로 보낼 데이터
foo: 'diary'
}
});- method : 요청방식. (get이 디폴트)
- url : 서버 주소
- headers : 요청 헤더
- data : 요청 방식이 'PUT', 'POST', 'PATCH' 해당하는 경우 body에 보내는 데이터
- params : URL 파라미터 ( ?key=value 로 요청하는 url get방식을 객체로 표현한 것)
- withCredentials : cross-site access-control 요청을 허용 유무. 이를 true로 하면 cross-origin으로 쿠키값을 전달 할 수 있다.
Axios의 응답 데이터
axios({
method: "get", // 통신 방식
url: "www.naver.com", // 서버
})
.then(function(response) {
console.log(response.data)
console.log(response.status)
console.log(response.statusText)
console.log(response.headers)
console.log(response.config)
})data {}: 서버가 제공한 응답(데이터)status: 200: status는 서버 응답의 HTTP 상태 코드statusText: 'OK' : statusText는 서버 응답으로 부터의 HTTP 상태 메시지headers: {}: headers 서버가 응답 한 헤더는 모든 헤더 이름이 소문자로 제공config: {}: config는 요청에 대해 axios에 설정된 구성(config)request: {}request는 응답을 생성한 요청으로 브라우저는 XMLHttpRequest 인스턴스, Node.js는 ClientRequest 인스턴스(리디렉션)
단축 메서드
단축 메서드를 사용하면 Axios를 보다 더 간결하고 편리하게 사용할 수 있다.
객체 옵션이 많아질 경우 가독성이 떨어지고 복잡해지므로, 각 메서드를 함수형으로 재구성되어 사용할 수 있다. 주요 메서드는 아래와 같다.
GET : axios.get(url[, config])
POST : axios.post(url, data[, config])
PUT : axios.put(url, data[, config])
DELETE : axios.delete(url[, config])전역설정(Config Default)
모든 요청에 적용되는 설정의 default 값을 전역으로 명시할 수 있다.
주로 서버에서 서버로 axios를 사용할때 요청 헤더를 명시하는데 자주 쓰인다.
// Instance를 만들 때 설정의 default 값을 설정할 수 있다.
const instance = axios.create({
baseURL: 'https://api.example.com'
});
// Instance를 만든 후 defalut 값을 수정할 수 있다.
instance.defaults.headers.common['Authorization'] = AUTH_TOKEN;
instance.defaults.timeout = 2500;
instance.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
Axios로 Formdata 보내기
const addCustomer = () => {
const url = `/api/customers`;
const formData = new FormData();
formData.append("image", file);
formData.append("name", userName);
formData.append("birthday", birthday);
formData.append("gender", gender);
formData.append("job", job);
const config = {
headers: {
"content-type": "multipart/form-data",
},
};
return axios.post(url, formData, config);
};출처 https://inpa.tistory.com/entry/AXIOS-📚-설치-사용#axios란 [👨💻 Dev Scroll:티스토리]
