> For the complete documentation index, see [llms.txt](https://shhn0509.gitbook.io/react/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://shhn0509.gitbook.io/react/til/undefined-2.md).

# 넷플릭스 프로젝트

## 1. 컴포넌트 스타일 툴 

* CSS Module
* Sass / Sass Module
* Styled Component  

![Sass Module BEM 표기법 ](/files/-MU9CSJAht0oGT2ZDKra)

## 2. 고민하기 

* 컴포넌트 설계 
* 컴포넌트 props 디자인
  * 각 컴포넌트에서 무엇을 props로 전달한 것인지 고민하기
  * 값이 꼭 있어야 하는 것이 아니라면 기본값 설정하기 `??(null 병합 연산자)/ || (논리 연산)`
  * `props.children || ''`
  * {...props} 전개 연산자를 사용해서 전달 받은 속성을 그대로 요소에 전달하기   
  * 전개 연산자 사용 시 속성이 덮어쓰는 오류 조심하기 
  * classname을 기본값 뒤에 추가하고 싶다면 classNames 확장 사용하기 
  * prop-types를 사용해서 기본값, 필수값 설정 (요소의 필수 속성 구분하기)
  * props 설정 시 객체 구조 분해 할당 적극! 사용하기 
  * 요소의 tag 이름을 변경하고 싶을 땐, `as` 속성 사용하기 

![external 값을 하나 전달 함으로 인해 target, rel 속성 둘 다 설정되게 할 수 있다. ](/files/-MUP2kN7vXPo2HXc-k_M)

* 클래스 / 함수 컴포넌트 중에 어떤 것을 사용할지 고민하기 
* style 도구는 어떤 것을 사용할지 고민하기 
* 포트폴리오에 어떤 것을 넣을 지 고민하기 

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

* styled-component 
  * keyframe, CSS 믹스인 
* React-router
  * SPA 그리고 중첩 
* Redux, context  
* renderprops
* 고차 컴포넌트 

## 4. 라이브러리 만들기 

* firebase 에러 메세지 한글 번역 
* prop-types 에러 메세지 한글화 된 것 npm에 배포