[TIL] 2022.05.08.

useMemo와 useCallback

• useMemo는 메모이즈된 값을 저장하는 hook이다.
  useMemo는 이전 값을 기억해 두었다가 조건에 따라 재활용하여 성능을 최적화 하는 용도로 사용된다.

• 반면 useCallback은 함수를 저장한다. 컴포넌트가 렌더링 될 때마다 내부적으로 사용된 함수가 새롭게 생성되는 경우, 유즈콜백을 이용하여 불필요한 리렌더링을 방지 할 수 있다.

• 이말인 즉슨 어쨌든 리렌더링을 방지하기 위해 저장해놓는 메모리를 쓴다는 소리인데, 퍼포넌스 올라가는 정도 대비 메모리 먹는게 큰것은 아닌지 판단을 잘해야 한다. 감싸는 함수가 연산량이 많은 친구면 씌우는 것이 좋고, 별거 아니라면 사용하지 않아도 퍼포먼스 차이가 크게 나는 것은 아니다.

검색 잘하는 법

• 개발하다보면 많은 에러를 접하게 되는데 에러가 나면 에러 로그가 나올거고, 그 에러로그를 검색할 줄 알아야 한다.

• 구글에 영어로 검색할 것. 영어로 검색하면 한글로 검색했을 때보다 검색결과가 20배 더 나온다. 영어 잘하자.

• 오픈소스라이브러리는 깃허브 들어가서 이슈탭 들어가서 검색하면 좋다. 현재 라이브러리에 어떤 문제가 있는지 ,이 라이브러리를 써도 괜찮을지, 잘 관리가 되고 있는지 등등 확인할 수 있다.
  예시) https://github.com/atlassian/react-beautiful-dnd/issues
  react-beautiful-dnd 라이브러리 깃허브인데 지금 리액트 18버전 지원 안돼서 난리남.

질문 잘하는 법

• 테스트환경 / 재현절차 / 실제결과(콘솔오류, 서버리스폰드 등) 상세 기재 및 캡쳐한 파일 이미지, 동영상 등 첨부하여 질문할 것.

• 커뮤니케이션은 최대한 줄일수록 좋다. 단답으로 끝날 수 있도록 한방에 통과되는 것이 더 좋은 직장 내 커뮤니케이션.

이미지 최적화 및 svg

• 직장 내의 여러 사정에 의하여 프론트엔드 개발자가 챙겨줘야 하는 경우도 있다.

• 그럴때는 아래 웹사이트를 이용하여 최적화 가능
  (이미지 사이즈 및 컬러 수 조절을 쉽게 할 수 있다.)
  https://squoosh.app/

• 한 파일에 최대 500kb 안넘게 줄여보자.

• webp는 사파리 지원 잘안돼서 jpg로 하는게 낫다.

• 색상수가 적은 클립아트는 png로 바꾸고 reduce palette로 컬러수 줄일 수 있음.

• gif는 뭔짓을 해도 png보다 용량이 더 크다.

• jpg는 기본적으로 손실압축이다.(= 원본을 뭉개서 용량 줄임)

• 게시글 이미지 업로드 같은 경우에는 이런식으로 프론트엔드 개발자가 일일이 손보는게 아니고 큰 사이즈, 작은 사이즈, 중간 사이즈로 저장되게 백엔드에서 처리해주게 해야된다.

• svg currentColor로 색상 변경하기
  currentColor 는 css로 color 값을 설정 했을 경우 그 색상 값이 적용된다.

  import { ReactComponent as Arrow } from './arrow.svg';
  
  // ...
  <Arrow
      css={{
           color: 'red', // currentColor을 넣은 구간의 색상 변경
          }}
    />

• svg 파일 안에 이상한 png파일 같은거 들어있으면 다시 달라고 해야함.

유용한 라이브러리

• store.js
  https://www.npmjs.com/package/store-js
  로컬스토리지 set, get, remove 등등 작업을 좀더 간결한 코드로 사용할 수 있다.
  ( JSON.parse JSON.stringify 안해도 된다!!!!!!)

• day.js
  https://www.npmjs.com/package/dayjs
  moment.js 보다 훨씬 가벼운 날짜 라이브러리.
  (moment.js보다 약 33배 더 가볍다고 함)

• framer-motion
  https://www.npmjs.com/package/framer-motion
  리액트에서 애니메이션과 제스쳐를 쉽게 다룰 수 있도록 해주는 라이브러리

유용한 vsCode extension

• json to ts
  JSON 데이터에서 자동으로 타입스크립트 인터페이스를 생성해준다.

dl, dt, dd 태그

• dl 태그 (Definition List)
  정의 목록. 특정 용어에 대해 정의하는 제목과 그 제목에 대한 설명을 담는다.
  기본적으로 block요소의 속성을 갖고 있다.

• dt 태그 (Definition Term)
  정의 되는 용어에 대한 제목을 나타낸다. 기본적으로 block요소의 속성을 갖고 있다.

• dd 태그 (Definition Description)
  정의된 제목에 대한 설명을 나타낸다. 기본적으로 block요소의 속성을 갖고 있다.

기타등등

• 엔터치면 결과 전송되는 검색창 구현할 때 이벤트리스너 keyEvent 쓰면 HTML기초가 하나도 없는 사람처럼 보임. form태그와 onsubmit을 쓰자!!!!
• setTimeOut 넣으면 clearTimeout도 반드시 넣어줘야 한다. 안그러면 라우팅했을때 난리남.
• 안쓰는코드 바로바로 안지우면, 나중에 발견했을 때 이걸 지우면 큰일나는게 아닐까 공포에 떨어야 한다.
• 욕심은 최대로, 실현도 최대로 !!!