- 한달 간 쇼핑몰 프로젝트를 진행했다. 백엔드는 Java, Spring, JPA, Mysql을 사용했다.
프론트는 html, js, css만 사용하려 했지만, react를 권장한다고 해서 한번 사용해보기로 했다!
- 크게 회원, 카테고리, 상품, 장바구니, 주문 도메인을 개발해야 했고, 팀 구성원이 총 5명이었기에 각자 도메인을 하나씩 맡았다. 나는 회원 도메인을 맡았다. 회원 도메인에서 필수적으로 구현해야하는 기능은 다음과 같았다.
- 회원가입
- 로그인
- 로그아웃
- 회원 CRUD
- 관리자 기능
- 추가적으로 VM 배포는 팀장인 내가 하기로 했다. 기본적인 회원 API는 작성하고, 테스트하는 데 어려움은 없었고 신속히 진행되었지만 Sring Security를 사용해본적이 없어서 jwt토큰 인증 로그인과 소셜 로그인을 구현하는 데 많은 시간이 걸렸다. (대략 열흘 정도)
- 도메인을 결정하고 각자 설계한 엔티티를 종합하고 화면을 설계하는 과정이 한 주, 스프링 시큐리티를 공부하고 적용하고 나니 3주차가 되었다,,! 백엔드 API를 axios로 호출하고, 리액트 컴포넌트에 담아 화면에 출력하는 작업도 해야했고 추가적으로 VM에 배포해야 했다.
- 마지막 주차에 엘리스에서 제공 받은 VM 서버가 두 번이나 망가져서 더욱 정신이 없었다. 프론트 코드보다가 서버가 왜 망가졌는지 분석하다가 백엔드 코드도 보다가,, 효율이 정말 안나왔다고 느꼈다. 하지만 지나고 보니 정말 많이 배우게 된 한 주기도 했다.
ERD 설계
화면단을 먼저 구성하고, ERD를 설계하자!
- 책을 판매하는 알라딘, 교보문고 같은 웹사이트를 만들기로 결정했다. 각자 ERD를 만들어보고 종합해서 하나로 만들기로 했다. 다양한 ERD가 나왔고, 합치는 과정에서 눈으로 볼 수 있는 화면단(와이어 프레임)의 필요성을 느꼈다.
- 코치님도 화면을 먼저 구성하고, 그 화면단을 보고 ERD를 설계해야 한다고 했다. 그래서 각자 와이어프레임을 작성하고 온 다음 하나의 와이어프레임을 작성하고, 그 와이어프레임을 보면서 ERD를 하나로 합치는 과정을 진행했다.
- 와이어프레임을 작성하는 툴로는 대표적으로 figma가 있는데, 이는 기능이 많고 복잡한 거 같아 카카오에서 제공하는 단순한 툴인 Oven을 사용했다. 내가 작성한 와이어프레임과 선택된 와이어프레임은 아래와 같다.
- 와이어프레임을 먼저 작성하면 구현해야 할 게 무엇이고, 필요한 필드가 무엇인지 직관적으로 다가오게 된다. 파이널 프로젝트가 남았는데 그때는 꼭 와이어프레임을 먼저 작성하도록 해보자.
- 화면단을 보면서 최종적으로 결정된 ERD다. JPA Audit으로 생성자, 생성시간, 변경자, 변경시간을 추적하도록 했다.
- 장바구니와 상품을 연결해주는 CartBook에서 isSelected라는 필드로 아이템이 선택되었는지를 추적하는 필드가 있었는데, 생각해보면 이는 프론트에서 해야할 작업으로 해당 정보를 DB에 저장할 필요는 없었다.
- 또한 어떤 엔티티가 유저에게 속하는 관계면 created by와 modifed by로 추적할 필요가 없어 이를 제거했다.
꾸준하게