Who I really am
디자인시스템을 만들어 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!! )
문제상황 - 드롭다운과 콘텐츠 영역이 있음 (드롭다운 안의 option들은 api reponse로 받아온 data) - 드롭다운을 바꿀 때, 진짜 바꿀 거냐고 한 번 물어봐주는 confirm창이 뜸 - confirm에서 확인을 누르면 콘텐츠 영역이 해당 내용으로 교체 / 취소누르면 기존 콘텐츠 영역에 그대로 남아있어야 함 - 하지만 드롭다운에서 '세번째 것'을 선택하면 컨펌창이 뜨고, 콘텐츠영역에는 기존 데이터인 '두번째 것'이 남아있지만... select 영역의 텍스트가 새로 선택한 '세번째 것'으로 곧바로 바뀌어버렸다. 드롭다운의 options를 구성하는 부분 const { data: siteData } = useGetSiteList(); const siteOption = useMemo(() => {..
찾을 대상이 영어 대문자로 작성되어 있을 시(APPLE) "apple"이라고 검색했을 땐 찾지 못하는 이슈가 있었다. 정규식과 match 함수를 사용해 해결했다. // 변경 전 data.filter((site) => { return ( site.siteName.includes(mainKeyword) || site.siteAdminPhone.includes(mainKeyword) || site.siteBusinessNumber.includes(mainKeyword) ); } // 변경 후 data.filter((site) => { return ( site.siteName.match(new RegExp(mainKeyword, 'gi')) || site.siteAdminPhone.match(new RegExp..
// 테이블 { field: 'staffName', headerName: t('담당자명'), minWidth: 100, valueGetter: (params: ValueGetterParams): string => { const value = getValueFromGetterParams(params); return value; }, }, // custom function const getValueFromGetterParams = (params: ValueGetterParams) => { const columnField = (params.colDef.field as ColDef['field']) ?? ''; if (columnField.includes('.')) { const columnFieldArray ..
사이드 프로젝트 진행 중, 위와같이 드래그해서 value를 설정할 수 있는 슬라이더가 필요했다. npm에 마땅한 게 없어서 직접 만들어 구현하기로 했다. RangeSlider.tsx import { useState } from 'react' import styled from 'styled-components' const Slider = styled.input` position: absolute; top: 50%; width: 100%; height: 12px; -webkit-appearance: none; background: transparent; margin: 0; border: 0; &:active { cursor: grabbing; } &:focus { outline: none; } ` const..