도리쓰에러쓰

[TIL] 프리온보딩 15일차 - 220517 본문

Project/원티드 프리온보딩 프론트엔드 코스

[TIL] 프리온보딩 15일차 - 220517

강도리 2022. 5. 17. 23:18

1️⃣ 절대경로 설정 방법

>> tsconfig.json

"compilerOptions": {
    "baseUrl": "src"
  }

 

 

2️⃣ Delete 'CR; eslint (prettier/prettier) 에러

한 줄마다 Delete 'CR; eslint (prettier/prettier) 라는 에러가 생겼다.

그래서 아래와 같이 수정하였다.

 

- prettierrc.js에서 endOfLine: 'auto'로 수정

module.exports = {
  bracketSpacing: false,
  jsxBracketSameLine: true,
  singleQuote: true,
  trailingComma: 'all',
  endOfLine: 'auto',
};

 

- vscode 하단바에 CRLF를 LF로 설정 변경

 

 

3️⃣ typescript union type

ts를 사용하면서 type을 어떻게 지정해줘야하는지 어려울 때가 있었다.

근데 ts union type을 사용하면 any를 사용하지 않아도 타입 추론이 더 명확해진다.

사용 방법 : 자바스크립트의 OR 연산자처럼 사용하면 됨 (A || B)

 

 

4️⃣ staleTime

staleTime을 작성하면 그 시간동안 같은 값이 들어와도 재요청하지 않는다.

( 아래 코드는 60분 사이에 같은 값이 재요청하지 않고 데이터 가져옴 )

const { data, refetch } = useQuery(
    ['getWeatherForecast5DaysApi', lat, lon],
    () => getWeatherForecast5DaysApi({ lat: Number(lat), lon: Number(lon) }).then((res) => res.data),
    {
      refetchOnWindowFocus: false,
      useErrorBoundary: true,
      staleTime: 6 * 10 * 1000,
    }
  )

 

 

5️⃣ IE 사용자 쫓아내기

- public > index.html

<body>
...
<!-- [iF IE]>
	<div id='ieGuide">
    	<h1>IE 쓰지 마세요</h1>
    </div>
<![endif] -->
...
</body>

 

 

💡 소소하지만 알찬 꿀팁 !

- useQuery pagination 지원 가능하여 setState 사용할 필요 없음

- 삼항연산자에 리턴값 넣지 않기 ! ( 가독성이 안좋고, depth가 깊어짐 )

- modal, popup창은 react potal 만들어서 사용! ( 마크업 분리 가능 )

- 폰트는 wtf2나 wtf만 사용하기 !

- favicon :: index.html <head>에 사이즈 별로 다 넣어줘야 함

 

 

⭐ 유용한 사이트

- react-loadable

 

GitHub - jamiebuilds/react-loadable: A higher order component for loading components with promises.

:hourglass_flowing_sand: A higher order component for loading components with promises. - GitHub - jamiebuilds/react-loadable: A higher order component for loading components with promises.

github.com

 

- 스포카 폰트 (경량화 사용)

 

Spoqa Han Sans Neo

Spoqa unveil the new Spoqa Han Sans Neo, which has evolved in many ways. | 여러모로 개선을 거쳐 진화한 스포카 한 산스 네오를 공개합니다. | これまでいろいろ改善して進化した新しいスポカーハンサンスネオ

spoqa.github.io

 

- 프리텐다드

 

눈누

프리텐다드 - 길형진 (orioncactus)

noonnu.cc

 

- 구글 애널리틱스 - GA (방문자 데이터 분석 가능)

 

Redirecting...

 

analytics.google.com

 

 

🔓 추후에 해볼 것 !

- lifecycle에 대해 공부하기

- mdn intersection observer 3-4번 직접 구현해보고 그 다음 라이브러리 사용하기

 

IntersectionObserver - Web API | MDN

Intersection Observer API의 IntersectionObserver 인터페이스는 대상 요소와 상위 요소, 또는 대상 요소와 최상위 문서의 뷰포트가 서로 교차하는 영역이 달라지는 경우 이를 비동기적으로 감지할 수 있는

developer.mozilla.org

 

저작자표시 비영리 변경금지

'Project > 원티드 프리온보딩 프론트엔드 코스' 카테고리의 다른 글

[TIL] 프리온보딩 17일차 - 220519  (0) 2022.05.20
[TIL] 프리온보딩 16일차 - 220518  (0) 2022.05.19
[TIL] 프리온보딩 14일차 - 220516  (0) 2022.05.16
[TIL] 프리온보딩 13일차 - 220515  (0) 2022.05.15
[TIL] 프리온보딩 12일차 - 220514  (0) 2022.05.15
'Project/원티드 프리온보딩 프론트엔드 코스' Related Articles more
Comments