이번 포스팅에서는... 실무에서 Vite migration을 진행하면서 알아본 내용을 간략히 정리합니다. 간략한 번들링의 역사 Vite가 등장한 배경 Vite의 장점 Vite와 번들링의 역사 자바스크립트는 모듈이 없었다 태초의 자바스크립트는 웹 애플리케이션을 만들기 위한 목적으로 만들어지지 않았기 때문에 파일을 여러 개로 분리해 개발할 수조차 없었습니다. 그 말은 즉, 대규모 프로젝트를 진행할 수 없다는 의미이기도 합니다. 하나의 파일에서 동시에 여러 개발자가 여러 기능을 위한 코드를 추가하며 깃으로 협업할 수는 없으니까요..! Node의 탄생으로 모듈을 사용하기 시작 node가 탄생하면서 서버에서 자바스크립트를 사용할 수 있게 되었죠. 이 떄 commonJS방식의 'module'이 만들어집니다. 또한 npm의 등장으로 만들어진 모듈을 모두가 공유할 수 있었고, 이 때부터 자바스크립트에서 본격적으로 모듈이 활용되기 시작합니다. 브라우

CRA에서는 간단하게 .env파일을 생성한 다음 필요한 환경변수를 설정해주면 됐는데, CRA를 사용하지 않고 타입스크립트+웹팩으로 프로젝트를 하다보니 별도로 설정이 더 필요했다. 환경변수? 운영체제의 입장에서 해당 프로세스를 실행시키기 위해 참조하는 변수이다. .env(dotenv)? dotenv는 환경변수를 .env파일에 저장해 관리할 수 있게 해주는 Node.js 패키지이다. 보안을 고려해 관리해야하는 변수들은 dotenv패키지를 이용해 환경변수 파일을 외부에 만들어 접근하도록 만들 수 있다. dotenv 설치 .env 파일 생성 필요한 변수 정보들을 다음과 같은 형태로 넣어준다. webpack.config.js 설정 > DefinePlugin? 웹팩에서 제공하는

tsconfig 설정을 고쳐 에러를 해결했더니, 또 다른 오류를 만났다. tsconfig.json 설정상의 문제인 것 같아서 계속해서 살펴봤었는데, 여러 스택오버플로우의 문의글 중 하나가 눈에 들어왔다. 아마도 번들링의 문제일 수 있을 것

이번 포스팅에서는 웹팩과 모듈시스템에 대해 더 구체적으로 정리해보려 한다. require? 그동안 다른 소스코드를 참고하면서 require 키워드를 많이 봐왔는데, 정확히 어떤 키워드이고 왜 쓰는지, import와 비슷한 역할을 하는 건데 무슨 차이인지, 그냥 Node.js의 문법일 뿐인지 잘 모르고 있었다. Webpack 마찬가지로 웹팩이 무엇인지 큰 개념만 알고 있을 뿐 어떻게 사용해야 하는지에 대해서는 아는 바가 없었는데, 이번에 새로운 프로젝트를 하면서 이 이슈와 직접적으로 맞닥뜨리게 되었는데, 이 기회에 평소 궁금하던 부분을 짚고 넘어가기로 했다. > CORS 이슈부터 웹팩 모듈 포맷 까지... 여러모로 시작을 고민했던 프로젝트였는데, 평소 궁금했거나 꼭 공부해야지 싶었던 부분을 직접 겪으며 공부할 수 있는 기회를 예상외로 많이 만나게 되어서, 시도 자체만으로 내겐 가치가 있는 프로젝트인 것 같다. ts에서 파이어베이스 사용하기 ts

갑자기 이 에러가 떠서 무슨 문제인지 에러메시지를 읽는 것만으로는 이해하기 어려웠는데, stackoverflow에서 찾아보니 간단히 해결할수 있었다. recoil을 사용하면서 useRecoilState를 잘못 import했기 때문이었다. import useRecoilState from "recoil" 이렇게 import문을 작성했는데, import {useRecoilState} from "recoil" 이렇게 올바르게 수정해주니 해결되었다. Reference https://stackoverflow.com/questions/63990313/recoil-webpack-imported-module-0-default-is-not-a-function/63991006#63991006