[ TIL ] 2022-05-08

Gorae·2022년 5월 8일
0
post-thumbnail

Tips

  • caniuse.com 사이트

    https://caniuse.com/ciu/comparison
    써도 되는 기능인지 브라우저별로 확인 가능

  • 라이브러리 탐색

    해당 라이브러리 github issue 에서 검색해보면 당면한 모든 문제를 거의 해결 가능. 관리 중인 라이브러리인지 확인 가능.

  • 3일 과제라면 2일 안에 끝내고, 1일은 test, bug fix 등에 써야 한다

  • 한 파일 내 코드는 150줄을 넘어가지 않도록 쓰는 게 가독성에 좋다

  • 한 파일 내 컴포넌트는 하나만!

Javascript

  • dayjs 라이브러리

    2KB 밖에 안되는 용량으로 무거운 momentjs 를 대체한다
    https://day.js.org/

  • storejs 라이브러리

    localStorage 사용을 더 짧은 코드로 편하게 사용할 수 있다
    https://github.com/jaywcjlove/store.js

  • slickjs 라이브러리

    케로셀(carousel) 구현에 쓴다
    https://kenwheeler.github.io/slick/

  • setTimeout 은 반드시 clearTimeout 과 함께 써라

  • a ?? b
    a 가 있으면 넣고, 없으면 b 넣는다는 문법

React

  • useCallback, useMemo

    useCallback 은 함수를 기억, useMemo 는 값 자체를 기억. 기억한다는 말은 메모리에 저장된다는 뜻이다. 고로, 연산량이 많다면 쓰는 게 좋지만, 용량 부담에 비해 성능 개선이 뛰어나지 않으므로, 잘 생각해서 써야 한다. 언제 쓸 지는 경험으로 배워라.

  • React context

    https://ko.reactjs.org/docs/context.html
    React context는 React 에서 기본으로 제공하지만, 퍼포먼스가 느리다. 테마 관리(다크모드 등) 등에만 쓰는 것을 추천.

  • react-use 라이브러리의 useMount

    https://github.com/streamich/react-use
    useMount() 는 useEffect()를 단 한 번만 실행하게 하는 것과 동일하게 동작함!

  • state 에 객체는 넣지 않는 게 좋다. 객체 참조값이 바뀌지 않는 이상 값이 바뀌기 어렵기 때문이다.

Recoil

  • key 값에 '#' 넣는 등으로 구별해주면 편함

HTML

  • mark, time, dl, dt, dd 등 semantic 태그 사용 습관을 늘릴 것

CSS

  • 밀어서 지우는 애니매이션 효과 구현

    overflow-x scroll 을 써서 스크롤만 가려주면 구현 가능하다. 모바일에서도 터치 적용된다.

  • 라이트 모드, 다크 모드 테마는 :root 에 적용하는 게 좋다

이미지 최적화

  • https://squoosh.app/
    압축률, 리사이즈 등으로 이미지 최적화가 가능한 사이트.

콘텐츠 이미지는 디자이너가 작업하지 않고 개발자가 챙겨야 하는 경우가 많다. 용량을 줄여서 로딩 속도를 올리는 개발자가 되자!

  • 개발자 도구에서 network 열어서 size 크기로 정렬해보면 용량이 가장 큰 파일을 볼 수 있음

  • 색이 많은 사진 : JPEG 로 해주면 safari 도 지원 가능(WebP 는 최신 사파리에서만 된다)

  • 색이 적은 사진(클립아트 느낌의 사진) : PNG 로 해주면 됨

  • GIF 는 용량이 크므로, 웬만하면 쓰지 말 것

VSC

  • parse to json 익스텐션
    API 가져올 때 편하게 볼 수 있음

  • JSON to ts 익스텐션
    API 가져올 때 자동으로 타입 생성을 해줌

Typescript

  • 리턴값은 타입추론으로 둬도 무방하지만, props 는 무조건 타입을 명시해야 한다
profile
좋은 개발자, 좋은 사람

0개의 댓글