Saturday_August_1
.
.
.

👨‍💻👩‍💻 프로젝트 소개

클론한 사이트 : 29cm
팀명 : Oh-29-ya(오이구야, 29cm 사이트의 29라는 숫자에 영감을 얻음)
개발 기간 : 2020.07.20 ~ 2020.07.31
개발인원
Frontend = ["김경배", "윤지영", "임현지"]
https://github.com/wecode-bootcamp-korea/10-Oh29-ya-frontend
Backend = ["김병준(PM)", "이민호"]
https://github.com/wecode-bootcamp-korea/10-Oh29-ya-backend

⚙️ 사용된 기술

👀 Front-End

1️⃣ JavaScript(ES6)

2️⃣ React.js (CRA, Class형 Component사용)

3️⃣ Sass

4️⃣ React Library

React-router-dom
React-slick

👀 Back-End

1️⃣ Python

BeautifulSoup과 Selenium으로 데이터 크롤링
크롤링한 데이터를 csv파일로 만들기
csv파일을 DB로 넣어주기

2️⃣ Django

Aquery tool로 모델링을 한 것을 기반으로 models.py 적용
엔드포인트 구현
views.py로 프론트가 원하는 데이터를 DB에서 가져와 뿌려주기

3️⃣ MySQL

크롤링한 데이터를 테이블별, 칼럼별, 데이터타입별로 잘 구분해 놓고
저장 후, 필요한 곳에 가져다 쓰기

👀 협업 툴

1. Slack
2. Trello
3. git & github
4. Aquery tool

🤔 내가 맡은 역할/부분

1️⃣ 크롤링

29cm 사이트에서 29tv라는 카테고리가 있습니다.
브랜드 회사에서 마케팅을 하기위해 광고성 sns같이 포스트를 올리는 페이지였습니다.

저는 거기서 포스트들을 크롤링하는 부분을 맡았습니다.

포스트별로 각 썸네일 사진, 브랜드 회사의 이름과 로고, 브랜드 별 official의 유무, 내용과 해쉬태그들을 크롤링 하였습니다.

2️⃣ Sns App

🔥 models.py

Staff, Post, Hashtag, PostHashtag(ManyToMany), LikePost
이렇게 5개의 테이블을 만들었습니다.(User는 import하여 사용했습니다.)

Staff는 브랜드 회사관련 테이블입니다.

Post는 하나의 포스트의 관한 테이블입니다.
하나의 브랜드회사에서 여러개의 포스트를 작성할 수 있기 때문에 일대다의 관계로 만들었습니다.

Hashtag테이블은 포스트의 해쉬태그들을 모아둡니다.

PostHashtag테이블은 다대다 테이블로써, Post와 Hashtag를 참조합니다.
하나의 포스트에서 여러개의 해쉬태그를 사용할 수 있고, 하나의 해쉬태그가 여러개의 포스트에 사용될 수 있기 때문입니다.

마지막으로 LikePost라는 테이블도 다대다 테이블이고 User(import해서 사용)와 Post를 참조합니다.
마찬가지로 어떠한 유저가 여러개의 포스트를 좋아할 수 있고, 하나의 포스트는 여러명의 유저에게 좋아요가 눌릴 수 있기 때문입니다. 이 테이블은 나중에 token을 가진 유저라면 해당 유저가 어떠한 포스트를 좋아했고, 포스트마다 좋아요가 달린 개수를 알아야 하기 때문에 필요합니다.

🔥 views.py

PostView
29tv라는 카테고리를 누르면 나오는
브랜드별 sns기능(?)이 나오는 부분을 다룬다.

로그인을 하지 않은 유저라면 포스트별로 하트의 개수만 보여준다.
당연히 하트도 누를 수 없다.

로그인을 한 유저라면, 당연이 포스트별 하트의 개수는 물론이고,
해당 유저가 좋아요를 한 포스트에는 하트를 누른 유,무를 알 수 있다.

LikePostView
유저가 원하는 포스트를 '좋아요'를 할 수 있는 기능이다.

당연히 로그인이 되어있어야 하고, 좋아요를 누른다면 해당유저의 token으로
유저의 정보를 가져오고, 프론트에서는 해당 유저가 어떠한 포스트에 좋아요를 눌렀는지 포스트의 id값을 던져준다. 그러면 likes_posts라는 ManyToMany테이블에 해당 정보가 들어가게 된다.

이 MTM테이블에 데이터가 존재한다는 것은, 사용자가 해당 포스트에 좋아요를 눌렀다는 의미입니다. 따라서 하트를 눌렀는지도 True와 False로 프론트에게 데이터를 줄 수 있습니다.

3️⃣ Mypage App

🔥 views.py

HeartPostView
사용자가 좋아요한 포스트들만 따로 모아서 보여주는 기능입니다.
당연히 여기서 보여지는 모든 포스트는 하트가 눌린 상태입니다. 여기서 하트를 누르면 해당 포스트는 mypage에서 사라지게됩니다.

🤔 회고

👏 잘한점

1️⃣

진짜 잘했다고 생각하는 것. 물론 우리팀원 모두가 힘을 합쳐 잘 했기에 쓸 수 있다. 실제 29cm사이트에서 29tv라는 페이지에 들어가게 되면, 포스트를 눌렀을 때 모달 창이 나오게 되는데 실제 페이지에서는 포스트에 좋아요를 누르고 모달창을 띄우면 좋아요가 반영이 되지 않는다. 하지만 우리팀은 좋아요를 누르고 포스트를 누르면 모달창에 바로 좋아요가 반영이 되어있다. 정말 잘했다고 생각하고 어깨에 뽕이 들어간다.

2️⃣

