[일기] 20220711

출근길에 본 영상인 데 그동안 해야 지 해야 지 했던 부분들을 경험 빗대서 설명 해주셔서 좋았고, 나도 잠시 SI를 다닐 뻔한 사람으로서 다른 개발자를 준비하는 사람들이 보면 좋을 것 같았다!

 

CSS 모듈화

: 전체 페이지의 특정 부분을 떼서 특정 페이지에 적용 했을 때 모양이 유지되어야 함! 틀어지면 안 된다.

요즘은 React 사용률이 늘어나면서 css-module이나 styled-components 등등으로 CSS 모듈화 하는 것이 쉬운 편이지만

HTML, CSS만으로도 CSS 모듈화가 가능하도록 삽 집을 해보는 것이 성장에 좋다고 한다. (정적은 동적으로 바꿔야 한다??)

 

CSS 모듈화를 잘하기 위해서는

1) 클래스명을 잘 지어서 사용해야 하고 이를 위해서는 CSS 방법론을 공부하는 것이 좋다.

2) 단위를 쪼개는 기준 (작은 것부터 쪼갤지, 큰 -> 작은 걸로 쪼갤 지 등등)

3) 부모 요소는 위치 또는 레이아웃 관련 정도의 스타일만 부여하고 직접적인 스타일링은 하위 요소에 부여하는 것이 좋다.

 

위 과정으로 프로젝트를 진행하면 재사용성이 어마무시하게 커지기 때문에 좋고, 편리 해진다.

 

디자인 패턴, 디자인 시스템

: 대표적으로 Atomic Design Pattern이 있는 데 이 패턴은 CSS 모듈화에 최적화되어 있는 패턴이다.

프로그래밍 언어, 디자인 패턴/디자인 시스템 기준 등등에 따라 천차만별이기 때문에 잘 고려해서 선택해야 한다.

 

React는 데이터를 가져오는 컴포 너트와 데이터를 사용하는 컴포넌트, UI(디자인) 컴포넌트를 분리해서 사용하는 것이 핵심이다.

(이 부분은 나도 많이 공부해야 할 것 같다. 지금 개 짬뽕 임)