Today I Learn...

• CSS module
  * css파일의 확장자를 .module.css 로 바꾸면 된다.

  • className 을 설정 할 때에는 styles.Button 이렇게 import로 불러 온 styles 객체 안에 있는 값을 참조하면 된다.
  • 클래스 이름에 대하여 고유한 이름들이 만들어지기 때문에, 실수로 CSS 클래스 이름이 다른 관계 없는 곳에서 사용한 CSS 클래스 이름과 중복되는 일을 걱정 할 필요가 없게 된다.
  • 라이브러리
    • react-icons

• styled-components
  * 현존하는 CSS in JS 관련 리액트 라이브러리 중에서 가장 인기 있는 라이브러리

  • 스타일을 입력함과 동시에 해당 스타일을 가진 컴포넌트를 만들 수 있다.

  • $ yarn add styled-components

    		* 

        import React from 'react';
        import styled from 'styled-components';
  
        const Circle = styled.div`
          width: 5rem;
          height: 5rem;
          background: black;
          border-radius: 50%;
        `;
  
        function App() {
          return <Circle />;
        }
  
        export default App;
  			```
    * polished 라이브러리
  	

• chocolatey (윈도우전용 패키지 매니저)
  * 설치

   // Chocolatey 설치하기
   Set-ExecutionPolicy Bypass -Scope Process -Force; iex ((New-Object System.Net.WebClient).DownloadString('https://chocolatey.org/install.ps1'))
  
   // 설치 확인하기
   choco -?
  		```
  		* sudo 설치 (관리자권한 - superuser do, 줄여서 sudo)
  		``` 
  $ choco install sudo

To-Do

1. 벨로퍼트와 함께하는 모던 리액트 문서
2. Dialog 만들기( + 트랜지션효과) / 코드리뷰
3. 투두리스트 만들기

참고문서

1. https://react.vlpt.us/styling/03-styled-components.html
2. https://tutorialpost.apptilus.com/posts/tools/chocolatey-windows-package-manager/