# pnpm
npm, yarn, pnpm
⭐️ npm? npm은 세계 최대의 소프트웨어 레지스트리다. 모든 대륙의 오픈 소스 개발자가 npm을 사용하여 패키지를 공유하고 빌려 쓰고 있으며, 많은 조직에서 개인 개발을 관리할 때에도 npm을 사용한다. npm의 구성요소 웹사이트 패키지를 검색, 패키지의 액세스 관리, docs 명령줄 인터페이스(CLI) 터미널에서 실행되는, 개발자과 npm과 상호 작용하는 방식 레지스트리 JavaScript 소프트웨어와 이를 둘러싼 메타 정보에 대한 대규모 공개 데이터베이스 원하는 호환 가능 레지스트리를 사용하도록 npm을 구성할 수 있고, 다른 사람의 레지스트리를 사용하는 경우 해당 사용 약관이 적용된다. npm에서 설정 가능한 부분들 앱에 맞게 패키지를 조정 npx를 사용하여 패키지를 다운로드하지 않고 사용 특정 타겟에게 코드 제한 조직을 구성, 패키지 관리 가능 여러 버전의 코드
[React] JavaScript 패키지 매니저 비교
📍 npm npm은 세계에서 가장 큰 소프트웨어 등록 기관으로, Node.js 생태계의 가장 대표적인 패키지 매니저이다. 특징 Node.js와 함께 기본적으로 설치 강력한 CLI(Command Line Interface)를 제공하여 패키지 설치, 버전 관리, 의존성 해결 등의 기능 수행 차이점 패키지 설치 시 패키지들을 각각 별도로 설치 공유된 의존성이 중복으로 설치될 가능성이 있음. 의존성 트리가 깊어질수록 패키지 설치 속도가 느려지고, 디스크 공간을 많이 차지할 수 있음. 📍 pnpm npm의 의존성 문제를 해결하기 위해 고안된 빠르고 효율적인 패키지 매니저이다. 특징 고유 설치와 플랫 노드 모듈을 통해 의존성 관리 최적화 다중 프로젝트에서 의존성을 공유하고, 중복 설치를 피하여 저장 공간을 절약할 수
[pnpm] "The inferred type of X cannot be named without a reference to Y" 에러 해결법 총정리
pnpm 혹은 yarn berry으로 모노레포 프로젝트를 사용하다보면 심심치 않게 등장하는 에러다. 원인 원인은 간단하다, 의존성을 hoisting하여 평면적으로 설치하여 관리하는 npm이나 yarn과는 다르게, pnpm은 간접적인 의존성, 즉 X라는 의존성을 설치했을 때 X가 의존하는 Y들은 .pnpm이라는 경로 아래에 따로 설치하고 심볼링크를 통해 접근한다. 이 때문에 간혹 Y에 있는 타입을 사용하려할 때 타입스크립트에서 경로를 찾아가지 못하는 문제가 발생하곤한다. 그리고 이 문제는 tsconfig에서 "declaration": true 설정을 하는 경우에만 발생한다. 단순히 실행코드에서는 타입스크립트의 컴파일러가 함수의 매개변수나 리턴값 등을 찾아가면서 타입을 추론해주지만,
[vite] NPM Library 생성 시 banner 삽입하는 방법
PNPM, NPM 등 패키지 매니저를 통해서 빌드를 할 때 결과물 상단에 banner를 넣고 싶을 때 필요한 옵션이다. vite.config.js dist/my-lib.cjs.js
[F-Lab 모각코 챌린지 66일차] 모노레포 Monorepo
모노레포 Monorepo > 소프트웨어 개발에서 여러 프로젝트나 모듈을 하나의 대규모 리포지토리(repository)에서 관리하는 개발 방법을 말한다. 저장소 모델 소스 코드 구성을 위한 구조화 옵션의 대표적인 두가지 소스 형상 관리 시스템상에서 소스 리포지토리를 관리하는 방법 두가지 모노레포 멀티레포(매니레포) 멀티레포는 추후에 알아보겠다. 초기 프로젝트 구조 프로젝트 초기에는 모노리딕 시스템으로 서비스를 구현하게 된다. 프로젝트의 크기가 크지 않고, 개발자의 수도 적기 때문에 모든 것을 한곳에서 처리하는 것이 효율적. 이 경우 시스템 자체가 쪼개어지지 않고 하나이기 때문에 리포지토리 역시 하나로 관리하게 된다. 모노리딕 시스템 Monolithic System 소프트웨어를 단일한 거대한 블록으로 구성된 하나의 단일 애플리케이션으로 개발하는 방식을 의미. 전통적인 방식이고, 모든 기능과 컴포넌트를 하나의 코드베이스에 포함하여
chromatic이 storybook을 배포하는 과정(with turborepo, storybook, chromatic, tailwind, github actions)
💥 상황 소개 theme: tailwind의 config를 확장해 colors, font, typography, screens 등을 관리하고 있는 상태 ui: theme에서 정의한 tailwind.config.js를 확장해 사용 >> 공유 패키지인 theme를 design-system이 있는 ui에 사용하려는데 아래와 같이 chromatic workflow에서 theme의 빌드 파일을 찾지 못하는 문제가 발생했다. ui/tailwind.config.js .github/workflows/chromatic.yml chromatic을 이용한 storybook 배포 과정 > 현재 github actions을 이용해서 storybook 자동화 배포를 해놓은 상
chromatic으로 storybook 배포하기(with pnpm, turborepo, github actions)
틀릴 수 있음 주의 😅 turborepo 환경에서 chromatic으로 storybook을 배포하는 실습 과정을 그대로 나열한 글입니다. > 💥 먼저 해당 레포에 storybook이 설치되어 있어야 합니다. chromatic 우선 chromatic 페이지에서 로그인 후, chromatic 설정을 원하는 레포를 선택한다. 특정 organization이 보이지 않는다면 하단에 Check permissions를 눌러 해당 organization 접근을 허용시키면 된다. chromatic 설치 루트에서 터미널에 아래 명령어를 실행시킵니다. pnpm --filter [설치할 repo] add -D chromatic > 예시:
Front-end 도구 및 라이브러리 정리
스타일링 라이브러리 Emotion Emotion은 JavaScript를 사용하여 CSS 스타일을 관리하는 라이브러리로, React와 다른 프레임워크에서 사용할 수 있습니다. Emotion은 CSS-in-JS 스타일링 방식을 채택하여, 컴포넌트와 함께 스타일을 선언하고 적용할 수 있습니다. CSS-in-JS 방식 중 하나인 "Styled Components"와 유사한 기능을 제공합니다. CSS-in-JS: Emotion은 JavaScript 코드 안에서 CSS 스타일을 작성할 수 있도록 해주는 방식으로, 스타일과 컴포넌트를 함께 관리할 수 있습니다. 퍼포먼스: Emotion은 빠른 런타임 성능을 제공하며, 스타일을 최적화하여 불필요한 렌더링을 방지합니다. 스타일 재사용: Emotion은 스타일을 JavaScript 객체로 추상화하여 재사용성을 높여줍니다. Framer-motion Framer Motion은 모션 그래픽 및 애니메이션을 구현하기 위한
[F-Lab 모각코 챌린지 53일차] pnpm
어제 패키지 매니저를 알아봤는데 pnpm이 yarn과 npm이랑 작동 방식이 다르다고 해서 구체적으로 어떻게 다른지 궁금해서 더 알아보려한다! PNPM Zoltan Kochan에 의해 2017년에 출시되었다. npm에 대한 드롭 인 대체(Drop-in replacement) 이므로 npm 프로젝트가 있으면 바로 pnpm을 사용할 수 있다! 드롭 인 대체(Drop-in replacement) 컴퓨터 과학 및 기타 분야 에서 사용되는 용어. 다른 코드나 설정 변경 없이 하드웨어(또는 소프트웨어) 구성 요소를 다른 하드웨어의 (또는 소프트웨어) 구성 요소로 대체해도 부정적인 영향을 미치지 않는 기능을 나타낸다.
[F-Lab 모각코 챌린지 52일차] Package Manager 패키지 매니저, (js)
패키지 매니저를 쓰고 있음에도 무슨 일을 하는 건지 모르고 있었다. js 프로젝트 컨셉도 정하고 들어가게되면 어떤 패키지 매니저가 좋을지에 대해 고려하면서 깊게 공부해보려한다. Package Manager 패키지 매니저 (패키지 관리 시스템) 컴퓨터의 운영 체제를 위해 일정한 방식으로 컴퓨터 프로그램의 설치, 업그레이드, 구성, 제거 과정을 자동화하는 소프트웨어 도구들의 모임이다. 패키지 관리자는 아카이브 파일로된 소프트웨어 배포판과 데이터인 패키지(package)를 다룬다. 패키지 설치, 업데이트, 삭제 의존성 dependency 관리 패키지 압축 해제 패키지 검색 환경 설정 보안 관리 : 신뢰
패키지 매니저들에 대해서 비교 분석하기
패키지 매니저란? 패키지 매니저(Package Manager)는 프로그램에서 사용하는 라이브러리나 모듈 등을 관리하는 도구이다. 패키지 매니저를 사용하면 라이브러리나 모듈을 쉽게 설치하고 업데이트할 수 있다. 또한 패키지 매니저를 사용하면 프로그램에서 사용하는 라이브러리나 모듈의 버전을 일관되게 유지할 수 있게 된다. 종류로는 npm, pnpm, yarn, yarn berry 등이 있다. - npm >npm은 Node.js의 공식 패키지 매니저로 가장 많이 사용되고 있다. npm은 빠르고 안정적이며 다양한 기능을 제공한다. 하지만 npm은 의존성 트리를 재귀적으로 설치하므로 설치 시간이 오래 걸릴 수 있다. 장점 Node.js와 함께 설치되어 사용하기 쉽다. 많은
패키지 매니저 비교 - npm, yarn, pnpm
👉🏻 Package Manager? 패키지 매니저는 개발에 필요한 다양한 패키지를 설치하고 또 수정하고 업데이트하는 등의 작업을 편리하게 도와주는 도구라고 할 수 있다. 자바스크립트로 프로젝트를 진행하다 보면 해당 프로젝트에 필요한 다양한 패키지들이 있고 이 패키지들을 설치하고 또 관리해야 하는 경우가 있는데, 이 패키지들을 의존성 있게 관리해 주는 것이 바로 패키지 매니저다. > 즉, 패키지 매니저는 프로젝트에 사용되는 패키지를 쉽게 관리하고 설치해주는 하나의 도구와 같다. ✨ Package Manager 3대장 가장 많이 사용되는 패키지 매니저로 3가지가 있는데, 바로 npm, yarn, pnpm이다. 사실, 이것들을 제외하고도 다른 패키지 매니저들이 있겠지만 현재로서 가장 많이 사용되는 것들이기 때문에 이 3가지를 먼저 살펴볼 예정이다. 먼저 이 3가지의 패키지 매니저들에 대해서 어떤 것이
[PNPM] local symbolic link 걸기
초기 개발 중에는 라이브러리 수정이 빈번하게 일어난다. 이때마다 리파지토리에 올리는 방식보다는 로컬에서 개발환경에서 해당 라이브러리를 링크해서 쓰는게 효율적이다. 라이브러리 프로젝트에 들어가서 build를 해서 dist폴더를 생성시키고 package.json가 있는 폴더에서 링크를 건다. 그리고 해당 라이브러리를 사용하려는 프로젝트에 들어가서 ui-lib를 링크 걸어주면 ui-lib/node_modules 폴더에 ui-lib이 위치하게 된다.
[react] pnpm 설치 오류: ERR_PNPM_ADDING_TO_ROOT
상황 pnpm으로 패키지 설치 명령 중 발견한 에러 메시지가 뜨고 설치가 되지 않음. 오류 메시지 해결 설치 명령어 -w 옵션 붙이기 왜? -w 플래그를 사용한 후, 패키지가 루트에 설치되었고 루트 아래의 패키지가 액세스할 수 있다. 루트 package.json 에 패키지를 추가한다는 것은 해당 패키지가 모든 앱에서 사용된다는 것을 의미 루트에 패키지를 추가하는 것이 실제로 올바른 선택인지 여부 -> 경고 의미
[React] pnpm 기반의 모노레포
서론 쓰게 된 이유 이전에 yarn berry 기반의 모노레포 구축하기라는 글을 간단하게 쓴 적이 있다. 그러나 yarn berry의 단점을 느끼며 pnpm으로 전환하게 되었다. 그 과정에 대해 간단하게 서술해보고자 한다. 전환 이유 자세한 내용은 https://engineering.ab180.co/stories/yarn-to-pnpm 참조 레퍼런스 부족 자료가 너무 부족하다. yarn보다 인기 있다! 
[패키지 매니저] pnpm
개요 2017년에 새로 소개된 JS 패키지 매니저이다. 기존에 있던 npm과 yarn classic의 문제점 중 하나로 꼽혔던 dependecy의 중복 저장을 해결하기 위해 나온 대체품이다. 가존의 패키지 매니저는 종속성을 사용하는 프로젝트가 30개가 있는 경우 해당 종속성의 사본이 30개가 디스크에 저장이 되는 방식을 사용하였다. 이렇게 되면 디스크 공간이 비효율적으로 사용되는 것이기에 절약을 할 필요가 있었다. pnpm은 위와 같은 hoisting 방식이 아닌 content-addressable stroage 전략을 사용한다. 패키지는 디스크 상 한 곳에만 저장이 된다. 패키지의 파일들은 해당 위치에서 하드링크가 되며 모든 프로젝트는 이를 공유할 수 있는 구조로 만들었기 때문에 디스크 공간을 절약할 수 있었다. 특징 플랫하지 않은 node_modules npm같은 경우에는 A->B->C의 종속 관계를 가진 패키지가 있으면, 최상위에 A,B,C를 만들고 복사하
pnpm workspace with React TS & TailwindCSS (1)
pnpm workspaces를 사용하여 React TS & tailwindcss를 적용해보자. monorepo 설정 구조 설계 프로젝트마다 다르지만 보통 두 타입의 구조가 존재한다고 한다. package centric 오픈소스 코드(Angular, React, Vue 등)에서 자주 사용하는 구조로 재사용가능한 패키지를 개발/배포하는데 중점이 둔다. 보통 package 폴더가 있고 npm과 같은 public registry에 게시되는 것이 특징이다. app centric 기업에서 일반적으로 사용하는 구조로, 어플리케이션이나 제품의 개발이 주 목적이다. apps,
Ubuntu Server 을 처음 설치하고 세팅하는 것들
ubnutu image 최근 서버가 죽었어요... loopy_cry 최근에 proxmox ve를 돌리는데 알 수 없는 이유(아마 gpu일 가능성이...)로 인해서 컴이 죽었다. 어떻게든 살리고 싶었는데 잘 되지 않아서 결국 자주 쓰고 있던 Ubuntu Server로 다시 넘어가게 되었다. 매번 새로운 Ubuntu를 갈때마다 세팅하는 것이 매우 귀찮아져서 한번 정리해보기로 하였다. 설치 할 것들 일단 본인은 먼저 사용하는 기술 스택으로서 python, nodejs, rust를 사용한다. python은 설치 되어 있으므로 넘긴다.