내일배움단 프로젝트 챌린지 4일차 개발일지ㅣ메이킹챌린지 12기[개발일지]

 

🚗 팀 아콰마린 개발일지 4일차

4일차 : 레이아웃 디자인, 데이터베이스 설계, 프로젝트 파일 세팅

🤔 논제 정리

---

🎯팀 상황공유

• 프론트엔드
  • 레이아웃 디자인 - 메인페이지, 리스트페이지, 랭크페이지, 추천페이지
• 백엔드
  • 데이터베이스 - 스키마 작성, 내용 스크래핑
  • 플로우차트 - 메인페이지, 리스트페이지
  • 개발문서 - 없음

🎯프론트엔드 디자인 논의

• 어제(3일차)에 논의된 기능보다 많은 것을 포함하는 디자인을 확인해서 논의
• 인기순, 최신순 정렬 버튼
  • 원래 기획 기능은 페이지네이션과 함께 추천순서대로 정렬 - API 2개
  • 프론트엔드에서 디자인된 기능은 페이지네이션, 인기, 최신 - API 3개
  • 프론트엔드 기준에서 해당 디자인은 사용자 경험을 향상 시킬 수 있어 필요함
  • 결과 : 프론트엔드 의견을 수용 - 인기순, 최신순 정렬 기능 추가!
• 페이지네이션
  • 원래 기획 기능은 데이터를 제한해 하단부 페이지 버튼으로 데이터를 넘겨가면서 확인할 수 있는 기능
  • 디자인된 기능은 9개로 제한된 데이터 이외를 보여주지 않고 더보기 버튼으로 페이지네이션
  • 이후 30, 50개로 추가적으로 볼 수 있는 기능 지원
  • 의견 논의 중 추가 의견 발생
• 투표하기로 결정!
  • 기본 페이지네이션 - 하단부 페이지 버튼 존재. 넘겨서 다음 데이터 확인
  • 더보기 스크롤 - 우상단 더보기 버튼으로 전체 데이터 추가 출력
  • 스크롤 반응 데이터 추가 - 18개로 제한된 데이터에서 스크롤을 내리면 해당 반응을 감지하여 데이터를 추가로 출력
  • 페이지네이션 및 30개보기 - 9개로 제한된 데이터에서 10개 보기를 누르면, 10개의 데이터 추가, 30.50으로 사용자가 개수보기 설정을 조절할 수 있음

🎯데이터베이스 작성방식

• 요리재료와 요리과정을 부분 스크래핑 할 수 있을까?
  • 만개의 레시피 웹에서 데이터를 스크래핑하는 도중, 요리재료와 요리과정의 데이터가 흩어져 있어 스크래핑에 어려움이 있음
  • 튜터님의 답변을 참고하여 스크래핑을 bs4로 시도했으나, 불편하고 효율이 좋지 않음
  • 수작업으로 가져오기로 결정
  • 해당 데이터는 띄어쓰기를 기준으로 스플릿 할 수 있다고 판단. 띄어쓰기로 순서 구분.

🖋기술 정의

---

🛠프로젝트 초기 코드

# flask 프레임워크 임포트.
# render_template(페이지 이동), jsonify(json값 리턴), request(클라이언트 값 받기) 라이브러리 임포트
from flask import Flask, render_template, jsonify, request

# MongoClient(몽고DB 관리 라이브러리) 임포트
from pymongo import MongoClient

# 클라이언트 정의 - MongoClient를 로컬호스트와 연결
client = MongoClient('localhost', 27017)

# 컬렉션 정의. mc12th라는 컬렉션이 생성됨
db = client.mc12th

# app.route를 쓸 수 있게 해주는 코드
app = Flask(__name__)


# 메인 페이지 - app.py 실행 후, localhost:5000으로 접속했을 때, 가장 먼저 출력
@app.route('/')
def render_main():
    # index.html에 원하는 클라이언트 파일 입력
    return render_template('index.html')

# localhost:5000 으로 들어갈 수 있게 해주는 코드
if __name__ == '__main__':
    app.run('0.0.0.0', port=5000, debug=True)