WIL 1. 웹개발 종합반 4주차(6월 5주차)

< WIL이란? >

Weekly I Learend의 약자로, 주간 학습한 내용을 정리 후 공유하기 위해 작성하는 글이다.

 

아래는 웹 개발 종합반 강의 4주차를 1회독하면서 정리한 내용이다.

 

---

 

<  토이 프로젝트의 시작 (1~5강) >

4주차 1강 ~ 5강에서는 토이 프로젝트 구현하는 방법을 연습한다.

Flask 라이브러리를 통해 localhost 로 백엔드와 프론트엔드를 연결하여 구동한다.

 

 

- 가상환경 잡기

보통 라이브러리는 통합해서 설치하지 않는다.

프로젝트별로 구분하여 업/다운 그레이드를 쉽게하기 위함이다.

이를 위해 가상환경을 구성한다.

→ 프로젝트 폴더 내 라이브러리 설치를 위한 별도의 공간을 생성하는 과정

 

*폴더 선택 - app.py 파일 생성 - 터미널 실행, 아래 명령어 입력

python -m venv venv #window
python3 -m venv venv #mac

* 해당 명령어를 실행 후 venv 폴더 안에 모든 파일이 정상적으로 설치될 때까지 충분히 기다려야 한다.

*venv 폴더 생성 확인  - select interpreter: 3.8.6 'venv': venv - 현재 터미널을 닫고 새 터미널 실행

 

- 라이브러리(프레임워크) 설치

터미널을 통해 명령어를 입력하여 라이브러리(프레임워크)를 설치한다.

pip install libraryname

** 여기서 flask 프레임워크를 설치했음에도 인식을 하지 못하는 오류가 발생했는데,

터미널에서 python 파일 실행 이후 다시 설치했더니 인식했다.

import "flask" could not be resolved

 

최초에 설치한 라이브러리는 기존 파이썬 폴더(원본)에 설치되었고, 터미널에서 python 파일 실행 전에는 기존 interpreter로 인식하여 발생한 문제로 보인다.
→ 정상적으로 인식되었을 때 터미널 실행시 제일 첫 줄에 (venv) 문구가 등장한다.

 

• 라이브러리는 미리 만들어 놓은 기능을 호출하는 것이고, (패키지/모듈)
• 프레임워크는 개발을 위한 뼈대이다.(프레임 워크는 라이브러리를 포함한다.)

        → 개발 편의를 위해 사용된다는 면에서 둘의 결은 비슷하다.

 

- localhost 접속하기

localhost를 통해 프론트와 백엔드가 결합된 웹페이지를 열람한다.

 

Window와 Mac의 포트넘버가 달랐다. (윈도우: 5000, 맥:5001)

 

 

- 프론트엔드와 백엔드를 연동(연결)하기

기본적으로

app.py 파일은 백엔드로,

index.html 파일은 프론트엔드로 생각하면 된다.

1. template 폴더 생성, 해당 폴더 안에 index.html 파일 생성
2. app.py 파일에서 flask의 render_template 기능 이용(flask의 기능으로, from / import 문에서 사용한다.)

*정확한 작동방식은 아직 모른다. 차후 공식문서를 읽어보아야겠다.

 

 

- GET 방식과 POST방식

• GET 방식: URL로 전달 (URL 뒤 물음표 붙여 데이터 전달) -> 통상 데이터 조회시 사용한다.
• POST 방식: 데이터 조작(생성, 변경, 삭제)

*이 부분 역시 영상을 보면서 따라하지만 정확히 작동되는 순서는 이해되지 않았다.

(4주차 강의에서 제일 어렵게 느껴진 부분이다.)

'어디로 들어가서 어디로 나오는 건지...' → 강의 회차 반복과  JS문법 공부가 필요하다.

 

→ fetch 를 통해 데이터를 보낸다(백 ↔ 프론트)는 것만 알겠다.

실습간 두 방식의 차이는 결과값에서만 발견했다. (POST방식은 터미널에 특정한 값을 출력해주었다.)

 

 

---

 

< Mars 프로젝트 (6~9강) >

화성땅 공동구매 프로젝트를 구현한다.

