서른, 프로그래머 입문하다

서른, 프로그래머 입문하다

• [패키지 매니저] PNPM 최종 수정 : 24.12.21PNPMPNPM은 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.21Yarn2016년 Fackbook에서 개발됐으며, 당시 NPM의 여러 문제점을 해결하기 위해 등장했다. 당시 NPM의 문제와 Yarn의 해결 방식1. 의존성 설치 속도 문제NPM은 패키지를 하나씩 순차적으로 설치하는 방식이었다. 하나의 패키지 설치가 완료된 후에야 다음 패키지 설치를 시작하는 방식이다. 이로 인해 수십 개의 패키지를 설치할 경우에는 많은 시간이 소요될 수밖에 없다. -> Yarn은 이 문제를 병렬 설치 방식으로 해결했다. 동시에 설치할 수 있게 되어 시간을 많이 단축할 수 있다. 2. 버전 일관성 문제NPM은 초기에 package-lock.json 파일이 없었다. package.json에서 ^나 ~ 같은 버전 범위를 사용할 때, 개발자마다 다른 버전의 패키지가.. 2024.12.21
• [패키지 매니저] Yarn Berry 최종 수정 : 24.12.20Yarn 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.08.01
• Flux 패턴 플렉스(Flex)로 디자인하고 플럭스(Flux)로 설계하라.기존 애플리케이션에서는 MVC 패턴을 사용하고 있었다. MVC는 Model, View, Controller의 약자이다. Model에 데이터를 저장하고, Controller를 이용하여 Model의 데이터를 관리(CRUD)한다. Model의 데이터가 변경되면 View로 전달되어 사용자에게 보여진다. 여기서 중요한 점은 사용자가 View를 통해 데이터를 입력하면 Model을 업데이트를 할 수 있었다는 데 있다. 즉, 데이터가 양방향으로 흐르는 경우가 있었다. 문제는 여기에서 시작되는데, 애플리케이션의 규모가 커질수록 상호작용이 일어나는 경우가 늘어났다. 그로 인해, 데이터의 흐름이 복잡해지기 시작했다. 이로 인해, 애플리케이션의 동작을 예측하기가 어려.. 2024.07.27
• React Query - 기능구현 최종 수정일 : 2024-07-25기능구현Dependant Query만약 어떤 두 쿼리가 의존관계가 있어 특정 순서대로 실행이 되어야 하는 경우에는 useQuery()의 enabled 옵션을 사용할 수 있다. enabled 옵션을 사용하면 enabled 값이 true가 되어야만 해당 쿼리가 실행된다. 이렇게 어떤 특정 값이나 조건이 충족된 이후에 실행되는 쿼리를 Dependant Query라고 한다.Paginated Query리액트 쿼리에서는 좀 더 부드러운 UI 전환을 위해 placeholderData 라는 것을 설정해줄 수 있다. useQuery()에서 placeholderData 옵션에 keepPreviousData 혹은 (prevData) => prevData를 넣어주면 페이지가 새로 바뀌더라도 .. 2024.07.25
• 스토리북(Storybook) 최종 수정일 : 2024-07-24스토리북(Storybook)프론트엔드 개발자로서 컴포넌트를 개발하다보면 여러 문제가 발생한다. 1) 중복 컨포넌트 개발여러 명의 개발자가 한 서비스를 개발하다보면 각 개발자가 어떤 컴포넌트를 만들고 있는지 실시간으로 알기 쉽지 않다. 그로 인해, 비슷한 컴포넌트가 이미 존재함에도 중복되는 컴포넌트를 만들 가능성이 생긴다. 2) 디자이너와 기획자와 소통할 때디자이너 및 기획자가 요구한 디자인에 정확한 사이즈, 간격, 색상이 정해지지 않은 경우가 있는데, 이런 경우 개발자가 주관적인 느김으로 컴포넌트를 일단 만들고 피드백을 받게 된다. 하지만 컴포넌트 하나를 만드는 과정에서 여러 번의 피드백이 오갈 수 있는데, 이 과정은 시간이 걸릴 수밖에 없다. 개발자는 UI 부분 이외에.. 2024.07.24
• Next.JS 폴더구조 (Page Router & App Router) 최종 수정일 : 2024-07-22Next.JS 폴더구조 (Page Router & App Router)1. Page Routermy-next-app/├── public/│ ├── favicon.ico│ └── images/├── src/│ ├── components/│ │ └── MyComponent.js│ ├── pages/│ │ ├── api/│ │ │ └── hello.js│ │ ├── _app.js│ │ ├── _document.js│ │ ├── index.js│ │ └── about.js│ ├── styles/│ │ ├── globals.css│ │ └── Home.module.css│ └── utils/.. 2024.07.22
• React Query의 옵션과 리턴 값 최종 수정일 : 2024-07-22React Query의 옵션과 리턴 값useQuery -TanStack Query 공식 문서 useQuery | TanStack Query React DocsDoes this replace [Redux, MobX, etc]? reacttanstack.com 로딩과 에러 처리 구현하기리액트 쿼리에서는 에러가 발생하면 기본적으로 3번의 재시도를 한다. 그러나, 테스트를 위해서는 retry 횟수를 0으로 조정하면 에러 화면을 더 발리 볼 수 있어 편하게 테스트할 수 있다.function HomePage() { const { data: postsData, isPending, isError, } = useQuery({ queryKey: ['posts'],.. 2024.07.22