Project info

Hey OPCN

입장 페이지

• github 로그인과 비회원으로 진행할 수 있는 2가지 옵션이 있습니다.
• 인증은 jwt 기반으로 진행되며 XSS 공격을 대비한 http only 옵션이 이용되었습니다.
• 인증서버가 별도의 서버로 존재하기 때문에 credential 요청이 사용되었습니다.
• 로그인 시 referer의 분석으로 CSRF 공격에 대응했습니다.

리스트 조회 페이지

• 일래스틱 서치 nori 분석기 결과를 재 색인하여 자동완성 적용
• eTag 웹 캐싱을 통해 DB와 서버간의 불필요한 DB 조회를 줄였습니다.
• 최종 수정 시각을 기준으로 요청 query, body를 종합하여 hash 생성 후 eTag 웹 캐싱 활용

필터링

• useReducer을 이용한 context 관리
• useImperativeHandle를 이용한 외부라이브러리 제어
• react module이 제공되지 않는 카카오 맵 api 적용

상품 등록 페이지

• 이미지 업로드로 인해 submit이 지연되는 시간을 최대한 줄이고자 input이 됨과 동시에 사진업로드가 진행됩니다.
• 지나치게 큰 이미지에 대해 리사이징 작업이 canvas API를 통해 진행함으로써 서버의 부담을 줄였습니다.
• 이미지는 모바일/데스크탑 버전으로 나누어서 리사이징 되며 요청 user agent의 디바이스에 맞게 제공됩니다.

상품 등록 페이지

• 이미지가 선택과 동시에 업로드가 진행되기 때문에 이미지의 상태를 메모리와 local storage 2군데 저장하고 항상 싱크를 맞춰줌으로써 새로고침 혹은 뒤로가기에도 사진이 저장됩니다.
• 이미지의 상태를 null, loading, url 3가지 종류의 형태로 설정함으로써 로딩이 완료 된 후 submit이 가능하도록 제약을 두었습니다.

상품 조회 페이지

• 이미지는 carousel 형태로 제공됩니다.
• 판매자의 기본 정보가 제공되며 Geolocation API를 이용하여 현재 위치로 부터 판매자의 위치까지의 거리가 계산되어 제공됩니다.
• 관심 상품 등록에 대해 debounce 처리를 하여 과도한 요청을 방지하였습니다.
• 쿠키를 이용하여 중복 조회 카운트를 방지하였습니다.

​

상품 삭제

• 판매자와 현재 사용자가 동일할 경우 게시물을 삭제 할 수 있습니다.
• 일차적으로 프론트엔드에서 판매자와 사용자가 동일할 때만 메뉴를 표시하여 주고 추가적으로 삭제 요청에 대해 서버에서 추가 인증 작업을 통해 삭제를 진행하였습니다.

채팅

• [구매자,판매자,판매 상품]에 고유한 채팅 방이 생성됩니다
• Socket.io를 통해 server-client간 채팅방 연결을 유지합니다
• 사용자는 [chat] name space과 [채팅방id] 를 room으로 하여 입장합니다
• 메세지 날짜별로 section을 구분하여 제공
• 메세지가 작성된 요일을 표시
• 메세지 입력에 반응하여 스크롤 위치 조정

채팅 목록

• 글 작성자와, 상품 사진, 최신 메세지, 그리고 상품 제목을 포함합니다
• 랜더링 성능 향상을 위해 react-window 적용하였습니다

client build - test - deploy (GitHub actions)

Object Storage

(nCloud)

CDN+

(nCloud)

Nginx

(proxy)

정적

웹사이트

호스팅