유령이 나오는 젤리하우스

웹/일반

[모던 프론트엔드 구성] 2. npm workspace로 각 패키지별 dep 설정하기

TLDR; 🦄-w 플래그로 각 패키지 별로 다른 버전의 라이브러리를 설치하여 운용할 수 있다🦄 🦄 각 패키지는 자신의 package.json에 선언된 종속성을 우선적으로 따라 간다.🦄 🦄 그러나, 모노레포는 컨테이너 개념이 아닌, 관심사의 분리에 촛점을 맞춘 개념이므로, 패키지 간 종속성 교환을 완전히 막을 수는 없다 🦄 Previously on lastest post... 지난 포스트에서는 npm workspace를 이용해서 각 모듈을 패키지화하여 하나의 저장소에 관리할 수 있는 모노레포 구조를 구현해봤습니다. 모노레포 구조를 가져가게 된다면, 의존성 지옥에 빠지는 일 없이, 개발자들이 각자의 관심사에만 집중할 수 있고, 작업환경의 통일로 데브옵스에서도 큰 이득을 얻을 수 있다고 했습니다. 그러나, 만..

웹/일반

[모던 프론트엔드 구성] 1. npm workspace로 모노레포 구현하기

TLDR; 🦄 npm workspace를 사용하여 모노레포를 구성해봅시다🦄 ✨Sample Code✨ https://github.com/SpookyJelly/workspace GitHub - SpookyJelly/workspace: study in workspace for own good study in workspace for own good. Contribute to SpookyJelly/workspace development by creating an account on GitHub. github.com Before we start npm workspace는 npm 7 버전 이상부터 사용할 수 있습니다. node.js LTS를 설치하셨다면 기본적으로 npm 8 버전이 설치되어있어 바로 시작하시는데 문..

웹/일반

[모던 프론트엔드 구성 ] 0. 모노레포의 개념과 구현 방법

TLDR; 🦄모노레포 구조란, 하나의 저장소에 여러개의 서브 프로젝트가 존재하는 환경으로, 관심사의 분리를 용이하게 할 수 있도록 하는 방법론이다. 🦄 모놀리식 애플리케이션 모노레포를 설명하기 앞서, 모놀리식 애플리케이션에 대한 설명을 잠시 하겠습니다. 모노리스 (Monolith) 라고도 부르는 이 아키텍쳐는 이름처럼 크고 거대한 하나의 대규모 구조로, 어플리케이션에 사용되는 모든 코드가 들어가있습니다. 거대한 아키텍처는 그 자체로 강건한 아키텍처를 빠르게 구축할 수 있다는 장점이 있었으나, 아이러닉하게도 프로젝트의 규모가 커지면 커질수록 생산성이 떨어지게 됩니다. 모놀리식 애플리케이션의 한계는 다음 3가지로 줄일 수 있습니다. 1. 사소한 수정에도 기나긴 빌드, 배포 시간을 가지게 된다. - 내부 컴포..