ToyProject(더다주) 후기

TheDAJU 사이트 링크
YouTube TheDAJU 데모영상
TheDAJU GitHub 링크

• THE DAJU 사이트는 접시 컵 수저 젓가락 등의 정보를 제공해주고 판매하는 사이트 입니다.
• THE DAJU 사이트는 SignIn SignUp Main Product ProductDetail Search MyPage Cart WishList 로 구성된 사이트입니다.
• THE DAJU 사이트 Tech Stack
  FE : JS TS REACT REDUX REACT-REDUX REDUX-TOOLKIT
  Styled-Component
  BE : Node MonGodb Mongoose
• THE DAJU 사이트는 실제 THE DAJU 사이트를 모티브로 진행한 프로젝트 입니다.

---

목차

1. THE DAJU 사이트를 기획한 이유
2. 왜 클라이언트 서버 개발 둘 다 하였나
3. 프로젝트에서 내가 중요하게 생각한 것들
4. 아쉬운점, 어려운 점, 느낀 점, 배운 점
5. 차후 더다주 프로젝트 계획

THE DAJU 사이트 기획한 이유

내 스스로의 정리가 필요했던 시점이였다. 지금까지의 나의 개발을 돌아보면 너무 뒤죽박죽이였다. 이에 프로젝트를 진행해 뒤죽박죽을 정리할 필요가 있었다. 가장 내가 크게 정리할 부분은 클라이언트와 서버간의 원할한 통신에 정리가 가장 필요하다고 느꼈다.

왜 클라이언트 서버 개발 둘 다 하였나

가장 중요하게 정리해야겠다고 생각한 부분은 클라이언트와 서버간의 원할한 통신이였다. 가장 많이 쓰이는 CRUD에 정확한 쓰임과 필요성, 그리고 써야하는 이유에 대한 정리와 query를 써야하는 이유 또한, 정리가 필요했다. 그전까지는 백엔드 개발자에 요구에 따라
"여기서 post로 보내주세요.", "여기서 query로 limit offset 보내주세요" 즉, 수동적인 개발이였다. 왜 보내야하며 왜 필요한지 몰랐다. 그러니 전반적인 프로젝트의 흐름을 이해하기 힘들었으며, 시야가 정말 좁구나 라고 느꼈고, 백엔드에서의 요구를 정확히 이해하지 못했고 충족시키지도 못했으며, 반대로 무엇을 정확히 요구하지도 못했다. 소통을 잘하는 개발자가 좋은 개발자라고 스스로 생각하는데 지금까지의 개발은 소통이 미흡한 개발이라고 생각하여 소통을 잘하는 개발자 즉, 좋은 개발자가 되고자 둘 다 하기로 결정했다.

이번 프로젝트에서 내가 중요하게 생각한 것들

보기 좋은 코드 보기 좋은 컴포넌트 보기 좋은 프로젝트

보기 좋은 이번 프로젝트에서 내가 신경쓰면서 노력해야겠다고 생각한 부분이다. 이 프로젝트는 누군가에게 보여질 프로젝트이다. 이 프로젝트를 볼 누군가가 내 프로젝트를 편안하게 보왔으면 좋겠다는 생각이였다. 이에 나는 아래와 같은 규칙을 정했다.

---

1) 한 컴포넌트에 즉, 한 파일에 코드는 적어도 200줄 안으로

• axios 코드를 따로 관리 그리고 axios instane를 사용해 axios 파일에 반복되는 코드를 최대한 없애음로써 간편한 API 폴더 및 컴포넌트로 만들었다.
• 컴포넌트 분리 한 컴포넌트에 모든 코드를 쓰기보다는 컴포넌트를 분리하여 코드를 나누었다.
• theme의 적극적인 활용 Styled-Component를 사용한 프로젝트로써 한 줄이라도 더 줄이려고 하였다.

2) 공통된 부분이 있다면 재활용하자

• 실제 Prodcut(신제품, 추천상품, 검색상품)쪽을 Redux로 아예 하나로 통합시켜 Router에 컴포넌트를 줄였고 또한 이 부분은 공통된 컴포넌트를 사용한다고 코드로 알려주고자 했다. 이에 공통된 컴포넌트를 사용해 코드의 양도 줄였고 보기 쉬워졌다, 또한 메인페이지 등등에서 반복된 부분을 잡아 하나의 컴포넌트로 구현할려 하였다

적극적인 CRUD 그리고 Query

---

• 적극적으로 CRUD를 써 익숙해지고 쓰임새를 이해해 내 시야가 트여지기를 원했다. CRUD를 다 쓸 수 있는 장바구니 페이지를 구현했다.
• Query에 대한 정확한 이해 그리고 쓰임새를 충분히 익히기를 원했다. 이에 pagination infinite scroll등을 구현하며 query에 대한 이해를 넓혔고 넓힌 이해를 바탕으로 적극적인 Query 사용을 통해 Sort 기능 장바구니 페이지에 선택삭제 선택주문 등과 같은 다양한 기능을 구현할 수 있었다.

아쉬운점, 어려운 점, 느낀 점, 배운 점

1) 아쉬운 점

