Todo-list (1) : 프로젝트 준비

1. 보일러플레이트 프로젝트 생성

$create-react-app todo-list

 

 

2. 패키지 설치

$yarn add node-sass classnames open-color

 

- node-sass   : node환경에서 libsass(c언어로 작성된 매우 빠른 sass complier)를 사용할 수 있게 함

- classnames : classNames 의 bind 기능을 사용하고 나면, 우리가 스타일을 넣을때마다 styles.를
                        붙여주는걸 생략 할 수 있음.

- open-color  : 손쉽게 색상을 골라서 사용 할 수 있는 색상 팔레트 라이브러리

3. 스타일 설정

src 아래에 스타일들을 정의할 styles 디렉토리를 생성하고, 메인이 스타일이 될 main.scss 파일과 utils.scss 파일을 생성.

// src/styles/main.scss

@import "utils";

body {

background: $oc-blue-3;

margin: 0;

}



//src/styles.utils.scss

@import "~open-color/open-color.scss";

 

 

4. App.js 컴포넌트 설정

컴포넌트의 관리를 위해 /src 아래에 /src/components 디렉토리를 생성후 App.js 파일을 생성

//src/components/App.js

import React, { Component } from 'react';

class App extends Component {
    render() {
        return (
            <div> To-do list </div>
        );
    }
}

export default App;

 

5.index.js 설정.

//src/index.js

import React from 'react';

import ReactDOM from 'react-dom';

import './styles/main.scss';

import App from './components/App';

import * as serviceWorker from './serviceWorker';



ReactDOM.render(<App />, document.getElementById('root')); serviceWorker.unregister();

 

6. 개발서버 실행 

$yarn start