22-06-27(월) 103일차 [React, Python, Team Project] React의 Creat-React-App, Python의 flask 서버 구축

수업내용

---

1교시 (09:30-10:20)

• React설명 및 복습
  
  React : CRA : Creat-React-App
  ----------------------------------
  
  babel
  SPA
  webpack 
  JSX
  React.createElement(IngredientsList, {list:[.....]});
  
  <IngredientsList list={[....]} />

2교시 (10:30-11:20)

• Creat-React-App 만들기

1. react_cra 폴더 만들기
2. nmp init 하기 C:\00.KOSMO108\50.react\react_cra>npm init -y
3. create-react-app 설치하기 C:\00.KOSMO108\50.react\react_cra>npm install create-react-app -g --save
4. CRA 로 App 만들기 C:\00.KOSMO108\50.react\react_cra>create-react-app client
5. 실행하기
   C:\00.KOSMO108\50.react\react_cra>cd client
   C:\00.KOSMO108\50.react\react_cra\client>npm start
   http://localhost:3000/ 자동으로 react 초기 페이지 나옴

• App.js

import React from 'react';
import './App.css'

function App() {
  return (
    <div>
      <h1>Start React WellCome !</h1>
      <p>HTML 적용하기</p>
    </div>
  );
}

export default App;

3교시 (11:30-12:20)

• App.css

div {
  background-color:  rgb(162, 127, 243);
  color:  rgb(255, 255, 255);
  padding: 40px;
  font-family: 고딕;
  text-align: center;
}

h1 {
  color: white;
  background-color: #2EFE2E;
  padding: 10px;
  font-family: 궁서;
}

• App.js

import React from 'react';
import './App.css'

function App() {
  return (
    <div>
      <h1>Start React Welcome !</h1>
      <p>HTML 적용하기</p>
    </div>
  );
}

export default App;

4교시 (12:30-13:20)

• flask_01.py

from flask import Flask

app = Flask(__name__)

# pip install flask
# pip3 install flask

'''
@app.route('/')에서

/ 가 가리키는 경로

1.http://localhost:5000/
2. C:\00.KOSMO108\60.python\flaskserver 
'''

@app.route('/')
def hello_world():
	return 'Hello World 222222222!'

if __name__ == '__main__':
	app.run()

• flask_02.py

from flask import Flask

app = Flask(__name__)

# pip install flask

@app.route('/')
@app.route('/home')
def home():
	return 'Hello World!'

@app.route('/user')
def user():
	return 'Hello user!'

if __name__ == '__main__':
	app.run()

---

5교시 (14:30-15:20)

• flask_03.py

from flask import Flask

app = Flask(__name__)

# pip install flask

@app.route('/')
def home():
	return 'Hello World!'

@app.route('/user/<userName>')
def user(userName):
	return 'Hello %s'%(userName)

if __name__ == '__main__':
	app.run()

6교시 (15:30-16:20)

• 프로젝트 진행

7교시 (16:30-17:20)

• 프로젝트 진행

8교시 (17:30-18:30)

• 프로젝트 진행

---

Notes

---