CHAYAN.LOG

영상(React VAC pattern - View 로직과 JSX의 의존성을 최소화 하자)의 내용을 기본으로 담았습니다. 리액트 VAC 패턴 프론트엔드 개발자와 UI 개발자가 있고 UI 개발자가 직접 html과 JSX를 작성하는 경우, 프론트엔드 개발자와 개발 영역이 겹쳐 conflict가 종종 일어난다. 이런 문제를 해결하기 위해서 VAC 패턴을 제안한다. VAC 패턴은 View Asset Component의 줄인말로, 쉽게 말해 View 로직과 JSX 를 분리해서 관리하는 패턴이다. 이렇게 분리된 JSX는 props를 통해서만 제어되고, 스스로의 상태를 관리하지 않는 stateleess 컴포넌트이다. 이는 즉 반복, 조건부 노출, 스타일 제어와 같은 렌더링에 관련된 처리만을 수행하는것을 의미한다. VA..

목차 webpack 5를 위한 스토리북 Storybook 6.2버전부터Storybook은 webpack5를 공식 지원하기 시작했다. 이 과정을 통해 Snowpack, EsBuild, Vite와 같은 차세대 빌더를 탐색할 수 있는 플러그형 빌더도 만들었다. Storybook은 본질적으로 편집한 컴포넌트, 테마, 스토리등등을 실시간으로 번들링 하는 빌드 툴이다. 이렇다보니 webpack의 메이저 버전 업그레이드는 Storybook에게 큰 문제였다. (웹팩자체 뿐만 아니라, 사용되는 다양한 플러그인 등등이 다 연관되어있다보니...) 그래서 Storybook 6.2버전부터 번들러 의존성, 플러그인 의전성, 구성 처리까지 추상화해 webpack 4와 5를 동시에 지원하기 시작했다. 현재, webpack 4가 디폴..

공식문서의 일부 내용을 번역 및 재해석한 글입니다. Storybook에서 Typescript 사용하기 Storybook은 기본적으로 Typescript를 내장하고 있어, 별도의 설정 없이도 Typescript 프로젝트에 사용할 수 있다. 기본 설정 기본적으로 ts 변환을 위해 babel-loader를 사용하고, 옵션으로 타입 체킹을 위한 fork-ts-checker-webpack-plugin을 제공한다. 더보기 [fork-ts-checker-webpack-plugin?] 간단하게 말하면 기본적으로 ts-loader, babel-loader와 같은 것들을 이용해 Typescript 컴파일을 수행하게 되면, 타입 변환과 타입 검사 과정을 수행하게 된다. 이때, 이 두 과정이 순서대로 이뤄지기에 컴파일하는데 ..

Storybook 사용중, 컴포넌트의 보여지는 순서가 코드에서 export한 순서가 아닌 문자순으로 자동정렬 되는 이슈가 있다. 이는 현재 최신 버전(v6.4.x )에서 발생하는 문제로 이미 이슈로 등록되었던 문제이다. 이 이슈를 해결하기 위해 개발자 측에서 v.6.5.0-alpha.17 의 prelease 버전을 내놓았고 npx sb upgrade --prerelease 명령어를 통해 v6.5.x를 사용함으로서 해결 할 수 있다. (만약 이를 원하지 않는다면 다운그레이드를 수행하는 수밖에...)