프론트엔드 정복하기

turborepo 를 사용해 monorepo 를 구성했고 git commit 이 이루어지기 전 Linting, Formatting, Type Checking 이 이루어질 수 있도록 husky, lint-staged 를 사용해 pre-commit 훅을 작성했다. eslint 와 prettier 의 경우 각 패키지 설정에 맞게 검사가 이루어졌으나, 타입 체킹은 루트에 있는 tsconfig.json 을 의존해 검사가 원하는대로 되지 않았다. 이에 대한 해결책을 공유하고자 한다. 프로젝트 구성은 다음과 같았다. ├── packages | ├── random-menu ├── apps │ ├── common-ui │ └── common-utils ├── package.json 기존 설정 // ./package.js..

pnpm 의존성 관리 기법은 크게 두가지 관점에서 볼 수 있다. 1. 글로벌 저장소(~/.pnpm-store) 에 모든 패키지를 저장하고, 필요할 때마다 hard link(symlink)를 연결해서 사용하는 구조 2. hoist 를 사용해서 flat하게 만들지 않고 npm@~2처럼 nested하게 저장하는 구조 pnpm 은 hoisting 방식이 아닌, content-addressable storage 전략을 사용한다. 패키지는 디스크상 한 곳에만 저장 된다. (홈디렉토리의 글로벌 저장소인 ~/.pnpm-store)패키지 파일들은 해당 위치에서 하드링크가 되고 모든 프로젝트가 이를 공유할 수 있는 구조로 만들어진다. 따라서 디스크 공간을 절약할 수 있다. 플랫하지 않은 node_modules 호이스팅 방..

Vercel 이 인수했고, JS 와 TS 코드 베이스의 모노레포를 위한 고성능 빌드 시스템이다. 터보레포의 주요 미션은 모노레포 환경에서 개발자가 좀더 쉽고 빠르게 개발할 수 있도록 빌드 도구를 제공하는 것이다. 고급 빌드 시스템을 구축하는 복잡한 과정을 대신 해준다. 터보레포의 기본 원칙은 한번 작업을 수행하며 수행한 계산은 이후 다시 수행하지 않는 것이다. 따라서 두번째 실행할 때는 이전 계산한 작업은 건너뛰고 캐싱해 놓은 로그를 다시 보여준다. 9가지 특징 1. Incremental builds 작업 진행을 캐싱해 이미 계산된 내용은 건너 뛰는 것을 의미합니다. 빌드는 딱 한 번만 하는 것을 목표로 합니다. 2. Content-aware hasing 타임스탬프가 아닌 콘텐츠를 인식하는 방식으로 해싱..

레파지토리를 구성하는 다양한 방식이 있습니다. 모노리스 소스코드를 모듈화하지 않고 하나의 레파지토리에 모두 넣은 것. 모든 코드가 단일 버전으로 서로 직접 의존하기 때문에 코드 재사용이 용이하고 빌드, 배포 과정도 단순하다. 하지만 관심 분리가 어렵고 기능 추가나 삭제가 레파지토리 전체에 영향을 줄 수 있는 단점이 있다. 멀티 레포(Multi Repo)는 ... 더보기 먼저 장점은 각 프로젝트가 다른 프로젝트에 의존성을 가지고 있지 않아 독립적으로 빠르게 개발이 가능하다는 것입니다. 그리고 해당 프로젝트에 필요한 도구로만 구성되어 있기 때문에 크기가 가벼워 프로젝트 관리가 수월한 편입니다. 하지만 관리할 프로젝트가 많아질수록 단점이 발생합니다. 프로젝트별로 사용하는 모듈과 버전 스택이 달라질 수 있고요...

Lerna 는 git 및 npm 을 사용하여 다중 패키지 레파지토리를 관리하는 작업 과정을 최적화하는 도구이다. 모노레포를 용이하게 관리할 수 있는 CLI 명령어(publish, version 등)가 Lerna 에 많이 있기 때문에, 배포와 버전관리는 러나로, 패키지 관리는 Yarn 을 이용해 믹스해 사용하는 케이스가 많이 있습니다. Yarn 과 패키지 관리 yarn 은 yarn workspaces 를 추가적인 라이브러리 설치 없이 쉬운 방법으로 제공하고 있다. 불필요하게 lerna bootstrap 등의 명령을 실행하지 않으면서 안전하고 버그없이 깔끔하게 패키지를 관리해주고 있다. Lerna와 명령어 `lerna init` Lerna CLI 를 설치 후 `lerna init` 을 하게 되면 다음의 프로..

레파지토리를 구성하는 다양한 방식이 있습니다. 그 중 대표적인 것이 1) 멀티 레포와 2) 모노 레포 입니다. 멀티 레포(Multi Repo)는 ... ▾ 간단하게 장/단점을 알려드리겠습니다. 이런 단점이 있기 때문에 모노레포라는 방식이 탄생하여 오늘 날 많이 사용되고 있습니다. 더보기 먼저 장점은 각 프로젝트가 다른 프로젝트에 의존성을 가지고 있지 않아 독립적으로 빠르게 개발이 가능하다는 것입니다. 그리고 해당 프로젝트에 필요한 도구로만 구성되어 있기 때문에 크기가 가벼워 프로젝트 관리가 수월한 편입니다. 하지만 관리할 프로젝트가 많아질수록 단점이 발생합니다. 프로젝트별로 사용하는 모듈과 버전 스택이 달라질 수 있고요. 오랫동안 건드리지 않은 프로젝트는 관리가 힘들어지고, 레거시 파악이 어려워집니다. ..