발표를 하면서도 소감으로 말을 했었지만, 불과 2주 전만 해도 프론트와 백이 서로 회원가입, 로그인(토큰 받기)만 해도 여기저기서 탄성이 나왔었는데, 2주만에 그래도 3개의 엔드포인트를 구현했다는 점.

3️⃣

커뮤니케이션을 매우 잘한(?) 점 ㅋㅋㅋ

😅 아쉬운점

1️⃣

아쉬운점은 사실 포스트를 크롤링 할 때, 원래는 포스트를 누르면 모달창이 나오면서 그 모달창엔 비디오가 나오는데 비디오를 크롤링 하진 못했다.

확인해보니 blob타입(?)이면서 VLC라는 프로그램으로 영상을 뽑을 수는 있던데, 사실 지금 시기에는 구현하기가 많이 부족했다. 백에서 영상을 가져오는 것도 쉽지 않았고, 프론트에서도 미디어를 재생해주는 틀을 구현해야하는데 쉽지 않았다. 그래서 그냥 비디오를 썸네일 이미지로 대신했다.

2️⃣

병준님 ㅠㅠ 진짜 많이 고생하셨는데 내가 테이블이름 하나를 잘 못 바꿔서.. 겨우 살리긴 했지만 진짜..(다시 생각해도 끔찍)

아무튼 AWS에 올릴 수 있었는데 시간이 없어서, 그리고 너무 쫄려서 하지 못했다.

3️⃣

핑계일 수 있지만(핑계 맞다 ㅋㅋㅋ), 2주라는 시간이 짧고 빠듯했기에 제일 후회되는건 Unit Test를 해보지 못한 것. 그리고 사소하면서도 중요한 Convention.

4️⃣

에러시에 어떤 에러일 때 어떠한 메세지와 오류 코드를 주고, 그렇게 상황별로 나눴어야 했는데 에러 메세지를 그냥 한 번에 묶어서 status=401로 대충 주었다. 왜 그랬을까 ㅠㅠ

🛠 해결/개선 방법

1️⃣

시간이 답이다. 난 아직 어리다. 나태해져도 된다는 것이 아니라, 시간이 많으니 앞으로 더 열심히 해서 실력을 키우면 된다.

2️⃣

사실 멘토님들께서 세션을 잘 해주셔도 내가 놓치고 가는 것이 분명이 존재한다. 프로젝트를 하면서 많은 빈틈을 발견했다. 2차 프로젝트 때에는 많이 다잡고 싶지만 ㅠㅠ 못하더라도, 수료이후에도 개발 공부는 끝이 없을테니 꼭 다시 한 번 돌아봤으면 좋겠다.

✍️ 기록하고 싶은 코드/함수/로직

사진을 참고하면서 기억나는 코드, 로직이라 하면

1️⃣ List Comprehension

2주차에, 파이썬 심화과정이 5개였나?? 그 중에 List Comprehension이랑 Iterator 이렇게 2개만 했었다.

처음에는 List Comprehension이 너무 어려웠는데 어떠한 분의 블로그를 보고 바로 이해가 갔다.

아무튼, 사용하는 법을 알고 있었지만, 그냥 for문이 너무 익숙해서, 사용하지 않고 있었는데, PR을 날리고 멘토님들께서 수정사항으로 list comprehension을 사용해보라고 하셔서 사용을 해봤는데
코드도 훨씬 보기 좋아지고 짧아지고, 성능면에서도 많이 좋아졌다.

2️⃣ 새로운 객체가 아닌, 알고있는 객체로 접근하기

프론트에서 오는 token으로 user의 정보를 user라는 변수에 이미 담았다.
하지만 습관적으로 무엇인가 원하는 데이터를 가져올 때, 이미 알고있는 user라는 객체를 사용하면 훨씬 쉽고 빠르게 정보를 가져올 수 있는데,

User.objects.블라블라~ 이러한 형식으로 계속 가져오니,
코드도 길어지고, 읽기도 싫어지고 뭔가 꼬이는 느낌이었다.

마찬가지로 멘토님들께서 이미 알고있는 객체로 접근해 보라는 팁을 주셔서 바로 코드에 적용을 해보았는데 진짜 너무 깰끔~ 했다.

🙇🏻‍♂️ 소감

1️⃣ 소통이 진짜 중요하다.

소통이 진짜 매우 매우 매우 매우 매우 중요하다.

프론트와 백엔드 당연히 엄청 중요하고, 더욱 절실하게 느낀건 백엔드와
모델링을 할 때 부터 진짜 소통을 많이 해야한다.

2️⃣ 모델링 진짜 짱! 중요하다.

모델링이 반이라고 해도 과언이 아니다. 프로젝트는 2주인데(12일 정도),
일주일은 계속 모델링을 뜯어 고치고 한 것 같다.

테이블명, 컬럼명 하나하나.
개인적으로 프로젝트의 모델링을 안보고 Aquery tool에 구현한 그대로 그릴 수 있을 정도로 알고 있어야 한다고 생각한다.

그만큼 어렵고 신중해야 데이터를 관리하고 주고 받고 할 때 쉽기 때문이다.

3️⃣ 아무리 날뛰고 발악해도 우리는 거북이다.

멘토님들이 항상 해주시는 말씀이 프로젝트가 끝난다고 개발인생이 끝이 나는 것이 아니다. 위코드를 수료해도 끝이 아니다. 이제 시작이고 앞으로 해야 할 공부가 쌓이고 쌓였다. 개발자는 평생 공부해야한다고 하셨는데 사실 다들 몸소 겪고 있을 것이다. 진짜 할게 많다 😅 아무튼 2차 프로젝트때는 지금보다 1만큼이라도 열심히하고 기여하고 싶다. 끝!