[TIL] 2022-05-17

코드리뷰

• 시간 관련 라이브러리 : Day.js

• deps 너무 깊게 하지 말자

• 리턴 안에 삼항연산자 쓰지말기

• 리액트는 폴더, 파일 정리 중요..

• typescript union type

• 모달, 팝업 : react-modal 라이브러리 쓰거나 react-potal

• useEffect에 함수 길게 넣지 말기. 빼서 쓰기 -> 가독성 중요

• props랑 변수명 똑같이 일치시키기

  • 아니면 useMemo로 빼기

• 리턴 안에 Deps로 길게 넣지 말기 -> 한 줄로 끝내기

• 로딩중일때는 api 멈추도록 하기

• 시맨틱태그 중요! (header, main, footer)

• 배열인지 아닌지 확인하는 거 length보다 lodash에 있는 기능 사용하기

• state는 많아도 다섯 개만

• store.js 쓰면 JSON.stringfy 안써도 됨

• 폰트 추천 : 프리텐다드

• interactive observer 직접 구현해보면서 진행

• cors

  • 최소한의 보안을 신경쓰기 위해서 하는 것
  • 웹 사이트에서 한 서버를 요청할 때 도메인을 어디서 요청했는지 정보를 받을 수 있다.
  • 같은 회사에서만 쓸 수 있도록 해야하므로 cors 에 등록해야한다.
  • 서버가 cors가 다르면 돌려보내는 것
  • cors 오류인 경우
    • cors 오류가 아니라 클라이언트 오류인데 띄우는 경우가 있다.
      -> 이런 경우는 싹 다 디버깅을 해야한다.

netlify

• 깃허브 연동해두면 알아서 접속해서 처리해줌
• 배포할 때는 warning도 뜨면 안된다.
• environment variables에 key 설정하면 됨!! (환경변수 적용)
• 새로고침을 했을 때 404뜨는 문제 해결
  • create react app deployment

staleTime

• 시간 동안 재요청하지 않는다
  • api요청 너무 많이하는 거 방지

favicon

• 페이지 상단에 (주소창?)에 아이콘 추가하기
• favicon generator
• 사이즈별로 다 넣어주어야 한다.

web font

• 현재는 구글 폰트를 가지고오도록 설정되어있음
  • font.scss에서 수정
• wff, woff2만 사용하면 됨
• 구글 폰트에서 폰트를 선택하면 자동으로 링크가 만들어진다.

IE 사용자 쫓아내기

• index.html - div root에 [if-IE] 넣으면 됨

구글 애널리틱스

• 포트폴리오 사이트에 누가 들어왔는지 보는 방법

gaEvent

기능이 잘 작동하는지 확인하는 방법

• gaEvent() 를 통해 handleChange될 때마다 확인할 수 있다.