React

오늘 공부한 부분

• EsLint
• Snippet
• Sass
• CSS Module
• Styled-components

### 수업내용 && 내 생각 && 기타등등

• snippet에 내가 직접 단축어 지정해서 만들어놓을 수 기능이 있는 걸 오늘 처음 알았음. 유용해 보이는데, 웹스톰에서 어떻게 해야하는 지 잘 모르겠다..
• Sass == 문법적으로 짱 멋진 스타일쉬트 == syntactically awesome stylesheet
• flex 연습할 수 있는 웹: https://flexboxfroggy.com/
• yarn add node-sass
• 조건부로 클래스 적용할때 쓰는 라이브러리 - yarn add classnames
• 색상 참고 사이트: https://yeun.github.io/open-color/
• css 클래스명 규칙
  1. 컴포넌트의 이름을 고유하게 지정
  2. 최상위 엘리먼트의 클래스 이름을 컴포넌트 이름과 똑같게
  3. 그 내부에서 셀렉터 사용

    ex.UserProfile {
     .user { 
       img {}
       .username {}
     }
     .about {}
    }
  

• css module을 쓰면 중복을 줄일 수 있다.
  언제 쓰냐? -> 레거시 프로젝트에 리액트르 도입할 때 (기존 css 명과 안 겹치게 할 수 있음) / CSS 클래스 네미밍 규칙을 만들기 귀찮을 때 vue에서 css scoped랑 비슷한 듯. 글로벌로 쓰고 싶으면 :global {}, 그냥 css에서 로컬로 쓰고 싶으면 :local .클래스명 {}

• yarn add react-icons
• input box customizing하는 거 써먹어야지
• styled components = css in js / tagged template literal 사용 / 아래처럼 생김

    const Circle = styled.div`
      width: 5rem;
      height: 5rem;
      background: ${props => props.color};
      border-radius: 50%;
    `
  

• polished 라이브러리 (lighten, darken, cover…. 함수) / 편리하군
• `@keyframe 으로 트랜지션 // 사라지는 거 만드는 부분 좀 이해가 안가넴
• styled component는 좀 복잡해 보이고, js랑 css랑 엉켜있어서 개인적으로 가독성이 떨어지는 느낌이다.

오늘의 빡침 포인트

맥이… 마지막 글자가 사라지는 현상이 있다…. 검색해서 설정에서 뭘 바꿔줘도 여전히 그런다. 근데 어쩔땐 그러고 어쩔땐 안 그래서 뭔가 정확히 파악하기가 힘들다. ㅠㅠ 동지들을 발견했다.

나처럼 빡치신 분

왜그러는 지 알 수가 없군…

오늘의 깨달음

처음부터 잘하려고 하지 말고, 식물을 키우듯이 새싹 -> 잎 -> 꽃 -> 열매 같은 느낌으로 리팩토링으로 코드를 키우면서 하자.
1인분은 하는 사람(== 어쨌든 기능은 구현하는 사람)을 목표로. 지치지 말고 해야징 😃