Who I really am
프로젝트 초기세팅 시 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번에서 나눠진 데이터를 다시 맵핑하여 한 페이지당 들어갈 정보로 가공한다...
pnpm publish를 한 뒤, 다른 프로젝트에서 방금 올린 npm 컴포넌트를 설치해서 쓰려고 하였으나... 이렇게 모듈을 찾을 수 없다는 에러메시지와 함께 import해서 사용할 수가 없었다. node_modules 폴더엔 이렇게 예쁘게 깔려있는데... 왜일까? 타입에러인가.. 여러가지를 고쳐보다가 package.json에 아래 두 줄을 추가해서 해결할 수 있었다... 아래 "main"에 있는 경로가 중요한 것 같다. 해당 파일은 node_modules > pnpm i로 설치한 모듈 > dist > index.es.js 파일명과 같다. 기존에 잘 동작하던 npm 라이브러리는 그냥 index.js로 배포되어서, 혹시 cjs, ems, es... 같은 확장자가 중요한 건가 했는데 그건 아닌 듯 싶다. 해..
우리 디자인시스템의 모달은 와 부분으로 나뉘어져 있는데, form으로 modal 전체를 감싸버리면 css가 깨지는 문제가 있었다(=form은 modal content 부분만 감싸야 함). 그러면 submit 버튼은 외부에 있기 때문에 눌러도 동작하지 않는데, 1. form에 id를 부여 2. 등록버튼에 해당 id값을 알려주는 것으로 해결했다. const onSubmit = () => { ...api호출 } ... return( // HERE!! ... 등록 // HERE!! )
