📆 2021.12.13 ~ 2022.02.13
🏠 웹 페이지
| 이민욱 | 조영동 | 김준영 | 안민우 |
|---|---|---|---|
 |
 |
 |
 |
| dnr14 | choyd93 | kky0426 | start-27 |
| Front-End | Front-End | Back-End | Back-End |
- 프론트엔드 개발자 2명, 백엔드 개발자 2명
-
중고장터 ( 유저간의 중고거래에 집중 )
- 책을 좋아하고 많이 구입하는 매니아층이 올라오는 중고책을 쉽게 구입할 수 있도록 중고거래를 위한 상품문의와 1대1 채팅으로 유저간 소통을 원할하게 하고자 했습니다.
-
리뷰 ( 책 관련 정보와 리뷰에 집중 )
- 책을 처음 접하는 초심자가 원하는 책의 정보와 리뷰를 확인하고 동일한 책의 중고가 중고장터에 있을때 추천하여 책의 정보를 보고자 하는 유저가 자연스럽게 북파이에서 중고도서를 구입할 수 있도록 했습니다.
-
커뮤니티 ( 유저간 도서 정보 공유 및 소통 )
- 책과 관련된 정보를 자유롭게 공유하는 커뮤니티 입니다.
-
유저
- 소셜 로그인 : 네이버와 카카오를 통해 oauth 가입 및 로그인을 할 수 있습니다.
- 마이페이지 : 판매 및 구매 리스트, 찜, 거래후기, 작성리뷰보기, 회원정보수정, 탈퇴 기능이 있습니다.
- 타회원 마이페이지 : 다른 회원의 마이페이지에서 판매상품, 작성리뷰, 거래후기, 선호장르, 팔로워를 확인할 수 있습니다.
- 선호 장르 차트 : 마이페이지에서 작성 리뷰를 기반으로 회원의 선호 장르를 보여줍니다.
-
중고장터 및 리뷰
- 통합검색 : 현재 판매하고 있는 중고상품과 알라딘 api 책정보 및 리뷰를 통합 검색할 수 있습니다.
- 중고장터 : 현재 판매하고 있는 중고도서 목록을 확인 할 수 있습니다.
- 리뷰 : 알라딘 api로 부터 책 정보를 제공합니다. 원하는 도서의 리뷰 목록에서 원하는 책의 리뷰를 자유롭게 작성할 수 있습니다.
- 중고상품 추천 : 리뷰 상세 페이지에서 같은 책번호의 중고 도서상품이 있을 때 관련 중고 상품 리스트를 추천해줍니다.
- 포인트 결제 : 사용자 간 신뢰를 바탕으로 포인트를 충전하여 거래할 수 있습니다.
-
소셜 기능
- 채팅 기능 및 댓글 : 판매자와 구매자의 원활한 소통을 위해 실시간 채팅과 상품문의 기능이 있습니다.
- 커뮤니티 : 자유게시판에서 중고도서와 관련된 이야기를 나누며 소통할 수 있습니다.
- 좋아요 : 원하는 중고도서를 찜하고 리스트를 확인할 수 있습니다.
- 팔로우 : 다른 회원을 팔로우하고 팔로워를 리스트로 관리할 수 있습니다. (추가 예정)
TypeScript: 정적 타입을 도입하여 코드 안전성 및 유지보수를 쉽게 하기위해 사용React: 웹UI 라이브러리Redux/tookit: 클라이언트 전역상태 관리 라이브러리Axios: 서버와 RESTful 통신을 위해 사용했습니다.React-Query: 서버의 상태를 관리하기 위한 라이브러리React-hook-form: form 유효성 검사를 위한 라이브러리Sockjs-client: 서버와 양방향 통신을 위한 라이브러리Styled-components: css-in-js을 통해 컴포넌트 스타일을 관리하기 위해 사용했습니다.ESLint: 코드의 컨벤션 검사를 위해 사용했습니다.Pretiier: 코드의 컨벤션 유지를 위해 사용했습니다.Webpack: 모듈을 병합하여 하나의 결과물을 만들기 위해 사용했습니다.Babel: TSX,Typescript 코드 JS로 변경해주는 트랜스파일러
mkdir bookpie
cd bookpie
git clone https://github.com/Book-Pie/FE.git
npm -g i yarn
yarn install
yarn build
yarn serve
브라우저 localhost:3000 접속 ├── .github
│ └── workflows
│ └── main.yml // 배포 자동화를 위한 스크립트
├── public // Favicon 등 Static Resource 저장
│ ├── favicon.png
│ └── index.html
├── src
│ ├── App.tsx
│ ├── api // REST API 사용을 위한 HTTP 서비스, Axios Error Handle
│ ├── assets // 이미지 및 글로벌 Style 모음
│ ├── components // UI를 위한 컴포넌트 모음
│ ├── elements // 재사용이 가능한 컴포넌트 모음
│ ├── hoc // HOC 컴포넌트 모음
│ ├── hooks // Custom Hooks
│ ├── index.tsx
│ ├── modules // Redux/toolkit Slice 모음
│ ├── pages // UI를 표시하기 위한 페이지 컴포넌트
│ ├── router // 리액트 라우터 경로 컴포넌트
│ └── utils // 공통으로 사용하기 위한 util 함수
├── Dockerfile // 테스트 서버를 위한 도커 설정 파일
├── README.md
├── docker-compose.yml // 테스트 서버에 도커를 실행 시키기위한 설정 파일
├── nginx.conf // 테스트 서버 웹서버 설정 파일
├── Jenkinsfile // 테스트 서버 위한 젠킨스 설정 파일
├── package.json // npm 패키지 의존성 파일
├── .env // 환경변수 관리 파일
├── .eslintre // ESLint 설정 파일 - airbnb 컨벤션을 따름
├── .prettierre.js // Prettier 설정 파일
├── webpack.config.js // 웹팩 설정 파일
└── yarn.lock // yarn 패키지 버전관리 파일- Slack
- 협업자들과 기술 공유 및 개발 진행 상황 공유하기 위해 사용했습니다.
- 일반, 프론트, 백엔드 3개 채널로 관심사를 나누어 소통의 복잡도를 낮추었습니다.
- JIRA
- jira의 스케쥴 대시보드를 이용해 프론트, 백엔드 진행 상황 공유 및 개발 이력을 남기기 위해 사용했습니다.
- 개발 이력을 남겨서 불 필요한 소통을 줄였습니다.
- 노션
- 프론트, 백엔드 회의 내용을 문서화하기 위해 사용했습니다.
- 디스코드
- 코로나로 만나지 못하여서 비대면 회의를 위해 이용했습니다.
- Git, Github
- 개발자들의 코드 버전 관리 및 공유하기 위해 사용했습니다.
- 개발자들은 각자
feature/{{기능이름}} branch에서 개발을 진행합니다. - 완성된 기능을
develop branch에 PR 후 리뷰를 통과하면 merge를 합니다. deploy branch에서 develop pull를 해서 코드를 갱신 후 push를 합니다.- github Webhook🪝을 이용하여
https://www.jenkins.p-e.kr로 push 메세지를 트리거합니다. jenkins는 push 메시지 받고 배포 스크립트를 진행합니다.http://www.react-dev.p-e.kr접속을 해서 신규 기능이 잘 작동하는지 체크를 합니다.- 1 ~ 6번 반복을 합니다.
main branch에서 push를 진행를 합니다.- main branch push를 감지한 github은
git action배포 스크립트를 실행합니다. - 빌드가 완료되고 AWS S3에 파일을 배포를하고 유저는
CloudFront를 통해 배포된 사이트(BookPie 사이트)를 접속합니다.
VincentDriessen의 Git Flow 를 따릅니다.
배포를 위해 사용하고 있는 S3, CloudFront 에서 Main 브랜치에 커밋 푸시가 일어날 때마다 배포를 진행하므로, 배포를 진행해야 할 때에만 main 브랜치에 머지를 진행합니다.
- 브랜치 종류
- main: main 브랜치를 기준으로 배포를 진행합니다.
- develop: 개발을 진행하는 중심 브랜치입니다.
- release: QA를 진행하는 브랜치입니다.
- feature: 새로운 기능을 개발하는 브랜치입니다.
- deploy: 테스트 서버 배포를 진행합니다.
- Feature 브랜치 네이밍 규칙
{브랜치 종류}/{{기능이름}}- ex)
feature/login