항해99 토이 프로젝트 5일간의 기록

항해99 토이 프로젝트 5일간의 기록

 

항해99 9기 토이 프로젝트에 팀장으로 참여하게 되었다. 처음 해보는 웹 프로젝트며 내가 구현해야 할 것은 디자인,화면UI 그리고 크롤링기능 그리고 댓글 기능이다. 아직 게시글을 생성(C)하고 읽어오는(R) 기능만 구현할 줄 아는 상태. 이번 프로젝트를 통해 수정(U) 그리고 삭제(D) 기능까지 구현해보자.

 

 

개발 환경 및 도구 : MacOS, PyCharm, Visual Studio Code

사용 :

- Flask, python (Back-end),

- MongoDB Atlas(DB),

- Html, css, js , Bootstrap (Front-end)

- Jinja2 (templates-engine)

 

프로젝트에서 맡은 역할 및 한 일

1️⃣  ui/ux 디자인

- 서비스의 메인 화면 레이아웃 설계 및 디자인

- 세부 정보 화면 레이아웃 및 설계 디자인

2️⃣  데이터 수집 및 가공

- 크롤링 코드 구현해 향수 데이터 가져오기 및 db에 적제( crawling.py에 작성 )

- 만들어진 향수 데이터 가공

3️⃣  api 구현

- 첫 번째 화면 향수 데이터 리스트로 불러오기 및 페이지네이션

- 로그인 기능 + 제한된 접근

-  향수 세부 데이터 불러오기(url로 데이터 받아서)

-  향수 세부 정보 페이지 댓글 기능 구현하기(crud)

4️⃣ 코드 파일 merge 및 보완 

merge 과정에서 불필요하게 트래픽이 많이 발생하는 부분을 고침 ( 9월 17일 수정 ) 

-> 일부 기능을 비동기적으로 작동하게 해 불필요한 트래픽 감소.

 

프로젝트하면서 꼭 지켜야 할 것

- 무조건 모바일 반응형이어야함 ( 부트스트랩과 미디어쿼리 적절히 이용)

요즘은 컴퓨터로 정보를 찾기보단 모바일을 통해 정보를 찾는다. 가끔 정부기관 사이트가 모바일 반응형에 최적화되어 처리하지 않은 것을 보면 너무 불편했다. 이번 프로젝트는 무조건 모바일에 최적화된 반응형으로 간다.

 

9월 5일 월요일

- 화면 만들기(부트스트랩 이용)

- 추후에 미디어 쿼리 추가해서 모바일화면에서도 가독성이 좋게 디자인 변경할 것

 

9월 6일 화요일

- 향수 목록 크롤링해서 몽고DB에 저장

- 데이터 수집 중 문제 발생

(1) 크롤링한 이미지에 불순한 데이터가 섞임 

where : 브랜드별 향수 모아보기 페이지

what : 주석에 있는 이미지 태그 요소까지 딸려와 입력되는 문제 

-> 해결 : 필요한 인덱스만 조건을 줘 추출해 빈 배열에 저장 ( 다행히도 홀수 번째 이미지 파일만 문제라는 규칙성이 발견되어서 if문을 이용해 홀수 번째 데이터만 수집할 수 있었다.)

(2) 크롤링한 이미지의 소스가 크롬에서는 잘 로딩되는데 사파리에서는 로딩이 안되는 문제 

사파리에서 실행	크롬에서 실행

-> 해결 : 데이터 불러오는 방식의 변화( 데이터를 Jinja2 템플릿엔진을 이용해  불러오니 해결됨)

 

(3) 수집한 많은 데이터가 한 페이지에 모두 뜨는 문제

어떻게 해야 수집한 데이터를 끊어서 보여줄 수 있을까?

 

- 부족한 점 및 노력해야 할 점 :

수집한 데이터를 어떻게 잘 가공할 지에 대해 고민하기

자바스크립트에 대한 이해 너무 부족

 

 

9월 7일 수요일 

-> 원래 계획상으로는 팀에서 담당한 기능 구현(향수 세부 페이지 댓글 기능)을 구현하려고 했으나 개발환경 세팅부터 다시 해야겠다고 결심함

