<div id="readability-page-1" class="page"><div><h2 id="vscode-workspace-지정하기">vscode workspace 지정하기</h2>
<p>vscode에서 workspace는 프로젝트를 묶어놓은 단위를 말합니다.<br>
vscode를 실행합니다.<br>
<img src="https://media.vlpt.us/images/koeunyeon/post/9ffa7c2b-c337-44c9-9885-55e940b5f26c/K-004.png"></p>
<p><code>file-&gt;open folder</code>를 클릭하고<br>
<img src="https://media.vlpt.us/images/koeunyeon/post/958698d5-c893-4fb3-9d61-680bdfe567b0/K-005.png"></p>
<p>프로젝트 디렉터리를 선택합니다.<br>
<img src="https://media.vlpt.us/images/koeunyeon/post/8a0d78b2-7828-4855-b45a-b57e560d472f/K-006.png"></p>
<p><code>file-&gt;save workspace as</code>를 클릭하고<br>
<img src="https://media.vlpt.us/images/koeunyeon/post/c439e3dc-6622-4a81-b73a-d50ef050da7d/K-007.png"></p>
<p>워크 스페이스를 저장할 디렉터리를 선택한 후 저장합니다.<br>
<img src="https://media.vlpt.us/images/koeunyeon/post/1e7a1788-66fc-4d01-a148-6c67d695bf76/K-008.png"></p>
<h2 id="vscode-기본-쉘-변경">vscode 기본 쉘 변경</h2>
<p>vscode 의 기본 쉘은 윈도우즈 파워쉘(Windows Powershell) 입니다. 강력하지만 어딘지 모르게 불편하고 잘 작동을 안하는 경우가 많으므로 git bash로 변경하겠습니다.</p>
<p><code>F1</code>키를 누르고 나오는 커맨드 팔레트에서 <code>Terminal: Select Default Profile</code>를 입력합니다.<br>
<img src="https://media.vlpt.us/images/koeunyeon/post/5897d70d-8e41-4c76-b451-4ee5201682f3/K-011.png"></p>
<p>bash를 선택합니다.<br>
<img src="https://media.vlpt.us/images/koeunyeon/post/6d313db1-649c-49a0-a21e-f7c010eb9427/K-012.png"></p>
<p>vscode에서 터미널을 열려면 메뉴 -&gt; Terminal -&gt; new terminal을 차례로 클릭하거나 <code>ctrl + shift</code>키를 누른 상태에서 틸트(<code>~</code>표시 키)를 클릭합니다.</p>
<p><img src="https://media.vlpt.us/images/koeunyeon/post/51124fbf-c085-471f-b905-2c96af21202d/K-010.png"></p>
<p><code>bash</code>라고 적혀있고 <code>$</code> 표시로 터미널이 시작하는 것으로 보아 정상적으로 설정되었습니다.</p>
<h2 id="vscode-인터프리터-설정">vscode 인터프리터 설정</h2>
<p>vscode 에 우리가 가상환경을 사용한다고 알려줘야 합니다.</p>
<p><code>F1</code> 키를 눌러 커맨드 팔레트를 연 후 <code>python:select interpreter</code> 를 입력해서 선택합니다.<br>
<img src="https://media.vlpt.us/images/koeunyeon/post/0fdb5c63-b809-4b67-8703-c4ea769aa8ac/K-013.png"></p>
<p><code>entire workspace</code> 를 선택합니다.<br>
<img src="https://media.vlpt.us/images/koeunyeon/post/000df735-9e82-409f-9a4b-93c296e9d652/K-014.png"></p>
<p><code>venv\Scripts\Python.exe</code> 를 선택합니다.<br>
<img src="https://media.vlpt.us/images/koeunyeon/post/6b883eb8-46db-4e24-86a1-0de41d926332/K-015.png"></p>
<p>설정 이후 새 터미널을 vscode에서 열 경우 자동으로 가상 환경이 실행된 채로 터미널이 실행됩니다.</p>
<p><img src="https://media.vlpt.us/images/koeunyeon/post/af38737c-b946-476a-a95b-cde9d5b75d41/K-020.png"></p>
<h2 id="vscode--플러그인-설정">vscode  플러그인 설정</h2>
<p>vscode 에서 파이썬 - 플라스크 개발을 도와주는 플러그인을 설치하겠습니다.<br>
extensions 탭을 선택합니다. 왼쪽 메뉴 바의 가장 아래에 있습니다. </p>
<p><img src="https://media.vlpt.us/images/koeunyeon/post/aac2f719-fe19-4a16-8bc2-bd6bdee7a25e/K-016.png"></p>
<p>아래의 플러그인을 검색하고 install 버튼을 클릭합니다.</p>

