[TIL] 원티드 프리온보딩_13일차_220515

오늘은 "그립컴퍼니" 기업과제 마무리 하는 날이었당
다 마무리 했다 생각했는데 순간 모달 UI를 바꾸고 싶어서 오전에 바로 수정하였다..!
시간이 있는데도 괜히 조급해졌는지 정신이 없었지만 마음을 다 잡고 다시 천천히 나아갔다 😣

기존 모달에는 즐겨찾기 추가/삭제 , 취소 버튼만 있었는데
모달을 눌렀다는 건 사용자가 어떤 것을 클릭했는지 정보가 나타나야하는게 아닐까 싶어서 수정하였다.🙂

영화를 검색하고 즐겨찾기로 등록할 수 있는 React Movie App

결과물은 저의 깃허브 페이지에서 확인할 수 있습니당. 💨
(나름 UI는 뿌듯.. 아닌가😖)

---

코드 & 강의 리뷰

다른 사람들의 코드리뷰를 보면서 내가 잘했다고 생각한 부분들도 있었고, '아 이 부분은 이렇게 했어도 됐겠구나!' 싶었던 것도 있었고, 이건 지울걸,, 하고 디테일한 부분을 놓친 것도 있었다. 오늘은 코드리뷰를 받아보고 싶었는데 오늘은 많이 아플 거 같아서 다음기회로 미루었다..😣

1. Image onError

영화 Api에서 이미지 url이 불러오지 않는 경우가 있었다. 나는 데이터가 N/A로 들어오면 만들어 두었던 이미지 없는 버전의(?) 컴포넌트를 불러오도록 했는데
그렇게 하지 않고 onError를 두어서 체크했어도 됐었다..! 기억해둬야징

...
import defaultImg from './Test.jpg'

...
const handleImgError = (e) => {
	e.currentTarget.src = defaultImg
}

...
<img src={이미지 url} onError={handleImgError} />

이렇게 onError로 미리 import한 이미지를 불러와 나타낼 수 있다!

---

2. git은 대소문자를 무시해..

예를 들어 파일명이 fav.tsx 였던 것을 Fav.tsx로 변경하고 다시 push를 했다고 했을 때 다른 사람들이 clone받아 사용했다고 해보자.
그때! 파일을 찾지 못한다고 빨간 에러줄이 나타난다..(당황 🥶)

그 원인은 git에서 파일명 또는 폴더명의 대소문자를 구분하지 못하는 에러가 있다고 한다.. 그래서 깃 설정에 대소문자를 무시하지 말라 하는 설정을 한다

git config core.ignorecase false

해당 명령어를 입력하고 다시 커밋 푸쉬를 하면 정상적으로 돌아간다~

---

3. 반응형은 🐴이야..?

반응형은 처음 배울때 괜히 어색하고 어려웠다... 하지만 익숙해지다보니 어떻게 레이아웃을 짜는 지 알게되었었고 재밌었당
오늘 멘토님께서 반응형은 모바일 에서 데스크탑 으로 작은 것에서 부터 큰 것으로 설계하는 것이 코드의 양도 줄일 수 있고 더 편리하다고 하셨는데 동의할 수 있었다..! 꼭 잊지 않고 기억해둘 것..!

---

4. useQuery

useQuery는 정말 놀라웠다.. QueryKey를 기반으로 api를 불러왔던 데이터 캐시를 기억해두고 같은 키값들이 들어온다면 api를 다시 호출 하는 것이 아니라 기억 해두었던 것을 이용해 화면을 나타내는 기능도 있었다.. (데이터 캐싱 관리)
좀 더 자세한 부분은 공부를 해봐야 알겠지만 유용한 훅이 될거같다! 그만큼 어렵겠지만.. 화이팅 해야지🔥

useQuery 공식문서 가기

---

마무리..

다음 과제는 휴먼스케이프 기업의 과제다.. 팀은 나누었고 이제 다시 과제 시작이다 ㅜㅜ 검색 알고리즘과제를 하게되었고 강의 시간에 알려주신 useQuery와 redux toolkit을 공부해서 구현을 하면 될 것 같다.
검색 키워드는 fuzzy 문자열 검색을 지원해야하고, 사용자가 입력한 검색어에 일치하는 부분 볼드 처리를 해야하는 도전 과제도 있다. 볼드처리는 mark태그를 이용해서 구현하면 될 것 같다..