프론트엔드/개발 기초 지식6 [개념 정리] CI/CD 최종 수정 : 24.12.23CI/CD구분설명주요 도구핵심 목표CI(Continuous Integration)코드 변경사항을 지속적으로 통합하고 테스트하는 과정Jenkins, GitLab CI, GitHub Actions버그 조기 발견, 품질 향상CD(Continuous Delivery)프로덕션 배포가 가능한 상태로 지속적으로 유지하는 과정ArgoCD, Spinnaker, Jenkins안정적인 릴리스 준비CD(Continuous Deployment)프로덕션 환경에 자동으로 배포하는 과정AWS CodeDeploy, GitLab CD, CircleCI빠른 배포와 피드백 CI(Continuous Integration)개발자들이 코드 변경사항을 메인 브랜치(main branch)에 주기적으로 통합하는 개발 방식.. 2024. 12. 23. [개념 정리] 모노레포 / 멀티레포 최종 수정 : 24.12.22모노레포모노레포(Monorepo)는 여러 프로젝트를 하나의 Git 저장소에서 관리하는 방식을 말한다. 이 방식이 등장한 배경에는 현대 웹 개발의 복잡성이 한몫했다. 예를 들어, 하나의 서비스를 만들 때 웹 프론트엔드, 모바일 앱, 관리자 대시보드, 백엔드 API 서버 등 여러 프로젝트가 필요한데, 이들이 서로 밀접하게 연관되어 있음에도 각각 다른 저장소에서 관리되면서 발생하는 여러 문제들을 해결하기 위해 등장했다. 전통적인 멀티레포(Multirepo) 방식의 문제점멀티레포는 "Multiple Repository"의 줄임말로, 프로젝트나 서비스별로 각각 독립된 저장소를 만들어 관리하는 방식이다. 전통적으로 많이 사용되어 온 방식이며, 프로젝트 간의 명확한 경계를 두고 독립적으로.. 2024. 12. 22. [패키지 매니저] 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. 이전 1 2 다음