[POB] POB TIL - 7

# Today I Learn - 2022.05.15

# Pre Onboarding Course

• 그립 프로젝트 완료 : 그립 영화 앱 프로젝트를 마무리하였다. react + typescrt, 리코일, 무한 스크롤, 드래그 앤 드롭 등등 좋은 경험이었다.

• 그립 무비 앱 프로젝트 코드 리뷰 : 그립 무비 앱 프로젝트 코드 리뷰가 진행되었다.

1. 텍스트 드래그 막기 : 드래그 앤 드롭 기능 구현 시 타겟 css에 use-select:none을 주면 텍스트가 드래그되는 것을 막을 수 있다. 사용자 경험이 좋아진다.
2. 커스텀 훅의 state : 커스텀 훅으로 재사용 시 복사 붙여넣기와 같은 개념이라 커스텀 훅 내부에서 사용한 state가 초기화 될 수 있다. 이럴 때 전역 상태 관리 툴을 사용하면 된다.
3. 한 가지 조건 ??연산자 : 한 가진 조건만 사용할 경우 ?? 연산자를 사용한다. (ex "a면 b이다.")
4. 네트워크 탭에 api 노출 : api 통신시 개발자 도구에서 네트워크 탭에 Header탭을 확인해보면 환경 변수로 적용하여도 api key가 노출된다. AJAX 방식으로 request를 보내는 것이라 이 정보를 숨길 수는 없다고 한다. 이 정보를 숨기기 위해서는 서버리스 백엔드를 이용하는 방법이 있다고 한다. 백엔드가 api와 직접 통신하고 프론트는 백엔드와 통신해 그 정보를 받아오는 것이다. (ex "서버리스 서비스(netlify)")
5. 국문과 영문의 폰트 적용 순서 : 폰트 적용 순서를 고려해야한다. 국문을 먼저, 영문을 나중에 넣는 것이 좋다. 영문은 국문이 지원안되는 경우가 많기 때문이다.
6. 이미지 태그의 onError : 이미지 태그의 onError를 사용하여 이미지가 없는 경우 에러 처리를 할 수 있다. (ex "api로 이미지 주소 불러올 때 이미지 주소가 N/A로 오는 경우")
7. backdrop-filter속성과 브라우저 지원 범위 : backdrop-filter 속성을 활용하여 블러처리를 할 수 있다.
8. 브라우저 지원 범위 : backdrop-filter와 같이 생소한 css의 경우 can i use(https://caniuse.com/)에 검색해보며 지원하는 브라우저 범위를 확인해봐야한다.
9. 웹팩의 prefix처리 : prefix로 크로스 브라우징 이슈를 해결하고는 했는데 웹팩은 auto prefixer가 들어가 있기 때문에 알아서 해결해준다.
10. 쿼리 스트링 활용 : 검색 기능 구현 시 쿼리 스트링을 활용하면 사용자가 검색 결과를 다른 사용자들과 공유할 수 있다.
11. promise의 finally 활용 : 기본적인 자바스크립트 문법을 잊어버리지 말자. 비동기 통신 후 성공 실패 여부 관계없이 finally의 콜백 함수를 활용할 수 있다.
12. 로컬스토리지 유지를 위한 아톰의 recoil-persist : atom 사용 시 로컬스토리지에 데이터를 저장 후 새로고침 및 재접속 시 데이터를 유지하기 위해 recoil-persist를 사용할 수 있다.
13. text-align의 start는 미사용 : text-align의 start보다는 left를 사용하는 것이 권장된다.
14. 무한 스크롤 구현을 위한 react-intersection-observer : 무한 스크롤 구현 시 react-intersection-observer 라이브러리를 사용할 수 있다.
15. react 프로젝트의 git 배포 : react 프로젝트의 git 배포 시 404에러가 나타날 수 있다. git 배포는 spa를 지원하지 않기 때문이다. 이러한 에러 사항들을 404.html을 생성하여 우회하는 방법으로 해결할 수 있다.
16. react 렌더 부분의 함수 사용 자제 : react return문 렌더 부분에 함수를 즉시 실행하는 것은 자제해야 한다. (ex <Button name={IsOpen() ? 'A' : 'B'}></Button>)
17. 기본 alert는 사용을 자제 : 기본 alert는 사용을 자제해야한다.
18. 데이터 key값이 이상한 경우 디스트럭처링 활용 : api 통신 후 데이터 key값이 이상하게 하는 경우 디스트럭처링을 활용하여 새로운 key를 할당하여 사용할 수 있다. 즉 key를 변수에 담는 것과 같은 것이다. (ex "const {Title: title, Year: year, ImdbID: imdbId, Type: type, Poster: poster } = res.Data") 또한 이처럼 api 통신 후 reponse를 디스트럭처링하여 짧게 사용할 수 있다.

• 강의 내용

1. useQuery의 캐시 저장 : useQuery는 캐시를 자동으로 저장해둔다. 데이터가 변할 때만 데이터를 재요청한다. 최상단 배열이 캐시 key값이 된다.
2. useQuery의 api 요청 실패 : useQuery로 api 요청 시 실패하면 자동으로 3번 정도 자동으로 요청을 re try(다시 시도)한다.
3. useQuery의 suspense를 활용한 로딩 : useQuery의 suspense 속성을 주고 suspence 컴포넌트에 fallback props로 api 연동 시 로딩을 구현할 수 있다.
4. 반응형 작업 시 유의사항 : 모바일을 먼저 작업 후 데스크탑 작업을 하는 것을 권장하셨다. 이유는 구글링해보면 나온다. 퍼블리싱했을 때 경험을 비롯해서 생각해보면 레이아웃이 큰 상태서 줄어들면 깨지는 경우가 많아서 그런 것 같다.
5. 검색어 입력 시 입력마다 호출하지 않고 호출 횟수 줄이기 : 디바운싱 쓰로틀링 axios 캔슬토큰을 활용한다.

# Takeaway

오늘은 그립 프로젝트를 완료하였다. 타입스크립트를 사용한 프로젝트가 처음이었고 멘토님께서 제시해주신 린터에 맞추어 작업을 하다보니 더 어려웠었던 것 같다. 또 프로젝트 구조 잡는 것이 얼마나 중요한 것인지 느낄 수 있었다. 프로젝트 구조를 제대로 잡지 않으면 같은 작업을 반복할 수 있기 때문에 애초에 프로젝트 시작 단계에서 구조 설계를 효율적으로 해놓은 뒤 작업하는 것도 좋은 방법이라고 생각이 되었다. 또한 상태관리를 위해 리코일을 사용하였는데 새로고침 시 로컬스토리지 데이터가 날아가 useEffect hook으로 고치기 위해 엄청 고생하였는데 리코일 라이브러리 중 로컬스토리지에 저장하는 라이브러리가 있어 결국 그것을 사용하였다. 이번 프로젝트를 진행하며 타입스크립트, 리코일, 무한 스크롤, 리액트 프로젝트 배포 등등 많은 경험을 할 수 있었던 것 같다. 가장 아쉬운 점은 프로젝트 완료 시점을 잘못 알아 기획 단계에서 시간을 많이 잡아먹었던 것 같다. 피그마를 활용하여 기획서를 작성하였는데 이 부분에 쓸데없는 시간을 많이 투자했다. 다음부터는 꼭 일정을 잘 살펴보아야겠다. 그래도 정말 많이 성장할 수 있는 기회가 된 것 같다. 다음에 시간 될 때 마무리가 덜 된 드래그앤드롭 기능을 수정해야겠다. but.. 내일부터는 또 새로 프로젝트가 시작되기 때문에 시간날 때 해야겠다. 지나간 일은 붙잡지 말고 오늘 해야하는 일에 집중하자!! 화이팅!!