230418_TIL (CDD, Style-Components, Storybook)

🌱오늘 한 것

• CSS의 발전과정에 대해 학습했다.
• CDD에 대해 학습했다.
• CDD 개발 도구에 대해 학습하고, 간단한 실습을 진행 했다.

🌱기억해야할 것

• CDD (Component Driven Development)
  : 레고처럼 조립해 나갈 수 있는 부품 단위로 UI 컴포넌트를 만들어 나가는 개발(상향식 개발)

• CSS의 발전 과정
  : CSS 작성에 있어서 일관된 패턴 없음 ➡ 구조적 작성을 위해 CSS 전처리기 등장 (SASS (Syntactically Awesome Style Sheets) 등) ➡ 전처리기 사용 시 발생하는 문제 해결을 위해 CSS 방법론 등장 ➡ 캡슐화 개념이 없어서 발생한 문제를 해결하기 위해 CSS-in-JS(Styled-Components 등) 등장

• Styled-Components 작성 시, hover 효과를 주기 위해서는 아래와 같이 작성한다.

  const Button2 = styled.button`
   background: ${(props) => props.color || "white"}
   &:hover {
   	background: cornflowerblue;
   	color: white;
  	transition: 0.5s;
   }
  `;

🌱더 알아볼 것

• storybook에 대해 공식 문서를 읽으면서 추가적인 학습을 하자.
• storybook을 실무에서 어떤 식으로 사용하게 되는지 서치해서 알아보자

🌱한 줄 감상

역시 간단하게라도 직접 실습하면서 익히는게 제일 빠르고 오래 기억할 수 있다! 내일은 과제를 통해서 좀 더 길고 깊게 실습해 볼 예정인데... 기대된다...! 항상 익힌 이론을 실습을 통해서 내걸로 만드는 과정은 시작하기 전엔 걱정이다가도 하다보면 이게 정답이었구나 싶고 뿌듯하고 재밌다.