CLIP

💻 프로젝트 소개

• 여러 쇼핑몰을 한 곳에 모아 사용자들이 좀 더 쉽게 다양한 쇼핑몰에 접근할 수 있도록 만든 쇼핑몰 사이트입니다.

🧑‍🤝‍🧑 멤버

Front-End					Back-End
육동영	김승규	조수빈	김희진	문지은	함다빈	문종현	민경원	유재준	김채현

📆 프로젝트 기간

• 2023.08 ~ 2023.09

📖 사용기술 및 라이브러리

• TypeScript React StompJs Recoil Axios Emotion React-Query

🔔 내가 참여한 주요 기능

공통 컴포넌트

• 프론트엔드 개발자들과의 협업을 위한 공통 컴포넌트 개발로 개발 리소스 절약 및 컴포넌트 추상화를 적용했습니다.
• 개발 리소스를 줄이기 위해 회의를 통해 공통으로 사용되는 컴포넌트를 선별 후 맡은 공통 컴포넌트를 개발했습니다.
• 개발 리로스 절약과 컴포넌트 추상화 및 단일 책임 원칙 기반으로 클린 코드를 작성하려고 노력했습니다.

1. Button 공동 컴포넌트 (소스코드)

공동 컴포넌트 과정

• 피그마에서 사용할 버튼들을 모아서 비슷한 모양끼리 정리 후 정리한 버튼들을 토대로 variant, size, color,width를 기준으로 추상화 계획을 세웠습니다.

• 이렇게 사용할 컴포넌트에 Button 컴포넌트 import와 props로 원하는 버튼의 설정을 내려주어 컴포넌트에 요구되는 버튼을 생성할 수 있었습니다.

2. Catagory 공동 컴포넌트 (소스코드)

공동 컴포넌트 과정

• Catagory ui는 동일하고 안의 내용과 icon이 달라지기 때문에 icon, title, onClick(클릭했을때 이동할 주소), options(category의 하위 category list)를 기준으로 추상화 계획을 세웠습니다.

• 이렇게 사용할 컴포넌트에 category 컴포넌트 import와 props로 원하는 상위, 하위 카테고리의 설정을 내려주어 컴포넌트에 요구되는 카테고리들을 생성할 수 있었습니다.

TypeScript 채택

개발 생산성 향상 및 서비스 안정화를 위해 TypeScript를 채택했습니다. 그리고 컴포넌트에서 필요한 데이터에 대한 타입을 더 체계적으로 관리하기 위해, 컴포넌트 핵심 데이터 타입을 별도로 분리하여 관리하였습니다. 또한, omit 및 pick과 같은 TypeScript의 유틸리티 타입을 적극적으로 활용하여, 타입 관리를 더 효율적으로 수행하였습니다. 이를 통해 코드의 가독성을 향상시키고, 잠재적인 버그를 줄일 수 있었습니다.

판매자와 구매자의 실시간 1:1 채팅

1. StompJS를 이용한 실시간 채팅 구현
상세페이지에서 실시간으로 판매자와 구매자 간에 메시지를 주고받을 수 있는 기능을 구현하는 것이 목표였습니다. 그래서 Stompjs 웹 소켓 프로토콜을 지원하는 라이브러리를 통해 WebSocket 객체를 생성하고 stompjs의 Client 객체를 초기화하여 서버와의 웹 소켓 연결을 설정했습니다. 그리고 subscribe() 함수를 사용하여 특정 주제에 대한 메시지를 구독하고 publish()함수를 사용하여 특정 주제에 메시지를 전송하여 상대방에게 메시지를 보낼 수 있었습니다. 프론트엔드 개발을 담당했기 때문에, 채팅창 UI를 구현하는 것도 저의 역할 중 하나였습니다. 사용자가 메시지를 입력하고 전송할 수 있는 입력창을 만들고, 수신된 메시지를 화면에 표시하는 기능을 구현했습니다. 이를 통해 사용자들은 서로에게 실시간으로 메시지를 주고받을 수 있었습니다.

2. 서비스 로직과 UI 로직 분리
커스텀 훅을 이용해서 소프트웨어 개발 중 중요한 원칙 중 하나인 단일 책임 원칙을 위해 비즈니스 논리와 데이터 처리에 관련된 서비스 로직과 사용자 인터페이스 상호작용과 화면 렌더링에 관련된 UI로직을 분리해 각자의 역할에 집중할 수 있도록 했습니다.

상세페이지 리뷰 작성과 삭제 구현

1. 리뷰 작성과 삭제 구현
리뷰 작성 및 삭제 기능을 구현하여 사용자들이 실제 구매한 상품에 대한 리뷰를 작성하고 삭제할 수 있도록 구현하였습니다. 리뷰 작성 기능에서는 별점, 리뷰 내용, 그리고 이미지를 업로드하기 위해 FormData를 사용하였습니다. 이를 통해 사용자들은 자신의 경험과 평가를 다양한 요소로 표현할 수 있게 되었습니다. 또한, 신뢰성 있는 리뷰를 유지하고, 사용자들이 구매한 상품에 대한 경험을 바탕으로 리뷰를 작성할 수 있도록 유저가 상품을 구매한 경우에만 해당 상품에 대한 리뷰를 작성할 수 있도록 구현하였습니다.

2. react query 적용
React Query를 활용하여 리뷰 관련 데이터를 효율적으로 처리했습니다. 리뷰 작성, 삭제, 조회 등의 기능을 구현하면서 React Query의 강력한 기능을 활용하여 데이터 캐싱, 상태 관리, 비동기 API 호출 등을 원활하게 처리했습니다. 이를 통해 애플리케이션의 성능과 사용자 경험을 크게 향상시킬 수 있었습니다.
React Query의 캐싱 기능을 활용하여 중복된 API 요청을 최소화하고, 데이터를 로컬에 저장함으로써 불필요한 네트워크 요청을 줄였습니다. 또한, React Query의 Query와 Mutation 컴포넌트를 통해 데이터 요청과 업데이트를 간단하고 효율적으로 관리했습니다. 이를 통해 코드의 가독성과 유지보수성이 향상되었고, 개발 과정에서 생산성을 크게 높일 수 있었습니다.

Axios api 모듈화(소스코드)

코드 내에서 Axios를 사용하여 서버에서 데이터를 요청하는 여러 함수를 작성하였습니다. 이로써 개발 중인 기능에 필요한 모든 API 요청을 효율적으로 관리하고 재사용할 수 있는 구조를 설계했습니다. 이러한 설계를 통해 코드의 중복을 최소화하고 재사용성을 높일 뿐만 아니라 코드베이스가 보다 체계적으로 구성되어 특정 부분을 수정할 때 전체 애플리케이션에 미치는 영향을 최소화하였습니다.

이렇게 api 코드를 모듈화해서 효율적으로 관리함으로써 소프트웨어의 유지보수성과 확장성을 향상시킬 수 있었습니다.

모바일 퍼스트 ui

• 유저가 쇼핑몰을 접속할때 웹 / 모바일 비중 데이터 관련 서치를 통해 모바일로 접속하는 유저가 약 2배이상 많다는것을 알게되었습니다.
• 그로인해 clip 프로젝트도 유저의 사용성, 접근성 향상을 위해 모바일 퍼스트 ui로 진행하게 되었습니다.