공부한 내용
Sass
CSS를 마치 자바스크립트처럼 쓸 수 있으며 color,width 같은 반복되는 값을 변수로 지정하여 쓸 수 있으며, 또는 반복되는 코드를 한 번의 선언으로 여러 곳에서 재사용할 수 있도록 한다. 그렇기 때문에 Sass는 SCSS 코드를 읽어서 전처리 한 다음 컴파일해서 전역 CSS 번들 파일을 만들어주는 전처리기 역할을 한다.
하지만 단순히 스타일이 겹치는 문제를 해결하기 위해 계층 구조를 만들어 내는 것에만 의지하게 되었고 그 결과 용량이 엄청 커지게 되었다.
CSS 구조화를 위한 시도
- BEM, styled-component
BEM
Block , Element, Modifier로 구분하여 클래스명을 작성하는 방법
장점 : 네이밍으로 문제 해결, 전처리 불필요
단점 : 클래스 리스트가 너무 많아짐
styled-component
장점: 컴포넌트 기반 CSS 라이브러리이기 때문에 컴포넌트 안으로 캡슐화가 가능하다.
단점: 동적인 이벤트가 많아질 경우 렌더링 될 때 스타일 정보도 다시 읽어야 한다.
StoryBook
Component Driven Development 중 하나이며, UI 개발도구로서 많이 사용한다.
이걸 왜 사용하는가?
독립적인 개발 환경에서 실행하기 때문에 애플리케이션의 다양한 상황에 구애받지 않고 UI 컴포넌트를 집중적으로 개발할 수 있다.
알아볼 것
전처리- 카탈로그화
- 핫 모듈 리로딩
컴포넌트 변화를 Stories로 저장하기
알아낸 것
Story란?
공식 문서에 따르면 렌더링 된 컴포넌트 변화를 감지한다고 한다. 그래서 이 같은 변화를 Stories에 저장한다고 하는 것 같다.
전처리
CSS에 편리한 기능을 더한 새로운 언어들을 추가해서 이 언어에 따라서 작성한 코드를 어떤 프로그램으로 실행시키면 결과적으로 CSS를 만들어주는 도구가 있는데 이를 전처리기라고 한다.
출처 : https://opentutorials.org/course/2418/13468
과제 후기
Custom Component 과제를 진행하면서 모달,탭,태그,토글 그리고 자동완성,clicktoEdit까지 만들어봤는데
어제 예비군을 갔다오는 바람에 시간을 별로 투자 못했지만 다행히 2일짜리 과제였다.
자동완성 부분에서 좀 고생(?) 하긴 했다.
이거 만든 거 가지고 팀플 할 때 적용해보면 좋지 않을 까 싶었다.
해보고 싶은 것
- 태그 부분에 localStorage 적용하기
