한 걸음/React
일반적으로 css의 text-ellipsis를 적용하면 뒷부분만 말줄임표 처리가 되는데, (ex. "가나다라마...") 나는 위와 같이 앞부분과 뒷부분은 사용자에게 보여주고, 중간 부분만 말줄임표하는 처리가 필요했다. (ex. "가나다...바사") 자바스크립트를 이용해 다음과 같은 과정으로 처리했다. 1. 실제 텍스트를 먼저 렌더링한 뒤 (서버에서 받아오는 값에 따라 width가 넘칠수도, 안넘칠수도 있다) 2. ref.current.offsetWidth를 통해 렌더링된 div의 width를 구한다. 3. 만약 내용이 넘치면 isOverflow를 true로 설정한다. 4. isOverflow가 true일 땐 첫 10글자, 뒤 4글자를 잘라낸 값을 보여준다. const TargetCell = ({width..
프로젝트 초기세팅 시 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..
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!! )
