[2021.04.26~2021.05.07] 2주간의 first project를 끝냈습니다. 여러 사람들과 처음 해보는 프로젝트라서 긴장을 한 것 같지만 이것저것 바꾸어보고 도전해보는 것이 재밌었습니다. 다음에 4주 동안 진행되는 Final Project가 시작되기 전에 간단하게 프로젝트 리뷰를 남기기로 했습니다.

onelinediary

onelinediary는 한 줄을 일기로 남기며 하루를 마무리할 수 있도록 도와주는 웹어플리케이션입니다.
https://github.com/codestates/OneLineDiary-client
https://github.com/codestates/OneLineDiary-server
[ 메인페이지 ]

프로젝트는 한팀에 3~4명이 정해집니다. 제 팀은 4명이었고 원래 프론트엔드를 생각하고 있었기에 프론트엔드를 하고싶다고 하려했는데 다른 사람들도 같은 생각인 것 같았습니다. 그래서 저는 새로운 도전을 해보자 해서 벡엔드를 맡게 되었습니다. 그렇게 저희 팀은 프론트 2명 벡엔드 2명이 되었습니다.

코드스테이츠를 수강하면서 벡엔드에 대한 이해가 항상 부족하다고 생각했습니다. 그래서 주말마다 혼자 틈틈히 추가적인 학습을 진행하고 있었는데 이렇게 프로젝트에서 벡엔드를 맡아서 상당히 떨리기도 하고 설레기도 했습니다. 초반 코드에 대한 이해력이 부족한 저는 원활한 코드작성을 위해 전체적인 파일 정리를 했습니다. 결론적으로 파일정리를 했던 것이 정말 좋았습니다. 컴포넌트가 많아지니까 헷갈릴 수 있었는데 이를 올바르게 잡아주었습니다.
[로그인 페이지]

새로운 스택을 활용하는 것은 흥미롭지만 이번 프로젝트는 2주동안 진행되는 프로젝트이기도 하고 팀원들도 처음 진행해보는 프로젝트라 기존에 배웠던 스택들을 제대로 이해하고 활용하는 것에 집중하기로 했습니다. 처음에 db 구성을 하고 간단한 배포를 진행하였습니다.

로컬환경에서 sequelize와 mysql을 이용해서 코드를 완성하고 ec2, s3, rds, aws를 활용하여 다시 배포해야겠다는 생각을 했었는데 이과정에서 실수를 범했습니다. 실제로 제가 생각한대로 진행되었고 로컬환경에서 정해놓은 변수들과 라우팅된 주소들을 하나하나 바꾸면서 엄청난 시간적 손해를 보았습니다. 이 때문에 벡엔드에서 정해놓은 베어미니멈, 어드밴스드 미션이 있었는데 어드밴스드는 도전해보지 못해서 매우 아쉬웠습니다. 처음부터 배포된 aws 주소를 활용했더라면 하는 아쉬움이 있습니다.

[회원가입 페이지]

이번 프로젝트에서는 벡엔드에서 사용하는 로직이 들어가지 않았기에 라우팅만 하면 마무리가 되는 느낌이었습니다. 그래서 프론트엔드와 코드를 합쳐 전체적으로 코드수정을 하고 프론트엔드를 돕기로 했습니다.

기본적인 와이어프레임은 짜여졌지만 세부기능들이 부족했기 때문에 저는 세부기능을 구현하는 쪽으로 코드를 작성해 나갔습니다. 그러다 엔지니어분께서 무한스크롤을 구현해보는 것이 어떠냐고 의견을 주셔서 바로
[무한스크롤 구현 성공!]

무한스크롤을 구현했습니다. 원리는 사용자가 스크롤로 올린 페이지 길이와 페이지에 보이는 고정된 페이지 길이의 합이 총 스크롤 창안의 페이지 길이와 같으면 데이터를 추가해주는 방식으로 작성했습니다. 기존에 윈도우 창의 스크롤에서만 적용되던 것을 overflow:hidden으로 내부에 생긴 스크롤에 적용 되도록 응용하여 만들었습니다.

마무리

처음 해보는 프로젝트라 사소한 실수가 많았지만 벡앤드에 흥미가 더욱 생겨서 좋았습니다. 전에는 프론트 > 벡엔드 였다면 지금은 반대로 바뀌었습니다. 몽고db나 타입스크립트 같은 새로운 스택을 공부해보고 싶어졌습니다. 하지만 프론트엔드 부분에서도 무한스크롤을 구현해봄으로써 기능 구현에 대한 자신감이 생겼습니다. 다음 파이널 프로젝트에서 어떤 역할을 맡던지 간에 새로운 스택을 활용할 수 있으면 좋을 것 같습니다.