[항해99] W5: 5주차 WIL - React 심화

Hello, React!

👏 리액트 숙련 주차 회고

👍 배운 점

프론트 2명의 협업 👏

►Go to project

CRUD 복습타임

• 잘하는 파트너를 만나, 2명이서 각자 구현 후 더 효율적인 코드를 사용하기로 협의하여 CRUD를 총정리하는 시간을 가졌다. (하지만, 작업시간의 차이로 인해 CRUD 반복이 들어가는 댓글 CRUD는 팀원의 코드를 사용하고, 남은 TASK를 재분장했다.)

Redux Toolkit: thunkAPI

• 전역상태관리에 Thunk와 axios를 활용하여 비동기적인 API 통신이 가능하도록, 기존 코드를 디벨롭했다.
• 기존 코드를 되짚어가며 라이브러리를 활용하여 코드를 리팩토링 하는 과정에서 data의 흐름을 다시한번 되돌아볼 수 있었다.

Mock server

• json server를 배포하여 Mock server를 구현하여 데이터가 저장되고, 저장된 데이터가 삭제가 되는지 등 구현기능을 직접 테스트 해볼 수 있게 되었다.
• Heroku 를 통해 mock server를 배포했는데, 평소에는 서버가 쉬고있기 때문에 data get 시 시간이 오래 걸린다...😭

만능 버튼! Styled Components

• 스타일링을 위한 컴포넌트를 만들어두고,
  다른 컴포넌트에서 불러와서 사용할 수 있다는 점에서 꽤나 유용하게 활용 가능할 것 같다.
  다음 프로젝트에서는 버튼 뿐 아니라 인풋, 박스 등 디자인 요소들에 활용해봐야지 😎

Mobile 반응형

🥲 아쉬운점

가능한 업무 스콥 파악 MISS

• 게시글, 댓글 CRUD를 모두 각자 진행해보기로 했지만,
  시간상 댓글은 팀원 소스를 활용하게 되었다.
  내가 소화가능한 스콥이 어느정도인지 판단 미스...
  앞으로는 좀 더 반복연습을 통해 개발속도를 올리고, 스스로 가능한 범위를 조금 더 정확하게 파악해보자!

최적화 미진행

• 프로젝트 단위 내의 아쉬운 점은 memo 최적화를 하지 않은 점이 조금 아쉬웠다.
  다음 프로젝트에서는 리듀서와 엑스트라 리듀서도 더 명확하게 구분해보고, memo 최적화를 통해 성능 최적화도 고려해봐야지!

👊 JS / React 개념다지기

Axios란?

• XmlhttpRequest 또는 Node.jsdml HTTP API 통신을 위한 라이브러리로,
  HTTP 요청과 응답을 JSON 형태로 자동 변경해준다.

axios 와 Fetch 비교

axios	fetch
라이브러리 설치 필요	브라우저 빌트인으로 설치 불필요
XSRF 보호	별도 보호 없음
data 속성 사용	body 속성 사용
data 객체 사용 가능	문자열 속성
status 200 = 성공	응답 객체 Ok 속성 포함 시 성공
자동으로 JSON 데이터 변환	.json()메소드 별도 사용 필요
요청 취소 및 타임아웃 설정 가능	별도 기능없음
HTTP 요청 가로채기 가능	별도 기능없음
Download 진행 지원	미지원

axios Request 파라미터 옵션

• method : 요청방식 (get, post, put, patch, delete 등)
• url : 서버 주소
• baseURL : url을 상대경로로 사용할 때 url 앞에 붙는 베이스 주소
• headers: 요청 헤더
• data: PUT/POST/PATCH 시 body에 보내는 데이터
• params: URL 파라미터 (?key=value 로 요청하는 url get방식을 객체로 표현)
• timeout: 요청 timeiut 발동 전 mileseconds 시간을 요청하여 타임아웃보다 요청이 길어지는 경우 자동으로 요청을 취소한다.
• responseType: 서버 응답 시의 데이터 타입 지정 가능(arraybuffer, documet, json, text, stream, blob)
• responseEncoding: 디코딩 응답에 사용하기 위한 인코딩방식 (utf-8)
• transformRequest: 서버 전달 전 요청 데이터 변경 (PUT/POST/PATCH/DELETE)
• transformResponse: 응답 데이터 생성 전 변환
• withCredentials: cross-site access-control 요청 허용 유무 (cross-origin으로 쿠키값 전달 가능)
• auth: HTTP 기본 인증 구성 가능
• maxContentLength: HTTP 응답 내용의 Max 사이즈를 지정하도록 하는 옵션
• ValidateStatus: HTTP 응답 상태 코드에 대해 Pomise 반환 값을 Resolve/Reject 로 지정가능
• maxRedirects: node.js 리다이렉트 최대치 지정
• httpAgent / httpsAgent: node.js에서 http, https 요청 시 사용자 정의 agent 정의가능
• porxy: proxy 서버의 hostname, port 설정 옵션
• cancelToken: 요청 취소 시 사용되는 취소토큰

axios Response Data

response.data: {}, // 서버가 제공한 데이터
response.status: 200, // 응답 HTTP 상태코드
response.statusText: 'OK', // 서버 응답 HTTP 상태 메시지
response.headers: {}, // 서버가 응답한 헤더 
response.config: {}, // 요청 시 axios에 설정된 구성
response.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])