ep 10. flask로 instagram Clone 코딩 - 1

프로젝트 준비

클론 코딩을 하기 위해서 프로젝트 폴더를 mkdir 사용해 만들어줍니다.

cd 명령어를 사용해 만들어준 프로젝트 폴더로 들어갑니다.

이동 후 frontend 폴더와 backend 폴더를 mkdir 를 사용해 생성해줍니다.

frontend 폴더에는 다음과 같이 틀을 잡아줍니다.

backend 폴더로 이동해 위와같은 명령어로 가상환경을 설치해줍니다.

이후 f1-interpreter 선택 - venv를 선택해줍니다. 이후 터미널을 새로 열면 아래와 같이 가상환경이 활성화 된 것을 확인할 수 있습니다.

backend폴더엔 다음과 같은 폴더들을 생성해줍니다.

개발에 필요한 폴더들을 다 생성해줬음으로 프로젝트에 필요한 라이브러리들을 설치해줍니다.

pip install flask

pip install flask-jwt-extended

pip install python-dotenv

pip install flask-restful

pip install flask-migrate

pip install flask-uploads

pip install flask-marshmallow

pip install marshmallow-sqlalchemy

 

pip freeze 명령어를 통해 설치된 목록과 버전을 확인할 수 있습니다.

위와 같은 명령어로 requirements 폴더에 common.txt 파일로 패키지 내용을 저장합니다.

(m이 3개로 보이는 것은 기분탓입니다. 필자는 이후 수정했습니다..)

requirements 폴더에 dev.txt 파일을 생성해 다음과 같이 입력해줍니다.

common.txt에 있는 내용을 모두 설치하겠다는 의미입니다.

이렇게 설정해줬다면 앞으로 아래와 같은 명령어를 입력하면 개발에 필요한 패키지들을 한번에 설치할 수 있게 됩니다.

pip install -r backend/requirements/dev.txt

 

이후 .env 파일과 .env.example 파일을 추가적으로 생성해줍니다.

 .env.example 파일에 다음과 같이 코드를 입력해줍니다.

.env 파일에는 다음과 같은 코드를 입력해줍니다.

 

이제 config 폴더를 작업해주겠습니다.

config 폴더 아래에 아래와 같은 파일들을 생성해줍니다.

common.py에 다음과 같은 코드를 입력해줍니다.

이 때 print로 BASE_DIR을 찍어봤을 때 마지막이 backend로 끝나야 됩니다.

dev.py에는 다음과 같이 코드를 짜줍니다.

prod.py에는 다음과 같이 import만 해줍니다.

api 폴더와 그 아래 __init__.py 파일을 생성해줍니다.

api 폴더에 위 3개의 폴더를 이동시켜줍니다.

 

__init__.py 에 다음과 같이 코드를 짜줍니다.

그리고 app.py 파일을 만들어줍니다.

다음과 같이 코드를 짜줍니다. 아까 __init__.py에서 만든 create_app을 받아 살행시키는 코드라 생각하면 편합니다.

 

이후 터미널에 python app.py 를 입력했을 때 서버가 아래와 같이 정상적으로 열리면 됩니다.

백엔드 준비

backend/api 폴더 아래에 db.py 파일을 생성해 위와 같은 코드를 입력합니다.

 

marshmallow 사용을 위해 api 폴더 아래에 ma.py 파일을 생성해 위와같이 코드를 입력합니다.

models 폴더에 위와 같은 파일을 생성해줍니다.

User 모델부터 구현해보도록 하겠습니다.

위처럼 user.py에 코드를 짜주면 된다.

 

그리고 api/__init__.py 코드를 위와 같이 수정해준다.

이후 터미널에 flask db init를 입력해주면 backend 폴더에 migrations라는 폴더가 생성된다.

이후 flask db migrate를 입력해주고, flask db upgrade 를 입력해준다.

이렇게 하면 정상적으로 User 테이블이 추가된 것을 확인할 수 있다.

 

팔로우 / 언팔로우를 위한 유저 모델 구현

다음과 같이 다대다 관계의 테이블을 설정해주면 된다.

먼저 다대다 관계인 이유는 우리는 팔로우를 서로 할 수 있다. 내가 여러명을 할 수도 있고, 동시에 나를 여러명이 팔로우 할 수도 있다. 그러기 때문에 일대다, 일대일 관계가 아닌 다대다 관계인 것이다. 이를 위해 User의 id를 가져와 연결 시켜준다고 생각하면 편할 거 같다.

추가로 다음과 같이 코드를 추가해주면 된다. followed는 필드를 하나 추가해준 것이고, follow() 메서드는 호출됐을 때 내가 그사람을 팔로우하고 있지않다면 팔로우, unfollow()는 팔로우하고 있다면 언팔로우, is_following은 누가 팔로우하고 안하고를 판단하기 위한 메서드이다.

 

이제 위의 과정처럼

flask db migrate -> flask db upgrade 를 진행해주면

이렇게 잘 들어간 것을 확인할 수 있다.

 

프론트엔드 준비

마지막으로 프론트엔드 개발 준비를 하겠다.

frontend.zip

0.00MB

위의 파일을 다운로드 받아 FRONTEND 폴더에 넣어주면 된다.