• 프로젝트를 시작할 때 공통된 컴포넌트 파악이 아무래도 미숙했던 것 같다. 다 구현하고 보니 공통된 컴포넌트가 눈에 많이 보였다.
• 서버쪽에 코드가 난잡해 보인다. 첫 서버 개발이다 보니 서버쪽 개발은 사실 많은 부분을 놓치면서 구현에만 치우쳤던 것 같다.
• 전체 숲을 보면서 이 더다주 프로젝트에 플로우를 그리면서 개발했어야 했는데 너무 쪼개면서 페이지 단위별로만 생각한게 아쉬운 부분이다.

2) 어려운 점

• 서버쪽 개발에서 첫 시작에 가이드를 그리는 것이 어려웠다 사실 못했다고 보는것이 맞다. 그래서 초기세팅이라고 하기 어려울 정도에 서버쪽 개발 스타트였다. 이러한 어려움은 나중에 수정이 많아지는 결과이었다.
• 어떠한 데이터를 받아오고 전하거나 혹은 어떠한 문제를 해결하는데 있어서 서버쪽에서 해결하는게 맞는지 클라이언트에서 해결하는게 맞는지 헷갈렸다. 예를들면, 더다주 프로젝트에 총 데이터 갯수를 보내줄때 서버에서 보내주는게 맞는지 클라이언트쪽에서 자체적으로 해결하는게 맞는지 헷갈렸다.

3) 느낀 점

• TS는 꼭 써야한다. 클라이언트 코드는 TS로 진행하고 서버쪽 코드는 JS로 진행했다. 서버쪽 코드에 JS 진행이유는 간단하다. node mongodb mongoose도 미숙한데 아직까지 미숙하다고 판단되는 TS 까지쓰는거는 욕심이라는 판단이였다. 이러한 판단에 JS로 진행한 서버쪽 코드는 컴파일 단계에서 오류를 못잡아 진짜 따옴표 콜론 이런 부분으로 아예 기능에 오류가 났던적이 많아 몇시간을 삽질을 했었다. 다시 한번 느꼈다 TS는 필수다.
• 일희일비 하지말자 이번 프로젝트에서 맘처럼 안되었던 부분이 많았다. 예를 들면 선택삭제부분 이런 부분에서 내가 생각한대로 안되면 아 이거는 내가 할 수 없는건가? 이런 생각을 먼저했다. 평정심을 가지고 내가 쓴 코드를 볼 필요가 있다. 평온한 마음으로 다시 살펴보니 누군든지 할 수 있다. 반대로 되었으면 왜 되었는지 이 부분을 이 프로젝트 색깔에 맞게 혹은 내가 알아보기 쉽게 누군가 알아보기 쉽게 리팩토링할 생각을 먼저 하는 것이 맞는 것 같다. 이 또한 마음을 평온하게
• 이 프로젝트는 중간에 수정도 많았다 특히 query를 추가하는 부분에서 제일 수정이 많았다. 근데 query 하나 추가하니깐 여기저기서 빨간색이 막 나왔다. 만약 서버쪽 개발에서 내가 첫 큰 그림을 그릴 수 있는 능력이 있고 심혈을 기울였으면 수정이 많지 않았을거라 생각한다. 하지만 나름 유지보수, 보기 좋은 코드를 신경써서 개발에 임했다고 생각한다. 쉽게 해결할 수 있었고 다시 유지보수 및 보기 좋은 코드는 중요하다고 생각한다.

4) 배운 점

• 서버쪽 개발을 하면서 백엔드 개발자를 이해할 수 있고 또한 서버쪽 개발을 배웠다고 생각한다. 이제는 완벽하지 않더라도 백엔드와의 소통에서 그래도 어떠한 것을 요구하는 것인지 알 수 있다. 또한, 내가 질 좋은 코드를 짜고 결과를 내기에 어떠한 요구를 할 수도 있을것 같다.
• CRUD에 대한 정확한 쓰임 이해를 넘어서 더욱 디테일한 CRUD 또한 가능하다라는 것을 배웠다.
• Query에 쓰임은 더욱 더 풍부한 기능이 될 수 있다. 하지만 많은 Query가 쓰여진다고 할 때는 무척 복잡한 서버 코드가 될 수 있고 이럴 때 일수록 클라이언트쪽 코드가 보내 줄 Query는 정말 명확하게 보내주어야겠다.
• 차분히 임하면서 일희일비하지 않는 자세를 배웠으며, 프로젝트 첫 큰 그림을 그려야할 때 정말 정확한 그림을 그리고 이해하고 빠진 부분이 없는지 디테일하게 봐야한다.

차후 더다주 프로젝트 계획

개선점

• 다양한 디스플레이에서도 볼 수 있는 반응형 웹 구현
• 공통된 컴포넌트에 재활용
• 서버코드에 TS 전환
• 서버코드에서 디테일한 error 처리(디테일하게 error 처리가 안되었다고 판단)
• 클라이언트 및 서버코드 리팩토링

추가 구현

• 댓글기능
• 최근 본 상품 조회
• 인기 상품
• 인기 상품 댓글 많은 순 조회 순에 따른 sort 기능