[TIL] 22.05.15

05/16 TIL

리뷰 내용

• 외부 모듈은 상단에 배치하고, 내부에서 사용하는 모듈을 그 하단에 배치하자

• storejs가 import가 안된다면

  • @types/store 추가로 적용해보자

• git은 폴더명 대소문자 구분을 하지 않으므로 config 설정을 해서 case가 다른 경우 무시하지 않도록 처리해야한다.

  git config core.ignorecase false

• img 태그에는 onError 이벤트 속성을 통해서 받아온 API에 이미지가 없는 경우에 대해 조치를 취할 수 있다.

  • 대체 이미지를 넣기

  <img src="noimg.jpg" onError="this.sr='https://대체 이미지 로고.svg';"/>

  • 숨기기

  <img src="noimg.jpg" onError="this.style.display='none';"/>

  • 이 외에 노드를 제거하거나 함수를 호출하는 방법도 있다. (함수는 사용시 무한루프 주의)

• Route의 path에는 root 경로인 /를 제외하고 나머지 페이지에는 페이지명만 사용한다.

• data 태그 (용어 사전 구현 및 메타데이터 목적으로 사용)

  <dl>
      <dt>Title : </dt>
      <dd>{data.title}</dd>
  </dl>

• BackGround 이미지 특수효과 관련 속성 : backdrop-filter를 이용하면 블러, 세피아, 명/채도 등의 효과를 사용할 수 있다.

• vendor prefix 관련 : post css의 autoprefixer를 이용하면 chrome 이외 특정 브라우저를 위한 설정이 필요 없다.

• Infinity Scroll >> react-intersetion-observer

• drag and drop >> react-beutiful-dnd

• modal >> portal

• loading processing >> suspense

수업 내용

• Context API 사용 비추천
  • 코드가 더러워지고, 캐싱 속도가 느리다.
• Redux Tool kit 사용 추천
  • immerjs, thunk 등 기능 지원

휴먼 스케이프 과제 관련

• Local Cashing
  • React Query 사용
• 검색 키워드 하이라이트
  • Mark 태그로 bold 사용
• fuzzy 문자열 검색 키워드
  • 정확하지는 않지만 유사한 문자열을 찾는 검색

Redux Tool kit / CSS Theme / React Query Template 제공

• 제공되는 template
• todoItems >>
  • useDispatch, useSelector
  • system.ts > theme 관련
• weather >>
  • React Query
  • suspence, dark mode
  • responsive
    • @use response >> @include responsive.prop(value) {}
    • Mobile >> DeskTop, 작은 사이즈에서 큰 사이즈를 만드는 작업이 훨씬 코드 양이 적고 문제 발생되는 일도 적다.