[Project] Otjang 👕

🤔 Otjang은 무슨 프로젝트인가요?

새로운 계절이 오면 흐린 기억 속 티셔츠를 찾아 수납 박스를 파헤치던 경험이 있으신가요?

옷장(otjang)은 생활의 3요소 중 하나인 의복을 한 눈에 관리하여 생활 효율을 높이고자 합니다. 의복은 남녀노소 누구나 착용하므로, 뷰티/패션에 초점을 맞추지 않는 범용적 라이프스타일 관리 프로그램을 지향합니다.

나의 옷장은 크게 의류/신발/잡화 카테고리로 분류됩니다. 아이템 등록 시 이미지, 계절, 구매일, 구매처(브랜드), 가격 등을 함께 입력합니다. 아이템 정보는 통계에 활용되어 월별 의류 구매 비용 등을 확인할 수 있습니다.

프로젝트 github주소

프로젝트 역할

프로젝트는 4명이서 진행을 했으며, 두 분이 프론트 한 분이 풀스택, 제가 백엔드로 진행을 하였습니다.

✔️ Expected Features

Bare Minimum

• 회원가입, 로그인, 비밀번호 변경
• 의류 등록 / 편집 / 삭제 기능
• 의류 등록 시 라이브러리에서 이미지 업로드
• 의류 구매비용 월별 통계 제공
• 세탁표시기호 정보 제공

Advanced

• 소셜 로그인
• 자동 로그인
• 비밀번호 찾기
• 이미지 업로드 시 크롭하기
• 카메라 앱 접근 후 촬영하기
• 화면 스와이프 기능
• 아이템 길게 클릭하여 삭제하기
• 아이템 정보 페이지에서 버튼 하나에 편집/삭제 기능 담기(클릭 시 펼쳐지도록)
• 의류 관리에 관한 유용한 정보 제공

🛠 Stack

백엔드 부분입니다.

프로젝트는 JavaScript, node JS를 기반으로 작성되었고 사용한 프레임워크는 express입니다. 코드의 버전관리는 github로 관리하였고, 서버 배포는 aws의 ec2를 사용하였습니다. 또한 팀원간의 코드스타일을 동일하게 하기 위해 eslint를 적용하였습니다. ORM은 Sequelize를 이용하였고 사용한 database는 MySQL입니다. 이 또한 배포 시 RDS를 통해 진행하였습니다. 유저인증은 JWT를 사용하였습니다.

⚙️ Architecture

📱 Wire Frame

miro | otjang wireframing

🗄 Schema

📝 API 문서

gitbook | otjang api

🤟 시연 GIF

회원가입/탈퇴	비밀번호 변경	자동 로그인

카테고리	아이템 추가	아이템 편집

아이템 삭제	통계	세탁표시기호

🤷 어려웠던 점 & 해결방법

4주 프로젝트였기 때문에, 초반 설계를 생각을 많이 했었던 것 같습니다.

처음 프로젝트를 설계하면서 옷의 종류가 정말 다양하여 계속해서 분기가 늘어났고 타입에 따른 분기까지 합치면 12개가 되었습니다. 또 계절별로 옷을 보여주는 기능 또한 있었 때문에 화면에서 서버로 api콜을 계속해서 날리는 가능성을 생각해봤던 것 같습니다.(유저가 계속해서 분기를 바꿔서 옷을 확인하거나... 그런 경우, call이 많이 오면 서버에 과부하가 있을 수 있지 않을까 생각했었습니다.)
그래서 이를 클라이언트 사이드에서 유저가 등록한 옷들을 가지고 있고, 이를 통해 렌더링을 하는 것이 좋을 것이라고 생각하였습니다. 그럼 한 유저의 전체등록한 데이터를 어떻게 넘겨줘야하는지가 문제였습니다.

데이터를 db에 저장할때 한 옷은 여러 계절의 옷이 될 수 있기 때문에 다대다 관계라 테이블이 분리되어있는데 이를 클라이언트 요청 시마다 조인을 이용하는 것 보다는 뷰테이블을 만들어놓고 진행하는 것이 접근하지 않을 데이터에 대한 접근도 막아주고 요청시마다 긴 퀴리를 실행할 필요가 없겠다고 판단하여 뷰테이블을 생성하도록 진행하기로 팀원들과 결정하였습니다.

근데 Sequelize에서 view를 지원하지 않았습니다...(비극) 정말 며칠간 삽질하고 정말 방법이 없어매 요청마다 조인문을 실행시켜야하나 하고 생각을 했었지만... 네 방법은 있었습니다. stackoverflow에서 우연히 방법을 발견했습니다. migration을 이용해서 view 테이블을 생성할 수 있었습니다.

자세한 방법은 TIL으로 블로그로 정리하였습니다.
TIL | sequelize에 view table 적용시키기

👀 프로젝트를 끝마치면서

이번 프로젝트를 통해서 2주 프로젝트땐 생각해보지 못했던 것들을 생각하면서 코드를 짰고, 데이터의 정확성이나 무결성 등을 생각하면서 코드를 작성할 수 있어서 그래도 저에겐 뜻깊은 프로젝트 였던 것 같습니다!

이 이외에도 소셜로그인 같은 경우에도 어려움을 겪었습니다. 서버 사이드에서 소셜로그인을 진행하려고 했는데 이는 클라이언트에서 처리하고 따로 db에 회원 등록을 하는 일을 필요로 하였고 그 부분에서 다른 사이트들의 소셜로그인이 왜 다른가에 대해서 이해도 할 수 있었습니다.

특히 소통이 안되어서 프로젝트를 마치지 못했던 저번 프로젝트와 달리 이번에는 매일 오전 10시에 미팅을 통해 자신이 진행한 일과 계획한 일을 공유하는 시간을 가져서 계속 무탈하게 프로젝트를 끝마칠 수 있었습니다.

프런트엔드에서 expo가 아닌 reactnative-cli를 이용해서 배포의 어려움을 겪어 결국 배포는 하지 못한 아쉬움이 남지만, 협업의 장점과 동료의 중요성을 모두 느낄 수 있었던 프로젝트 였습니다.