프로젝트
프로젝트 진행 기간 : 21/05/12 ~ 21/06/24
관련 링크
배포링크 : https://kamooparttime.netlify.app/
백엔드 깃허브 : https://github.com/kamoo2/parttime-backend
프론트엔드 깃허브 : https://github.com/kamoo2/parttime-web
기술 스택
백엔드 : Graphql,Prisma,Apollo,Postgresql
프론트엔드 : React,Apollo,ReactHookForm,Styled-Component
프로젝트 기획하게된 계기
Graphql과 React를 공부하면서 이를 이용해서 하나의 프로젝트를 진행하면 더 도움이 될 거 같아서 어떤 프로젝트를 기획할지 고민을 해보았다.
그때 가까운 사람에게 필요한 웹을 만들고 지속적으로 피드백을 받아가면서 계속하여 개선해나가는 프로젝트를 선정하고 싶어서 부모님에게 필요한 웹어플리케이션을 기획했다. 부모님이 가게를 운영하셨고 아르바이트생들을 많이 관리하시는데 하나하나 달력에 근무시간을 쓰고 계산기로 계산하시는 것을 보고 아! 쉽게 월급을 계산해주고 출근을 관리할 수 있는 프로젝트를 기획해보았다.
백엔드 설계
백엔드는 다음과 같이 각 기능을 가진 스키마들을 분리하여 구성하였다.
이렇게 구성하니 createAccount Mutation의 기능을 고치고 싶을때 쉽게 찾을 수 있는 장점이 있었다.
GraphqlQL의 장점
REST API로 백엔드를 구현했을때는 axios를 이용하여 서버에 데이터를 요청했고 React에서 Redux,Context 등을 사용해서 상태관리를 했어야 했지만 GraphqlQL은 Apollo-Client의 useQuery,useMutation을 이용해 Graphql의 Query와 Mutation을 이용할 수 있었고 데이터도 요청할 수 있었고 response 데이터를 원하는 필드만 뽑아서 받을 수 있었다. 또한 Redux,Context와 같은 상태관리 대신에 Reactive Variables를 이용해 관리를 할 수 있었다.
모델 DELETE시 문제점
Store에는 1:N관계로 직원과 댓글과 좋아요 모델이 연결되어져 있고 직원에도 출근 모델이 연결되어져있다.
DRF같은 경우에는 CASCADE를 이용해 삭제시 관련된 모델객체들을 자동으로 삭제 해 줄 수 있었는데 Prisma에는 아직 그러한 기능이 없어서 하나하나 삭제 해줘야 했다.
백엔드 모델 설계에 아쉬운점
Workday(year,month,day,slug,WorkTime)모델과 WorkTime(time) 근무시간을 가지는 모델이 있다.
처음에 계획한 관계 구조는 N:N으로 관계를 맺어 year-month-day로 변환된 slug(unique)가 존재하고 출근 객체 생성시 중복된 slug가 존재하고 그 slug에 연결된 WorkTime객체도 중복 된다면 그냥 Connect하고 아니라면 Create하고 Connec하도록 계획했다.
그러나 구현을 하면서 어려움이 발생했고 일단 아래와 같이 slug를 중복가능하고 1:N관계로 구현했다.
이는 후에 다시 개선할 예정이다.
프론트엔드
프론트엔드를 구현하면서 가장 획기적인 라이브러리라고 느꼈던 것은 바로 React-Hook-Form이라는 라이브러리 였다.
기존에 form과 input을 컨트롤 하기 위해서는 useState로 필요한 모든 필드를 생성해주고 하나하나 다 처리해 줬어야 했다.
물론 form에서도 onSubmit에서 e.preventDefault();도 처리해줬어야 했다. 이 라이브러리를 몰랐을때는 간단한 로그인 폼을 구현할때는 괜찮았지만 이러한 프로젝트에서는 가게를 생성할때만 해도 7~8개의 input이 필요했다. 이 경우에 React-Hook-Form을 사용하면 validate까지 쉽게 구현할 수 있었다.
프론트엔드 구현시 어려움을 느꼈던 것
프론트엔드를 구현했을때 가게를 생성하고 history.push를 해줘 Route를 이동해줬는데 이때 컴포넌트가 unmount 되고난 후 state 변경을 시도했고 따라서 memory가 손실 될 수 있다는 경고 에러를 받게 되었다. 이는 검색해보니 페이지 이동되고 나서 state가 변경될때 이런 에러가 발생한다고 했고 이를 위해서는 useEffect의 CleanUp 코드를 사용하라고 한다. 그런데 아무리 코드를 살펴봐도 라우터가 이동되고나서 state가 변경되는 곳이 없었고 Mutation시에도 Mutation이 진행되는 동안에는 return을 해줘서 문제를 발견할 수 없었다. 프로젝트가 구동되는데는 문제가 없었지만 에러가 있으니 마음이 너무 불편해서 오래동안 잡고 씨름했던 것 같다.
그래서 생각해본게 가게를 생성하고 Home.js로 이동했을때 모든 가게를 뿌려주게 되는데 이때 데이터가 하나 추가되고 변경되어서 문제가 되는 건가 싶어서 useQuery대신에 useLazyQuery를 이용하고 useEffect를 이용해 cleanup 코드를 작성해주었다.
const [getStores,{data,loading}] = useLazyQuery(SEE_STORES_QUERY)
useEffect(()=>{
let isMounted = true;
if(isMounted){
getStores();
}
return ()=>{
isMounted=false;
}
},[getStores])
위와 같이 Home 컴포넌트가 mount 되었을때마다 새롭게 모든 데이터를 가져오도록 구현하니 에러가 없어졌다.
솔직히 말하면 아직도 그 에러에 대한 정확한 이유를 알지 못하지만 이 에러를 접하면서 많은 고민을 하면서 useEffect의 cleanup 코드에 대해서도 알게되고 useLazyQuery라는 방법도 알게 되었다.
아직 React에 관련해서 깊게 지식이 없는 탓에 백엔드 보다는 프론트엔드 구현하면서 많은 어려움을 겪었던 것 같다.
다시 기본으로 돌아가 JS와 React 관련 공부를 깊게 해봐야 겠다고 결심했다.
피드백 후 UI 변경
부모님께 중간 완성 후 몇일 동안 사용해봐 달라고 말씀 드렸고 몇일 사용하시고는 출근을 체크 할때 너무 방법이 너무 번거롭고 차라리 원래 하던 방법인 달력에 손수 다 적는게 나을 정도라고 말씀해주셨고 일매출도 기록하고 싶으시다고 하셨다.
그래서 그냥 년,월,일,출근시간을 입력받고 출근 객체를 생성해줬었는데 이 얘기를 듣고 아 그러면 쉽게 등록할 수 있는 방법이 뭐가 있을까 고민하다가 부모님이 원래 하시던 방법인 달력을 생각했고 달력을 이용해 쉽게 출근객체를 생성할 수 있도록 변경했다. 그리고 연,월,일 매출도 등록하고 자동으로 계산되도록 구현해봤다.
프론트엔드 구현하면서 아쉬웠던 점
프론트엔드를 구현할때 많은 라이브러리들을 사용했는데 이 라이브러리 들을 그냥 사용할 뿐 내가 원하는대로 커스터마이징 할 수 없었다는 점이 아쉬웠고 반응형을 구현하지 못했다는 것이 아쉬웠다.
개선할점
- 처음 웹을 접하는 사람들도 쉽게 사용 방법을 알 수 있도록 행동유도를 할 수 있는 UI로 변경
- 달력,알림창,차트와 같은 라이브러리들에 대해서 그냥 무턱대고 사용하는게 아니라 조금더 이해하고 내 입맛대로 만질 수 있도록 해 UI 변경
- 반응형 추가
- 프론트엔드 코드의 구조를 리펙토링해 쉽게 유지보수 할 수 있도록 하기
다음 버전의 기능 추가 예정
- 직원 관리 웹에서 이제 아르바이트 구인 구직까지 할 수 있는 웹 어플리케이션 제작
- 회원가입 할때 가게를 등록하는 사장인지 알바 인지 체크후 회원가입
- 아르바이트생을 구인 하는 페이지 생성
- 구직하는 알바회원은 구인 페이지에서 인스타 처럼 DM으로 가게 사장님에게 연락가능
- 가게 생성시 가게의 위치를 입력 받고 이를 이용해 맵 api 연동
- 검색 기능을 추가하고 지역을 검색하면 주위 몇 km 내의 가게만 나올 수 있도록 구현
- TS를 이용한 백엔드 재구현 (TS공부 후 다시 구현해볼 예정입니당)
1차 프로젝트 마무리 후 느낀점
그냥 공부하는 것보다 확실히 하나의 프로젝트를 진행해보니 더 다방면으로 공부가 되어서 좋았다.
기본기가 많이 부족하다는 것을 느꼈고 너무 얕게 많은 것을 공부하고 있었다는 것을 깨달았다.
좋은 개발자가 되기 위해서 JS와 React에 관해서 깊게 다시 공부를 해봐야겠다고 결심했고 이 프로젝트를 여기서 마무리하는 것이 아니라 꾸준히 개발해 나가면서 관리 해볼 것이다. 그리고 최근에 NextJS에 대해서도 관심이 가는데 공부를해서 백엔드는 TS를 이용해 다시 구현하고 프론트엔드는 NextJS를 이용해 구현해볼까 한다!
또한 git에 대한 공부도 해야 겠다. 난 너무 부족하다 .ㅠㅠㅠ 더 좋은 개발자가 되기 위해서 노력하자 !! 빠이팅
