원티드 프리 온보딩 8일차 TIL

엄강우·2022년 5월 10일

Wanted_Pre_Onboarding

TIL

목록 보기

7/43

오늘의 이야기

오늘은 강사님의 수업이 있는 날이었다. 수업이 있는 날이면 항상 코드리뷰를 해주시는데 코드리뷰를 해주시는 부분을 정리 하였습니다.

오늘의 TIP!

eslint, typescript를 잘 쓰는 사람이 되자.
실습을 통한 삽질을 해봐야 성장할 수 있다.
전설의 동물인 중고 신입 아니야? 의 주인공이 되어보자.
Readme를 잘써야 포폴용으로 쓸 수 있다. Readme는 설계 단계이기 때문에 폴더 구조와 같은 일련의 설명을 한다.
package-json에서 봐야할 것들
router 폴더 소문자로 시작하기
navigtion은 nav태그 쓰기
스타일 파일 명은 소문자로 하자 => 그래야 html에 class이름이 소문자로 붙는다.
component / common => 공통으로 사용할 컴포넌트들을 넣어놓자.
template를 사용하기 위해 children 대신 outlet을 쓴다 더라?
suspense를 이용해서 로딩 창을 구현해보자
axios를 일반화 해서 쓰자.
promise => try catch or 전체 try catch
useFetch에서 로딩하고 데이터를 같이 관리 해보자
typescript에서 any는 절대 금물
debounce 연타때문에 300정도? onChange에 달아보자.

구조 분해 할당

const {dataset, checked} = e.currentTarget
const {id} = dataset  // x

const {dataset : id, checked} e.currentTarget // O

findIndex로 하지말고 map()으로 한번에 하자
표현식이나 선언식으로 짜나 취향차이이다.
template형태로 layout설정을 하자.
useState() 항상 초기 값을 설정해주자.
prop 값들은 소문자로 하자.
axios에서 받은 값들을 우리 입맛대로 핸들링할 수 있기 때문에 axios를 함수로 만들어서 공통으로 이용하자.
isLoading, isFetching은 굳이 같이 쓸 필요는 없다.
type 은 |로 나열할때 쓰고 어떠한 구조를 파악하기 위해서는 interface를 쓰자.
중복되는 코드는 하나로 줄여보자.
변화에 대해 잘 생각하자. useEffect 잘 활용해보기
NavLink 써보기
Link와 navLink의 차이는? navLink는 className에 isActive가 나온다?
props 받은 값을 안쓰고 useState로 관리 하는 이유?
transition-delay 써보자

그냥 써놓고 보니까 양이 굉장히 많은데 어느 정도 알고 있는 정보도 있고 헷갈리는 부분도 다 함께 적어 놓은거이기도 하고 이런 부분을 하나하나 고쳐나갈때 마다 성장한다고 생각하니 보람찬 부분도 있는것 같다. 목록 중에서 이번 프로젝트에서 접목 시킬 부분은 볼드체로 처리하여서 특히 신경쓸 예정이다.

개인과제 속 역경

인피니티 스크롤의 끝 없는 구렁텅이
어제도 인피니티 스크롤에 많은 어려움을 겪었는데 오늘 또한 어려움이 있었고 아마 내일도 있을 것 같다. 오늘 생긴 문제는 영화를 검색한 후에 스크롤을 많이 내린 후 다시 검색을 하면 그 결과도 그 전 스크롤만큼 내려간다는 것이다.
```
useEffect(() => {
  const el = ref.current
  if (el) {
    if (movieList.length <= 10 && page <= 2) el.scrollTop = 0
  }
})
```
일단은 영화 리스크 스크롤이벤트를 붙여준 엘리먼트를 ref로 받아서 새로 검색해서 mount될때 즉 영화 검색은 10개 이하 그리고 page는 2이하 일때 scrollTop을 0으로 만들어서 스크롤을 초기화 하게끔 하였습니다. 이것이 정확한 방법인지는 모르겠지만 임박한 문제는 해결 할 수 있었습니다.