To Do List 웹 프로젝트_준비 및 시작

프로젝트 준비

프로젝트 생성

 

create-react-app todo-list

 

ejcet하고 Sass 모듈 설치

yarn eject
yarn add node-sass sass-loader

 

open-color 적용

yarn add open-color

이후 src에 styles 폴더에 utils.scss 파일을 만들고 open-color 라이브러리를 불러온다

@import '~open-color/open-color';

 

메인 스타일 적용

index.css제거하고 styles/main.scss를 만든다

@import 'utils';
body{
    background: $oc-gray-1;
    margin: 0px;
}

index.js도 수정해 준다

App.js파일을 나중에 components폴더에서 다시 만들 건데 미리 수정해준다

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(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();

 

App 컴포넌트 생성 후 webpack개발 서버 시작

src/components 폴더 생성하고 App.js 파일 만든다

import React, { Component } from 'react';

class App extends Component {
    render() {
        return (
            <div>
                일정관리
            </div>
        );
    }
}

export default App;

 

이후 yarn start

 

 

 

 

 

참고한 책: 리액트를 다루는 기술_김민준 저