<hr>
<p>이 외에 pip로 설치 가능한 플러그인들을 vscode가 보여주는 경우가 있습니다. 미리 설치해놓아도 무방하므로 플러그인을 설치하겠습니다.<br>
vscode에서 새 터미널을 실행합니다. 반드시 <code>(venv)</code> 표시가 나오는지 확인하세요.</p>
<h3 id="pylint">pylint</h3>
<p><code>pylint</code> 를 설치합니다. <code>pylint</code>는 파이썬 정적 분석 툴입니다. 정적 분석 툴을 보통 린터(linter)라고 부릅니다.</p>
<pre><code>pip install -U pylint</code></pre>
<h3 id="flake8">flake8</h3>
<p><code>flake8</code> 을 설치합니다. <code>flake8</code>도 <code>pylint</code>와 비슷한 파이썬 정적 분석 툴(린터)입니다.</p>
<pre><code>pip install -U flake8</code></pre>
<p>린터를 활성화하려면 <code>ctrl + shift + p</code> 를 누르고 <code>Python: select linter</code> 선택 후 <code>flake8</code> 혹은 <code>pylint</code>를 선택합니다. 저는 <code>flake8</code>을 사용하겠습니다.</p>
<h3 id="autopep8">autopep8</h3>
<p><code>autopep8</code> 을 설치합니다. <code>autopep8</code>은 파이썬 스타일 가이드 <a href="https://www.python.org/dev/peps/pep-0008/">pep8 - https://www.python.org/dev/peps/pep-0008/</a>에 맞게 코드를 자동으로 정렬해 줍니다.</p>
<pre><code>pip install -U autopep8</code></pre>
<h2 id="vscode-가상환경-import-오류-방지">vscode 가상환경 import 오류 방지</h2>
<p>vscode 에서 가상환경을 import 할 때 오류를 방지하기 위해 간단한 환경 파일을 만들겠습니다.<br>
프로젝트 루트 디렉터리에 <code>.env</code> 파일을 만들고 아래 내용을 입력합니다.<br>
소스코드</p>
<pre><code>PYTHONPATH=project</code></pre>
<h2 id="vscode-디버거-환경-설정하기">vscode 디버거 환경 설정하기</h2>
<p>디버거는 개발중에 변수의 값이나, 프로그램의 플로우를 보면서 제어할 수 있는 환경을 말합니다.<br>
일일이 로그를 찍거나 감으로 개발을 하는 것도 방법이지만, 그런것보다는 하나씩 값을 확인하면서 이상한 징후를 찾아내는 것도 좋은 방법이지요.</p>
<p><code>ctrl + shift + d</code> 키를 누르거나 왼쪽 메뉴에서 오른쪽 방향을 보는 화살표 벌레 모양을 클릭해서 <strong>Run and Debug</strong> 메뉴가 나오게 합니다.<br>
<img src="https://media.vlpt.us/images/koeunyeon/post/06c4a8a9-bdb9-41c3-b0a6-545b99f14fdc/K-021.png"></p>
<p><code>create a launch.json file</code> 버튼을 클릭합니다.<br>
워크스페이스를 선택하는 화면이 나오면 프로젝트명인 <code>step_flask</code>를 선택합니다.<br>
<img src="https://media.vlpt.us/images/koeunyeon/post/21cf55e6-cd98-4ee2-bc94-d366a0470ba8/K-022.png"></p>
<p>디버거 설정 화면이 나오면 <code>Flask</code>를 선택하세요. debug configuration은 환경 설정 템플릿 같은 겁니다.</p>
<p><img src="https://media.vlpt.us/images/koeunyeon/post/6c269432-cfbd-437d-8f41-f58cefe4437d/K-023.png"></p>
<p><code>.vscode/launch.json</code> 파일이 생성되어 있는 것을 볼 수 있습니다.</p>
<pre><code>{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Python: Flask",
            "type": "python",
            "request": "launch",
            "module": "flask",
            "env": {
                "FLASK_APP": "app.py",
                "FLASK_ENV": "development"
            },
            "args": [
                "run",
                "--no-debugger"
            ],
            "jinja": true
        }
    ]
}</code></pre>
<p>우리는 앞으로 강좌를 진행하면서 소스코드를 <code>/src</code> 디렉토리 안에 넣을 예정입니다. 따라서 설정을 조금 바꿔주겠습니다.</p>
<pre><code>"FLASK_APP": "src/app.py",</code></pre>
<p>이제 플라스크에서 디버거를 실행하려면 <strong>Run-&gt;Start Debugging</strong>을 선택하거나 <code>ctrl + F11</code> 키를 눌러주면 됩니다.<br>
디버거 없이 실행하려면 <strong>Run-&gt;Run without debugging</strong>을 선택하거나 <code>ctrl + F5</code> 키를 눌러줍니다.</p></div></div>

고은연

