어김없이 늦은 2차 프로젝트 회고록 !
2차 프로젝트가 끝난 후에, 혹은 프로젝트가 끝난 직후에 투입된 기업협업(인턴쉽) 중간에 쓰는 것이 가장 좋았겠지만 기업협업에서 내가 맡은 파트를 책임지고 끝내고 싶은 마음도 있었고, 같이 기업협업을 나간 팀원들의 질문이나 막힌 부분들을 같이 고민해주면서 후회없이 1인분 이상의 역할을 해냈다고 생각하기 때문에 지나간 것에 대한 후회는 없습니다.
결과적으로 그런 내 모습을 좋게 봐주셨기 때문에 인턴쉽을 나갔던 기업에서 최종적으로 합류제안을 주셔서 오늘 만나뵙고 여러 이야기를 나누고 왔습니다. (이 이야기는 추후에 이어질 기업협업 회고록에서 !)
📌 프로젝트 소개
inflearn은 지식 공유 사이트, 혹은 온라인 강의 플랫폼입니다. 주로 it 계열의 스킬들에 대한 지식들에 대한 나눔이 활발하며, 판매자(강사)와 구매자(학생)의 관계를 바탕으로 원하는 강의를 구매하거나 혹은 자신의 지식을 판매할 수 있는 플랫폼으로서의 역할도 하고 있으며, 그 외에도 여러가지 기능들(멘토링, 로드맵, 커뮤니티) 또한 하고 있습니다.
이번 프로젝트는 그 중에서도 사용자의 입장(구매자 혹은 학생)에서의 CRUD에 초점을 맞춰서 진행되었습니다.
📌 역할 배분
Front-end : 유광현, 성민규, 서수민, 김신혜
Back-end : 김지은, 김보경
backend와 frontend 각각을 한 사람이 다 경험해봤던 1차 프로젝트 때와는 달리 이번 2차 프로젝트에서는 확실한 분야를 정해서 프로젝트를 진행하게 되었습니다. frontend에서의 역할 배분을 좀 더 세분화하면 다음과 같습니다.
- Home page- 서수민
- List page(강의 목록 페이지) - 유광현(나)
- Detail page(강의 상세 페이지) - 유광현(나)
- header, footer - 성민규
- 마이페이지- 성민규
- 대시보드 - 성민규, 서수민
- 로그인/회원가입 (카카오 소셜로그인) - 김신혜
기술 스택
Front-end : React, ES6, styled-components, axios
Back-end : node.js, bycrypt, jwt, prisma, mysql
🔨 개발 과정
List page
맡았던 페이지 중 List page는 사실 별 오랜 시간이 걸리지는 않았습니다. 똑같은 template을 가진 컴포넌트들을 display : grid를 사용해서 정렬하고, user가 정렬을 쉽게 할 수 있게 필터, 사이드바, pagination 정도만 구현하면 되었었기 때문에 backend api가 개발되기 전 우선 스스로 목데이터를 만들어서 구현을 우선 하고, api가 개발된 후 연동하여 완성시켰습니다.
진짜 인프런 아니냐구요 ? 아닙니다 코드런이에요!
별다른 기능이 없던 페이지였기에 (컴포넌트에 마우스 hover시 모달등장, 로그인 되어있을시 장바구니에 추가, 좋아요 추가 가능, 클릭시 해당 강의 detail 페이지로 이동) 하루정도만에 구현을 모두 완료했고, 그 후에는 최대한 인프런 사이트와 동일해보이도록 style을 하는데 집중했습니다. 사실 1차 프로젝트에서는 라이브러리에 제약이 있었기 때문에 styled-components와 같은 css-in-js를 사용하지 못했어서 많은 답답함이 있었는데, 이번 프로젝트에서는 styled-components를 사용할 수 있어서 데이터의 상태에 따라 조건부로 props를 넘겨서 훨씬 더 코드가 간결해지고, 스타일링을 하는 데 막힘이 없었습니다.
Detail page
인프런 아니구 코드런이에요 !
Detail 페이지에서도 기술적으로 크게 별다른 이슈는 없었습니다. 페이지가 마운트 될 시점에 backend api에서 get요청으로 data를 받아와서 정보를 뿌려주고, 유저가 해당 강의에 수강평을 작성했는지 작성하지 않았는지 유무를 검사하여 작성하지 않았다면 수강평을 작성할 수 있도록 댓글 작성 컴포넌트를 보여주고, 작성했다면 댓글 작성 컴포넌트를 보여주지 않고, 수정, 삭제에만 접근할 수 있도록 했습니다.
댓글 작성, 댓글 수정, 댓글 삭제 등등 주니어의 시선에서는 CRUD의 정수와도 같은(?) 페이지 였다고 생각이 듭니다.
What I've learned and focused
이번 2차 프로젝트에서 비로소 백엔드 개발자와의 협업은 이렇게 하는 거구나 하는 경험을 얻었다고 생각이 듭니다. 백엔드 파트를 맡으신 보경님과 데이터의 형식을 정하고 api docs를 읽으면서 데이터가 어떻게 넘어오는지, 어떻게 넘겨야하는지에 대해서 많은 이야기를 나눴고, 때로는 프론트 단에서 가공하기 쉽게 데이터가 넘어오지 않아서 백엔드에서 넘어온 데이터를 프론트 단에서 가공해서 써야하는 경우도 있었습니다. 이 과정에서 단축평가와 삼항연산자의 사용에 좀 더 익숙해졌고 둘 중 어느것을 써야하는지에 대한 감이 확실히 잡혔습니다.
또한 데이터 통신을 위한 api로 axios를 채택해서 사용하였는데, 역시 완벽히 숙지하지 않은 기술의 사용은 독과 같다고 생각이 들었습니다.
댓글 삭제를 구현하는 과정에서 분명히 제대로 body에 data를 잘 담아서 넘겼다고 생각했는데 backend에서 data를 console로 찍어봤을 때 data가 넘어가지 않아서 3,4 시간동안 고민을 했었는데 axios에 2번째,3번째 argument로 넘어가는 객체에 대한 이해가 없었기 때문에 잘못된 순서로 작성했었고, axios 공식문서를 정독한 후에야 문제를 해결할 수 있었습니다. 하지만 좋은 경험이었고 이 경험을 바탕으로 기업협업에서 다른 팀원의 문제를 해결해 줄 수 있었습니다.
역시 문제는 항상 내 코드에 있다. 컴퓨터는 잘못이 없다...
마무리하며...
2차 프로젝트를 진행하면서 확실히 1차 프로젝트보다 많이 성장한 것 같다는 생각이 들었습니다. 코드를 작성하기 전에 '이런식으로 작성하면 되겠고, 이 경우에는 굳이 useEffect를 사용하지 않아도 처리가 되겠구나, 그리고 이 부분은 component로 만들어서 밖으로 빼놔야 추후에 관리가 편하겠구나' 라는 생각을 먼저 하는 제 자신을 발견했고 back-end 개발자분과 협업을 할 때에도 큰 문제없이 (문제가 있는 경우에는 스스로 데이터를 가공) 원만하게 소통을 할 수 있었습니다.
하지만 이때는 알지 못했습니다. 이렇게 온실속의 화초처럼 내가 원하는 데이터'만' 넘겨주는 백엔드 api는 그리 많지 않다는걸... typescript와 엄청난 양의 실무 데이터의 환장의 콜라보는 잠시 뒤에 이어질 4주간의 기업협업 회고에서 이어집니다.
What does not kill me makes me STRONGER
나를 죽이지 못하는 고통은 나를 더 강하게 만든다 !
