프론트엔드184 [패키지 매니저] PNPM 최종 수정 : 24.12.23PNPMPNPM은 2016년에 등장했다(Yarn과 동일). NPM과 Yarn의 비효율적인 패키지 관리 방식을 개선하기 위해 만들어졌다. NPM과 Yarn의 문제점과 그에 따른 PNPM의 해결방식1. 디스크 공간 낭비기존 패키지 매니저들은 각 프로젝트마다 node_modules 디렉토리에 모든 의존성을 개별적으로 설치했다. 10개의 프로젝트를 진행한다면, 동일한 라이브러리들이 10개가 중복으로 설치되어 그만큼 디스크 공간 낭비를 초래했다. -> PNPM은 content-addressable 저장소를 도입했다. 모든 패키지를 전역 저장소(.pnpm/store)에 단 한 번만 저장하고, 각 프로젝트에서는 심링크를 통해 이를 참조하는 방식을 사용한다. 예를 들어 React 18.2... 2024. 12. 22. [패키지 매니저] NPM / Yarn 최종 수정 : 24.12.23Yarn2016년 Fackbook에서 개발됐으며, 당시 NPM의 여러 문제점을 해결하기 위해 등장했다. 당시 NPM의 문제와 Yarn의 해결 방식1. 의존성 설치 속도 문제NPM은 패키지를 하나씩 순차적으로 설치하는 방식이었다. 하나의 패키지 설치가 완료된 후에야 다음 패키지 설치를 시작하는 방식이다. 이로 인해 수십 개의 패키지를 설치할 경우에는 많은 시간이 소요될 수밖에 없다. -> Yarn은 이 문제를 병렬 설치 방식으로 해결했다. 동시에 설치할 수 있게 되어 시간을 많이 단축할 수 있다. 2. 버전 일관성 문제NPM은 초기에 package-lock.json 파일이 없었다. package.json에서 ^나 ~ 같은 버전 범위를 사용할 때, 개발자마다 다른 버전의 패키지가.. 2024. 12. 21. [패키지 매니저] Yarn Berry 최종 수정 : 24.12.23Yarn BerryYarn의 2.0 버전을 의미하며, 기존 Yarn(Yarn 1.x, Classic)의 한계를 극복하기 위해 재작성된 새로운 패키지 매니저 Yarn Berry의 문제점1. node_modules가 차지하는 용량이 매우 크다.여러 프로젝트에서 같은 패키지를 사용해도 각각의 node_modules에 별도로 설치된다. 이에 따라, 그만큼 용량을 차지하게 된다. 만약, 여러 프로젝트를 동시에 진행중이라면, 그만큼 많은 용량을 차지하게 된다. ☞ Plug'n'Play(PnP) 시스템은 node_modules 폴더 대신 의존성을 .zip 파일로 저장한다. 예를 들어, React, lodash 등의 패키지들이 각각 압축된 형태로 저장되어 전체 프로젝트 크기를 대폭 줄일 수.. 2024. 12. 20. [패키지 매니저] NPM / Yarn / PNPM 비교 최종 수정 : 2024.12.14패키지 매니저 비교(NPM / PNPM / Yarn)포트폴리오용 프로젝트 생성에 앞서 새로운 패키지 매니저를 사용해보고 싶었다. 간단한 프로젝트나 부트캠프 당시에도 npm만 사용했기에 다른 것을 살펴보고 싶었다. 또한, NPM이 익숙하다고 느껴서 계속 벗어나지 못하는 것 같아 이번에는 공부도 할겸 정리해 보고 싶었다. 요즘은 새로운 패키지 매니저 burn도 나왔다고 하는데, 아직 비교적 사용자들이 적어 개발을 익혀가는 과정에서는 다음에 하는 게 낫겠다는 판단이 들어 배제했다. 대표적인 패키지 매니저 NPM, Yarn, PNPM을 비교 정리하면서 얼핏 알고 있던 것도 다시금 확인할 수 있어서 좋았다. Yarn 2.0 버전(Yarn Berry)이 나오면서 기존 Yarn은 유지.. 2024. 12. 14. React - Suspnese 최종 수정일 : 2024-08-01Suspense비동기 로직을 더 선언적이고 관리하기 쉽게 만들어, 개발자 경험을 크게 향상시킨다. 이는 복잡한 UI와 데이터 흐름을 가진 현대적인 웹 애플리케이션 개발에 매우 유용한 도구이다. 기본 설명1. 기존 비동기 처리의 문제점React 18 이전 버전에서는 주로 코드 스플리팅에만 사용 가능했다(16.6ver에서 등장).React에서 비동기 데이터 로딩은 컴포넌트 내부에서 처리됐다. 이로 인해 많은 조건부 렌더링 로직과 로딩 상태 관리를 필요로 했다. 이는 복잡한 애플리케이션에서는 유지보수를 어렵게 만들었다. 2. Suspense의 해결책Suspense는 비동기 작업을 컴포넌트 외부로 추상화시켜 로딩 상태를 선언적으로 정의할 수 있게 해준다. 또한, 조건부 렌더링을.. 2024. 8. 1. 이전 1 2 3 4 5 ··· 37 다음