# Today I Learn - 2022.05.08

# Pre Onboarding Course

  1. 코드의 길이를 줄이기 위한 컴포넌트와 커스텀 훅 : 코드의 길이는 개인적인 기준으로 제한하여 작성한다. 멘토님의 경우 150줄으로 한정하였다. 코드가 길면 가독성이 떨어진다. 컴포넌트 혹은 커스텀 훅을 활용한다. 컴포넌트와 커스텀 훅의 원래 사용 이유는 재사용성이다.
  2. 라이브러리 지양 : 내장 기능으로 구현할 수 있는 경우 라이브러리를 사용하지 않는다.
  3. 메소드 내부의 변수와 함수 : 메소드 내부에서 변수 선언 및 함수 선언은 하지 말아야 한다.
  4. map index를 key로 사용시 후 가공 처리 : map 메소드 내부에서 key값을 index로 사용할 때에는 예를 들어 const key = categoris+${i}과 같이 메소드 내부에서 index를 가공하여 사용해야한다.
  5. 로컬스토리지를 편하게 사용할 수 있는 라이브러리 : store.js 라이브러리를 사용하여 로컬스토리지에 간단하게 저장하거나 가져올 수 있다. JSON.parse나 JSON.stringify 사용하지 않아도 된다. (ex store.set('user', user))
  6. 네이밍 컨벤션 : 변수, state, 함수 등 네이밍 컨벤션에 대한 중요성을 다시 한번 강조하셨다.
  7. 부동 소수점 이슈 : js에서 소수점 자릿 수가 큰 숫자를 연산할 때는 부동 소수점 문제가 발생할 수 있기 때문에 라이브러리를 사용하는 것이 좋다.
  8. alear를 사용하면 안되는 이유 : alert을 사용하지 않는 이유는 alert이 실행되면 다음 코드가 멈추는 현상이 발생할 수 있기 때문에 사용하지 않는 것이 좋다. alert사용 시 커스텀 alert(직접 토스트 메시지 구현)를 사용한다.
  9. carousel 라이브러리 : carousel 기능 구현 시 관련 라이브러리(ex slick.js)를 활용하여 구현한다.
  10. 상수 데이터의 가독성 : 함수 내부에 상수 데이터를 사용하는 경우 함수 외부로 뺴주면 가독성이 좋아진다.
  11. 메서드 체이닝의 가독성 : 메서드 체이닝의 경우 메서드마다 엔터 처리해야 가독성이 좋아진다.
  12. useMemo와 useCallback : useMemo와 useCallback을 활용한다. useMemo는 값을 저장하고 useCallback은 함수를 저장한다. 디펜던시가 변하지 않는 이상 연산되지 않는다 즉 메모리(캐시)에 값을 저장해놓고 디펜던시가 변하는 경우만 새로 연산한다. useMemo와 useCallback을 사용하지 않는 경우 렌더링 될 때마다 계산되므로 비효율적일 수 있다. 단, 무조건 사용하는 것이 아니다. useMemo와 useCallback을 사용했을 때 퍼포먼스 올라가는 대비 메모리(캐시)만 먹는 경우도 있다. 상황에 따라 적절하게 사용해야한다. 연산 횟수 혹은 연산 양에 따라 달라질 수 있다.
  13. context API의 퍼포먼스 : context API로 상태관리하는 것보다 다른 대안을 활용하는 것이 좋다. 상대적으로 퍼포먼스가 떨어진다.
  14. 컴포넌트 안티 패턴 : 안티 패턴 중 하나로 컴포넌트 두 개를 한 파일에 선언하는 안티 패턴이 있다.