[TIL] Python, Flask, MongoDB, 미니 프로젝트 - 팀 소개 웹사이트 만들기

방명록 등록/조회 완성. 수정/삭제는 보완이 필요함.

 

팀 소개 웹사이트

 

메인페이지

: 팀명, 공동의 목표와 특징을 기재.

- 팀원들의 간단한 정보를 카드형식으로 표현.

- 팀원들의 sns, 블로그로 이동 가능.

 

상세페이지

: 팀원을 소개하는 각각의 상세페이지. 

- 팀원 상세 소개

- 다른 팀원 소개 페이지로 이동

- 방명록 등록

 

여기서 팀원 소개 페이지 하단에 들어갈 방명록을 맡았다.

방명록을 등록하고 조회하여 화면에 불러오는 기능은 이미 웹종반 강의에서 배워 문제가 없었다.

문제는 방명록 수정, 삭제 기능.

아직 파이썬, 백엔드가 낯선데 응용까지 하려니 너무 어렵다.

현재 사용하는 프레임워크나 DB 등의 사용법을 기록해 둬야겠다.

 

참고로, 방명록 API는 아래와 같다.

등록 : POST
조회 : GET
수정 : POST
삭제 : POST

 

 

 

Flask 프레임워크를 이용한 기본 세팅

 

프로젝트 세팅 - Flask 폴더 구조 만들기

폴더
|— venv (가상환경)
|— app.py (서버)
|— templates (파일 이름 고정)
         |— index.html (클라이언트 파일)

* css : static 폴더 생성 > CSS 폴더 생성 > style.css 파일 생성하여 작성

 

 

프로젝트 세팅 - 가상환경 생성하기

1. 터미널 열어서 경로 확인 후 가상환경 만들기 : python3(윈도우 python) -m venv venv 입력 후 엔터
2. venv 폴더 생성된 것 확인.
3. venv 활성화 : 화면 오른쪽 아래의 파이썬 버전을 클릭 > Interpreter를  (venv)인 것으로 골라주기 or 터미널에 source venv/bin/activate 입력 후 엔터
4. 터미널에 (venv) 뜨는지 확인.

 

프로젝트 세팅 - 패키지 설치하기

1. 여러 개를 땐 띄어쓰기로 구분 : 터미널에 pip install flask pymongo dnspython 입력 후 엔터
2. 설치된 목록 조회 : pip freeze > flask, pymongo, dnspython 있는지 확인.

 

mongoDB Atlas 창 띄워두기

1. https://cloud.mongodb.com/
2. 화면 왼쪽의 Database를 클릭한 뒤 Cluster 0 클릭 > Collection 탭을 클릭.
3. or Database에서 ‘Browse Collections’ 버튼 클릭.

 

 

파이썬으로 프로젝트 진행 시 코딩 순서

 

클라이언트와 서버 연결 확인

app.py 파일 > 우클릭 > 터미널에서 파이썬 파일 실행 > 브라우저에 http://localhost:5000 or http://localhost:5001 치고 들어가 보기 > 연결 확인

 

 

API 만들고 사용하기

1. 데이터 명세

2. 서버(백엔드)부터 만들기

3. 클라이언트(프론트엔드) 만들기

4. 저장 후 테스트 

 

 

 

+) 기타 메모

 

def ##():
  기능 @

파이썬에서 @ 기능을 ##라는 함수명으로 정의한다.

 

 

$(this)

제이쿼리에서 일종의 변수, 선택자.

동일한 동작이 반복되는 곳에서 주로 활용됨.(네비게이션 메뉴, 탭 등)

동작이 중복으로 작동하는 것을 방지함.