Python & Flask

Startup Fullstack Developer

indiflex시니어코딩

목차

설치 및 세팅

Python, Flask 총정리

Git 실무

Python 코딩 스킬

실습: 홈페이지 만들기

크롤링 API 개발

VSCode

Setup

Startup Fullstack Developer

indiflex시니어코딩

In This Chapter,

• Python 설치
• VSCode 설치
• Python 용 Extensions 설치
• 기타 Package 설치

Install Python 3

공식사이트: https://www.python.org/

(warning) 설치시 �하단의 Path 설정 체크하세요!!

$> python -V

# python interpreter�$> python�>>>

(참고) Anaconda

Install VSCode

• https://code.visualstudio.com/

Setup & Extensions for Python

# Settings

1. font, tab, auto-save
2. Terminal
3. keyboard shortcut

​

# Virtual Environment

• python3 -m venv venv
• source ./venv/bin/activate
• deactivate

�# Code Definition

• go to definition
• peek definition

​

# Editor Usage

• Ctrl + C,V,X
• Alt + up/down
• Ctrl + /

# Basic Extensions

• VSCode-icons
• Open in browser
• indent-rainbow

# Install Extensions for Python

• Python
• AREPL (Auto Read Evaluate Print Loop)
• kite
• python docstring generator
• etc

debug & pytest cf. unittest

# Debug > create a launch.json > Create python file

​

# Break point

• continue / pause
• step-over, step-into, step-out
• restart, stop

# Install Extensions for Test

• python test explorer

​

# Settings

• Enable testing using pytest

⇒ install framework.pytest

​

# mkdir pytest (default test directory)

• test_*.py > test_*()

Python

총정리

Startup Fullstack Developer

indiflex시니어코딩

Python 기초 강좌

강의 슬라이드�https://docs.google.com/presentation/d/1FBTVrF-che-lc5d9jIwqlqPXhXI3ndItftGNHwhkfwc/edit?usp=sharing

강의 영상�https://youtube.com/playlist?list=PLEOnZ6GeucBXxloeiT5PaZK2B54FRkIgy

​

Flask

총정리

Startup Fullstack Developer

indiflex시니어코딩

Flask 기초 강좌

강의 슬라이드�https://docs.google.com/presentation/d/1S9mMlAYCulzAO8j5x9uCZbMUif8cAJHSHt1avztqeVg/edit?usp=sharing�

강의 영상�https://youtube.com/playlist?list=PLEOnZ6GeucBWvOGSbIKNMp6RMQL9LYRc3

​

​

Git with VSCode

Branch / Merge / Rebase

Fork / Pull Request

(Social Coding)

Startup Fullstack Developer

indiflex시니어코딩

In This Chapter,

• Review Git
• Git with VSCode
• Git Branch & Rebase/Reset/Tag
• Fork & Pull Request
• Code Reviewing (Conversation)

Git 기초 강좌 (선수학습)

강의 슬라이드�https://docs.google.com/presentation/d/13aWrWTDqEDjEamyhkrvo3ulrNQ9jP26DigCopPeAGJg/edit?usp=sharing

​

강의 영상�https://youtube.com/playlist?list=PLEOnZ6GeucBUvJYvTTnNalSFvYqVObVVH

​

​

​

Git with VSCode

• https://github.com/
• https://bitbucket.org

# Install VSCode Extensions for Git

• Git Extension Pack �- GitLens, Git History, etc
• Markdown All in One

# Git Project Settings

