[항해99] 1주차 미니프로젝트 회고

🎨미니 프로젝트 기획하기

4일 기간동안 진행하는 만큼 간단한 게시판 기능 정도 구현할 수 있을 거라고 생각했다.

주제는 독후감 서비스로 잡았다.

사용자들이 책을 좋아하는 사람들이기 때문에 책 신상품과 베스트셀러를 확인할 수 있고,
사용자가 독후감을 작성하기 쉽게 만들어주고
사용자들과 서로 리뷰를 보며 댓글을 남기며 교류할 수 있도록 기획했다.

🖼와이어프레임

figma로 템플릿 하나 다운 받아서 팀원들 다같이 만들기 시작했다.

 

놀랍게도 팀원 4명 모두 처음으로 figma를 사용하는 거였는데
전직 디자이너님이셨던 팀원님을 필두로 뚝딱뚝딱 만들었다.
와이어프레임을 잡고 시작하니 만들어야 하는 것들이 확실하게 눈에 보인다.

 

큰 틀을 팀원들이 잡아 놓으면 내가 각각의 기능적인 디테일을 잡아놓는 역할을 했다.
프론트엔드 작업을 해본 경험이 있어서 누군가 틀만 잡아놓는다면
팀원들이 신경쓰지 못하는 디테일을 잡아 놓는 것이 어렵지 않았다.

⚙API 설계

API 설계는 제대로 해본 적이 없었는데
레퍼런스를 찾아보고 기술매니저님에게 여쭤보는 방식으로 채워나갈 수 있었다.
아무래도 API 설계를 공부한게 아니기 때문에 완벽하게 설계하지는 못했다.

 

1. 메소드 별 기능을 구분하기

GET, POST, PATCH, DELETE의 각각 기능을 구분한다.

2. 리소스 중심으로 설계하기

 

프론트엔드와 백엔드가 소통하는 엔드포인트, RESTful API

추가로 기술매니저님 피드백으로 request, response에 자료형을 적어주면 훨씬 좋다고 하셨다.

🔨미니 프로젝트 개발하기

팀원 각자의 역할은 페이지 별로 구분했다.
글 작성하기, 리뷰리스트 페이지 두가지 페이지를 맡았다.

 

1.글 작성하기

사용자가 작성한 리뷰 내용과 교보문고 책 정보 페이지 url을 입력하면
리뷰내용과 url에 있는 책 정보들을 크롤링해서 db에 저장하는 페이지

2.리뷰 리스트

리뷰들을 확인할 수 있는 페이지이다.
처음 기획단계에서는 개인과 다른 사람 리뷰를 구분해서 보여주자는 아이디어도 나왔으나
페이지가 너무 많아지게 되어서 리뷰 전체를 보여주지만 검색 기능을 넣는 것으로 대체했다.

🤼‍♂️git으로 협업하기

사실 git을 사용해보지 못한 팀원들과 다같이 협업을 무리없이 진행할 수 있을까 고민을 많이했는데
팀원분들이 열심히 질문해줘서 다행히 잘 따라와 주셨다.

 

깃 컨벤션은 많은 거 바라지 않고 이 정도만 했다.

1. 깃 메시지는 팀원들이 타이틀에 알아볼 수 있게 함축적으로 작성 내용은 최대한 자세하게 2. 각자 브랜치에서 개발 후 main 브랜치에 PR하는 방식으로 merge

 

여담이지만 다른 팀은 도저히 안되겠으면 팀원들이 도와서 수동으로 코드 합치는 식으로
이가 안되면 잇몸으로 해결했다고 한다. (이메일로 전달한 팀도 있었다고... 크흠)

 

마지막에는 팀원 분이 git을 너무 능수능란하게 사용하셔서

(내 지식을 전부 흡수하셨다...)

서로 PR날리는게 너무 재밌을 정도였다.

3일 동안 커밋 86개...
이 때 항해에 들어온 이유였던 협업 경험 쌓기에 대한 원을 풀었다.

🏸크롤링하기 (Selenium)

크롤링은 전체 사이트 중에서 세 개의 페이지가 크롤링을 사용했다.

신상품, 베스트셀러, 리뷰 작성하기

크롤링하기로 했었던 교보문고가 동적페이지로 이루어져있기 때문에
Selenium을 사용해서 크롤링을 진행했다.

