새로운 커뮤니케이션 플랫폼 kokoto에서 사용한 React, CSS Modules와 관련한 발표 자료입니다.

1. 웹 디자인:
kokoto에서의
React,
CSS Modules

2. React란
무엇인가?
1
왜 컴포넌트인가?
똑같은 코드를
또다시
작성할 필요가
없어진다
재사용성
컴포넌트가
하는 일이
명확해지면서
코드에
집중할 수 있다
관심사의 분리
변수 이름 등이
지역화되면서
같은 변수명을
여러 곳에서
사용할 수 있다
지역화

3. React란
무엇인가?
1
Plain HTML
Template
Engine
 컴포넌트화가 불가능에 가깝다
 <iframe>, <object> 태그??
 컴포넌트 안에 스크립트와 스타일을
포함하는 것이 가능해짐
 구조는 분리 가능 (mixin)
 스크립트나 스타일은 분리 불가
React

4. React란
무엇인가?
1
어떻게 컴포넌트화하는가?
이것만으로다양한상황에대처가능!

5. React란
무엇인가?
1
부모로부터 상속받는 속성(props)이 바뀌거나,
컴포넌트의 상태(state)가 바뀌면 업데이트
손쉽게 동적인 사용자 인터페이스의 구현이 가능
레벨이바뀌니까실제표시화면에도적용되네!

6. CSS
무엇이
문제인가?
2
CSS: Cascading Style Sheets
클래스와선택자의1:1매칭

7. CSS
무엇이
문제인가?
2
문제 발생
‘small’이라는 클래스 이름
너무 일반적인 이름이라서, 재사용 문제
해결책 1
CSS의 상속 기능 사용
전역 이름공간의 오염
“user-info의자식중
small을선택”

8. 2
너~무 길다!
CSS
무엇이
문제인가?
문제 발생

9. 2
 보기에 안 좋다.
 성능이 떨어진다.
(label 중 부모가 row 중 부모가 info 중…)
 스타일 재사용이 불가능하다.
 구조가 변경되면 스타일시트도 바뀐다.
CSS
무엇이
문제인가?

10. 2
해결책 2
특징적인 이름을 (길더라도) 따로 붙인다.
CSS
무엇이
문제인가?

11. 2
해결책 2
특징적인 이름을 (길더라도) 따로 붙인다.
 상대적으로 나은 방법 (재사용, 구조 문제 해결)
 일반적인 이름을 사용하지 못해서 불편하다.
 일일이 이름을 생각해내야 한다.
CSS
무엇이
문제인가?

12. 3
CSS ModulesCSS
Modules
 CSS의 이름공간 포화를 막기 위한 대안
 CSS를 자동으로 모듈화해줌으로써
대부분의 문제로부터 벗어날 수 있다

13. CSS선택자는간결하게구성
자바스크립트모듈을
불러올때와같은문법
클래스의이름은
style객체의키이름으로
3
CSS
Modules

14. 실제로 구성된 화면
3
CSS
Modules

15. 어떻게 구성하는가?
3
CSS
Modules
 webpack.config.js에 설정
 [파일이름]__[클래스이름]__[base64 인코딩]
 자유롭게 설정 변경 가능