typescript 썸네일형 리스트형 package.json에서 yarn resolutions 적용하기 프로젝트: 채식 지도 키워드: resolutions, yarn selective dependency resolutions, deduplicate dependencies, package.json, react-window 상황 프로젝트에서 react-window 라이브러리를 사용하고자한다. react-window의 type definitions package인 '@types/react-window'를 설치한다. react-window를 사용할 때 TS error가 발생한다. 해결 과정 먼저 오류 메시지를 자세히 읽어본다. Type 'React.ReactNode' is not assignable to type 'import("/.../node_modules/@types/react-window/node_modu.. 더보기 UI library에서 spacing system props 구현하기 프로젝트: loplat UI 키워드: system props, spacing props, typescript 상황 컴포넌트 종류와 상관없이 모든 컴포넌트가 공유하면 좋은 prop이 있다. UI component에 margin이나 padding 값만 추가하고 싶은 경우가 많은데, 사소한 spacing css 때문에 class를 부여하거나 styled API를 사용하는 것은 수고롭다. loplat UI를 사내 프로젝트에 적용하면서 spacing(margin, padding) prop이 필요함을 느꼈기 때문에 spacing system prop을 만들고 적용하고자 한다. 해결방법 spacing system prop은 아래와 같이 사용 가능하다. // margin-top: 8px; margin-bottom: 8.. 더보기 typescript Pick으로 확장성있게 타입 지정하기 프로젝트: loplat homepage 키워드: typescript, pick, snake_case, camelCase 상황 GET api로 뉴스 목록을 불러와 카드 모양의 UI로 나열하는 컴포넌트가 있다.(thumbnail 정보를 담는 'image url' 필드 포함) GET api에서 오는 필드는 snake_case(image_url)를 사용중이고, 프론트엔드는 camelCase(imageUrl)를 사용한다. 변수표기법 때문에 'api response/request와 관련된 객체'와 '실제 컴포넌트 단에서 사용되는 객체'의 key 값이 서로 달라 type을 따로 지정해주어야한다. optional을 남용하면 타입스크립트의 장점을 살릴 수 없기때문에, 확장성 있으면서도 타입을 좁힐 수 있는 방법을 고민해.. 더보기 이전 1 다음
