Todo list

TodoTemplate.scss .TodoTemplate { width: 512px; // width 가 주어진 상태에서 좌우 중앙 정렬 margin-left: auto; margin-right: auto; margin-top: 6rem; border-radius: 4px; overflow: hidden; } .app-title { background: #22b8cf; color: white; height: 4rem; font-size: 1.5rem; display: flex; align-items: center; justify-content: center; } .content { background: white; } 레이아웃을 할 때 flex라는 display 속성을 자주 쓸 텐데요 코드에 있는 주석을..

프로젝트 생성 및 필요한 라이브러리 설치 $ create-react-app 을 사용하여 프로젝트를 생성 $ yarn create react-app todo-app $ cd todo-app $ yarn add node-sass classnames react-icons 이 프로젝트에서 Sass를 사용할 예정이므로 node-sass 를 설치 했습니다. class names 는 나중에 조건부 스타일링을 좀 더 편하게 하기 위해 설치했습니다. react-icons는 리액트에서 다양하고 예쁜 아이콘을 사용할 수 있는 라이브러리입니다. 아이콘의 크기나 색상은 props 혹은 CSS 스타일로 변경하여 사용할 수 있습니다. prettier 설정 프로젝트 최상위 dir 에 .prettierrc 파일을 생성 다음과 같이 입..