코딩 쏙쏙

1차 프로젝트 회고록 본문

회고록

1차 프로젝트 회고록

두두만두 2023. 4. 16. 16:40

프로젝트  소개
  • 팀명 : 식스센스(6ixsense)
  • 개발인원 : Front-End 3명, Back-End 3명

 

프로젝트 기간
  • 2023.04.03 ~ 2023.04.14

 

클론코딩 사이트
 

오설록

오설록, 차와 제주가 선사하는 가치 있는 쉼

www.osulloc.com

저희 팀은 오설록이라는 웹사이트의 기능과 컨텐츠를 활용하면서 차이를 만들기 위해 인센스로 제품을 기획했습니다.
따라서 제품과 웹사이트의 색감에서도 차별성을 두었습니다.
오설록과는 다른 브랜드와 제품으로써의 강점을 부각시키고, 고객들이 제품을 더욱 기억하고 와닿게 만들려 노력했습니다.

 

 

사용한 기술 스택 

Front - End
JavaScript, React, Scss, Git & GitHub

 

Back - End
JavaScript, Nodejs Express, MySQL, REST API, Git & GitHub

 

DB Modeling

 

Rending 페이지

 

Randing 페이지는 사용자들이 웹사이트에 처음 접속했을 때 가장 먼저 보게되는 페이지입니다. 따라서 이페이지에서 사용자들에게 좋은 첫인상을 줄 수 있도록 디자인과 내용에 신경을 써야 합니다.

그리고 이 페이지에서 클라이언트가 받을 수 있는 오늘의 추천 상품 데이터는 매우 중요합니다. 추천 상품 정보와 함께 해당 상품의 할인 가격, 새로운 상품, 인기 있는 상품 등 다양한 정보를 제공함으로써 사용자들에게 매력적인 제품을 제공할 수 있습니다.

하지만 이를 위해서 매번 새로운 데이터를 불러와야하는 것은 비효율적일 수 있다고 생각하였습니다. 따라서 우리는 List페이지에서 이미가져온 API 데이터를 재활용성이 가능한 방법으로 적용하여 더욱 효율적인 코드 작성을 목표로 하였습니다.

 

List 페이지

 

1. 상품 가격
- 상품 리스트를 가격 순으로 정렬하는 기능을 제공하였습니다.
- 클라이언트에서는 API를 호출하여 가격이 낮은 상품부터 높은 상품까지 선택 하여 볼 수 있게 구현 하였습니다.
- 가격순으로 정렬하는 방법으로는 쿼리문에서 ORDER BY를 사용하여 구현하였습니다.

 

2. 상품 목록
- 상품 카테고리를 기준으로 상품 리스트를 필터링하는 기능을 제공합니다.
- 클라이언트에서는 API를 호출하여 원하는 카테고리의 상품만 보여 줄 수 있습니다.
- 카테고리별로 필털링 하는 방법은 쿼리문에서 WHERE 절을 사용하여 구현 할 수 있습니다.

 

3. 상품 이미지
- 상품 정보에 2개의 이밎 URL을 추가하여 클라이언트 측에서 상품 이미지와 Hover 이미지를 함께 제공하는 기능을 제공하였습니다.
- 클라이언트에서는 APIF를 호출하여 상품 이미지와 Hover 이미지를 함께 보여줄 수 있습니다.

 

4. 페이지네이션
- LIMIT와 OFFSET을 이용하여 페이지 이동을 구현하는 기능을 제공하였습니다.
- 클라이언트에서는 API를 호출하여 페이지를 이동할 수 있습니다.

 

5. 할인 가격 계산
- 쿼리문에서 조건문을 사용하여 상품 가격 외에 할인 가격도 함께 계산하여 보여주는 기능을 제공하였습니다.- 클라이언트에서는 API를 호출하여 할인 가격을 포함한 상품 가격을 보여줄 수 있습니다.

 

이러한 기능을 통해 사용자는 다양한 방식으로 상품리스트를 볼 수 있으며, 원하는 제품을 찾을 수 있습니다. 또한, 페이지네이션을 적용하여 페이지 이동이 가능하며, 상품 이미지와 할인 가격 정보도 함께 제공되어 사용자에게 보다 풍부한 상품 정보를 제공할 수 있습니다.

 

 

Randing 페이지

 

 

List 페이지 

 

 

문제점 & 느낀점

 

이번 프로젝트를 통해 많은 것을 배우고 성장할 수 있었습니다. 우리 팀의 팀워크와 커뮤니케이션 능력이 프로젝트 성공의 핵심이었기 때문에, 앞으로도 이러한 강점을 계속 강화하고 다음 프로젝트 팀에서도 성공을 위해 노력할 것입니다. 특히, 매일 간단한 데일리 미팅으로 회의를 통해 계획을 체계적으로 진행하였으며, 개발 중에 발생한 오류나 문제를 비교적 신속하게 해결 할 수 있었습니다. 이러한 팀워크와 커뮤니케이션 능력을 발전시켜 나기기 위해 더욱 노력하고자 합니다.

프로젝트를 진행하면서, 쿼리빌드와 필터링 방식 및 페이지네이션 API 구현에서 많은 어려움을 겪었습니다. 또한 Error Handling 부분에서는 많은 결함을 발견하여 이를 통해 많은 것을 학습 할 수 있었습니다. 이러한 어려움을 극복하기 위해, 이전에 학습한 CRUD API 자료를 되짚어 보고, 좋은 문서와 예제 코드를 찾아가며, 다양한 코드 로직을 시도 해보았습니다. 그 결과 API를 꼼꼼하게 테스트하여 잠재적인 문제를 발견하고 대처하였습니다. 이러한 과정을 통해, 더욱 성숙한 개발자로 성장할 수 있었습니다.

다음 프로젝트를 진행할 때에는 , 이전 프로젝트에서 겪었던 어려움과 결함을 바탕으로 더욱 철저하게 준비하고, 더욱 효율적으로 일할 수 있도록 노력하고자 합니다. API 구현의 가독성과 재활용성을 고려하여 코드를 작성하며, 테스트 코드를 꼼꼼하게 작성하여 잠재적인 문제를 발견하고 적극적으로 대처하려고 노력 할 것입니다. 또한, 팀 내부에서 문제가 발생하면 그 문제를 빠르게 파악하고 해결하기 위해 지속적으로 소통하고 협력하고자 합니다.