[TIL] 2022-05-17

malgam·2022년 5월 17일
0

TIL

목록 보기
10/21

코드리뷰

  • 시간 관련 라이브러리 : 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될 때마다 확인할 수 있다.
profile
전 척척학사지만 말하는 감자에요

0개의 댓글