📒 실전프로젝트
커리큘럼 중 8~13주차(6주)는 프론트엔드 + 백엔드 + 디자이너가 함께 기획부터 실제 서비스 런칭까지 결과를 만들어내는 기간이다.
우리팀같은 경우 프론트(React) 3명 + 백(Spring) 3명 + 디자이너 2명 총 8명이 한 팀으로 이루어져 있다.
6주중 초반 3주는 서비스 기획 및 서비스에 가장 필요한 부분 우선 구현하고 후반 3주는 고객 런칭 및 최적화와 추가 개발로 진행된다.
그동안 미니프로젝트나 클론코딩과 같은 작은 규모의 프로젝트는 진행해봤지만 기획부터 서비스 런칭까지 진행되는 규모의 프로젝트는 처음이다보니 기획을 확정하고 코딩을 시작하는데까지 일주일이 넘는 시간이 걸렸다.
🍰 MAKE CAKE
📌 프로젝트 소개
우리팀이 개발중인 서비스를 간단하게 소개하면 요새 레터링 케이크라는게 핫한데, 이 레터링 케이크는 가격이나 여러 정보를 알기 위해서는 대부분 가게 점주한테 직접 인스타나 카카오톡으로 연락을 해야 알 수 있고 불편하다. 이러한 점에서 착안을 해서 서울에 있는 레터링 케이크 매장들을 소개하고 서비스에서 직접 도안을 그려보고 저장하고 공유할 수 있는 서비스이다.
- 기획 정보 : https://www.notion.so/4-Make-Cake-335c038c8d354afeb549b6dbe7b9a8f5
- Figma : https://www.figma.com/file/Msx3aRopVWPwrDO7XqgU75/%ED%95%AD%ED%95%B499?node-id=340%3A108
- Github(FE) : https://github.com/nevergettingold/makecake_front/tree/main
- Github(BE) : https://github.com/minjoo-kou/makeCake
서비스에 대한 정보들은 위 사이트에 접속하면 볼 수 있다.
📌 프로젝트 주요 기능
우리 서비스의 대표적인 기능을 소개해보자면
-
서울에 있는 레터링 케이크 매장 검색 기능 (매장 정보 + 위치 정보)
-
레터링 케이크 사진 모아보기
-
레터링 케이크 도안 모아보기
-
레터링 케이크 매장 상세정보(가격, 종류, 사진, 리뷰 등)
-
매장 리뷰 작성 및 수정 삭제
-
도안 그리기 기능(캔버스) 및 로컬에 저장
-
그린 도안으로 게시글 작성 및 수정 삭제
-
마이페이지에 내가 좋아요한 매장, 케이크, 도안 & 내가 쓴 리뷰, 댓글 조회
📌 프로젝트 추후 진행 방향
지난 3주동안은 기능 구현에 초점을 맞춰서 개발을 진행해왔다.
남은 3주동안은 추가 기능 구현도 물론 중요하지만 기존 서비스 최적화 및 서비스 개선에 중점을 맞춰 진행할 예정이다.
추후 진행될 개발 및 기술적인 도전 계획을 간략하게 나열해보면
-
도안 그리기 Develop
-
CloudFront 를 활용하여 CDN 구축
-
매장 주문하기 플로우 기획 및 구현
-
백오피스 고도화
-
서버 부화 관리
-
NGinX 를 도입하여 개발 시 편의를 위한 무중단 배포 예정
-
리뷰, 좋아요 조작하는 봇 탐지 및 방지
📌 Trouble Shooting
내가 프로젝트에서 맡은 부분은 전체적인 UI와 CRUD 부분이다.
3주간 개발을 진행하면서 겪었던 trouble shooting
-
이미지를 시멘틱 테그에 넣어서 보여줄때는 이미지마다 크기가 달라 UI에서 문제가 발생
ㅡ> background 영역을 설정하고 background에 props로 이미지를 내려받아 문제 해결 -
케이크 모아보기 탭에서 케이크 이미지를 클릭했을때 모달창으로 케이크 이미지가 나와야 하는데
모달창에서는 해당 케이크의 데이터를 받아올 수 없어 이미지를 띄우지 못함
ㅡ> 이미지를 클릭할때 해당 케이크의 ID값을 서버에 보내주고 ID값에 맞는 케이크 데이터를 받아와서 이미지를 띄움 -
케이크, 도안 등 데이터를 불러올때 뒤로가기나 탭을 옮기고 다시 돌아오면 중복된 데이터가 쌓이는 문제 발생
ㅡ> reducer 에서 중복 데이터 예외처리를 해줘서 해결 -
홈탭에서 최신 리뷰를 보여줄때 이미지가 없는 리뷰는 빈 부분으로 나오는게 아니라 이미지 엑박 표시가 뜨는 문제
ㅡ> 이미지가 없는 리뷰의 경우 서버에서 default image를 보내줘서 default image를 띄워줌 -
리뷰를 작성할 때 이미지를 여러개 불러오면 프리뷰가 각각의 이미지를 보여줘야 하는데 한가지 이미지만 띄우는 문제 발생
ㅡ> 일단 한개의 이미지만 올릴 수 있도록 진행 후 추후 스터디하고 다시 이미지 여러개를 띄워보기로 결정함
📌 3주간 MVP 구현 후 중간 발표 피드백
중간 발표 피드백은 프로젝트에 대한 직접적인 피드백보다는 실제 회사에서 보는 기술 면접처럼 진행됐다.
예를 들어 REACT의 특징은 무엇인가, 상태 관리 라이브러리는 왜 사용하는가 같은 개념적인 부분에 대한 질문들이 대부분이였는데 이런 질문에 제대로 대답하지 못했고 상당한 충격으로 다가왔다.
물론 어렴풋이 어떤 개념인지 왜 사용하는지에 대한 지식이 있지만 누군가 물어봤을 때 정확하게 대답할 수 있는 수준은 아니였다.
그동안 구현에 초점을 맞춰서 코딩을 하다보니 이런 기초적인 CS에 대한 공부도 부족했고, 어찌보면 123도 모르고 사칙연산을 하고 있는거나 마찬가지였다.
앞으로는 어떤 라이브러리를 사용하든 어떤 코드를 작성하든 왜 사용하는지 어떤 특징이 있는지 단점, 장점은 무엇인지 확실하게 알고 당위성을 가지고 사용할 수 있도록 방향성을 잡을 생각이다.
그렇게 깊게 고민하고 개발을 해야 좀 더 좋은 개발자가 될 수 있다는 생각을 가지게 된 피드백 시간이다.
