본문 바로가기
반응형

FE/개발환경5

[개발환경] 패키지 매니저별 모노레포 특징 요약(npm, yarn, yarn-berry) 여러가지 방면에서 npm 보다는 yarn, yarn-berry 가 성능면에서 우수하기 때문에 선호하고 사용해왔습니다. npm 도 버전을 거듭하며 발전해오고 있지만, 그 사이 yarn 의 이점 때문에 yarn 에 익숙해져 굳이 npm 을 사용하지 않고, 쭉 사용하게 되는거같아요. 그러던 중에 npm 으로 모노레포 구성하는 것이 yarn 과 거의 유사해 실습해보고, yarn 과 비교해서 차이점을 분석해보고자 글을 정리합니다. npm workspaces 를 정의하는 순간, 모든 패키지들이 link 되어, 패키지들 간에는 어떤 의존성 설정 없이도 바로 참조가 가능해집니다. ❗️ npm 과 yarn 1.x 은 node_modules 를 사용하고, 호이스팅을 사용하면서 동일한 문제가 있으니, npm 은 간단히 사용.. 2023. 10. 16.
[개발환경] webpack esbuild-loader 소개 ✍️ 이전 블로그에서 옮겨온 게시글입니다 esbuild esbuild 는 Go 로 만들어진 자바스크립트 번들러입니다. Go 가 언어적 특성상 빠른 속도를 자랑하는데, 그로인하여 Go 로 만들어지는 빌드 툴이 속속 생기고있고, esbuild 는 그중 하나입니다. esbuild 는 ECMA 문법, typescript 컴파일, js minify 등을 지원합니다. babel, tsc, terser 등을 대체할 수 있습니다.(with 빠른속도) 웹팩을 사용할 때에는 babel-loader, ts-loader 를 esbuild-loader 로 대체할 수 있습니다. minify 플러그인도 들어있구요. https://github.com/esbuild-kit/esbuild-loader/discussions/138 위 g.. 2023. 9. 21.
[개발환경] micro-frontend 아키텍처 구성해보기 ✍️ 이전 블로그에서 옮겨온 게시글입니다 마이크로 프론트엔드 마이크로 프론트엔드는 하나의 웹앱을 여러개의 작은 웹앱으로 나누어서 개발하는 방법론 입니다. 이렇게 나누어진 작은 웹앱들은 각각의 독립적인 웹앱으로 개발되고, 배포되지만 사용자 입장에서는 하나의 웹앱으로 보여집니다. 이 것은 방법론 이기 때문에, 명확히 어떻게 해야한다 라는게 없습니다. 하지만 번들러를 사용하는 웹개발 환경에서는 Module Federation 이라는 방법을 사용해서 구현할 수 있습니다. 💡 Module Federation 은 webpack, vite, rollup 등 각 번들러마다 플러그인을 지원하고 있습니다. 1. 모노레포 구성 개발편의상 모노레포로 구성을 합니다. yarn init -y // package.json { "n.. 2023. 9. 21.
[개발환경] yarn workspace 모노레포 구성 ✍️ 이전 블로그에서 옮겨온 게시글입니다 yarn workspace yarn workspace 는 yarn 의 monorepo 기능입니다. monorepo 는 여러개의 패키지를 하나의 저장소에서 관리하는 것을 말하는데, 이를 사용하면, 여러개의 패키지를 한번에 관리할 수 있는 장점이 있습니다. 저같은 경우에는 node 서버와, react 프론트를 함께 개발해야 할때, type 정의는 같이 사용하고 싶은 경우에 유용하게 사용해 보았습니다. ❗ yarn1 기준으로 합니다. 프로젝트 init yarn init package.json 수정 { "name": "monorepo", "private": true, // yarn1 에서는 private: true 를 해주어야합니다. "workspaces": [ "pac.. 2023. 9. 21.
[개발환경] yarn vs yarn2 ✍️ 이전 블로그에서 옮겨온 게시글입니다 Yarn 이란? yarn 은 npm 과 같은 javascript 패키지 매니저입니다. yarn 이 처음 출시되던 시점에는 npm 과 몇몇 차이점이 있었습니다. yarn.lock 파일을 통해 의존성 패키지의 버전을 고정할 수 있다는 점 npm 보다 빠른 설치 속도(병렬 설치, 캐싱) 위와 같은 장점이 있었지만, npm 은 node.js 와 함께 제공되면서 생태계 사이즈에서의 차이가 났었습니다. 하지만 npm, yarn 두가지 모두 새로운 버전을 거듭하면서 서로의 장점을 흡수하여 이제 그 차이는 거의 없다고 해도 무방할 정도입니다. 두 패키지 관리자의 문제점 npm, yarn 은 패키지를 설치할때, node_modules 라는 디렉토리에 패키지를 설치합니다. 그런데 .. 2023. 9. 21.
반응형