넷플릭스 프로젝트

1. 컴포넌트 스타일 툴

• CSS Module

• Sass / Sass Module

• Styled Component

Sass Module BEM 표기법

2. 고민하기

• 컴포넌트 설계

• 컴포넌트 props 디자인

  • 각 컴포넌트에서 무엇을 props로 전달한 것인지 고민하기

  • 값이 꼭 있어야 하는 것이 아니라면 기본값 설정하기 ??(null 병합 연산자)/ || (논리 연산)

  • props.children || ''

  • {...props} 전개 연산자를 사용해서 전달 받은 속성을 그대로 요소에 전달하기

  • 전개 연산자 사용 시 속성이 덮어쓰는 오류 조심하기

  • classname을 기본값 뒤에 추가하고 싶다면 classNames 확장 사용하기

  • prop-types를 사용해서 기본값, 필수값 설정 (요소의 필수 속성 구분하기)

  • props 설정 시 객체 구조 분해 할당 적극! 사용하기

  • 요소의 tag 이름을 변경하고 싶을 땐, as 속성 사용하기

external 값을 하나 전달 함으로 인해 target, rel 속성 둘 다 설정되게 할 수 있다.

• 클래스 / 함수 컴포넌트 중에 어떤 것을 사용할지 고민하기

• style 도구는 어떤 것을 사용할지 고민하기

• 포트폴리오에 어떤 것을 넣을 지 고민하기

3. 포트폴리오에 넣고 싶은 것

• styled-component

  • keyframe, CSS 믹스인

• React-router

  • SPA 그리고 중첩

• Redux, context

• renderprops

• 고차 컴포넌트

4. 라이브러리 만들기

• firebase 에러 메세지 한글 번역

• prop-types 에러 메세지 한글화 된 것 npm에 배포