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/