1. Settings > Enable Git (default true)
2. git initialize local repository
3. Add .gitignore file (https://github.com/github/gitignore)
4. Make Remote Repository in GitHub
5. Add Remote Repository (git remote add origin <url>)
6. commit & pull / push�(git push -u origin master)�(git pull origin master --allow-unrelated-histories)

Git Branch & Rebase/Reset/Tag

# Git Branch

• master 브랜치는 항상 Deploy할 수 있는 상태로 두자!
• 작업할 때는 항상 Topic 브랜치를 만들어서 하자!
• 브랜치 이름은 누가봐도 알 수 있도록 자세히 짓자!
• 정기적으로 자주 Push 하자!
• Merge가 끝나면 해당 Topic 브랜치는 바로 삭제하자!�(remote branch의 경우 push하고 삭제)

# Git Rebase & Reset/Revert/Tag

• 하나의 Commit은 하나의 의미만 갖자!
• rebase ($> rm -fr ".git/rebase-merge")�- drop: 해당 소스(commit) 삭제! (cf. reword)�- fixup: 바로 앞(previous)으로 합치기�- squash: 바로 앞(previous)을 최신으로 합치기
• reset은 push 전, revert는 push 후!

$> git branch [-a | -r]

$> git branch <new-branch> [<from-br>]

$> git checkout <branch-name>

$> git checkout -b <new-br> <from-br>

$> git checkout -

$> git checkout master�$> git checkout -p <branch> <file>

$> git merge --no-ff <branch>

$> git log --graph

$> git branch [-d|-D] <branch-name>

$> git push -d origin <br>

$> git commit --amend ⇐ REWORD

$> git rebase -i HEAD~2 # --abort

$> git reflog

$> git reset --hard <revision-hash-id>

$> git reset --hard <tag>

$> git push -u origin master ⇐ Upstream

$> git revert <revision-hash-id>

$> git revert <revision-hash-id> -- <path>

$> git tag

$> git tag v0.0.1

$> git push origin [--tags | v0.0.1]

$> git tag -d <tag>

$> git push origin -d <tag>

Pull Request (Social Coding)

# Fork & Pull Request on Git Service

• Fork Repository to my GitHub
• Clone to Local
• Make Topic Branch�$> git checkout -b <topic-branch> master
• Edit Code
• Diff, Add & Commit to Topic Branch
• Push to Remote Topic Branch�$> git push origin <topic-branch>
• Change branch to Topic on GitHub
• Compare & Pull Request

# Forked Repository Management (upstream)

• Fork & Clone (already)
• Add Upstream (Original Repository)�$> git remote add upstream <url>
• Fetch upstream/master Branch�$> git fetch upstream
• Merge upstream/master → master�$> git checkout master�$> git merge upstream/master
• Eidt & Add & Commit to Topic Branch
• Push to Remote Branch
• Send Pull Request & Conversation

Pull Request (Code Review)

# Collaborator # Author(Leader)

• Clone to Local
• Make Topic Branch
• Edit Code
• Add & Commit to Topic Branch
• Push to Remote Branch
• Send Pull Request to review ⇒ Code Reviewing� ⇐ Approve & Merge to master
• Pull master & Remove Branch�$> git remote update origin --prune

cf. https://www.npmjs.com/package/ember-html-table-to-excel

Git 실무

(Git Flow)

Startup Fullstack Developer

indiflex시니어코딩

In This Chapter,

• Git Flow Concepts
• Git Flow Examples

Git Flow Concepts

• master
• develop
• feature/
• release/
• hotfix/
• support/ (only git flow cli)

https://nvie.com/posts/a-successful-git-branching-model/

Install Git Flow

## Mac

$> brew install git-flow

​

�

## Linux

$> sudo -

$> dnf install git -y�$> curl -OL https://raw.github.com/nvie/gitflow/develop/contrib/gitflow-installer.sh

$> chmod +x gitflow-installer.sh

$> ./gitflow-installer.sh

# Git Flow Settings

• Install gitflow VSCode extension
• https://github.com/nvie/gitflow

## Windows

1. Install MSysGit�https://gitforwindows.org/
2. download dll files�libiconv-1.9.2-1-bin/bin/libiconv2.dll�libintl-0.14.4-bin/bin/libintl3.dll�util-linux-ng-2.14.1-bin/bin/getopt.exe
3. copy to msysgit's bin�(ex. C:\Program Files (x86)\Git\bin)

​

$> git clone --recursive git://github.com/nvie/gitflow.git

$> cd gitflow

$> git config --global url."https://github".insteadOf git://github��C:\gitflow> contrib\msysgit-install.cmd "[path to git installed folder]"

$> ln -s "/C/Program Files (x86)/Git/bin/git-flow" git-flow

Git Flow Commands

$> git flow init

$> git push origin --all

$> git flow feature start <feature-branch>

$> git flow feature list

$> git add .

$> git commit -m

# push & pull-request(to review)

$> git flow feature finish <feature-branch>

$ other-feature> git merge --no-ff develop

$> git flow release start <tag>

$> git flow release finish <tag>

$> git tag

$> git push origin --all --follow-tags

$> git flow hotfix start <tag>

$> git flow hotfix finish <tag>

## scripts

$> git flow init

$> git push origin --all

$> git flow feature start login

$> git merge --no-ff develop

Ex. Try This

1. 2개 feature 시작 (login, regist)
2. login, regist 각각 코딩
3. login 작업 완료
4. login 코드 리뷰
5. login 릴리즈 & 배포 (0.1.0)
6. regist 작업완료
7. regist 릴리즈 (0.2.0)
8. 0.1.0에서 버그 발생!! → hotfix 시작
9. hotfix 0.1.1 작업완료
10. hotfix 0.1.1 코드리뷰
11. hotfix 0.1.1 배포(0.1.1)
12. regist 릴리즈 마무리 & 배포(0.2.0)

Git 실무

• 다양한 실무 사례
• Trouble Shooting

Startup Fullstack Developer

indiflex시니어코딩

In This Chapter,

• Remote에 올라간 파일/폴더 삭제
• 실수로 master 브랜치에서 작업
• 실수로 작업중인 브랜치를 삭제
• 특정 태그로 긴급 롤백 & 다시 hotfix

TroubleShooting 1 - make ignore already pushed�

실수로 remote repository에 불필요한 파일/폴더를

Push했다.

​

.gitignore에 추가하고 삭제 후 push해도�원격에서는 지워지지 않는다.

​

1. 로컬과 리모트 모두 지우고 싶다. (media2)
2. 로컬에는 남겨두고 리모트에서만 지우고 싶다. (media)

TroubleShooting 2 - Work with Master Branch�

실수로 작업(Topic) 브랜치가 아닌

메인(Master) 브랜치에서 작업하고 커밋했다.

​

Master는 원위치하고, 작업한 소스는 살리고 싶다!!

​

1. 다행히 PUSH는 하지 않았다.�
2. PUSH까지 해버렸다.

TroubleShooting 3 - Topic Branch Recovery�

작업 중이던 Topic 브랜치를 실수로 삭제했다. (-D)

​

git reset으로 브랜치는 복구되지 않는다.

​

브랜치를 그대로 복원하고 싶다.

TroubleShooting 4 - Rollback Service Source�

버그 수정(hotfix)해서 Tag 0.2.1 배포 후

​

1. 예기치 못한 장애가 발생했다.�얼른 0.2.0으로 Rollback 하고 다시 배포하자!�
2. 0.2.1의 소스를 이용해서 0.2.2를 작업하자.�

Python

코딩 스킬

Startup Fullstack Developer

indiflex시니어코딩

Flask

REST API

Startup Fullstack Developer

indiflex시니어코딩

Setup & Extensions for Web Development

# Settings

• pip install Flask Flask-Restful
• keyboard shortcut
• Terminal

​

# Virtual Environment

• python -m venv venv
• source ./venv/bin/activate
• deactivate

�# Code Definition

​

# Editor Usage

• ​

# Install Extensions for FrontEnd

• Emmet
• Auto Rename Tag
• prettier
• Bracket Pair Colorizer 2
• css peek
• html to css auto
• HTML CSS Support
• Live Server
• REST Client
• Live SASS Compiler
• Javascript(ES6+) code snippets

Flask

크롤링

API 개발

Startup Fullstack Developer

indiflex시니어코딩

Thank you

수고 많으셨어요~

​

Startup Fullstack Developer

indiflex시니어코딩