taeo taeo

⚠️ 이슈 내용React 프로젝트를 하면서 다양한 모듈 번들러를 사용해왔는데, 그중 유독 Vite를 사용할때, 아이폰(모바일)에서 개발서버는 물론, 빌드해서 서버를 배포한 프로젝트 자체도 열리지 않을때가 있었다.  또한, 무조건 다 열리지 않는 것은 아니었다. 갤럭시에서는 잘 열리며, 최신의 아이폰 기종에서도 잘 열리고 있었다 . 하지만, 구형의 아이폰 모바일 화면에서는 Vite로 환경설정을 사용했던 프로젝트들은 화면이 열리지 않는 것을 종종 겪는데, 이에 대한 해답을 여기에서 찾을 수 있었다..  How to open Vite dev server on your mobileIntroduction Developing web applications that work seamlessly across multi..

⚠️ 에러 내용 CRA가 아닌, Webpack으로 React기반의 프로젝트를 설정을 할 때, 흔히 놓치게 되면 발생하는 에러입니다. UI 컴포넌트를 구현하고 style과 관련한 라이브러리 없이 순수 css로만 구현하고자 하였을 때, css파일을 프로젝트에서 읽지 못하면서 다음과 같은 에러 메시지가 나오게 되었습니다. 📌 에러 원인 다음의 오류 원인은 webpack.config.js 파일의 설정을 할 때, css-loader, style-loader를 설정하지 않아 발생하였습니다. 기존의 webpack.config.js 파일의 코드를 살펴보면 아래였습니다. 1) 기존의 webpack.config.js module 부분에는 wep을 실행하기 위해서 아주 기본적인 loader들을 설치하여 지정하였습니다. ( ..

⚠️ 이슈 내용 UI 라이브러리를 만들어보고자 Rollup.js기반으로 만드는 과정에서 rollup.config.js 를 적용했을 때 많은 삽질이 있었습니다. rollup을 실행시키고 지속적으로 감시하고자 rollup.config.js 파일을 생성하고 내용을 작성한뒤 다음의 명령어를 터미널에서 입력했습니다. ⚒️삽질 1 npm run rollup -cw -c : Rollup 설정 파일을 사용하는 의미의 명렁어 -w : 파일을 감시모드로 적용하는 의미의 명령어 터미널에 명령어를 실행하고 rollup을 실행 시켜보니 다음의 에러가 발생하였습니다. 처음에는 이것을 보며 import에 관한 문제? 아주 당연하게 import/export에 관한 문제겠거니 판단을 하였습니다. 왜냐하면, import 를 ES mod..

⚠️ 에러 내용 React와 Webpack으로 Boilerplate를 만드는 과정에서 process.env를 적용했을 때 다음과 같은 에러가 발생했다. 📌 에러 원인 해결 방법은 스택오버플로우를 통해서 확인할 수 있었습니다 Webpack v5부터는 node.js polyfill이 자동적으로 적용되는 기능이 제거가 되었기에, 필요한 모듈은 직접 설치를 해줘야 했다. ✅ 해결 방법 해결 방법은 간단하다. 패키지를 설치한 뒤, # process를 위한 패키지 설치 $ yarn add -D process webpack.config.js의 plugins에 추가만 해주면 된다. // -------중략---------- plugins: [ new HtmlWebpackPlugin({ template: './public..