vscode workspace 지정하기
vscode에서 workspace는 프로젝트를 묶어놓은 단위를 말합니다. 
vscode를 실행합니다.
file->open folder를 클릭하고 
프로젝트 디렉터리를 선택합니다.
file->save workspace as를 클릭하고
워크 스페이스를 저장할 디렉터리를 선택한 후 저장합니다.
vscode 기본 쉘 변경
vscode 의 기본 쉘은 윈도우즈 파워쉘(Windows Powershell) 입니다. 강력하지만 어딘지 모르게 불편하고 잘 작동을 안하는 경우가 많으므로 git bash로 변경하겠습니다.
F1키를 누르고 나오는 커맨드 팔레트에서 Terminal: Select Default Profile를 입력합니다.
bash를 선택합니다.
vscode에서 터미널을 열려면 메뉴 -> Terminal -> new terminal을 차례로 클릭하거나 ctrl + shift키를 누른 상태에서 틸트(~표시 키)를 클릭합니다.
bash라고 적혀있고 $ 표시로 터미널이 시작하는 것으로 보아 정상적으로 설정되었습니다.
vscode 인터프리터 설정
vscode 에 우리가 가상환경을 사용한다고 알려줘야 합니다.
F1 키를 눌러 커맨드 팔레트를 연 후 python:select interpreter 를 입력해서 선택합니다.
entire workspace 를 선택합니다.
venv\Scripts\Python.exe 를 선택합니다.
설정 이후 새 터미널을 vscode에서 열 경우 자동으로 가상 환경이 실행된 채로 터미널이 실행됩니다.
vscode  플러그인 설정
vscode 에서 파이썬 - 플라스크 개발을 도와주는 플러그인을 설치하겠습니다.
extensions 탭을 선택합니다. 왼쪽 메뉴 바의 가장 아래에 있습니다. 
아래의 플러그인을 검색하고 install 버튼을 클릭합니다.
python 
rest client (publisher:"Huachao Mao") 
sqlite (publisher:"alexcvzz") 
이 외에 pip로 설치 가능한 플러그인들을 vscode가 보여주는 경우가 있습니다. 미리 설치해놓아도 무방하므로 플러그인을 설치하겠습니다.
vscode에서 새 터미널을 실행합니다. 반드시 (venv) 표시가 나오는지 확인하세요.
pylint
pylint 를 설치합니다. pylint는 파이썬 정적 분석 툴입니다. 정적 분석 툴을 보통 린터(linter)라고 부릅니다.
pip install -U pylint
flake8
flake8 을 설치합니다. flake8도 pylint와 비슷한 파이썬 정적 분석 툴(린터)입니다.
pip install -U flake8
린터를 활성화하려면 ctrl + shift + p 를 누르고 Python: select linter 선택 후 flake8 혹은 pylint를 선택합니다. 저는 flake8을 사용하겠습니다.
autopep8
autopep8 을 설치합니다. autopep8은 파이썬 스타일 가이드 pep8 - https://www.python.org/dev/peps/pep-0008/에 맞게 코드를 자동으로 정렬해 줍니다.
pip install -U autopep8
vscode 가상환경 import 오류 방지
vscode 에서 가상환경을 import 할 때 오류를 방지하기 위해 간단한 환경 파일을 만들겠습니다.
프로젝트 루트 디렉터리에 .env 파일을 만들고 아래 내용을 입력합니다.
소스코드
PYTHONPATH=project
vscode 디버거 환경 설정하기
디버거는 개발중에 변수의 값이나, 프로그램의 플로우를 보면서 제어할 수 있는 환경을 말합니다.
일일이 로그를 찍거나 감으로 개발을 하는 것도 방법이지만, 그런것보다는 하나씩 값을 확인하면서 이상한 징후를 찾아내는 것도 좋은 방법이지요.
ctrl + shift + d 키를 누르거나 왼쪽 메뉴에서 오른쪽 방향을 보는 화살표 벌레 모양을 클릭해서 Run and Debug 메뉴가 나오게 합니다.
create a launch.json file 버튼을 클릭합니다.
워크스페이스를 선택하는 화면이 나오면 프로젝트명인 step_flask를 선택합니다.
디버거 설정 화면이 나오면 Flask를 선택하세요. debug configuration은 환경 설정 템플릿 같은 겁니다.
.vscode/launch.json 파일이 생성되어 있는 것을 볼 수 있습니다.
{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Python: Flask",
            "type": "python",
            "request": "launch",
            "module": "flask",
            "env": {
                "FLASK_APP": "app.py",
                "FLASK_ENV": "development"
            },
            "args": [
                "run",
                "--no-debugger"
            ],
            "jinja": true
        }
    ]
}
우리는 앞으로 강좌를 진행하면서 소스코드를 /src 디렉토리 안에 넣을 예정입니다. 따라서 설정을 조금 바꿔주겠습니다.
"FLASK_APP": "src/app.py",
이제 플라스크에서 디버거를 실행하려면 Run->Start Debugging을 선택하거나 ctrl + F11 키를 눌러주면 됩니다. 
디버거 없이 실행하려면 Run->Run without debugging을 선택하거나 ctrl + F5 키를 눌러줍니다.

플라스크 개발환경 설정 -3- vscode 설정하기

댓글