TWIL = This Week I Learned!

일하면서 줍줍한 링크들

React.js

• useEffect 안에서 함수 선언 & 사용하기(Is it conventional?) YES!
  ➡ 장점
  1. useEfeect 안에서만 실행되는 경우라면 logically 안에 있는 것이 맞음
  2. 매 render마다 함수 생성할 필요도 없음
  3. 비동기 로직의 경우 cleanup 작성도 용이!
     https://stackoverflow.com/questions/61527840/define-a-function-inside-useeffect-or-outside
• package.json의 resolutions
  : dependency의 특정 버전이나 range를 명시적으로 지정할 수 있음(dependency 특정 버전에 버그가 있는 등의 경우 유용)
  https://developer-alle.tistory.com/417

Next.js

• nextjs router undefined on initial load !
  : next.js의 router 객체가 첫 로드시에 undefined 로 인식되는 이슈.
  ➡️ router.isReady boolean값으로 router 객체가 로드되었는지 체크 가능!
  https://stackoverflow.com/questions/61040790/userouter-withrouter-receive-undefined-on-query-in-first-render
• publicRuntimeConfig (NEXT_ 프리픽스 붙은 경우-client side에서 변수로 사용가능) & process.env

Javascript

• https://dahyeyudev.netlify.app/posts/throw-try-catch/
  try문에서 에러발생시 → 다음 라인 실행되지 않고 catch로 바로 넘어감. 유의!

Browser

• MSW(Mock Service Worker)
  : api 콜 모킹하기 유용. 서비스 워커(Service Worker)를 사용하여 네트워크 호출을 가로채는 API 모킹(mocking) 라이브러리.
  https://www.daleseo.com/mock-service-worker/
  https://blog.walkinpcm.com/25
• CORS
  : react-inlinesvg 버전업하면서 s3 이미지 로드시 일반 img ➡ fetch request로 이미지 로드하게 변경되면서 CORS에러 발생. svg 이미지가 보이지 않는 불상사 발생..! 한번 더 짚고가자
  https://ko.javascript.info/fetch-crossorigin

ETC

• React 17 ➡️ 18 변경점
  :automatic batching확대, Concurrent Mode-suspense
  https://velog.io/@woodong/React-18-주요-변경점

• RN for web
  https://blog.twitter.com/engineering/en_us/topics/open-source/2017/how-we-built-twitter-lite

• form 태그 → state 줄일 수 있음. 애용하자.

• Google Optimize
  : 다중 페이지 실험 가능한가요? YES! (+ 베타버전으로 여러 페이지 실험 정교하게 세팅 기능 추가됨)
  https://support.google.com/optimize/answer/9191670?hl=ko&ref_topic=11609404