익명의 개발노트

Vue 자체에 절대경로 설정은 @로 내장되어있는데, 스토리 북에서 글로벌 .scss 파일을 지역 scss 파일에 include 혹은 다른 작업을 하기위해 아래와 같이 import 하는 경우 //지역 컴포넌트 @import '@/assets/common-stylesheets/index.scss'; //절대경로설정 .root-header{ @include size(100%, 50px); //include를 쓰려면 글로벌에서 mix인한 내용을 불러와야함 } 웹팩 에러가 나는 것을 볼 수 있다. (해당이슈는 스토리북 이슈에도 있으나, 개발진들이 답을 달아주지는 않은 상황) 상대경로는 작동하는데, 지역 scss 에서 import 할때마다 경로가 다르면 나중에 유지보수 하기에 성가신 상황이 올 수도 있다. 뷰에서 ..

vue-property-decorator 클래스 기반 타입스크립트에 storybook을 설정하는 법 스토리북에서 *.stories.ts를 만들어서 vue파일을 import 하면 *.vue 파일 내부에 '@' 데코레이터를 인식을 못해서 에러가 날 것이다. 이런 경우 스토리북 웹팩을 설정해주어야 한다. .storybook 폴더 밑에 webpack.config.js 파일을 만들어 주고, 웹팩 플러그인을 설치해준다. yarn add -D fork-ts-checker-webpack-plugin //타입스크팁트 체커 // 또는 npm i -D fork-ts-checker-webpack-plugin babel-preset-vue가 없다면 반드시 설치해주어야 한다. yarn add -D babel-preset-vue ..

1. 스토리 북이란? Storybook 은 UI 컴포넌트를 직접 보면서 개발을 할 수 있는 환경을 제공하는 툴이다. 실제 프로젝트 내에서 실행 되는 것이 아니라 독립된 환경으로 실행한다. 순전히 UI 개발에 집중할 수 있게 해주며,기획,디자인,개발자와의 협업 구조에서 원활하게 커뮤케이션이 가능하며 개발 생산성을 향상 시킬 수 있다. UI 개발을 하다 보면 빈번하게 일어나는 디자인 스펙 오류, 기획 프로세스 오류 등을 빠르게 확인 하여 수정 할 수 있으며, 개발자는 컴포넌트를 더욱 유연하고, 재사용 가능한 컴포넌트 개발을 할 수 있도록 도와준다. Storybook 의 경우 현재 많은 회사에서 사용 하고 있으며, Airbnb, Slack, Coursera 등과 많은 리액트 오픈소스 프로젝트에서 사용 되고 있..