[ TIL ] 2022-05-15

Tips

• API 가 구리게 와도 코드가 구려지면 안됨! API 명세와 데이터 타입이 맞지 않는 경우는 매우 흔한 일이다
• 폴더 구조는 팀 마다, 회사 마다 기준이 다름. 현재는 본인의 기준을 세울 수 있으면 된다.
• import 정렬 기준

  맨 위: node_modules 에서 받아와야 하는 것
  맨 아래: 컴포넌트

• query string 을 만들어 두면, 검색 결과를 공유할 수 있게 됨.(당연함!)
• 화면 구현은 모바일 -> 데스크탑 순서로 진행하라(작은 것에서 큰 것으로 나아가야 수정할 게 적다)

CSS

• user-select : none;

  • 드래그 앤 드롭 시 텍스트 선택을 막아준다
    https://developer.mozilla.org/ko/docs/Web/CSS/user-select

• font

  • font-family 는 앞에서부터 순서대로 해당 폰트가 있으면 적용, 없으면 그 다음 순서로 넘어간다
  • Google Fonts 의 Inter 는 한글 폰트가 없다
  • text-transform: 대소문자 변환. 한국어는 ❌
    https://developer.mozilla.org/en-US/docs/Web/CSS/text-transform
  • letter-spacing: 글자 간격 조절
    https://developer.mozilla.org/ko/docs/Web/CSS/letter-spacing

• Blur 배경 효과( backdrop-filter )
  realBg 와 같은 배경을 만든 뒤, backdrop-filter: blur(2.1px) 등으로 지정해주면 된다. (현재 firefox 는 ❌)

  realBg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: black;
  }

• text-align: start ❌

  text-align: left 로 써야 한다. start, end 는 아랍어 좌횡서, 우횡서 등을 위해 쓰이는 것.
  https://developer.mozilla.org/ko/docs/Web/CSS/text-align

HTML

• dl, dt, dd 사용할 것

<dl> // wapper
  <dt>Year</dt> // title
  <dd>2022</dd> // description
</dl>

• aside : 모달, 사이드바 등 본문과 관련 없는 것을 넣음
• section : 일반 컨테이너로 사용하지 말 것. div 로 대체.

react-query

자동 캐싱을 지원한다!
https://react-query.tanstack.com/overview

Redux

https://ko.redux.js.org/introduction/getting-started/
핵심 개념: createStore , Store, combineReducers, Core Concepts