이 글은 [Webpack으로 React 개발환경 구성하기]을 기반으로 작성합니다. React로 Electron으로 만들어서 프로그램을 만들고 싶었습니다.Electron bolilerplate도 있지만, 직접 한 번 구성해보겠습니다.애플리케이션 실행 시키기라이브러리 설치ElectronElectron은 Javascript, HTML, CSS를 이용해 데스크탑 애플리케이션을 만들 수 있는 프레임워크입니다.electron: 크로스 플랫폼 데스크탑 프레임워크# electron 설치$ npm i -D electronwebpack-mergewebpack-merge: 분리한 webpack 설정 파일을 병합시켜주는 라이브러리# webpack-merge 설치$ npm i -D webpack-merge설정이제 크게 두 가지..

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(CRA)로 React 개발환경을 쉽게 구성했었습니다.하지만 CRA가 지원 종료되면서 다른 대안(webpack/vite/remix)을 찾아야 합니다.그 중 저는 Webpack을 사용해서 개발 환경을 구축해보겠습니다.웹 화면 띄우기작업할 폴더를 생성하고 IDE를 통해 오픈합니다.💡 저는 VSCode를 사용하는데, 원하는 IDE를 사용하세요. :) 일단 package.json을 만들어보겠습니다.# package.json 생성$ npm init -y라이브러리 설치Webpackwebpack은 모듈 번들러로서, 기본적으로 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, }, ], ..

Next.js를 사용해 프로젝트 구축 과정을 설명합니다.Typescript와 함께 ESLint, Prettier를 설정합니다.Next.jsNext.js는 명령어로 한 번에 프로젝트 구성이 가능합니다.설치되는 버전은 15.1.2 입니다.설치# next 프로젝트 생성$ npx create-next-app✔ What is your project named? … test-next-app✔ Would you like to use TypeScript? … Yes✔ Would you like to use ESLint? … Yes✔ Would you like to use Tailwind CSS? … No✔ Would you like your code inside a `src/` directory? … No✔ Would..