국비지원교육 (22.01-22.07)/강의노트
22-06-27(월) 103일차 [React, Python, Team Project] React의 Creat-React-App, Python의 flask 서버 구축
옌炎
2022. 6. 27. 23:19
728x90
수업내용
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 만들기
- react_cra 폴더 만들기
- nmp init 하기 C:\00.KOSMO108\50.react\react_cra>npm init -y
- create-react-app 설치하기 C:\00.KOSMO108\50.react\react_cra>npm install create-react-app -g --save
- CRA 로 App 만들기 C:\00.KOSMO108\50.react\react_cra>create-react-app client
- 실행하기
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
728x90