이 글은 [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: 모듈 번..

문제 상황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..