참고 블로그

React & Django 프로젝트

input태그를 이용하여 직관적으로 한줄 노트를 작성할수 있는 앱

R&D (Settings) 기초 설정 틀 만들기

STEP1. 초기 설정

Django 앱생성

1
2
3
4
5
6
7
8
9
10
11
12
# 가상환경 생성
python –m venv venv

# 가상환경 접속
source venv/Scripts/activate

# django 프로젝트 생성
(venv) pip install django
(venv) django-admin startproject dnote
(venv) cd dnote
(venv) python manage.py migrate
(venv) python manage.py runserver # 실행확인

react 앱생성

1
2
3
4
npm install -g create-react-app
create-react-app frontend
cd frontend
npm start # 실행확인

React - 개발 환경 설정 및 구조 잡기.(sass 설정)

1
2
3
4
5
6
7
8
9
10
11
12
cd frontend
# 관련 패키지 다운
npm install
npm run eject
# 오류시 git add. / git commit -m "" 해줘야함 
# -> 최상 디렉터리에(해당 폴더 git이 있어서 충돌)
npm start # react 시작하기

# sass 설정
npm install --save-dev node-sass
npm install --save-dev sass-loader

config/paths.js

1
2
3
4
5
6
7
// config after eject: we're in ./config/
module.exports = {
  ...
  // 추가해줍니다.
  styles: resolveApp("src/styles")
};

React - 개발 환경 설정 및 구조 잡기.(프로젝트 구조잡기)

Project : frontend

frontend/        # 프로젝트의 루트 디렉토리입니다.
    ├── config/       # react-app 의 설정파일이 모여있는 폴더입니다.
    ├── public/       #
    ├── scripts/      #
    ├── node_modules/   # 
    └── src/
        ├── styles/     # scss/img 등 디자인 파일들 집합
        ├── containers/ # 리액트 컨테이너 파일들 집합
        ├── components/ # 리액트 컴포넌트 파일들 집합
        ├── pages/    # Routing에서 사용될 page 파일들 집합
        └── store/     # redux모듈들과 configure파일들 집합

NODE_PATH 지정

src/.env

1
NODE_PATH=src

기본 구조 세팅 app.js -> root.js -> index.js

src/components/App.js

1
2
3
4
5
6
7
8
9
import React, { Component } from "react";

class App extends Component {
  render() {
    return <div>App.js</div>;
  }
}

export default App;

src/Root.js

1
2
3
4
5
6
7
8
import React from "react";
import App from "./components/App";

const Root = () => {
    return <App />;
};

export default Root;

src/index.js

1
2
3
4
5
6
7
8
import React from 'react';
import ReactDOM from 'react-dom';
import Root from "./Root";
import './style/index.scss';
import * as serviceWorker from './serviceWorker';

ReactDOM.render(<Root />, document.getElementById("root"));
serviceWorker.unregister();

결과