20170202 D2 발표

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

발표자

프레젠테이션 노트

안녕하세요. Kokoto 팀의 프론트엔드 개발자 박서진이라고 합니다. 오늘은 Kokoto에서 사용한 여러 기술들에 관해 이야기를 나눠보려고 하는데요. 그 중에서 React, CSS Modules, Translations에 관련된 이야기를 나눠보고자 합니다. React는 기본적인 내용으로서 너무 깊게는 나가지는 않을 예정이고, CSS Modules와 Translations에 관해 조금 더 많은 이야기를 나누고 싶습니다.

React란무엇인가?

1

왜컴포넌트인가?

똑같은 코드를또다시

작성할 필요가없어진다

재사용성

컴포넌트가하는 일이

명확해지면서코드에

집중할 수 있다

관심사의분리

변수 이름 등이지역화되면서같은 변수명을

여러 곳에서사용할 수 있다

지역화

발표자


<모듈화와 컴포넌트화> 소프트웨어 공학적 사고방식 -> 컴포넌트화 중요 여러 가지 이점, 무엇 생각? 관심사의 분리, 추상화: 컴포넌트가 하는 일이 명확, 코드 간결해짐, 협업 쉬움, 스파게티 코드 방지 재사용성: 모듈을 한 프로젝트 내에서, 혹은 다른 프로젝트에서 똑같이 사용 가능 지역화: local namespace 안에서 변수명을 자유롭게 사용할 수 있음


1

Plain HTML

TemplateEngine

컴포넌트화가 불가능에 가깝다 <iframe>, <object> 태그??

컴포넌트 안에 스크립트와 스타일을포함하는 것이 가능해짐

구조는 분리 가능 (mixin) 스크립트나 스타일은 분리 불가

React

발표자


React와 관련된 이야기들. React 이전, 꽤 전부터 프로젝트를 진행해 왔음. Template Engine 없는 HTML: 컴포넌트화가 불가능에 가까움. <object> 태그??? Template Engine: mixin but JS, CSS가 같이 모듈화되지 않음 React: JS, CSS까지 한꺼번에 컴포넌트화됨.


1

어떻게컴포넌트화하는가?

이것만으로 다양한 상황에 대처 가능!

발표자


그렇다면 컴포넌트화는 어떻게 하는가? 우선, React에서 구조를 컴포넌트화하는 방법. 변수 안에 HTML 구조를 넣는다. 치환할 값이 있으면 치환한다. <ComponentName>과 같이 그냥 HTML 코드를 작성하는 것처럼 사용한다. Attribute value를 줘서 값을 치환한다.


1

부모로부터 상속받는속성(props)이 바뀌거나,컴포넌트의상태(state)가 바뀌면 업데이트

손쉽게동적인사용자인터페이스의구현이 가능

레벨이 바뀌니까 실제 표시 화면에도 적용되네!

발표자


React의 강력한 점을 잠깐 소개. 부모로부터 상속받는 속성(props)이 바뀌거나, 자신의 상태(state)가 변하면 업데이트. 여기서는 속성이 바뀌는 경우만을 다루지만, 속성을 자유롭게 바꾸면 다시 새롭게 렌더링이 되고, 다양한 동적 사용자 인터페이스의 구현이 가능하다. 예를 들어, 페이스북 타임라인 페이지. 타임라인의 게시글이 바뀌면, 해당 속성 값만 바꿔주면 새로 렌더링된다. 새로고침 버튼을 누르면 속성을 바꾸는 식으로, 예전과는 완전히 다른 프로그래밍 방식이 가능.

CSS무엇이문제인가?

2

CSS : Cascading Style Sheets

클래스와 선택자의 1:1 매칭

발표자


이제 CSS와 관련한 이야기. Cascading Style Sheets. 간단한 작동 원리. HTML에 class를 적용하고, CSS에는 점(.) 뒤에 class 이름을 작성하고, 스타일 요소를 준다. 그러면 마법같이 스타일이 적용됨. 그런데 문제가 뭘까?


2문제 발생‘small’이라는 클래스 이름너무 일반적인 이름이라서, 재사용 문제

해결책 1CSS의상속기능 사용

전역 이름공간의 오염

“user-info의 자식 중small을 선택”

발표자


CSS의 이름공간은 기본적으로 전역 이름공간(global namespace)이다. 따라서, small이라는 클래스 이름을 쓰는 순간 해당 페이지 전체에 있는 small 클래스값을 가지는 요소들이 모두 스타일을 적용을 받게 된다. 이래선 안된다. 해결책: CSS의 상속 사용. 그러면 해결되기도 한다.

2

너~무길다!CSS무엇이문제인가?

문제 발생

발표자


그런데 이러다 보면 부모-자식 관계가 중첩되어서 엄청나게 긴 셀렉터가 되어버리는 문제가 발생함.

2

보기에 안 좋다. 성능이 떨어진다.

(label 중 부모가 row 중 부모가 info 중…)

스타일 재사용이 불가능하다. 구조가 변경되면 스타일시트도 바뀐다.


발표자


보기에 안 좋다: 진짜 긴 셀렉터는 읽기도 힘들다! 성능이 떨어진다: 일반적으로 CSS 셀렉터는 자식에서 부모로 체크하는 방식을 취한다.�즉, 저것은 label을 선택한 후, 그 중 부모가 row인 것을 선택하고,�그 중 부모가 info인 것을 선택하고… 엄청난 낭비 스타일 재사용이 불가: info가 lectur를 나오는 순간 style의 적용을 받지 않는다 구조를 바꾸게 되면 일일이 스타일시트 내용을 바꿔야 한다.

2해결책 2특징적인 이름을 (길더라도) 따로 붙인다.


2해결책 2특징적인 이름을 (길더라도) 따로 붙인다.

상대적으로 나은 방법 (재사용, 구조 문제 해결) 일반적인 이름을 사용하지 못해서 불편하다. 일일이 이름을 생각해내야 한다.


3

CSS ModulesCSSModules

CSS의 이름공간 포화를 막기 위한 대안 CSS를자동으로모듈화해줌으로써

대부분의 문제로부터 벗어날 수 있다

CSS 선택자는 간결하게 구성

자바스크립트 모듈을불러올 때와 같은 문법

클래스의 이름은style 객체의 키 이름으로

3

CSSModules

실제로 구성된 화면3

CSSModules

어떻게 구성하는가?3

CSSModules

webpack.config.js에 설정 [파일이름]__[클래스이름]__[base64 인코딩] 자유롭게 설정 변경 가능

Technology

20170202 D2 발표