개발 일기 및 회고/회고

WIL 0606 ~ 0612 5주차 회고

B_Tae 2022. 6. 12. 23:19

3주차 Week I Learn (주특기 1주차)

이번 주 키워드

  1. axios

axios

axios는 비동기 HTTP 통신을 할 때 사용된다.

javascript에서는 보통 ajax , fetch, axios를 사용하는데 이 장단점을 비교해보자

ajax - Asynchronous JavaScript And XML

자바스크립트를 이용해 클라이언트와 서버 간에 데이터를 주고받는 비동기 HTTP 통신이다.
XMLHttpRequest 객체를 이용해 전체 페이지가 아닌 필요한 데이터만 불러 올 수 있다.

장점
Jquery를 통해 쉽게 구현이 가능하다.
Error, Success, Complete의 상태를 통해 실행 흐름을 조절할 수 있다.

 

단점
Jquery를 사용해야만 간편하게 구현 할 수 있고 호환성을 보장 받을 수 있다.
Promise 기반이 아니다.

axios

FE만 사용하는게 아닌 node.js도 사용할 수 있고 Promise API를 활용한 HTTP통신 라이브러리이다.
비동기 통신도 가능하고 return 값을 객체로 주기 때문에 response데이터를 받고 다루기 용이하다.

장점
response timeout 처리 방법이 존재하다. (fetch에는 없는 기능 중 하나)
Promise기반으로 만들어졌기 때문에 데이터를 다루는데 용의
브라우저와 호환성이 뛰어나다.

 

단점
사용을 위해서는 모듈을 설치 해야한다.

fetch

ES6이후 들어온 JS 내장 라이브러리이다.
axios와 마찬가지로 Promise 기반으로 통신하기 때문에 response 데이터를 다루기가 쉽고, 내장 라이브러리이기 때문에 별다른 설치가 없다.

장점

  • 내장 라이브러리여서 별도로 설치 import 필요가 없다
  • Promise기반으로 axios와 같이 데이터를 다루기 편리하다
  • 내장 라이브러리이기 때문에 업데이트에 따른 에러 방지가 가능하다.
  • 단점*
  • 익스플로러처럼 지원하지 않은 브라우저가 존재한다.
  • 네트워크 에러 발생 시 response timeout이 없기 떄문에 기다려야 한다(axios와 큰 차이점)
  • JSON 방식으로 변환해야한다 (axios는 자동으로 변환해준다)

이렇게 보면 axios가 제일 좋아보이는게 사실이지만 업데이트가 빠른 경우에는 독이 될 수도 있을 것 같다.
간단한 통신이나, React-Native와 같이 업데이트가 빠른 경우에는 fetch가 더 안정적으로 사용할 수 있을 것 같고, 지금 내상태나 대부분의 경우 axios가 아직까지는 편하게 동작할 수 있을 것 같다.

이번주 사용해본 Axios 코드

주특기 주차가 끝나고, 미니 프로젝트 시작

드디어 주특기 심화주차까지 마무리했다. 후기에 비해 난의도가 많이 높지는 않았지만, 과제에서 만큼은 시간이 빡빡하게 느껴질 정도로 구현할 기능이 많았던 것 같다.

다행이 주특기 주차에 잘 적응하여, 큰 어려움 없이 지나갔다. 사실 어려움은 항상 있었지만 기술 매니저님과 다른 동료들에 도움으로 잘 해쳐나간 것 같다.
주특기 주차를 전체적으로 돌아봤을 때 가장 힘들게 했던 건 redux와 데이터 구조(?)였던 것 같다.
Git Hub에는 많은 레퍼지토리를 올리지 않았지만 기본 redux를 5번 정도 작성해보고 console.log을 찍어보면서 흐름을 파악 할 수 있었던 것 같다.
그리고 흐름을 파악하니 toolkit으로 전환하는 과정에서 더 부드럽게 넘어 갈 수 있었 던 것 같다. 다만 toolkit에 기능 중 30%도 사용하지 못하는 것 같은 느낌을 받아 아쉽긴 하지만 더 많은 상황과 더 많은 코드를 보면 언젠간 눈에 들어올 것이라 생각한다.

그리고 데이터 구조...... 데이터를 직접 수집?하고, 저장, 사용하는 과정에서 계속해서 사용하는게 생각보다 어렵게 느껴졌다. 그리고 아직 모듈에 나누는 기준을 정하지 못해 비효율적인 useSelector 사용이 아쉽고 연습해 가면서 모듈을 많이 자르는 연습을 해볼 예정이다.

일주일을 마치며

이제 주특기가 끝나고 프로젝트 시작이다. 주특기 주차에서 모든걸 마스터 할 수 없었기 때문에, 프로젝트 연습을 진행하면서 하고싶은 컴포넌트 효율적으로 쪼개기과 모듈을 나눠 사용하는 방법을 연습할 필요가 있을 것 같다. (물론 BE분들이 기달리면 빠르게 작성을 해드려야겟지.... )

쉬웠다면 당연히 거짓말이고 어렵고 가끔씩 멘탈이 흔들렸지만 리액트 동료들 덕분에 재밌게 지나갈 수 있었다. 분위기가 너무 좋고 계속해서 같은 반 동료들과 학습하고 싶은 욕심이 커지는 것 같다.

다음주부터 미니프로젝트 화이팅