8월 11일 수업내용

Flask and Vue

Flask는 express 처럼 간단하고 가볍다.

용어를 명확하게 이해해야한다.

이전에도 이름만알고 용어에 대해서 자세히 알지 못하니까 계속 까먹고 대답못하는 것 같다.

Vue는 React와  Angular의 장점들을 가져온것이다.

작동도 빠르고 강력하다.

-----------------
> 첫번째 터미널 <
-----------------

  > cd C:\dev
  > mkdir flask-vue-crud

  > cd flask-vue-crud
  > mkdir server
  
  > cd server
  > pip install flask-cors

  > notepad app.py

from flask import Flask, jsonify
from flask_cors import CORS

# instantiate the app
app = Flask(__name__)
app.config.from_object(__name__)

# enable CORS
CORS(app, resources={r'/*': {'origins': '*'}})

@app.route('/', methods=['GET'])
def index():
    return jsonify('Hello World!')

@app.route('/ping', methods=['GET'])
def ping_pong():
    return jsonify('pong!')

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

  > python app.py


-----------------
> 두번째 터미널 <
-----------------

  > cd C:\dev\flask-vue-crud
  > dir 
  > dir server

  > npm create vue

    ✔ Project name: › client
    ✔ Add TypeScript? › No
    ✔ Add JSX Support? › No
    ✔ Add Vue Router for Single Page Application development? › Yes
    ✔ Add Pinia for state management? › No
    ✔ Add Vitest for Unit Testing? › No
    ✔ Add ESLint for code quality? › No

  > cd client

  > dir
  > more index.html

  > tree src /F /A

  > more src\main.js
  > more src\App.vue
  > more src\router\index.js

  > more src\components\HelloWorld.vue

  > npm install
  > npm run dev

위에는 실행방법

pip를 사용하려면 우선 Anaconda를 설치해서 python을 사용할 수 있는 환경을 만들어야한다

App.vue 안의 다른 컴포넌트가 

views는 라우터와 관련있는 것을 본다

CreateRouter로 const router를 사용해 router를 사용할 수 있다

화살표 함수 () => 람다 펑션 함수를 간단하게 만드는 것 까먹었으면 이전 게시글을 보고 다시 상기시키기

 

 

App.vue 의 <RouterView />는 main.js에서 가져온다.

main.js는 index.html과 가깝다.

index.js에서 수정할 수 있다.

hook 함수는 뜻 그대로 걸어내는 함수로 ~~동작하면 해야하는 함수이다.

무엇인가 추가할때는 router에 index.js에 추가한다.

 

vue Directives는 Vue에서만 쓰이는 특별한 attribute이다.

special html attribute

v-for, v-if, v-html등 다양하다.

# Books.vue에 등장하는 v-for, v-if 이해하기

  - https://www.w3schools.com/vue/vue_directives.php
  - https://www.w3schools.com/vue/vue_v-for.php
  - https://www.w3schools.com/vue/vue_v-if.php