Under the Sign of Saturn

리액트로 프론트엔드 개발 시 유용한 컴포넌트 관리 도구, 스토리북을 도입해보기 - 3 (CRA + TypeScript + Prettier + ESLint + husky + lint-staged + Storybook + chromatic) TypeScript를 기반으로 하는 Create React App 준비는 첫 번째 시리즈에서 다뤘고, ESLiint와 Prettier는 두 번째 시리즈에서 다루었다. 2022.01.28 - [분류 전체보기] - [Storybook] 리액트로 프론트엔드 개발 시 유용한 컴포넌트 관리 도구, 스토리북을 도입해보기 - 1 2022.02.04 - [🛠/Dev Tool] - [storybook] 리액트로 프론트엔드 개발 시 유용한 컴포넌트 관리 도구, 스토리북을 도입해보기 - 2..

리액트로 프론트엔드 개발 시 유용한 컴포넌트 관리 도구, 스토리북을 도입해보기 (CRA + Prettier + ESLint + TypeScript + Storybook + chromatic) 2022.01.28 - [🛠/Dev Tool] - [Storybook] 리액트로 프론트엔드 개발 시 유용한 컴포넌트 관리 도구, 스토리북을 도입해보기 - 1 [Storybook] 리액트로 프론트엔드 개발 시 유용한 컴포넌트 관리 도구, 스토리북을 도입해보기 - 1 리액트로 프론트엔드 개발 시 유용한 컴포넌트 관리 도구, 스토리북을 도입해보기 (CRA + ESLint + TypeScript + Storybook + chromatic) 예전 프로젝트에서 디자인이 수시로 변경되었는데, 디자인 버전 관리 uiyoji-jou..

리액트로 프론트엔드 개발 시 유용한 컴포넌트 관리 도구, 스토리북을 도입해보기 (CRA + ESLint + TypeScript + Storybook + chromatic) 예전 프로젝트에서 디자인이 수시로 변경되었는데, 디자인 버전 관리 체계도 제대로 이루어지지 않아서 어느 것이 최신 버전인지, 유효한 디자인인지 확인하기 어려웠다. Theme이 세 가지나 다른 디자인에 대해 각각 컴포넌트와 페이지를 다루기가 너무 난감했다. 작성하고 있는 컴포넌트는 재사용을 위한다고 가면, 너무 많은 prop이 걸려서 번번히 테스트 코드도 없는 와중에 디버깅 하기가 힘들었다. 그래서 이번 프로젝트에서는 디자이너와 협업 효율도 높이고, 시각적으로 컴포넌트들을 따로 볼 수 있으며, 개별적으로 개발해서 bottom-up 방식으..

몇 개의 프로젝트에서 타입스크립트를 쓰고 나서부터는 이제 타입스크립트 이전으로 돌아가지 못하고 있다. 그런데 또 체계적으로 타입스크립트를 써온 게 아니라, 쓰는 타입만 쓰고, 그때 그때 에러를 해결해 나가면서 체득한 것인지라 시간이 나면 잘 정리된 문서들을 읽으면서, 문법을 익히려고 한다. React Native를 할 때 가장 TS를 많이 썼는데, 이때는 거의 interface로 점철하다시피했다. type과 interface가 거의 비슷하다는 것은 알고 있었지만, 딱 거기까지어서 이번 기회에 정리해봤다. Interface interface는 object 타입을 정의하는 다른 방법이다. 이름과 나이를 받는 user라는 이름의 객체 정보가 있을 때 아래처럼 interface를 선언할 수 있다. interfa..

작년 말부터는 웹 개발보다는 앱 개발을 더 열심히 하는 해다. 네이티브에 대한 지식이 없어서, 되도록 빨리 만들어야 하는 MVP 앱은 리액트 네이티브+엑스포 스택으로 시작하게 되었는데, Expo 프레임워크가 제공하는 expo-constants library 사용 중에 만난 타입스크립트 에러이다. 리액트 네이티브의 Aniamted 모듈을 사용해 backgroundColor를 지정할 때 발생했는데, 이때 App.json에 미리 작성한 시스템 배경색을 가지고 오려고 했다. 주석을 처리하지 않은 코드에서 보면 모든 객체들이 체이닝되어 키들을 잘 따라가고 있는데, 에러가 나서 App.json으로 다시 가서 확인해봤다. "splash": { "image": "./src/assets/images/splash.png"..

문제 상황 SVG 애니메이션 연습을 위해서 TypeScript를 적용 중인 Vue.js에 anime.js를 다운로드 받았다. 아래처럼 달 모양 SVG 그래픽을 이용해 클릭 시 가벼운 애니메이션을 추가하는 과정에서 자꾸 아래 같은 에러가 났다. Property '$anime' does not exist on type 'CombinedVueInstance

맨 처음 자바스크립트를 배울 때 개념만 한 번 훑고 지나갔던 TypeScript를 다시 해보고 싶어서 오늘 기초 강의들을 쭉 살펴봤다. Java를 하고 온 다음에 TypeScript를 접하니 아무래도 이해하기가 더 쉬웠다. 예제 중 객체지향 프로그래밍과 클래스를 소개하는 챕터에서 난데없이 ts2564 에러, "Property 'fullName' has no initializer and is not definitely assigned in the constructor"를 만났다. 현재 tsc -v 명령어로 살펴본 현재 Version은 4.1.3이고, 이곳을 참고해보니, 2.7.2에부터 도입된 strict class checking으로 인한 오류라고 나와 있었다. 두 가지 방법으로 해결 가능한데, class..