크롤링을 진행했던 종합 월간 베스트 페이지

이 때까지만 해도 동적페이지를 크롤링하겠다는 포부가
이렇게까지 스노우볼이 심각하게 굴러갈지 상상도 못했다.

동적 페이지에 이미지들에는 lazy loading을 적용해놓는데
셀레니움의 스크립트의 속도가 lazy loading이 적용된 이미지들을 불러오지 못하는 현상이 발생했다.

속도를 딜레이해서 로딩될 시간을 충분히 준 뒤에 크롤링을 하면 해결이 가능한 문제이다.

다음 서버사이드 렌더링 부분에서 아직 남은 스노우볼을 해체해보겠다.

✏서버사이드 렌더링

서버는 python의 유명 라이브러리인 Flask를 이용했다.
그래서 서버사이드 렌더링을 지원하는 jinja2 템플릿 문법을 이용해
api로 데이터를 전달하지않고 바로 뽑은 크롤링 데이터들을 렌더링해주는 식으로 기획했다.
확실히 이런 방식으로 렌더링이 이루어진다면 훨씬 더 빠르게 렌더링을 진행할 수 있다는 장점이 있다.

 

그러나 문제는 여기에 있다.

 

렌더링을 하기까지의 프로세스가 (접속 → 크롤링 → 데이터 전달 → 렌더링)인데

 

렌더링을 하기전에 크롤링을 하게 되는데
이 동적페이지 크롤링이라는게 브라우저를 직접 띄워서
데이터들을 캡처해내는 방식이라 아무리 빨리도 느리다.

느려도 너무 느려

 

그렇게 로컬에서 페이지가 로딩되는데 30초가 걸리는 현상을 마주하게 된다.

여기서 생각해낸 해결책은

1.크롤링을 주기적으로 실행하며 db에 저장하여 읽어오기
2.로딩화면 만들기

이 두가지였는데, 1번은 그렇다치더라도 로딩화면은 꽤 필수적이었는데
시간 문제로 결국 해결하지는 못했다.

🏹트러블 슈팅 처리하기

동적 크롤링으로 인해 생겨난 문제점들을 짚어보자

1.글 작성할 때 크롤링 시간이 오래 걸리기 때문에 버튼을 여러번 눌러져 글 작성을 여러번하게 되는 문제

로딩 화면을 보여주면 됐지만, 가장 시간이 덜 걸리는 해결 방법을 찾으려고 했다. 버튼에 active 스타일을 추가해서 사용성을 높이는 동시에 실행되면 `disabled`되도록 만들어서 여러번 글 작성하게되는 문제를 해결했다. 코드 몇줄로 해결할 수 있어서 가장 효율적인 해결 방법이었다.

2.신상품, 베스트셀러 페이지 이미지 lazy loading이라 가끔씩 크롤링이 안되는 문제

상황이 좋아서 로딩이되는 경우도 있는데 대부분은 이미지가 로딩되지 않아서 값을 가져오지 못했다. 해결방법은 여러번 테스트해보면서 딜레이를 걸어주면 된다. 시간 부족으로 해결하지는 못했다.

3.신상품,베스트셀러 페이지 렌더링이 오래 걸리는 문제

위에서 써놓은 것처럼 DB에 넣어서 꺼내쓰는 방법이 최선이라고 생각했다.
기술 매니저님들도 그 방법밖에는 없다고 하셨는데 다른 해결책이 있을지 궁금하다.

엄청나게 쌓인 이슈들

 

사실 여기서 아직 끝이 아니다. 밑에 더 있다.

🎭로그인 / 회원가입 기능

회원가입은 비밀키를 두고 SHA256암호화 방식을 이용해 DB에 저장한다.

jwt, session, 쿠키 방식이 있는데 이중에서 jwt방식을 이용해서 구현했다.

토큰을 이용해서 사용자 권한을 인증해주는 방식을 이용해 로그인 상태를 구별하고
로그인 상태에 따라 로그인해야 들어갈 수 있는 페이지, 로그인하면 다르게 보이는 버튼 등을 처리해 주었다.

🎏AWS에 배포하기

서버 linux 환경은 ubuntu로 설치하였다.
AWS에 배포하려면 사용하려는 목적에 맞게

인바운드 설정을 잘해주어야 한다.

 