메모리 부족으로 인해 노트북의 성능이 너무 떨어진다. 메모리 도둑 범인은 파이참이었는데 파이참이 최대사용가능 메모리 8GB 중 혼자 메모리 3GB나 잡아먹고있었다. (최대 5GB까지 사용하는 것을 이 두눈으로 똑똑히 목격한 적도 있다.) 예전에 인텔리제이로 스프링 프로젝트를 진행할때도 이런 현상이 지속되어 중요한 기능 구현을 하기도 전에 지쳐버리는 불상사가 발생한 적이 있었는데 이번에도 이러니 정말 답답했다. 찾아보니 vscode가 상대적으로 가볍다고 하니 일단 커다란 프로젝트가 아니니 vscode로 진행해야겠다고 마음을 먹었다.

 

👇 vscode에 개발환경을 세팅하는 과정을 담은 블로그 포스팅

Collection' object is not callable. If you meant to call the 'insert' method on a 'Collection' object it is failing because no s

 

Import "pymongo" could not be resolved 오류 해결 방법

 

9월 8일 목요일

프로젝트 코드 엎고 새로 작성하기

html 파일 코드가 너무 마음에 안든다. 규칙이 없는 느낌이랄까? 주석도 달아봤지만 팀원들이 봤을 때 이해하기 어려울 듯해서 아예 다시 엎고 새로 작성하기로 결심했다. 사람들이 봤을 때 이해하기 쉬운 코드란 무엇일까? 

 

9월 9일 금요일

- 오후 2시 게더에서 팀 회의

작성한 크롤링 코드 공유 및 역할 다시 분담( 원래 역할인 댓글 기능에 더해 세부 화면까지 맡기로 함 )

 

9월 13,14일 화요일, 수요일

- 14일에 볼 입학 시험 대비를 위해 잠시 프로젝트 진행을 접어두었다. 

- 14일에 항해99 입학시험을 봤다.

 

9월 15일 목요일

- 상세 정보 페이지 api 구현

1️⃣ 프론트엔드 쪽 에서 url_for 함수로 _id 값 정보를 상세정보 페이지 api에 넘겨줌

2️⃣ 상세 정보 페이지 api는 받은 데이터가 있고 그 데이터를 바탕으로 조회한 데이터가 존재한다면 그 데이터를 뿌려줄 html파일에 조회한 데이터 값을 함께 넘겨줌

3️⃣ 데이터를 받은 html 파일은 넘겨준 데이터(딕셔너리 형태)의 각 키에 해당하는 값을 얻어 화면에 나타낼 수 있다.

 

- 댓글 작성 api 구현

댓글이 작성되지 않았을 때에는 리스트를 생성하지 말고 화면 리디렉

댓글이 작성되었을 때는 리스트를 생성하고 화면 리디렉

 

- 팀원 분의 하차 소식 

원래 4명으로 이루어진 팀 이었는데 한 분은 프로젝트 시작 전에 나가셨고 오늘은 또 한 분의 하차 소식이 들려왔다. 4번의 팀 프로젝트 회의를 함께하며 웃고 떠들며 의견을 나누던 또 한 분의 팀원을 보내게 되어 너무 마음이 안좋다. 

 

- 오후 2시 게더에서 팀 회의

남은 기한은 약 3일. 3일이 조금 안되는 시간 안에 프로젝트를 마무리 지어야 한다. 내가 맡은 부분의 api는 모두 구현을 마쳤고 약간의 코드 수정과 디자인 수정이 남았다. 팀원 분이 아직 구현 전이므로 추가로 넣을 수 있는 기능에 대해 생각해 넣어보기로 했다. 그래서 생각해낸 것이 로그인 기능 

 

 

9월 16일 금요일

- 로그인 기능 구현

- 페이지네이션 구현

메인 화면의 페이지네이션을 구현했다. 

변수 설명

 

 

9월 17일 토요일

- 오후 4시 게더에서 팀 회의

팀원 님께서 작성하신 하트누르기 기능 api를 넘겨받았다.

( 코드의 문제점 ) 하트를 누를 때 마다 페이지 전체가 새로고침되어 정상적으로 실행되는 코드임에도 불구하고 버벅거리는 느낌이 든다. 

( 해결 ) 부분적으로 ajax를 사용하여 코드 작성 ㄴ

- 디자인적인 문제 해결하기 

브라우져 크기 줄어들었을 때의 문제 (요소의 크기가 너무 작아 보기 안좋은 화면)

 

9월 18일 일요일

- 프로젝트 완료 (페이지네이션도 잘 구현되었다!)

 

1 페이지	마지막 페이지