[WIL] 5주차 항해 회고록, [TIL]항해 34일! 그리고 TIL 5일차!

5주차에 메인 기능은 axios를 사용하여 백엔드에서 만든 서버를 어떻게 프론트엔드에서 이용하는 것입니다.

오늘 한 일 - axios 공부!

 

로그인 기능, 회원가입 그리고 글 작성 기능을 구현할 때 사용했습니다.

아직 연결은 하지 못 했지만 console.log()을 사용하여 구현하고 있습니다. 

 

현재는 json-sever를 만들어서 활용했습니다

 

 

 

axios를 먼저 api.js에 임포트해준 뒤 이스포트까지 해줍니다.

 

그 후 리덕스에 api.js를 임포트해준 뒤 사용해줍니다.

로그인 기능과 회원가입 기능을 구현할 때 입력한 아이디 비밀번호 값을 post해 줍니다. 그리고 이때 서버에서 보내주는 토큰이 있을 경우 localStorage.setItem에 있는 토큰에 넣어 주고 페이지에서 사용할 name도 넣어줍니다.

회원가입 시에는 정보만 넘겨줍니다.

 

 

글 추가 기능도 form 형태로 만들어 서버에 보내줍니다.

이때 토큰 값을 가지고 있어야 하므로 헤더와 함께 있는 토큰을 활용합니다.

 

+)추가적으로 좋아요 기능의 경우

   좋아요를 추가할 경우 기존의 값에 post로 추가하고 좋아요를 빼줄 경우 삭제가 아닌 put으로 수정을 해줍니다.

 

 

axios 특징

• Axios는 브라우저, Node.js를 위한 Promise API를 활용하는 HTTP 비동기 통신 라이브러리입니다.
• 쉽게 말해서 백엔드랑 프론트엔드랑 통신을 쉽게하기 위해 Ajax와 더불어 사용합니다.
  - 저는 AJAX보다 AXIOS를 훨씬 많이 사용합니다.
• 운영 환경에 따라 브라우저의 XMLHttpRequest 객체 또는 Node.js의 http api 사용
• Promise(ES6) API 사용
• 요청과 응답 데이터의 변형
• HTTP 요청 취소
• HTTP 요청과 응답을 JSON 형태로 자동 변경

 

 

내일 할 일

만들어진 서버에 로그인과 회원가입 기능을 넣어보고 사용하고 활용해 볼 것입니다.

 

그리고 각자 맡은 부분에 대해 더 깊게 공부하고 전 기수의 깃헙을 공부하려고 합니다.