전체 글
npm 개발자가 하나의 패키지를 설치한다고 해도, 꼬리에 꼬리를 무는 종속성(dependency) 패키지까지 모두 설치된다(Ghost Dependency) 이 과정에서 어떤 패키지가 중복 저장되거나, 설치를 의도하지 않은 패키지를 사용할 수 있게 되는 등 잠재적인 문제가 발생할 수 있다. npm은 패키지 설치 시 패키지들을 각각 별도로 설치한다. 이로 인해 공유된 의존성이 중복으로 설치될 수 있고, 의존성 트리가 깊어질수록 패키지 설치 속도가 느려지며 디스크 공간을 많이 차지할 수 있다. pnpm (performant npm) npm의 의존성 문제를 해결하기 위해 고안된 패키지 매니저. pnpm은 패키지를 node_modules에 직접 설치하는 대신, 전역 저장소(Virtual Store)에서 패키지를..
프로젝트 초기세팅 시 eslint와 함께 깔아주어야 하는 것들이 몇가지 있다. 이번 기회에 내가 뭘 설치해서 쓰고있는 건지 정리하고 넘어가야겠다는 생각을 했다. eslint는 문법적 오류를 잡아주고, prettier는 코드컨벤션을 통일시켜준다. 하지만 eslint에는 포맷팅 기능이 포함되어있어서, eslint와 prettier를 함께 쓰면 충돌이 발생할 수 있다. eslint-config-next next.js의 린팅 룰 eslint-plugin-react 리액트의 린팅 룰 eslint-config-prettier eslint에서 prettier와 겹치는 포매팅룰을 삭제 eslint-plugin-prettier eslint에 prettier의 포매팅 기능을 추가 @typescript-eslint/pars..
요즘들어 초기화된 mac에 개발환경 셋팅하는 일이 잦은 것 같아 프로세스를 정리해둔다. vscode, post man, figma 설치 Homebrew 설치/bin/bash -c "(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)" git 설치brew install git git 사용자설정git config --global user.name "본인이름"git config --global user.email "본인 이메일 주소” nvm 설치 & 시스템 환경변수 등록brew install nvmvim ~/.zshenv export NVM_DIR="HOME/.nvm"[ -s "/opt/homebrew..
const makeHighlightText = useCallback( (renderedText?: string) => { if (!renderedText) return ''; if (!searchKeyword) return renderedText; const keywordRegex = new RegExp((${searchKeyword}), 'gi'); const textArray = renderedText.split(keywordRegex); return textArray.map((part, partIndex) => { if (keywordRegex.test(part)) return ( {part} ); return part; }); }, [searchKeyword], );
1. pnpm 설치npm i -g pnpm 2. 기존의 node_modules 폴더 삭제npx npkill* npkill은 node_modules 폴더를 쉽게 찾고 제거할 수 있는 경량 NPM 패키지 3. pnpm 만 사용 가능하도록 package.json 수정"scripts": { "preinstall": "npx only-allow pnpm", ...}, 4. pnpm-lock.yaml 파일 생성pnpm import 5. 이제 package_lock.json은 사용하지 않으므로 삭제 6. 의존성 설치 및 node_modules 폴더 생성pnpm i react-scripts도 더이상 사용하지 않으므로, pnpm uninstall react-scripts로 삭제해준다.
디자인시스템을 만들어 npm으로 배포한 뒤 외부 프로젝트에서 받아와 사용하려 했다. 디자인시스템의 컴포넌트를 만들 때 ${({theme}) => theme.color.stateRed } ... 이런 식으로 쓴 부분이 외부 프로젝트에서 실행하면 stateRed를 찾을 수 없다며 자꾸 에러가 났다. (외부 프로젝트에서 ThemeProvider로 감싸준 상태임에도) config 파일의 rollupOptions를 아래와 같이 수정해서 해결할 수 있었다. // vite.config.ts build: { ... rollupOptions: { external: ['react', 'react-dom', 'styled-components'], ... } } 아오 씨..... 이거땜에 config 파일 이것저것 건드려보고..
storybook은 각 스토리에서 args로 넘기는 값으로 props를 자동으로 추론하여 표기하고 있다. 하지만 넘겨주는 값이 object인 경우 등 표기가 부정확해지는 경우가 있다. 이 때, argTypes를 설정해서 원하는대로 표기를 바꿀 수 있다. import { Meta, StoryObj } from '@storybook/react'; import Chip from './Chip'; const meta: Meta = { component: Chip, argTypes: { icon: { table: { type: { summary: '하나요' } }, // HERE!! description: '둘이요', // HERE!! control: 'object', }, }, parameters: { doc..
구현해야하는 조건 - api response로 받아온 책이 몇 권이냐에 따라 carousel 한 페이지에서 렌더링되어야 하는 책의 개수와 순서가 정해져있음 - carousel 1페이지에 들어가는 책은 최소 1권, 최대 5권 - 5권(캐러솔 한페이지당) * 총 4페이지 = 20권까지는 위 템플릿대로 들어가고, 21권째부터 carousel 1번으로 돌아가서 반복(사용자가 등록한 책의 권 수는 무한대로 늘어날 수 있음) 하나의 템플릿에 데이터를 mapping 하는 것을 넘어, 어떻게 4개의 템플릿에 동적으로 분배해서 렌더링할지 고민했다. api 데이터 불러오는 컴포넌트 1. 일단 한 페이지당 5권씩 들어가도록 데이터를 나눠준다. 2. 1번에서 나눠진 데이터를 다시 맵핑하여 한 페이지당 들어갈 정보로 가공한다...
