22.06.30_TIL

📌 CDD에 대해서 학습하는 날이다.. 요즘 비가와서 그런지 기분이 한층 다운된 상태로 유지하고 있다... 조금 더 힘내서 기운을 되찾아서 열심히 해보자!!!

 

📗 오늘 학습한 내용

CDD (Component Driven Development)

• 기획자가 이전에 요청 받았던 기능을 똑같이 사용하도록 요청했다. 이때, 팀에서 같은 UI 컴포넌트를 공유한다면 고민하지 않고 컴포넌트를 재새용 할 수 있는 방법론이 CDD이다.
• 부품 단위로 UI 컴포넌트를 만들어 나가는 개발을 하는 것.

CSS in JS

• 프로젝트의 규모나 복잡도가 점점 커지고 함께 작업할 팀원 수도 많아지면서 CSS를 작성하는 일관된 패턴이 없어서 효율적으로 작업하기 위해 구조화된 CSS가 필요해졌다.
• 위의 문제점을 해결하기 위해 나온것이 CSS 전처리기이다.
  • CSS 전처리기: 많은 반복적인 작업을 요구하고 값을 찾는 번거로운 작업이 많아지면서 자연스럽게 CSS 문서의 양도 증가하여 유지관리에 영향을 끼쳤는데 이런 문제를 해결하기 위함.
    • 전처리기를 통해CSS 파일들을 잘 구조화할 수 있게 되었고, 최소한 CSS 파일을 몇 개의 작은 파일로 분리 할 수 있는 방법이 생겼다.
• CSS 전처리기 중 가장 유명한 것은 SASS(Syntactically Awesome Style Sheets)
  • SASS: CSS를 확장해 주는 스크립팅 언어
    • CSS를 만들어주는 언어로서 JS 특정 속성의 값을 변수로 선언하여 필요한 곳에 선언된 변수를 적용할 수 있으며, 반복되는 코드를 한 번의 선언으로 여러 곳에서 재사용할 수 있도록 해주는 기능 등을 가지고 있다.
    • 하지만, 장점보다 다른 문제들을 더 많이 만들어지는 것이 밝혀졌습니다.
    • 내부에서 어떤 작업을 하는지 알지 못한 채, 스타일이 겹치는 문제를 해결하기 위해 계층 구조를 만들어 내는 것에 의지하여 컴파일된 CSS의 용량은 생각지도 못하게 커져있었습니다.
• 전처리기 문제 보완 방법론
  • BEM, OOCSS, SMACSS
    • 공통 지향점
      • 코드의 재사용
      • 코드의 간결화(유지 보수 용이)
      • 코드의 확장성
      • 코드의 예측성(클래스 명으로 의미 예측)
• BEM
  • 대표적인 CSS 방법론
  • Block, Element, Modifier로 구분하여 클래스명을 작성하는 방법 (--와__로 구분한다)
  • 클래스명은 BEM 방식의 이름을 여러 번 반복하여 재사용할 수 있도록 한다.
• Styled-Component
  • 기능적 혹은 상태를 가진 컴포넌트들로부터 UI를 완전히 분리해 사용할 수 있는 아주 단순한 패턴을 제공
  • CSS를 컴포넌트화 시키는 라이브러리
    • 사용하는 이유
      • class, id 이름을 짓느라 고민될 때
      • CSS 파일 안에서 원하는 부분을 찾기 힘들 때
      • CSS 파일이 너무 길어져서 파일을 쪼개서 관리해본 적이 있을 경우
      • 스타일 속성이 겹쳐서 내가 원한느 결과가 나오지 않은 경우
• Storybook
  • UI 개발, CDD를 하기 위한 도구
  • 컴포넌트들을 따로 볼 수 있게 구성해 주어 한 번에 하나의 컴포넌트에서 작업할 수 있다.
  • 복잡한 개발 스택을 시작하거나, 특정 데이터를 데이터베이스로 강제 이동하거나, 애플리케이션을 탐색할 필요 없이 전체 UI를 한눈에 보고 개발할 수 있다.
• useRef
  • DOM 노드, 엘리먼트, React 컴포넌트 주소값을 참조할 수 있다.
  • useRef로 선언된 주소값은 컴포넌트가 re-render 되더라도 바뀌지 않는다.
  • 활용예제
    • focus
    • text selection
    • media playback
    • 애니메이션 적용

 

📘 추가로 공부할 내용

[udemy] React 완벽 가이드 강의 보기 (매일 조금씩 이라도 꾸준히 듣기)

UI/UX 패턴 React에서 구현해보기

useRef 사용법 자세히 찾아보기

 

📝 중요한 내용

• CDD
• CSS - in - JS
• BEM
  • Block, Element, Modifier로 구분하여 클래스명을 작성하는 방법 (--와__로 구분한다)
• Styled-Component
  • CSS를 컴포넌트화 시키는 라이브러리