<div id="readability-page-1" class="page"><div>과제중이다. 
마크업은 거의 안해보았는데, 이번기회에 마크업도 열심히 공부할 수 있도록 해야겠다.
<h2 id="피그마를-통한-협업">피그마를 통한 협업</h2>
<ul>
<li>assets를 다 받는다. 
- icon은 깨지지않도록 svg<ul>
<li>나머지는 특성에 맞는 이미지파일로</li>
</ul></li>
<li>눈으로 확인하여 큰 영역별로 나눈다. 
- 아토믹디자인을 적용한다면 베이스가되는 컴포넌트들부터 작성해야한다.</li>
<li>영역별로 상세 마크업을 진행한다.</li>
</ul>
<h2 id="storybook-이슈">Storybook 이슈</h2>
<h2 id="전역-스타일을-먹이는-방법">전역 스타일을 먹이는 방법</h2>
storybook을 별도의 애플리케이션이다. 
프로젝트에서 전역스타일시트를 사용하고있다면, storybook에도 별도로 import 해주어야 한다. 
<code>.storybook/preview.js</code>에 추가해주기만 하면 된다.
<pre><code>import "../src/assets/scss/index.scss"; // 전역 scss or css

export const parameters = {
 actions: { argTypesRegex: "^on[A-Z].*" },
 controls: {
 matchers: {
 color: /(background|color)$/i,
 date: /Date$/,
 },
 },
};</code></pre>
<h2 id="typescript-path-적용하는-방법">Typescript path 적용하는 방법</h2>
위와 같은 이치다. 
별도의 앱 어플리케이션이다. 따라서 storybook을 위한 Webpack 설정이 별도로 존재하고있다. 
<code>tsconfig-paths-webpack-plugin</code> 를 설치하여 <code>.storybook/main.js</code>에 적용해준다. 
<pre><code>const TsconfigPathsPlugin = require("tsconfig-paths-webpack-plugin");

module.exports = {
 //...
 webpackFinal: async (config) =&gt; {
 config.resolve.plugins.push(new TsconfigPathsPlugin({}));
 return config;
 },
};
</code></pre>
<h2 id="포인터-이벤트-안먹게하기">포인터 이벤트 안먹게하기</h2>
select 위에 있는 버튼의 이벤트를 무시하고싶을 경우 아래 css를 사용하자 
<img src="https://media.vlpt.us/images/ginameee/post/7e72f64f-edf2-4bec-8faf-1bf0b8d025d8/DB77272A-058A-4EEB-8C3A-6CAE09AD4D2C.png">
<pre><code>pointer-events: none;</code></pre></div></div>

ginameee.log

Jangchun Lee

과제중이다.
마크업은 거의 안해보았는데, 이번기회에 마크업도 열심히 공부할 수 있도록 해야겠다.
피그마를 통한 협업
assets를 다 받는다.
icon은 깨지지않도록 svg
나머지는 특성에 맞는 이미지파일로
눈으로 확인하여 큰 영역별로 나눈다.
아토믹디자인을 적용한다면 베이스가되는 컴포넌트들부터 작성해야한다.
영역별로 상세 마크업을 진행한다.
Storybook 이슈
전역 스타일을 먹이는 방법
storybook을 별도의 애플리케이션이다.
프로젝트에서 전역스타일시트를 사용하고있다면, storybook에도 별도로 import 해주어야 한다.
.storybook/preview.js에 추가해주기만 하면 된다.
import "../src/assets/scss/index.scss"; // 전역 scss or css
export const parameters = {
  actions: { argTypesRegex: "^on[A-Z].*" },
  controls: {
    matchers: {
      color: /(background|color)$/i,
      date: /Date$/,
    },
  },
};
Typescript path 적용하는 방법
위와 같은 이치다.
별도의 앱 어플리케이션이다. 따라서 storybook을 위한 Webpack 설정이 별도로 존재하고있다.
tsconfig-paths-webpack-plugin 를 설치하여 .storybook/main.js에 적용해준다. 
const TsconfigPathsPlugin = require("tsconfig-paths-webpack-plugin");
module.exports = {
  //...
  webpackFinal: async (config) => {
    config.resolve.plugins.push(new TsconfigPathsPlugin({}));
    return config;
  },
};
포인터 이벤트 안먹게하기
select 위에 있는 버튼의 이벤트를 무시하고싶을 경우 아래 css를 사용하자
pointer-events: none;

2021.10.20

댓글