FOUC(Flash of Unstyled Content) 해결에 대한 트러블 슈팅 과정입니다. 현재 토이 프로젝트에서 다크 모드 기능을 구현하고 있습니다.기능은 잘 동작하는데, 새로고침하면 "깜빡"했다가 다시 바뀝니다.깜빡거리는 이유는?현재 처리 로직은 다음과 같습니다.최초 로드 시 useEffect에서 localStorage에 저장된 테마 정보를 가져와 설정만약 저장되지 않았다면 시스템 테마 정보로 설정테마 스위치를 클릭하면 localStorage에 저장// useTheme.tsimport useThemeStore from "@/store/theme/theme";import { THEME_TYPE } from "@/utils/constants";import { ChangeEvent, useEffect ..

기존에는 create-react-app 명령으로 React 개발환경을 쉽게 구성했었습니다.하지만 create-react-app이 지원 종료되면서, 이제는 직접 구축하거나 다른 대안(vite?)을 찾아야 합니다.저는 Webpack을 사용해서 개발 환경을 직접 구축해보겠습니다.프로젝트 구성작업할 폴더를 생성하고 IDE를 통해 오픈합니다.💡 저는 VSCode를 사용하는데, 원하는 IDE를 사용하세요. :) 일단 package.json을 만들어보겠습니다.# package.json 생성$ npm init -yWebpackwebpack은 모듈 번들러로서, 기본적으로 Javascript 파일들을 하나로 합쳐주는 역할을 합니다.그 외 plugin을 통해 css, asset 등도 처리할 수 있습니다.webpack: 모..

개발할 때 효율성을 위해 내용을 분리하여 각 파일로 관리하고, 필요할 때 import해서 사용합니다.import가 많아지면 아무래도 한 눈에 확인하기 어려워지는데, 정렬이라도 하게되면 조금이나마 확인이 용이해집니다.설정VSCode > 우축 상단 Code > Preferences > Settings > code actions on save 검색 > Edit in setting.json 클릭 이제 아래 내용을 추가합니다.{ "editor.codeActionsOnSave": { "source.organizeImports": "explicit" },}확인이제 잘 동작하는지 확인해보겠습니다.문제없이 잘 동작합니다. :)의견은 언제든 댓글로 남겨주세요. 🙂

ESLintESLint는 ES + Lint의 합성어로, Javascript의 에러를 표시해주는 도구입니다.저장했을 때 자동으로 고쳐지게 설정하겠습니다.VSCode에 ESLint를 이미 설치했다고 가정합니다.설정VSCode > 우축 상단 Code > Preferences > Settings > format on save 검색 > format on save 체크 VSCode > 우축 상단 Code > Preferences > Settings > code actions on save 검색 > Edit in setting.json 클릭 이제 아래 내용을 추가합니다.{ "editor.codeActionsOnSave": { "source.fixAll.eslint": "explicit" },} 확인이제 잘 ..

Prettier란?일관적인 코딩 스타일을 유지시켜주는 code formatter 입니다.설치VSCode에서는 확장 프로그램(Extension)을 설치하여 유용하게 사용할 수 있습니다. 설정이제 간단하게 설정을 해야합니다.확인이제 잘 동작하는지 확인해보겠습니다.문제없이 잘 동작합니다. :)[부록] Prettier 설정내 마음대로 코드 형식을 설정할 수 있습니다.프로젝트 root에 .prettierrc를 만듭니다.테스트를 위해 작은 따옴표('')를 사용하도록 하겠습니다.// .prettierrc{ "singleQuote": true}문제없이 잘 동작합니다. :)의견은 언제든 댓글로 남겨주세요. 🙂

문제 상황Shorthand props must be listed before all other props 원인JSX에서 priority와 같이 props에 값이 없는 경우, 상단에 위치해야한다는 에러입니다.해결 방법일단 ESLint 설정에서 shorthandFirst를 false로 설정하여 상단에 위치하지 않아도 되게 설정하면 해결됩니다.저같은 경우 shorthandLast도 false로 설정하고, 에러가 아닌 warning으로 설정하였습니다. { rules: { "react/jsx-sort-props": [ 1, { shorthandFirst: false, shorthandLast: false, }, ], ..