이 글은 [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}문제없이 잘 동작합니다. :)의견은 언제든 댓글로 남겨주세요. 🙂