0510 TIL

새로 배운것

classnames

// 조건부 사용
<li key={i.id} className={cx(styles.navItem, { [styles.clicked]: clickedtNav === i.id })}>

.env

• process.env 는 실행시 로드되기 때문에 .env의 설정을 바꾸게 되면 React 다시 구동해야함
• REACT_APP 은 약속, 데이터는 REACT_APP 으로 시작해야함

Etc )

리액트 변화

https://github.com/reactjs/rfcs/blob/useevent/text/0000-useevent.md

리액트 코드를 갈아엎을만한 변화가 올지 ..?!

강의

components

• common으로 하나 더 나눠서 자주쓰이는 컴포넌트는 common으로 빼주기
• 나머지는 바깥으로

children 대신 outlet

react suspense

데이터를 가져오기 위한 Suspense (실험 단계) - React

• 로딩 처리

axios

• 인스턴스를 만들어 쓸 것
• try,catch ,finally(얘까지 써주는게 좋음)
• then은 취향차이

typescript

❗️ any는 절대 절대 금지! (그냥 안쓰는 습관을 아예 들이자)

type vs interface

• type : 나열이 되는 형태에 적합
• interface : 보통 interface를 쓰는게 좋음

type AType = 'aa' | 'bbb' | 'ccc'
interface AInter {
  children?: ReactNode:
}

interface BInter extends AInter {
    
}

type BType = AType & | {}

typescript 팁 : 마우스 올리면 어떤 type이 들어가야하는지 알려줌

debounce 추천 delay

Tips : 기획에 많이 따라가지만 추천은 300을 많이 함

ESLint

린터 절대 네버 네버 끄지말기 앞으로 개발하면서 무조건 린터는 항상 켜져있어야 한다

(코드리뷰 할때 린터 끈거같다구 지적받았다 ,,, 린터 사용하려 했습니다 ㅠㅜ 설정을 코치님꺼를 보고 복붙했다 생각했는데 빼먹은게 있어서 동작을 안한것 같습니다...😢)

어쨌든 앞으로 린터는 항상 사용할 것 한번 따로 정리해보고 세팅해보는것도 좋을 거 같다.

함수 선언식 vs 함수 표현식

질문했던 내용이고 취향차이라고 답변을 주셨다

• 함수 선언식 : function Component(){}
• 함수 표현식 : const Component = () ⇒ {}

그 외.

• isLoading과 isFetching
• 앞에 +붙여서 숫자로 변환하는거 그닥 좋아하지 않음 (Number로 확실하게 변경 해줄 것) 가독성 면에서 이게 맞는것 같다

recoil

• 너무 전역에서 쓰려고 안해도됨
• 한 가족안에서 쓰는것을 권장

redux toolkit ( 나중에 배울 것 )

React Query

• 현업에서 선호,,
• 따로 정리를 한번 해야겠다.

내 코드 리뷰

• template 형태니까 template으로 써도 좋을듯 (문제되진 않음)

• 모듈 소문자로 쓰는거 추천함

• axios module

  • axios after request
  • axios interceptors
  • npm camelcase

• api 모듈에 async 빼기( comment : 필요없는 코드인데 넣었다 )

• 쿼리스트링 그대로 쓰지말고 오브젝트로 변경하기

코드 까이는거 두려워하지마라!!! 그게 결국 발전이 될 길 ❗️❗️❗️

📝해야할 일

• ESLint 모든 규칙들이 잘 적용되고 있는지 재 확인
• 코드 리뷰 받은 사항 리팩토링
• React Query 정리
• 검색 페이지 구현 완성하기