anywhere ipv4로 포트 5000과 80을 열어두었고,
AWS에 접속하기 위해서 SSH 접속 포트도 함께 열어주었다.

 

가비아에서 도메인을 구입해놓았기 때문에 연결해주었다.

 

프로젝트에서 사용한 dependency를 모두 추가해주어야 하는데
파이썬 라이브러리까지는 문제가 없다.
명령어 몇자만 추가하면 되니까

 

그런데 문제는 selenium에서 발생했다.
selenium은 브라우저의 존재가 필수적이다.
그런데 ui가 존재하지 않는 linux 환경에서는 어떻게 하면 될까?

 

크롬 드라이버를 깔아주면 된다.

 

크롬 드라이버를 설치해주고 그 외에도 작동하기 위한 환경 설정이 조금 많이 필요하다.
여기다가 크롤링 코드도 linux에서 돌아갈 수 있는 배포버전과 개발버전을 다르게 관리해주면서
시간을 엄청나게 잡아먹었다.

 

그래도 결국 발표 50분전에 배포까지 겨우겨우 완료했다.

배포할 때 hotfix를 엄청했다...

🚀피드백

🤗잘한 점

1.기획 수정보다는 기술적인 해결책을 먼저 제시하고 해결하려고 했던 점

 

크롤링해야할 페이지가 동적 페이지인걸 알았을 때 다른 정적페이지를 크롤링했어도 됐지만
기획 안에서 기술적으로 해결하고 싶어서 노력했기 때문에 오히려 더 많이 배워간 것 같다.

 

2.원활한 커뮤니케이션과 팀 플레이

 

지속적으로 커뮤니케이션하는 것에 시간을 자주 또 많이 들여서
서로 뭘하고 있는지 진행상황이 어떻게 되는지 서로가 파악할 수 있도록 했다.
이렇게 되니 작업 우선순위가 잡히고 작업 속도가 오히려 더 빨라졌다.

 

지속적인 피드백이 즉각적으로 이루어지니
팀원들 다같이 하나의 작품을 만들어 나가는 것에 목적이 크게 엇나감 없이
집중할 수 있었던 것 같다.

 

3.그래도 깃을 고집한 점

 

내가 협업으로 방식으로 깃을 고집했다.

그 이유는 지금 경험해봐야 나중에 다른 팀원들이 더 편하실 것 같아서
내가 아는 모든 것을 알려드리면서 지도해드리니
나중에는 깃을 진짜 능수능란하게 사용하게 되셔서 너무 뿌듯했다.

 

깃을 사용하니 작업이 한눈에도 보이고 협업 방식도 익히게 되고 협업도 편해지고
장점밖에 없었던 것 같다.

 

나도 제대로된 협업을 경험한 것 같아 매우 기뻤다.

🤔아쉬웠던 점

1.크롤링프로젝트가 되어버린 점

 

크롤링 문제에만 집중하다가 시간을 너무 쏟아버려서 프로젝트의 목적이었던
api, db 등을 이용한 기능에 집중하지 못하게 되어버려 아쉽다.

기획대로 전부 완성하지 못한 것도 함께 아쉽다.

 

2.소외된 팀원이 있었던 점

 

각자의 실력이 모두 다 제각각인 상태로 시작하다보니
질문 만으로는 진행할 수 없는 분도 계셨다.

 

데드라인이 정해져있고 촉박했기 때문에

어쩔수 없이 다른 팀원들이 할 일을 끝낼 때까지 최대한 알아서 하게끔 말씀드리고
끝낸 다음에 도와주는 식으로 진행했는데

 

이 과정에서 무기력하게 업혀가는 경험을 하게 한 것 같아 팀원들에게 미안해하는 모습에
오히려 내가 더 미안했던 것 같다.

역할 배분에 더 신경썼다면 조금 더 괜찮지 않았을까하는 생각이 든다.

 

🍻뒤풀이

4일동안 잠도 제대로 못자면서 밥도 제대로 못 먹으면서 하루 종일 프로젝트에만 집중했다.

그러다보니 프로젝트 완성도에 상관없이 완성을 했다는 것 그 자체만으로 너무 행복했다.

팀원들 모두가 별탈 없이 웃으면서 마무리할 수 있었어서 더 좋았다. 치얼스!🍺

 

https://github.com/synuns/reBook

GitHub - synuns/reBook: 덮은 책도 다시 보자 rebook