프론트엔드 복습노트 프론트엔드 복습노트

frontend/오답노트

• MSWjs : Failed to register a Service Worker for scope () with script () Service Worker script does not exist at the given path.

  frontend/오답노트 2022. 10. 12. 10:13

  문제 : [MSW] Failed to register a Service Worker for scope ('http://localhost:3000/') with script ('http://localhost:3000/mockServiceWorker.js'): Service Worker script does not exist at the given path. Did you forget to run "npx msw init "? [MSW] Failed to register a Service Worker for scope ('http://localhost:3000/') with script ('http://localhost:3000/mockServiceWorker.js'): Service Worker scrip..

  Read More
• NextJS + StyledComponents : Font Flickering Issue (최초 로딩 시 폰트 깜빡임 문제 해결)

  frontend/오답노트 2022. 8. 31. 14:26

  문제 : NextJS와 StyledComponents로 작업한 프로젝트에서 createGlobalStyle 이라는 StyledComponents의 함수를 사용하여 전역 폰트를 지정하였을 때 폰트 깜빡임 현상이 발생 - GlobalFonts.tsx import { createGlobalStyle } from "styled-components"; const GlobalFonts = createGlobalStyle` @font-face { font-family: 'NotoSansKR'; src:local('NotoSansKR'), url('/assets/fonts/NotoSansKR-Black.woff2') format('woff2'), url('/assets/fonts/NotoSansKR-Black.woff..

  Read More
• React18 + Recoil + TypeScript : Type '{ children: Element; }' is not assignable to type 'IntrinsicAttributes & RecoilRootProps'.

  frontend/오답노트 2022. 4. 13. 21:39

  문제 : Type '{ children: Element; }' is not assignable to type 'IntrinsicAttributes & RecoilRootProps'. Type '{ children: Element; }' is not assignable to type 'IntrinsicAttributes & RecoilRootProps'. 리액트 18 버전 업데이트에 대응하여 recoil의 type대응이 제대로 되지 않아서 그렇다. 해결방법 : yarn upgrade --latest 0.7.0 이하의 버전을 사용하고 있으신분들은 0.7.1버전(4월13일 한국시간으로 낮에 release)이상으로 버전을 업데이트 시키자. (참고. 위의 방식으로 업그레이드 하면 원치않은 패키지까지 업그레이드 될..

  Read More
• React18 + typescript : Argument of type 'HTMLElement | null' is not assignable to parameter of type 'Element | DocumentFragment'. Type 'null' is not assignable to type 'Element | DocumentFragment'

  frontend/오답노트 2022. 4. 10. 18:09

  문제 : Argument of type 'HTMLElement | null' is not assignable to parameter of type 'Element | DocumentFragment'. Type 'null' is not assignable to type 'Element | DocumentFragment' Argument of type 'HTMLElement | null' is not assignable to parameter of type 'Element | DocumentFragment'. Type 'null' is not assignable to type 'Element | DocumentFragment' 이런 관련한 문제가 발견된다면 해결방법은 아래와 같다. 해당 문제는 react-d..

  Read More
• Webpack : Cannot find module 'vue-loader/lib/plugin'

  frontend/오답노트 2022. 3. 26. 15:35

  문제 : Cannot find module 'vue-loader/lib/plugin' Cannot find module 'vue-loader/lib/plugin' 이런 관련한 문제가 발견된다면 해결방법은 아래와 같습니다. 해당 문제는 구버전의 VueLoaderPlugin와 신버전의 VueLoaderPlugin의 import 방법이 바뀌었기 때문입니다. 해결방법 : const { VueLoaderPlugin } = require('vue-loader') 위와 같이 변경하여 준다면 정상적으로 VueLoaderPlugin이 동작하게 됩니다. vue3가 공식이 되면서 미뤄두었던 vue2프로젝트의 마이그레이션을 진행하다가 발견한 문제였습니다.

  Read More
• Webpack : Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js): 오류

  frontend/오답노트 2022. 3. 25. 16:08

  문제 : Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js): HookWebpackError: document is not defined Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js): HookWebpackError: document is not defined 이런 관련한 문제가 발견된다면 해결방법은 아래와 같습니다. 해당 문제는 webpack의 빌드과정에서 loader의 충돌이 발생해서 생기는 문제입니다. 저는 최적화를 위해 넣어둔 mini-css-extract-plugin과 style-loader의 충돌로 발생하..

  Read More
• NextJS : document is not defined 오류

  frontend/오답노트 2022. 2. 15. 17:30

  문제 : document is not defined Text content did not match. Server: Client: 이런 관련한 문제가 발견된다면 해결방법은 아래와 같다. 해당 문제는 NextJS는 모든 페이지를 서버에서 프리 렌더링 하여 보여주게 된다. 해당 시점에 document에 접근하려고 하면 접근할 수 없어서 에러를 뱉어내게 된다. 해결방안으로는 다음과 같다. 해결방법 : function getCookie = (user:string) => { if(typeof window !== 'object') return; let value = document.cookie.match("(^|;) ?" + name + "=([^;]*)(;|$)"); return value ? value[2] :..

  Read More
• NextJS : Prerendering 쿠키 접근시 오류

  frontend/오답노트 2022. 2. 15. 17:23

  문제 : NextJS getCookie의 값으로 화면 렌더링시 발생가능 문제 Text content did not match. Server: Client: 이런 관련한 문제가 발견된다면 해결방법은 아래와 같다. 해당 문제는 NextJS는 모든 페이지를 서버에서 프리 렌더링 하여 보여주게 된다. 그렇기 때문에 프리렌더 과정에서 쿠키에 직접접근하여 데이터를 읽어서 화면을 구성하려하면 문제가 발생한다. 해결방법 : const [user, setUser] = useState(); useEffect(()=>{ setUser(getCookie("user")); },[]); 위와 같이 Mounted시점에 쿠키에서 받아서 user에 할당하여 주면 해결할 수 있다.

  Read More