이 프로젝트에서는 이름과 주소를 입력하고 평수를 선택한 뒤 [주문하기] 버튼을 누르면,

해당 데이터가 DB에 저장되고, 웹페이지에 이 데이터를 불러와 전시하는 기능을 구현한다.

프론트엔드(index.html)와 백엔드(app.py 와 mongoDB)의 상호작용이 발생한다.

 

 

- 프로젝트 세팅

1. 프로젝트 폴더 선택, 가상환경잡기
2. flask, mongodb, dnspython 라이브러리 설치
3. app.py와 index.html 파일에 코드스니펫 입력

4. Atlas(mongo db)에서 기존 실습 간 사용한 collections 삭제

 

 

- 데이터 저장/불러오기 기능 구현

저장과 불러오기 기능을 구현할 때는 저장 기능을 먼저 만들어야 한다고 한다. 

*불러오기 기능을 먼저 구현하면 이것이 정상적으로 작동하는지 알 수 없다...

 

저장: 웹페이지에서 입력한 데이터를 몽고 DB에 저장하는 기능 구현

불러오기: 몽고 DB에 저장된 데이터를 웹페이지에 붙여주는 기능 구현

 

페이지가 로딩되면 GET 요청을 통해 주문 내역을 불러옴

→ 서버(DB)에서 가지고 있는 모든 데이터를 보내주기

 

* 오류
기능 구현 간 DB의 데이터를 불러오지 못하는 현상이 발생했다. 

Atlas에서 Collections를 확인해보니 데이터가 users 컬렉션에 저장되고 있었다.
처음에는 users 컬렉션 이름을 mars로 바꾸는 방법을 찾다가,
users 컬렉션 삭제 후 다시 데이터를 넣어도 users 컬렉션이 생성되는 것을 확인하고 코드에 문제가 있음을 알아챘다.

*명칭주의: 폴더가 아닌 Collection이 맞다. db>collection>document>field(key:value)

Console의 결과가 강의와 달라 MongoDB를 확인해보니, 데이터가 users 폴더에 저장되고 있었다.

 

users가 아닌 mars가 되야한다.

사실 강의만 제대로 따라하면 발생하지 않는 문제였다.

(그래도 혼자서 문제를 해결하는 능력을 길렀다고 생각해본다. ㅋㅋ)

 

 

 

- 화성땅 공동구매 프로젝트 정리

아래는 내가 이해한 작동 방식이다. (회차를 반복하면서 수정될 듯 하다.)

 

1. 클라이언트가 웹페이지에 접속 (GET 요청)

2.  데이터 불러오기

• MongoDB로 부터 데이터를 불러온다.
• order-box 에 먼저 입력된 데이터부터 하나씩 나열(전시)한다.

3.  서버에 저장된 데이터가 웹페이지에 게시된다.

4. 데이터(이름, 주소, 평수) 입력 후 [주문하기] 버튼을 누른다. (POST 요청)

5. 해당 데이터가 json 형태로 MongoDB에 저장된다. (POST 완료, 지정된 문구 게시)

6. 새로 저장한 데이터를 포함하여 최신화된 데이터를 불러온다.

 

 

- 학습 포인트(보완 사항 도출)

• JQuery문 기억이 안 나서 따라 치기만 했다. → JQuery 공부
• 오류가 발생했던 곳은 대부분 강의를 정확하게 따라하지 못해서 발생했다.
• 1~3주차 강의 수강 이후 1달 정도의 텀이 있어서 이해도가 더 떨어졌다. → 학습 공백 기간 줄이기
• GET과 POST를 제외하면, 기존 강의 내용을 도움없이 혼자서 할 수 있다면  충분히 쉽게 만들 수 있는 프로젝트로 보인다. 그래서 회독이 중요하다.

기존에는 학습 간 개발일지만 간단하게 작성했는데, WIL은 조금더 상세하게 작성하게 되는 부분이 있다.

이 과정에서 내가 모르는 부분을 메타인지 할 수 있다는 점이 좋다.

 

*10강~14강 내용 정리는 WIL 1-2를 통해 게시 예정이다.