2019-11-07

bathingape·2019년 11월 7일
0

TIL(2019)

목록 보기
11/41

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 (윈도우전용 패키지 매니저)

    • 설치

      ```js

      // 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/
profile
웹 개발을 위해 공부한 내용을 기록하고 있습니다.

0개의 댓글