항해99 첫 번째 주 회고

첫 번째 주는 따로 준비할 시간 없이 팀이 구성되고, 작은 프로젝트를 시작하게 되었다.

백엔드나 프런트엔드의 구별 없이 시작하게 되었고 물론 처음 시작할 때는 이게 큰 문제가 될 줄은 몰랐었지만😅

 

 

---

 

❗ 내가 겪었던 트러블슈팅

우리팀에서 맞닥뜨린 가장 큰 문제점은 처음에 기능별로 역할을 맡아 코드를 작성하게 된 부분이었다.
각자 htrml과 python파일을 만들어 코드를 작성한 후, 합치려고 시도하였는데 그 과정에서 기능이 동작하지 않거나 보이는 부분이 서로 얽혀 정상적으로 보이지 않았다.
결국 팀장님을 메인으로 팀원들과 파일 통합작업을 진행하였고, 각자 페이지를 맡으신 분들과 계속하여 소통하여 코드를 수정하였다.
결과적으로 각자가 맡아 작성한 코드를 100% 활용하지 못하고 많은 부분이 통폐합되었다.

코드 통합 과정에서 생긴 가장 큰 문제는 로그인과 회원가입 기능의 문제이다.
로그인 기능은 처음에 웹 개발 플러스의 강의의 코드를 그대로 사용하여 정상적으로 작동하였으나 코드를 합치게 되면서 제대로 동작하지 않았다.
여러 가지 방법을 시도해보았으나 해결되지 않았고 프로젝트의 마감시한을 맞추기 위한 임시방편으로
로그인을 시도했을 때 로그인 페이지로 넘어가서 로그인을 하지 않았을 때는 사용하지 못하던 기능들을 사용할 수 있도록 만들었다.
이 부분의 원인으로 bulma에서 모달을 가져와서 사용했는데, 모달을 열고 닫는 자바스크립트가 class로 지정되어 있었다.
이과정에서 회원가입과 로그인 모달을 만들면서 겹치는 class가 생겼고 이로 인해 오류가 생긴 것으로 추측하고 있다.

다음은 추억한마디와 좋아요 기능이다.
처음 계획할 당시, 크롤링해온 각각의 노래에 좋아요와 추억한마디를 삽입하려고 했으나 각각 다른 파트를 맡게 되면서 진저 사용과 적용이 점점 어려워짐에 따라 각 포스팅 페이지에 따른 수없이 많은 html 파일을 만들어야 했고, 이런 식으로 진행한다면 데이터를 받아오고 코드 부분이 문제가 생기기 때문에 다른 방식의 포스트와 좋아요 기능을 만들게 되었다.
좋아요를 적용시키는 부분에서, 한 번에 많은 데이터를 받아오는 방식을 채택했다 보니 하트가 적용되는 시간이 오래 걸리고 계속해서 마름모로 깨지는 오류도 발생하였다.

이 부분은 발표 후 기술 튜터님께도 여쭤보았으나 결국 끝까지 정확한 이유는 파악하지 못했다.

내 생각에는 통신 쪽의 문제 같은데 확실하지는 않다.

다음은 깃허브 사용의 문제였다.
처음에 기본 틀이 짜여있지 않은 상태로 각자 파일을 만들고 시작하였기 때문에 풀, 푸시 과정에서 생기는 많은 오류가 생겼다.
대표적으로는 서로 동시에 같은 파일을 작업한 상태로 풀과 푸시를 이용하려고 했다가 계속해서 뜨는 머지 오류로 인해
결국 직접 코드를 텍스트로 주고받거나 팀장님이 통합하신 프로젝트 폴더 전체를 팀원들에게 전달하는 과정을 계속해서 겪었다.
마지막 통합 작업 때는 깃허브의 풀과 푸시가 제대로 작동하였으나, 프로젝트 진행과정에서 깃허브를 제대로 활용하지 못한 점에서 아쉬움이 많이 남는다.

 

이건 팀작업이 아닌 개인적으로 느꼈던 문제였는데 내가 맡은 메인화면을 만드는 과정에서 음악 목록 데이터 구조를 잘못 설계하여 테이블끼리 묶어서 조회가 안 되는 현상이 발생했다.

애초 계획한 대로 테이블을 여러 개 조회해서 가져오는 것에 실패, 임시방편으로 ajax를 세 번 호출하는 방식으로 코드를 작성했다.

이 부분은 구글링을 해보았는데 애초에 테이블을 여러 개로 나누어서 따로 호출하는 게 아니라, 한 테이블에 넣어놓고 조건을 걸어 호출했어야 함을 느꼈다.

 

마지막으로 시간이 더 주어 졌더라면 오류가 발생한 이유를 명확히 찾아 해결했을 것이다. 특히 로그인 오류를 가장 우선적으로 해결했을 것이다. jwt를 통한 로그인을 제대로 구현하지 못한 점에서 많은 아쉬움이 남기 때문에..
또 기능을 구현하지 못한 댓글과 유저 정보를 연결하는 부분도 넣어보고 싶다. (jinja2 사용)
또한 노트북 화면에만 맞춰져 있는 것이 아니라 다른 기기들에서도 호완이 잘되도록 반응형으로 만들었을 것이다.

 

---

🍑 프로젝트 결과물

 

https://www.youtube.com/watch?v=C4Hyd2ncRRg&ab_channel=%EC%A1%B0%EB%AF%BC%EC%88%98 

웹사이트 소개 영상

왼쪽 사이드바에서는 사이트의 간단한 소개와 연도별 음악 목록으로 이동할 수 있는 메뉴와 간단한 한마디를 작성할 수 있는 추억 한마디 메뉴로 이루어져 있다.
음악 목록은 지니 사이트의 연도별 순위와 제목, 가수를 크롤링하여 데이터에 저장한 후 띄우는 형식으로 구성되었다.
추억 한마디와 좋아요 기능은 회원가입 후, 로그인하여 이용할 수 있다.
좋아요는 각 목록별 노래에 누를 수 있게 만들었다.
추억 한마디에는 익명으로 작성할 수 있도록 직접 닉네임을 입력할 수 있고 한마디를 입력하게 되면 목록 아래쪽에 나타나게 된다.

 

깃허브 링크: https://github.com/talli0505/HangHae99_Chapter1_Team5

GitHub - talli0505/HangHae99_Chapter1_Team5

 

---

💖 한 주간을 마치며

쉽지 않을 거라고 생각했지만 정말 쉽지 않았다.

그래도 그나마 다행인 것은, 정말 좋은 팀원분들을 만나 비교적 쉽게 의사소통하며 프로젝트를 진행했다는 것이다.

힘들지만 즐겁고 좋은 결과물을 낸 것은 다 팀원분들의 덕분이라고 생각한다.

항상 이번에 했던 프로젝트를 잊지 않고 떠올리면서, 나도 남들에게도 저런 팀원이 될 수 있도록 스스로를 돌아보고 노력해야겠다.