프론트 작업용 지식 1 - FramerX, Monorepo, container-presentational

FramerX

디자인 + 기획용. 프로토타이핑 하기에 괜찮다.

들어볼만한 강의 참조 : https://www.youtube.com/watch?v=ueFYVSW7wFI&list=PL2XQ8H8IpiCZ8_7Xnawrw6Cirke-op5A2

컴포넌트 

 - icon generator

 - design hunt

 - unsplash

 - profile

 - grid

 

Monorepo

하나의 깃 repository 로 개발하는 방식. 자바에서 하나의 레포지토리에 멀티 모듈을 두는데, 이러한 작업 방식을 부르는 정확한 명칭이 모노레포 였나보다. (Dluid 도 모노레포 https://github.com/kok202/Dluid) 자바스크립트에서는 lerna 를 써서 관리하는 듯.

참조할 만한 포스팅 : 링크

Lerna(🐉)로 모노레포 해보러나?

 

Container - presentational

리액트에서 작업하는 대표적인 디자인 패턴 (Smart - dumb component 라고도 불린다.)

참조할 만한 포스팅 : 링크

컨테이너 컴포넌트

 - div 를 제외한 DOM 마크업을 가지지 않는다.

 - 스타일도 가지지 않는다.

 - 동작에 대한 제어를 담고있다.

 - Redux 액션을 호출한다.

 - Redux 액션을 프레젠테이션 컴포넌트에 인가한다.

 - Redux 의 connect 함수와 같이 Higher order components를 이용해서 만들어진다.

 

프레젠테이션 컴포넌트

 - 어떻게 보일지 디자인적인 요소를 담은 컴포넌트

 - statless 컴포넌트일 확률이 높다.

 - statless 컴포넌트가 아니라면 state는 UI 상태만을 관리하는 용도로 사용되어야한다.

 - props 를 통해 배타적으로 callback, 데이터를 받아 사용한다.