커스텀 음료 주문 모바일웹 프로젝트

🔎프로젝트 소개

• 참조 사이트 : 공차
• 프로젝트 기간 : 2022/09/19 ~ 2022/09/30
• 팀원 : Front-end : 3명 / Back-end : 1명
• github 주소 : Front-end / Back-end
• 사용된 기술 (front) : vite, react, Typescript, zustand, axios, styled-components
• 협업 Tool : Notion, Slack, Zep, Postman, Dbdiagram
• 기능 포스팅
  
  • 검색기능

 

프로젝트 시연 연상

 

프로젝트에서 맡은 역할

• 로그인, 회원가입, 검색 기능 UI 및 통신
• 소셜 로그인(카카오톡)

 

💡회고

들어가며

 저번 프로젝트는 여태 공부했던 기본기를 프로젝트에 적용해보고 깃을 이용한 협업을 경험해보는 것에 의의를 뒀다면, 이번 프로젝트는 다양한 라이브러리를 써보고 새로운 기능을 만드는 것을 목표로 했다. 처음 써보는 라이브러리를 프로젝트에서 바로 적용시켜 본다는 게 어려운 점이 많아 팀원들과 사용방법에 대해 자주 얘기했다. 특히 타입스크립트가 그랬는데, 항상 공식문서를 열어두고 작업했던 기억이 난다.

 

 모바일 웹으로 만들었기 때문에 UI가 금방 끝나서 타입스크립트를 적용하거나 리팩토링 하는데 시간을 쓸 수 있었다. 라이브 서버 대신 서버에 휴대폰으로 접속해 띄워놓고 작업하는 것도 재밌는 경험이었다.

초기 계획

 앞전 프로젝트에서 배운 가장 큰 교훈이었는데, 초기에 큰 틀부터 잡으면서 세부적으로 어떤 기능이 있는지 전반적으로 확인하고 계획을 세워 프로젝트 진행이 훨씬 부드러웠다. 필수적인 기능은 어떤 것들이 있고 세부적인 옵션들은 어떤 게 있는지 팀원들과 하나씩 훑어보면서 필수 구현 사항, 추가 구현 사항, 여유가 된다면 진행할 부분으로 나눠 우선순위를 정해 역할을 맡았다. 덕분에 미팅은 진행상황과 블로커 공유 정도만 해도 됐고 중간중간 계획 점검을 통해 부가적인 부분들을 추가하거나 덜어내면서 진행했다.

 

 처음 계획할 때 모바일 웹을 구현하되, 웹에 없는 기능을 앱에서 가져오고 앱에도 없다면 창작해서 만드는 식으로 진행하기로 했다. 앱에서 가져오거나 창작을 하게 되면 어렵지 않을까 생각했지만 어떤 기능이 들어갈지 정해져 있었기 때문에 UI 문제만 해결하면 됐었다. 규모가 컸다면 훨씬 어려웠겠지만 이번 프로젝트처럼 웹 사이즈가 작다면 직접 만들어 넣어보는 것도 재밌는 경험이 되는 것 같다.

 

타입스크립트

 언젠가 쓸 거라고 생각했지만 써보면서 진작 배우지 않은 것이 아쉬워졌다. 지나치게 번거롭다는 말을 들은 것에 비해 장점이 더 많이 느껴졌기 때문이다. 대표적으로 기억에 남는 장점은 axios를 사용할 때다. 팀원이 만든 코드를 볼 때 axios에 붙여둔 제네릭만 봐도 어떤 값이 어떤 타입으로 오는지 다알 수 있어서 어떤 로직인지 금방 이해할 수 있었다. 웬만한 선언들은 다 자동완성되는 것도 코드 작성 시 편했던 점 중 하나다. 더 공부해서 다음 프로젝트에서는 활용도를 높여보고 싶다.

 

소셜 로그인 

 회원가입 / 로그인 관련 로직을 만드는 것도 재밌었지만 아무래도 소셜 로그인이 제일 재밌었다. 처음 만들기로 했을 때 공식문서를 이해하기 어려워서 시간을 한참 잡아먹었다. 구글링 하면서 해결했는데, 그마저도 다들 통신하는 방법이 각양각색이라 관련 블로그 열댓 개를 띄워놓고 방법을 종합해 가면서 만들었다. 관련해서 백엔드와 어떤 걸 주고받을지 소통할게 많았는데 같이 공부하며 한 단계씩 진행하는 과정도 유익하고 재밌었다.

 

 통신을 완료하고 다시 공식문서를 열어봤는데 돌고 돌아 결국 공식문서에서 시키는 대로 한 셈이란 걸 알 수 있었다. 카카오뿐만 아니라 API 공식문서를 읽고 이해하는 연습이 많이 필요하다고 느꼈다. 

마치며

 여러 라이브러리를 사용하는 것부터 모바일 웹을 완성시키는 것까지 색다른 경험을 많이 할 수 있었던 프로젝트였다. 새로 배우고 사용해 본 기술들을 적용했을 때 사용성부터 결과까지 대부분 만족스러워서 연습해보면서 잘 사용하고 싶다.

 

 언젠가 또 하게 될 협업에 대비해 준비해야 할게 한가득 생겼다는 느낌이지만 그만큼 알게 된 게 많기 때문이라 생각한다. 적어도 뭘 모르는지에 대해서는 어느 정도 파악이 되니, 남은 기간도 열심히 준비해야겠다.