내가 레퍼런스가 되자 내가 레퍼런스가 되자

최근 포스팅에서 여러 project에서 사용할 모듈을 따로 package로 구성하여 개발하는 작업이 끝나 해당 모듈이 필요한 project에 적용하였습니다. Monorepo 구조를 가지는 repo의 project가 build 시 모듈도 같이 build가 되어야 하여 Github Actions에 해당 내용을 추가하게 되었습니다. Github Actions 작성예시를 위해 이전에 작성했던 CI/CD 관련 포스팅에서 예제를 가져오겠습니다.name: on: push: branches: - jobs: run: runs-on: ubuntu-latest steps: - uses: actions/checkout@v3 - uses: actions/setup-node@v3 ..

Webpack을 사용할 때 이전에 미리 Webpack과 함께 Babel, 각종 loader들을 설정하여 만들어둔 package를 가져와 사용하고 현재는 Vite를 사용하다 보니 Webpack을 직접 다룬지 오래되어 리프레시 겸 다시 찾아보게 되었습니다. 지난번 Babel 포스팅처럼 간단히 정리하려고 합니다. Webpack? Webpack은 여러 개의 JavaScript module을 하나(또는 여러개)의 파일로 만드는 bundler입니다. 클라이언트 개발에서 module의 개념이 등장한 이후 bundler의 존재도 뗄 수가 없으며 이제는 필수가 되었습니다. 그중 Webpack은 많은 개발자로부터 선택받은 bundler입니다. Webpack Config Webpack의 config 설정을 위해 루트 디렉토..

최근에 나온 build tool을 사용하면 Babel을 설정할 필요가 없고 필요한 옵션이 있을 경우에만 따로 명시하면 되다 보니 Babel을 직접 만지는 일이 거의 없어졌습니다. 리프레시 겸 Babel과 Webpack을 직접 설정해 보며 Babel에 관한 내용을 정리하려고 합니다. Babel? Babel은 ECMAScript 2015+(ES6+)의 문법을 웹 브라우저가 처리할 수 있는 이전 버전으로 변환하는 JavaScript 트랜스컴파일러(Transcompiler)입니다. Babel은 Babel 만으로 동작하는 것이 아니라 Babel의 plugin이 동작하여 트랜스컴파일이 되는 것입니다. Babel을 통해 JavaScript 최신 문법과 기능을 사용할 수 있습니다. Presets & Plugins Ba..

이전에 작업했던 프로젝트의 유지보수를 위해 오랜만에 해당 프로젝트의 개발 서버를 올렸는데 꽤나 많은 시간이 걸렸습니다. 소스 코드를 수정했을 때도 리빌드 시간이 매우 많이 걸렸습니다. 현재 작업 중인 프로젝트에선 Vite를 도입하여 사용 중이다 보니 체감상 더 크게 느끼게 되었습니다. 이전의 프로젝트들에서 사용했던 Webpack, Rollup과 달리 개발 서버 구동 시 많은 시간을 줄이게 해 준 Vite가 무엇인지 살펴보겠습니다. Unbundled Development 브라우저에서 ESM(ES Modules)을 사용하지 못하던 시절 JavaScript의 native 방식의 모듈 관리를 할 수 없었습니다. 그래서 번들링을 하여 모듈화 된 소스 코드를 합쳐 브라우저에서 동작할 수 있게 했습니다. 하지만 애플..