221218 WIL 항해99 5주차 주특기 심화주차

1.  Redux toolkit

 리덕스 툴킷은 우리가 이전에 배운 리덕스를 개량한 것

코드는 더 적게, 그리고 리덕스를 더 편하게 쓰기 위한 기능들을 흡수해서 만든 것이 리덕스툴킷 입니다. 줄여서 RTK 라고도 합니다.

 

Redux Devtools

 현재 프로젝트의 state 상태라던가, 어떤 액션이 일어났을 때 그 액션이 무엇이고, 그것으로 인해 state가 어떻게 변경되었는지 등 리덕스를 사용하여 개발할 때 아주 편리하게 사용할 수 있습니다.

 

Flux pattern

Flux는 redux의 데이터 흐름 패턴입니다.

참고자료: https://bestalign.github.io/translation/cartoon-guide-to-flux/

Flux로의 카툰 안내서

 

2. json-server

아주 간단한 DB와 API 서버를 생성해주는 패키지

front-end 개발시에 back-end에서 서버 개발이 되지 않았어도 개발을 할 수 있도록 독립적,임시적으로 사용할 수 있는 서버

db.json이라는 파일에 db를 저장하고 사용한다.

 

api란? 정의 및 프로토콜 집합을 사용하여 두 소프트웨어 구성 요소가 서로 통신할 수 있게 하는 메커니즘

Application Programming Interface(애플리케이션 프로그램 인터페이스)의 줄임말

 

Axios

• Axios란?  http를 이용해서 서버와 통신하기 위해 사용하는 패키지
•  Axios 메소드
  • GET: 서버의 데이터를 조회할때 사용
  • POST: 서버의 데이터를 추가할때 사용
  • DELETE: 서버에서 데이터를 지울 때 사용
  • PATCH: 서버의 데이터를 수정할 때 사용
• 더 알아보면 좋을 키워드
  1. axios instance 란 무엇이고, 왜 사용할까?
     • 반복적으로 사용하는 axios를 좀더 간편하게 사용하고, 유지보수에 용이하게 하기 위헤 instance를 만든다.
  2. axios intercepter란 무엇이고, 왜 사용할까?
     • Axios는 HTTP 요청과 응답을 가로채는 Interceptor를 지원
     • Axios 인스턴스는 요청과 응답에 대해 각각 Interceptor 관리자를 가지고 있고, 이 관리자들은 요청이나 응답을 가로챌 때 실행할 핸들러를 관리
  3. fetch에 비해 axios가 더 좋은 점은 무엇인가?
     • Fetch 와 axios는 모두 promise 기반의 HTTP 클라이언트입니다. 즉 이 클라이언트를 이용해 네트워크 요청을 하면 이행(resolve) 혹은 거부(reject)할 수 있는 promise가 반환됩니다.
     • fetch
       • 장점
         • 자바스크립트의 내장 라이브러리 이므로 별도로 import 할 필요가 없습니다.
         • Promise 기반으로 만들어졌기 때문에 데이터 다루기 편리합니다.
         • 내장 라이브러리이기 때문에 업데이트에 따른 에러 방지가 가능합니다.
       • 단점
         • 지원하지 않는 브라우저가 존재 (IE11...)
         • 네트워크 에러 발생 시 response timeout이 없어 기다려야 합니다.
         • JSON으로 변환해주는 과정 필요합니다.
         • 상대적으로 axios에 비해 기능이 부족합니다.
     • axios
       • 장점
         • response timeout (fetch에는 없는 기능) 처리 방법이 존재입니다.
         • Promise 기반으로 만들어졌기 때문에 데이터 다루기 편리합니다
         • 크로스 브라우징 최적화로 브라우저 호환성(구형 브라우저 지원)이 뛰어납니다.
       • 단점
         • 사용을 위해 모듈 설치 필요합니다. (npm install axios)
  4. http status code는 어떤 것들이 있고, 각 code는 어떤 의미로 약속됐을까?
  5. request headers와 response headers의 정보들은 각각 어떤 정보들일까?

 

비동기 처리를 다루는 방법

1. promise
   • 내용은 실행 되었지만 결과를 아직 반환하지 않은 객체
   • Promise의 3가지 상태
     • Pending (대기): 비동기 처리가 아직 완료되지 않음
     • Fulfilled (이행): 비동기 처리가 완료되었음
     • Rejected (실패): 실패하거나 오류가 발생
2. async와 await
   • 기존의 callback 이나 Promise 의 단점을 해소하고자 만들어진 비동기 처리 문법
   • await 는 async 함수 안에서만 동작한다.
   • async/await 은 Promise 와는 다르게 에러를 핸들링 할 수 있는 기능이 없다. 따라서 try-catch() 문을 활용하여 에러를 핸들링 하여 주어야 한다.
3. promise와 async/await의 차이점
   • Promise 를 활용할 시에는 .catch() 문을 통해 에러 핸들링이 가능하지만, async/await 은 에러 핸들링 할 수 있는 기능이 없어 try-catch() 문을 활용해야 한다
   • async/await 은 비동기 코드가 동기 코드처럼 읽히게 해준다. 코드 흐름을 이해 하기 쉽다.
   • 코드가 길어지면 길어질수록, async/await 를 활용한 코드가 가독성이 좋다.