todo-app 만들기

프로젝트 생성 및 필요한 라이브러리 설치

 

• $ 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 파일을 생성 다음과 같이 입력

{
	"singleQuote": true,
	"semi": true,
	"useTabs": false,
	"tabWidth": 2,
	"trailingComma": "all",
	"printWidth": 80
}

 

index.css 수정

 

프로젝트의 글로벌 스타일 파일이 들어 있는 index.css 를 조금 수정하겠습니다. 기존에 있던 폰트 설정은 지우고 background 속성을 설정

 

index.css

body {
  margin: 0;
  padding: 0;
  background: #e9ecef;
}

배경색을 회색으로 설정했습니다.

 

App 컴포넌트 초기화

 

App.js

import React from 'react';

const App = () => {
  return <div>Todo App을 만들다</div>;
};

export default App;

 

--> $ yarn start

 

UI 구성하기

 

 

 

 

import React from 'react';
import './TodoTemplate.scss';

const TodoTemplate = ({ children }) => {
  return (
    <div className="TodoTemplate">
      <div className="app-title">일정 관리</div>
      <div className="content">{children}</div>
    </div>
  );
};

export default TodoTemplate;

 

App.js 에서 불러와 렌더링하기

import React from 'react';
import TodoTemplate from './components/TodoTemplate';

const App = () => {
  return <TodoTemplate>Todo App을 만들자!</TodoTemplate>;
};

export default App;

 

import 를 더 쉽게 자동으로 하는방법

 

TodoTemplate.js 컴포넌트가 VS CODE 에서 다른 탭으로 열려 있지 않으면 자동완성이 작동 하지 않습니다.

 

닫혀 있는 파일에도 제대로 작동하려면 프로젝트 최상위 dir 에 jsconfig.js 파일 생성

 

jsconfig.js

{
	"compilerOptions": {
		"target": "es6"
	}
}

 

node sass version 5.0.0 is incompatible with ^4.0.0.

​

.scss 스타일시트를 처음 사용할 때 이러한 에러가 발생했다.

​

$ npm uninstall node-sass

​

$ npm install node-sass@4.14.1

를 한 후

​

$ yarn start

하니 정상적으로 동작함

 

다음 글에서는 CSS 스타일을 작성하는 것으로 시작하겠습니다.