WestaGram 프로젝트 - 프론트,백엔드 연결 플로우

.·2020년 5월 23일

instagram westagram 프로젝트

Coding

목록 보기

26/33

1. 기존 comment app 모델에 ForeignKey 연결 및 comment app 기능 수정

account 앱의 username 을 foreign key 로 comment 앱에 연결하였다.

2. 장고 기본 세팅 진행.(Django Initial Settings for Project)

2-1. .gitignore

https://www.gitignore.io/
위 사이트에서 프로젝트에 사용하는 환경에 해당하는 키워드를 선택하면 자동으로 .gitignore 파일에 정의할 요소들을 생성해 준다.
가령 나의 경우에는 mac, django, vim, python 이런 식으로 키워드를 입력하면 된다.
이제 생성된 결과물을 복사한 뒤 바로 아래의 과정을 거쳐 내용을 저장한다.

cd '프로젝트 폴더명'
touch .gitignore
vi .gitignore           #이후에 복사한 내역을 붙여넣어 준다.

2-2. settings.py 내 사용하지 않는 요소 주석 처리하기

2-3. corsheaders (보안과 관련된 요소 플러그인)

pip install django-cors-headers
settings.py에 INSTALLD_APPS 안에 추가해 주기.

INSTALLED_APPS = [
...
	'django.contrib.staticfiles',
	'corsheaders'
]

middleware 도 추가하기.

MIDDLEWARE = [
...
	'corsheaders.middleware.CorsMiddleware',
...
]

마지막 아래에 허용할 값을 정의하기.

##CORS
CORS_ORIGIN_ALLOW_ALL=True
CORS_ALLOW_CREDENTIALS = True

CORS_ALLOW_METHODS = (
    'DELETE',
    'GET',
    'OPTIONS',
    'PATCH',
    'POST',
    'PUT',
)

CORS_ALLOW_HEADERS = (
    'accept',
    'accept-encoding',
    'authorization',
    'content-type',
    'dnt',
    'origin',
    'user-agent',
    'x-csrftoken',
    'x-requested-with',
		#만약 허용해야할 추가적인 헤더키가 있다면?(사용자정의 키) 여기에 추가하면 됩니다.
)

2-4. requirements.txt 생성하기

팀 프로젝트 진행 시 코드를 처음 전달받는 사람도, requirements.txt 를 보고 바로 동일한 환경을 구성할 수 있도록 정보를 전달해야 한다. 그러기 위해 존재하는 것이 requirements.txt 이고 작성법은 아래와 같다.

pip freeze > requirements.txt

pip freeze 는 현재 로컬 환경에 설치된 파이썬 모듈 정보를 보는 명령어 이고 이 pip freeze 의 결과를 requirements.txt 에 기록하는 것이다.

2-5. SECRET_KEY, DATABASE 를 별도의 파일 혹은 환경변수로서 관리하기

settings.py 내 DATABASE 설정 및 SECRET_KEY 부분을 삭제한다.
물론 SECRET_KEY 부분은 삭제하기전 별도의 메모장에 복사해 붙여넣어 주는 것을 잊지 말자.

별도의 참조용 파이썬 파일을 하나 생성해서 참조하기
가이드에서는 아래와 같지만,

django-admin startproject '하고싶은 프로젝트 명'
cd '생성한 프로젝트 폴더명'
touch my_settings.py

나의 경우는 기존 생성한 westagram_project 프로젝트 폴더 내에 들어가서 'my_settings.py' 파일을 생성하였다.
그런데 데이터 베이스를 기존에 사용하던 sqlite3 가 아닌 MySQL 을 사용할 것이기 때문에, 아래 링크를 통해 'westagram' 이라는 데이터베이스를 만들어 주도록 한다.
MySQL 데이터베이스 설정하기

또는 아래 사이트를 참조해 보도록 하자.
https://wave1994.tistory.com/67?category=872868

딕셔너리 형태로 넣어져 있는 부분을 잘 기억해야 한다.

2-6. settings.py 내 DATABASE 설정을 적용하기

import my_settings
ALLOWED_HOSTS = [ '*' ]

서버는 여려개의 도메인을 가질 수 있는데, 그 중에 허용할 도메인을 입력
ALLOWED_HOSTS = ['teddyjung.guthub.io']
ALLOWED_HOSTS = ['*'] # 모든 도메인에 대해서 허용

DATABASES 와 SECRET_KEY 설정 적용하기.

DATABASES 의 복수형 입력과 SECRET_KEY 의 딕셔너리 형태에서 키값을 가져오는 것을 이해한다면 반드시 위와 같이 입력하도록 한다.

2-7. .gitignore 파일에 my_settings.py 등록하기

이 파일은 깃 저장소에 공유하지 않을 것이므로, .gitignore 파일에도 등록해야 한다.

3. 내 컴퓨터의 ip 주소를 찾기

네이버에 검색하는 방법이 아니였다. 검색하는 방법은 두 가지가 있다.

3-1. ifconfig 사용하기

pip install ifconfig 로 설치해 주고 ifconfig 를 입력하고 엔터를 쳐서 나오는 내역들 중에서 en0 의 inet 을 확인하는 방법이 있다.

하지만 와이파이 나 통신 등의 재접속을 하게 되면 주소가 바뀌게 되므로 이 부분은 프론트엔드에서 아마 변수에 넣어주는 과정이 필요하다고 들었다.

3-2. (Mac 기준)

system preferences > network > status:connected 하단에 나오는 주소를 그대로 참조하기.

4. 프론트엔드에 ip 주소와 endpoint 알려주기

10.58.4.153.:8000/account/signup email username password

10.58.4.153.:8000/account/signin email password

10.58.4.153.:8000/comment user user_comment

보내기 전 httpie 로 테스트 해보니 잘 작동하고 있었다.

5. 서버 오픈하기

진행한 프로젝트 상위 경로에서 ( manage.py 파일 있는 곳 ) python manage.py runserver 0:8000 로 실행한다.
MySQL 서버도 동시 개장한다.
- mysql.server start
- mysql -u root -p
- enter password
- show databases;
- use westagram;

6. 프론트엔드와 회원가입, 로그인, 댓글이 보내지는지 확인하기

회원가입과 로그인이 잘 진행되는 것을 확인 할 수 있었다.

MySQL 내에서 select * from accounts; 를 통해 많은 수의 가입자 내역을 알 수 있었다.

댓글 확인도 진행되었다.

7. 총평

account 에 대한 블로그 정리를 완료하였지만 comment 앱에 대한 블로그 정리도 진행해야 겠다. 왜냐하면 프론트엔드와 맞추기 전 댓글 comment 에 대해 account 앱의 user 를 foreignkey 로 연결하여야 했는데 이 부분에서 좀 난항을 겪었다.
comment 앱을 만드는 데 있어 데코레이터에 대한 이해와 적용이 필요했다. 나의 경우는 아직 초반 파이썬 리플잇 데코레이터 문제를 풀었던 기억을 제외하고는 개념이 전무하다시피 했다. 물론 관련해서 재귀호출, 클로저 등에 대해 학습을 하면서 이해했으나 데코레이터에서 막혔다.
다음주 1차 프로젝트를 진행하면서 이 데코레이터를 적용해 본다면 이해도가 좀 높아지지 않을까 하는 기대감이 있다.
foreignkey, onetoone, onetomany, manytomany 에 대한 이해도 부족
QuerySet 에 대한 이해도 부족
프론트엔드 개발자와 소통하고 연결하고 테스트 한다는 느낌이 이렇구나.
status code 200 을 보는 것이 너무 좋다.
400, 500 등은 보기가 싫다.