본문 바로가기

react4

Create React App으로 만든 electron앱에서 fs 사용하기.. fs 모듈을 쓰려고 하면 `Module not found` 라고 오류가 발생합니다. 문제는 webpack 타겟을 electron-renderer으로 잡아야 하는데, CRA(Create React App)으로 만든 프로젝트는 yarn eject를 해서 수정을 해 줘야 한다. 여기서는 eject를 하지 않고 해결하는 방법이 2가지을 소개 합니다. craco를 사용하기 craco는 CRA로 만든 프로젝트를 eject하지 않고 간단하게 설정하게 해 주는 패키지이다. 먼저 craco를 설치해 줍니다. $ npm i -D @craco/craco 그리고, craco.config.js 파일을 만들고 아래 내용을 입력해 줍니다. module.exports = { webpack: { configure: { target: .. 2020. 9. 20.
react-create-app으로 만든 typescript 프로젝트에 eslint 적용하기 적용해 보면서 하도 고생해서 정리해 봅니다. Create-react-app 먼저 create-react-app를 통해서 프로젝트를 생성합니다. $ yarn create react-app my-app-name --template=typescript $ cd my-app-name Eslint 생성된 프로젝트 폴더로 이동한 후 eslint를 설치 해 줍니다. $ yarn add -D eslint 이게 yarn eslint --init을 통해서 eslint를 설정해 줍니다. $ yarn eslint --init ? How would you like to use ESLint? To check syntax only To check syntax and find problems ❯ To check syntax, fin.. 2020. 9. 15.
Typescript 기반으로 React Electron App 시작하기. 먼저 기본적으로 node.js가 설치가 되어 있다는 가정으로 설명 합니다. yarn이 설치 되어 있지 않다면 먼저 yarn을 설치해 줍니다. yarn은 npm과 같은 node의 패키지 매니저 입니다. $ npm install -g yarn 그리고, create-react-app을 통해서 타입스크립트 기반의 프로젝트를 생성해 줍니다. $ npx create-react-app my-app-name --typescript $ cd my-app-name 위와 같이 명령어를 넣어 주면 타입스크립트 기반으로 react와 webpack 설정이 되어 있는 프로젝트가 설정 됩니다. 이제 Electron과 실행에 필요한 패키지를 설치해 줍니다. 아래 패키지들은 개발에서만 사용되는 패키지라서 --dev를 붙여 줬습니다. $.. 2020. 9. 15.
웹 캐시를 지우고 리로딩하기.. SPA를 개발하다 보면, 앱의 버전을 올려서 서버에 반영을 했는데, 웹은 캐시를 타버려서 업데이트가 되지 않는 경우가 빈번합니다. 웹 서버와 웹 어플리케이션의 버전이 맞지 않아서 이상하게 동작도 하고.. 대략적으로 난감한 경우가 발생해서, 캐시를 지우고 리로드 하는 코드를 간단하게 만들어 봤습니다. caches .keys() .then(c => { for (const i of c) { caches.delete(i); } }).then(() => { location.reload(true); }); 그리고 아래는 axios를 이용해서 버전을 확인하고 업데이트를 진행하는 코드 입니다. import * as axios from 'axios' console.log('current version :', versio.. 2019. 5. 24.