팀원 구성:
- 리더: 천민규
- 부리더: 박주원
- 팀원: 강나연
- 팀원: 김지예
- 팀원: 시병택
- 디자이너: 팽건우
팀명: until 6
선정 이유: 취업은 6월 안에, 취업 시 퇴근은 6시 안에 하는 곳을 가자는 뜻을 내포
프로젝트 명(사이트 명): BOOKER
선정 이유: teacher, baker처럼 책과 관련된 사람들이 이용하는 사이트라는 뜻을 내포
프로젝트 주제: 책과 관련된 모든 것
선정 이유: 도서소개, 중고책거래 등등 하나의 컨텐츠를 위해 일일히 관련 사이트를 찾아야 하는 노고를 덜기 위해 다양한 컨텐츠들을 카테고리화 시켜서 사이트에 녹여냄
사이트 구성:
- 로그인 / 회원가입 페이지
- 메인 페이지
- 북커톡 커뮤니티 / 도서소개 / 중고책거래 / 맞춤추천 설문조사 / 독립서점 소개 페이지
- 고객센터 / 중고거래 실시간 채팅 모달창
MVP 시연: (사이트 참고)
서비스 아키텍처:
팀원 구성:
- 리더: 천민규
- 부리더: 박주원
- 팀원: 강나연
- 팀원: 김지예
- 팀원: 시병택
- 디자이너: 팽건우
팀명: until 6
선정 이유: 취업은 6월 안에, 취업 시 퇴근은 6시 안에 하는 곳을 가자는 뜻을 내포
프로젝트 명(사이트 명): BOOKER
선정 이유: teacher, baker처럼 책과 관련된 사람들이 이용하는 사이트라는 뜻을 내포
프로젝트 주제: 책과 관련된 모든 것
선정 이유: 도서소개, 중고책거래 등등 하나의 컨텐츠를 위해 일일히 관련 사이트를 찾아야 하는 노고를 덜기 위해 다양한 컨텐츠들을 카테고리화 시켜서 사이트에 녹여냄
사이트 구성:
- 로그인 / 회원가입 페이지
- 메인 페이지
- 북커톡 커뮤니티 / 도서소개 / 중고책거래 / 맞춤추천 설문조사 / 독립서점 소개 페이지
- 고객센터 / 중고거래 실시간 채팅 모달창
MVP 시연: (사이트 참고)
서비스 아키텍처:
기술적 의사 결정 & 트러블 슈팅
기술적 의사 결정 (도입 이유 / 문제 상황 / 해결 방안 / 의견 조율 / 의사 결정)
- react+ typescript 채택
- 도입 이유 : react사용 시 코드 작성과 유지보수가 용이,typescript가 정적 타입을 제공하여 개발 시 발생할 수 있는 많은 버그를 해결할 수 있고, 타입 정의를 통해 코드의 의도를 명확하게 전달
- 문제 상황 : 동적인 사이트를 제작함에 있어서 어떤 기술 스택을 사용하느냐에 대한 논쟁이 있었음
- 해결 방안 : 각 기술 스택에 대한 장단점을 파악하고, 팀원들의 개발 경험에 따른 기술 스택 사용 능력을 객관적으로 평가하여 회의를 통해 결정
- 의견 조율 : 개인의 실력과 프로젝트에 사용하고 싶은 기술 스택에 대해 의견을 교류하고, 프로젝트 관리 측면에서 마감기한까지 최선의 결과물을 낼 수 있는 방법에 대해 토론
- 의사 결정 : 여러 차례 심도 있는 회의에서 각 팀원의 의견을 충분히 듣고 고려한 끝에 다수결로 결정
- 클라이언트 서버 전역관리 recoil or toolkit: recoil 선택
- 도입 이유 : 여러 컴포넌트에서 같은 데이터를 사용하고 있어서 중복되는 코드가 많아 전역 관리가 필요
- 문제 상황 : 여러 컴포넌트에서 사용하는 데이터를 각 컴포넌트마다 똑같은 코드로 구현하다보니 코드량이 쓸모 없이 많아짐
- 의견 조율 : tookit은 코드량이 더 많지만 한번 배워봤기에 익숙해서 좀 더 구현속도가 높지만, recoil은 제대로 사용해본적은 없지만 코드가 더 경량화 되어 있고 실제 실무에서도 많이 쓰는 라이브러리여서 각각의 장단점이 있음
- 해결 방안 : 해당 고민 관련 튜터님과 충분한 상의 및 다수결 회의를 통해 기술 채택
- 의사 결정 : 익숙한 기술보다는 좀 더 공부를 진행하여서 프로젝트의 코드를 조금이라도 줄일 수 있는 recoil로 결정
- 비동기 처리 recoil or react query : react query 선택
- 도입 이유 : db 데이터를 가져오는 비동기 처리 관련 작업이 필요함
- 문제 상황 : recoil로 한번에 비동기 처리까지 진행할지 react query로 진행할지 고민
- 의견 조율 : recoil로 구현하면 간단하고 직관적인 API로 쉽게 상태 관리를 할 수 있으나 캐싱 및 리프레시 관리, 에러 핸들링이 부족하고, react query를 사용하면 상태 관리, dev tools를 통해 디버깅 과정에 장점이 많으나 recoil보다 데이터 공유가 복잡해질 수 있음
- 해결 방안 : 두 장단점을 비교하고 튜터님의 피드백 및 다수결 회의를 통해 기술 채택
- 의사 결정 : 비동기 처리에는 react query가 좀 더 장점인 부분이 큰 것 같아 react query로 채택
- date base : supabase 선택
- 도입 이유 : 게시글, 실시간 채팅내용, 유저인증 관련 데이터베이스가 프로젝트에 필요하여서
- 문제 상황 : 기획 단계에서 우리 사이트에 적합한 db가 무엇인지 파악해야 했음
- 의견 조율 : 기능 구현 중 실시간 채팅 기능, 대댓글 관련해서 적합한 db에 대해 의견을 나눔
- 해결 방안 : 실시간 채팅 기능 구현을 하기 위해 supabase에서 제공하는 리얼타임 기능이 구현 효율을 높여주고, 테이블을 직접 구성하여 데이터 구조를 설정할 수 있는 장점이 우리 사이트에 적합한 db라고 판단
- supabase의 리얼 타임 기능과 직접 데이터 구조를 설정할 수 있다는 점이 프로젝트에 필수적으로 요구되는 기능 구현에 적합하다고 판단
- 의사 결정 : 위의 내용을 토대로 supabase를 우리 프로젝트의 db로 사용하기로 결정
트러블 슈팅
- 알라딘 API
- 문제 상황
- api는 열어놓고 CORS policy를 열어놓지 않아 데이터를 가져올 수 없음(aladin.co.kr이 아닌 주소에서 알라딘 서버에 요청을 보내면 거절해버리는 정책)
- 해결 방안
- proxy 사용(http-proxy-middleware) or express 서버 만들기
- express 서버를 만들어서 배포하려 하였으나 백엔드 서버를 간단히 배포할 수 있는 클라우드 타입을 찾아 여기에서 배포 결정(Express란 Node.js를 사용하여 쉽게 서버를 구성할 수 있게 만든 클래스와 라이브러리의 집합체)
- 실시간 채팅(중고거래)
- 문제 상황
- 유저 간 1:1 채팅을 구현하였다가 중고거래 물품에 대한 1:1 유저간 채팅으로 목표가 바뀌면서 물품에 대한 문의만큼 채팅창이 생겨야 하는데 첫 유저 2명이 고정되는 문제
- 해결 방안
- 기존 코드로 채팅창을 늘릴 수 없어서 코드 전면 수정
- 각각의 물품에 대해 대화 신청을 하면 채팅창에 uuid고유값을 맞춰주어서 여러 대화가 가능하게 해결
- 실시간 채팅(고객센터)
- 문제 상황
- 모달창으로 구현한 admin 입장의 채팅 부분에서 useParams 이용을 위해 useNavigate를 사용하였는데 아예 새로운 페이지로 넘어가게 됨
- 해결 방안
- state를 하나 만들어 uuid 저장 후 해당 uuid 클릭 시 해당 uuid를 가진 유저와의 채팅방으로 이동하도록 로직 재구성
추후 개발 및 기술적인 도전 계획(우선 순위)
- 실시간 채팅 기능 동작 에러 해결
- SNS 로그인 에러 및 회원가입쪽 이슈 해결
- 반응형 웹
- 실시간 채팅 알람 기능
- 좋아요 기능
- 다크모드
- 욕설 필터링
- 독립서점 지도 검색창 구현
- 지도에 현재 본인 위치 접근 권한 설정해서 해당 위치 띄우기
- 유저 등급 나누기
기술적 의사 결정 & 트러블 슈팅
기술적 의사 결정 (도입 이유 / 문제 상황 / 해결 방안 / 의견 조율 / 의사 결정)
- react+ typescript 채택
- 도입 이유 : react사용 시 코드 작성과 유지보수가 용이,typescript가 정적 타입을 제공하여 개발 시 발생할 수 있는 많은 버그를 해결할 수 있고, 타입 정의를 통해 코드의 의도를 명확하게 전달
- 문제 상황 : 동적인 사이트를 제작함에 있어서 어떤 기술 스택을 사용하느냐에 대한 논쟁이 있었음
- 해결 방안 : 각 기술 스택에 대한 장단점을 파악하고, 팀원들의 개발 경험에 따른 기술 스택 사용 능력을 객관적으로 평가하여 회의를 통해 결정
- 의견 조율 : 개인의 실력과 프로젝트에 사용하고 싶은 기술 스택에 대해 의견을 교류하고, 프로젝트 관리 측면에서 마감기한까지 최선의 결과물을 낼 수 있는 방법에 대해 토론
- 의사 결정 : 여러 차례 심도 있는 회의에서 각 팀원의 의견을 충분히 듣고 고려한 끝에 다수결로 결정
- 클라이언트 서버 전역관리 recoil or toolkit: recoil 선택
- 도입 이유 : 여러 컴포넌트에서 같은 데이터를 사용하고 있어서 중복되는 코드가 많아 전역 관리가 필요
- 문제 상황 : 여러 컴포넌트에서 사용하는 데이터를 각 컴포넌트마다 똑같은 코드로 구현하다보니 코드량이 쓸모 없이 많아짐
- 의견 조율 : tookit은 코드량이 더 많지만 한번 배워봤기에 익숙해서 좀 더 구현속도가 높지만, recoil은 제대로 사용해본적은 없지만 코드가 더 경량화 되어 있고 실제 실무에서도 많이 쓰는 라이브러리여서 각각의 장단점이 있음
- 해결 방안 : 해당 고민 관련 튜터님과 충분한 상의 및 다수결 회의를 통해 기술 채택
- 의사 결정 : 익숙한 기술보다는 좀 더 공부를 진행하여서 프로젝트의 코드를 조금이라도 줄일 수 있는 recoil로 결정
- 비동기 처리 recoil or react query : react query 선택
- 도입 이유 : db 데이터를 가져오는 비동기 처리 관련 작업이 필요함
- 문제 상황 : recoil로 한번에 비동기 처리까지 진행할지 react query로 진행할지 고민
- 의견 조율 : recoil로 구현하면 간단하고 직관적인 API로 쉽게 상태 관리를 할 수 있으나 캐싱 및 리프레시 관리, 에러 핸들링이 부족하고, react query를 사용하면 상태 관리, dev tools를 통해 디버깅 과정에 장점이 많으나 recoil보다 데이터 공유가 복잡해질 수 있음
- 해결 방안 : 두 장단점을 비교하고 튜터님의 피드백 및 다수결 회의를 통해 기술 채택
- 의사 결정 : 비동기 처리에는 react query가 좀 더 장점인 부분이 큰 것 같아 react query로 채택
- date base : supabase 선택
- 도입 이유 : 게시글, 실시간 채팅내용, 유저인증 관련 데이터베이스가 프로젝트에 필요하여서
- 문제 상황 : 기획 단계에서 우리 사이트에 적합한 db가 무엇인지 파악해야 했음
- 의견 조율 : 기능 구현 중 실시간 채팅 기능, 대댓글 관련해서 적합한 db에 대해 의견을 나눔
- 해결 방안 : 실시간 채팅 기능 구현을 하기 위해 supabase에서 제공하는 리얼타임 기능이 구현 효율을 높여주고, 테이블을 직접 구성하여 데이터 구조를 설정할 수 있는 장점이 우리 사이트에 적합한 db라고 판단
- supabase의 리얼 타임 기능과 직접 데이터 구조를 설정할 수 있다는 점이 프로젝트에 필수적으로 요구되는 기능 구현에 적합하다고 판단
- 의사 결정 : 위의 내용을 토대로 supabase를 우리 프로젝트의 db로 사용하기로 결정
트러블 슈팅
- 알라딘 API
- 문제 상황
- api는 열어놓고 CORS policy를 열어놓지 않아 데이터를 가져올 수 없음(aladin.co.kr이 아닌 주소에서 알라딘 서버에 요청을 보내면 거절해버리는 정책)
- 해결 방안
- proxy 사용(http-proxy-middleware) or express 서버 만들기
- express 서버를 만들어서 배포하려 하였으나 백엔드 서버를 간단히 배포할 수 있는 클라우드 타입을 찾아 여기에서 배포 결정(Express란 Node.js를 사용하여 쉽게 서버를 구성할 수 있게 만든 클래스와 라이브러리의 집합체)
- 실시간 채팅(중고거래)
- 문제 상황
- 유저 간 1:1 채팅을 구현하였다가 중고거래 물품에 대한 1:1 유저간 채팅으로 목표가 바뀌면서 물품에 대한 문의만큼 채팅창이 생겨야 하는데 첫 유저 2명이 고정되는 문제
- 해결 방안
- 기존 코드로 채팅창을 늘릴 수 없어서 코드 전면 수정
- 각각의 물품에 대해 대화 신청을 하면 채팅창에 uuid고유값을 맞춰주어서 여러 대화가 가능하게 해결
- 실시간 채팅(고객센터)
- 문제 상황
- 모달창으로 구현한 admin 입장의 채팅 부분에서 useParams 이용을 위해 useNavigate를 사용하였는데 아예 새로운 페이지로 넘어가게 됨
- 해결 방안
- state를 하나 만들어 uuid 저장 후 해당 uuid 클릭 시 해당 uuid를 가진 유저와의 채팅방으로 이동하도록 로직 재구성
추후 개발 및 기술적인 도전 계획(우선 순위)
- 실시간 채팅 기능 동작 에러 해결
- SNS 로그인 에러 및 회원가입쪽 이슈 해결
- 반응형 웹
- 실시간 채팅 알람 기능
- 좋아요 기능
- 다크모드
- 욕설 필터링
- 독립서점 지도 검색창 구현
- 지도에 현재 본인 위치 접근 권한 설정해서 해당 위치 띄우기
- 유저 등급 나누기
웹 개발자 되고 시포용