좋은향기's 프로그램 블로그

가상환경 생성

python -m venv .venv

<python 버전지정>
py -3.8 -m venv .venv38

생성 폴더 구조

플랫폼셸 가상환경 활성화

windows PowerShell

.\venv\Scripts\Activate.ps1

참고: https://docs.python.org/ko/3/library/venv.html

Flask 설치

pip install flask

Flask 실행

./venv 폴더에 python 파일 생성 < app.py>

flask run

flask debug mode 실행#1

(.venv) PS D:\.venv> python app.py
 * Serving Flask app 'app'
 * Debug mode: on
 
 app.py----------------------------------------------------------------------------------------
 if __name__ == '__main__':
    app.debug = True
    app.run()
    #app.run(debug=True)

flask debug mode 실행#2

(.venv) PS D:\.venv> $env:FLASK_DEBUG="True"
(.venv) PS D:\.venv> flask run
 * Debug mode: on

[vite] server connection lost. polling for restart...

서버가 실행된 포트(ex: 8080)와 외부에서 접속하는 포트(ex: 3000)가 다른 경우

로그가 콘솔에 표시되며 반복적으로 페이지 리로딩 현상이 발생할 수 있다.

이경우,

hmr(hot module replacement) 을 위한 포트를 외부에서 접속가능한 포트로 설정해 주어야 한다.

아마도 hot reloding을 위해 클라이언트(브라우저)에서 서버로 주기적으로 체크를 하는 모양인데,

기본값이 서버가 실행된 포트(위의 경우:8080)인 것 같다. 

위의 설정을 통해 hmr을 위한 포트를 외부에서 접속가능한 포트로 설정해 주면, hmr 체크도 정상, 리로딩도 발생하지 않는다.

템플릿 리터럴

보간 표현식 `....`

플레이스 홀더 ${...}

console.log(`${a} + ${b} = ${a+b}`);

{{데이터}}

v-bind

v-modle

v-on

v-if

v-for

computed

watch

transition

component

VS code extension

Vuter

Prettier - Code formatter

npm

option

-g :  전역 설정

--save : package.json의  dependencies에 해당 패키지를 저장 >> npm install로 해당 package자동설치(공동작업시 유용)

vue CLI (Command Line Interface) 설치

npm install -g @vue/cli
yarn global add @vue/cli

vue  버전확인

vue --version

Windows VS Code 에서 vue 실행시 권한 문제 해결 방법

1. PowerShell  권한 변경

2 터미널을 Powershell에서 cmd로 변경

https://hianna.tistory.com/349

vuetify 프로젝트 생성

vue create [project name]

vue create [project name]

실행

npm run serve

npm run serve-- --port 3000 >> 특정포트로 실행

vue-router 설치

vue add router

vue2.x의 경우, vue-router3버전을 설치
npm install vue-router@3

vuetify 패키지 추가

vue add vuetify

Beginning app development with flutter

Syntax

생성자

Person(this.firstName, this.lastName)

선택적, 명명된 paramter를 갖는 생성자

Person({this.firstName, this.lastName})

const Widget

위젯 앞에 const를 붙이면 컴파일 시점에 생성된다.

Element Tree

- 현재 표시되고 있는 엘리먼트 트리와 변경사항을 유지하는 가상 엘리먼트 트리(like 가상 DOM)를 별도유지하여

- 주기적으로 렌더링할 부분을 결정하고 필요한 부분만 렌더링

이미지 추가

1. 프로젝트 폴더 기준으로 폴더 생성 후, 이미지 복사(ex: assets/images)

flash_off.png
flash_on.png

2. pubspec.yaml에 추가

flutter:
  assets:
     - assets/images/flash_off.png
     - assets/images/flash_on.png

3. 사용

Image.asset('assets/images/flash_off.png')

Flutter Inspector

Flutter DevTool