메인프로젝트를 끝내며
먼저, 본격적인 회고를 시작하기 전에 각자 맡은 바에 최선을 다하며 프로젝트 기간동안 힘들었을 26번 오펜하이머 팀원들과 각자의 팀에서 또한 최선을 다했을 45기 수강생들에게 수고했다는 말을 하고 싶다.
길기도, 짧기도 했던 한달가량의 메인 프로젝트 기간의 끝이 바로 눈 앞까지 다가왔다. 프리프로젝트를 끝마치면서 시간의 부족함을 느끼고 기간이 날짜를 세어보며 메인프로젝트는 기간이 더 기니까 체감시간도 길거라 생각했었는데 어느새 현재 회고를 작성하고있는 18일 기준으로는 내일이 마지막으로 레포지토리를 편집할 수 있는 마지막 날이고 4일 뒤인 22일, 금요일에는 데모데이로 한달간 제작한 프로젝트를 다른사람들 앞에 내보이게 된다. 누군가 결과물이 완벽하냐고 물어본다면 그렇다고 대답할 순 없겠지만 내가 맡은 부분에서 최선이었냐고 물어본다면 나의 부족한 실력과 지식 선에서 팀원들에게 이리저리 도움을 받으면서 낼 수 있는 최선이었다고 하고 싶다.
이번 프로젝트를 진행하면서 팀원들에게 도움을 많이 받았던 것 같다. 팀구성 당시에 평소에 라이브세션 등에서 참여도가 높다보니까 어느샌가 소문으로 부풀려지고 올려치기 당한 나의 실력에 속은 팀원들에게 팀합류를 제안받아 현재의 팀에 합류하게 되었는데, 나는 간단한 깃허브 사용부터 리덕스 툴킷의 사용 등 다양한 부분에서 다양한 것을 몰랐고, 모르는 것이 생길 때마다 팀원들의 이름을 부르며 "00님 이거 맞아요? 이거 뭐에요?"를 연발했던 것 같다. 다행히 팀원들 모두 귀찮은 내색 없이 물어본 것들은 친절히 알려주시고 막힌 부분은 함께 고민해주셨고, 반대로 팀원분들이 모르시는 부분이 생기거나 막힌 부분이 생길 때에는 나 또한 마땅히 그렇게 했다. 모르는 것이 많았고 물어본 것이 많았던만큼 나에게는 얻어가는게 많은 시간이었던 것 같고, 어려운 부분이나 많은 양을 맡은 것은 아니었지만 내가 맡은 부분을 납득할 수 있는 선에서 마무리할 수 있었기에 현재 만족스럽게 회고를 작성할 수 있는 것 같다.
사용한 기술
React,storybook, styled-component, redux toolkit, react-intersection-observer
우리 팀의 프론트는 익숙하지않은 타입스크립트 등을 시도하는 것보다는 어느정도 손에 익은 리액트를 활용해 프로젝트의 볼륨을 만족할만큼 뽑아보자는 취지로 React를 사용했고, 재활용을 위한 storybook을 사용, 상태관리 용으로 redux toolkit을 사용했고, 무한스크롤 구현에 react-intersection-observer를 사용했으며 CSS에는 styled-component를 사용했다.
담당 부분
이번 프로젝트에서 강의나 채널 리스트가 나오는 부분의 전반과 필터링 기능, 검색기능과 자동완성, 각 리스트에서의 무한스크롤을 맡았다.
이 중에서 개인적으로 고민을 많이 한 부분은 필터 기능이었다.
필터 항목들은 리덕스 툴킷으로 저장해서 useSelector로 받아 axios의 url에 조건부로 들어가도록 해두었고 필터는
[{
name: "category",
initialText: "카테고리",
initialValue: "",
actionName: "setCategory",
options: categories,
},
{
name: "isPurchased",
initialText: "구매여부",
initialValue: "true",
actionName: "setIsPurchased",
options: [
{ text: "전체", value: "true" },
{ text: "구매전", value: "false" },
],
}]형태의 배열을 입력받아 map을 돌려 렌더링하게 되어있어 배열 내부의 객체를 추가하거나 수정하는 것으로 필터의 갯수를 수정할 수 있게 되어있고, 객체 내부의 options로 필터의 선택지 갯수를 설정, actionName으로 리덕스툴킷의 내용을 수정할 action의 종류를 인식하도록, category의 options는 api요청으로 서버에서 카테고리의 종류를 받아서 렌더링 하도록 하여 사용하는 곳에 따라 필요한 필터의 종류와 선택지의 종류가 다를 경우 입력할 배열을 수정하여 재활용할 수 있도록 제작하였다.
외에는 무한스크롤을 구현하는 과정에서 react-intersection-observer를 처음 사용해봤는데 기존 intersection observer에 비해 사용이 편리했고, 강의를 렌더링 할 때 가로로 긴 형태와 포토카드 같은 형태의 두개의 형태로 제작하여 전체 리스트에는 둘 중에 원하는 형태로 렌더링 되도록, 외의 리스트에서는 좀 더 적합하다고 생각되는 형태로 렌더링 하도록 하였고 조건부 렌더링으로 렌더링 되는 위치에 따라 필요한 항목들이 렌더링 하도록 제작하였다. 워낙 많은 곳에서 재활용하도록 했더니 후에는 팀원들이 추가한 내용들까지 합쳐 강의 아이템들이 상당히 많은 분량의 코드들을 가지고 있게 되었다
어려웠던 점
아무래도 처음으로 시도해본 반응형이 제일 어려웠다. 어떤식으로 만들지 몰라서 아이템의 폭정도만 변경되도록 했다가, 마지막에 팀원들의 의견으로 미디어 쿼리를 이용하여 폭에 따라 일부 항목들을 가리는 등 반응형이라고 할만한 부분들을 추가했다.
회고를 마치며
이번 메인프로젝트의 끝은 4월부터 시작된 코드스테이츠 프론트엔드 부트캠프의 끝을 의미하는 것 같기도, 수료 후에 10월달부터 시작하게 될 개발자로서의 삶의 시작을 의미하는 것 같기도 하다.
러시아학과를 졸업하고 코딩과 전혀 관계없는 삶을 살던 자신이 부트캠프가 끝나가는 지금 시점에는 소심하게나마 개발자라고 자신을 소개할 수 있게 되었을지 걱정 반 앞으로의 날들에 설렘 반의 기분으로 끝마치게 된 것 같다.
코드스테이츠 부트캠프에서 공부하는 과정이 좋은 일들만 있었다고는 할 수 없고, 자신이 엄청난 성장을 이루었다고도 할 수 없겠지만 새로운 것을 배우는 행동이 익숙해지고, 과거의 자신보다 코딩이라는 것에 조금 더 친밀해질 수 있었다는 점에서 충분히 가치있는 시간이었다는 말로 회고를 마친다.
