ID: developer@test.com
PW: 123123
npm run dev:netlify
- 프로젝트 소개
- 개발 일정 및 진행방식
- 팀 컨벤션
- 기술 및 개발 환경
- 구현 기능
- 주요 기능
- 사용자 경험 향상을 위한 전략
- Firestore 적용 및 활용
- 트러블 슈팅
- 리팩토링 계획
- 팀원 소개
-
더블 체크는 독서 커뮤니티로, 책에 대한 정보 제공과 사용자 간의 리뷰 공유를 넘어서 더블 체크라는 개념에 중점을 두고 있습니다. 이 플랫폼은 사용자들이 책을 읽고, 그들의 이해와 감상을 리뷰하거나 인상적인 문구를 공유함으로써, 한 번 더 생각하는 기회를 제공합니다.
-
네이버와 알라딘의 도서 API 를 활용하여 추천 도서를 제공하며, 이를 통해 사용자들이 자신의 해석을 더블 체크하고, 다른 독자들과 의견을 교환하며 독서 경험을 풍부하게 할 수 있도록 돕습니다.
-
1차
프로젝트 기획 2023.10.16 ~ 2023.10.22
프로젝트 개발: 2023.10.23 ~ 2023.11.08 -
2차
프로젝트 개발: 2023.11 ~
- 매일 오전 10시 디스코드에서 데일리 스크럼 진행
- 17시 진행상황 및 이슈 공유
- 온라인 채널로 해결하기 어려운 문제가 있는 경우 오프라인 미팅 진행
👉 자세히 보러가기
피그마 디자인 시스템 사용 - 피그마 툴을 사용해 의 디자인과 흐름도를 작성했습니다.
아토믹 디자인 시스템 도입 - 저희 팀은 초기 개발 단계에서 프로젝트의 이해를 높이기 위해 팀원들과 Atomic Design에 대한 이해를 공유하고, 토론을 통해 각 컴포넌트가 어떤 단계로 간주되어야 하는지,어떤 것이 분자로 적합한지 등에 대해 의논하며 공통된 컴포넌트를 분리해내는 작업을 진행했습니다.
참고 자료
커밋 컨벤션
feat: 기능 추가, 삭제, 변경
fix: 버그, 오류 수정
docs: readme.md, json 파일 등 수정, 라이브러리 설치 (문서 관련, 코드 수정 없음)
style: CSS 등 사용자 UI 디자인 변경 (제품 코드 수정 발생, 코드 형식, 정렬 등의 변경)
refactor: 코드 리팩토링
test: 테스트 코드 추가, 삭제, 변경 등 (코드 수정 없음, 테스트 코드에 관련된 모든 변경에 해당)
config: npm 모듈 설치 등
chore: 패키지 매니저 설정할 경우, etc 등 (ex. gitignore)
comment : 필요한 주석 추가 및 변경
rename: 파일 또는 폴더 명을 수정하거나 옮기는 작업만인 경우
remove: 파일을 삭제하는 작업만 수행한 경우
bug: 오류, 버그
코드 컨벤션
{
"extends": [
"prettier",
"eslint:recommended",
"react-app",
"plugin:prettier/recommended",
"plugin:jsx-a11y/recommended" // JSX 접근성에 대한 권장 설정을 적용
],
"plugins": ["prettier"],
"rules": {
// 들여쓰기를 2로 설정하며, SwitchCase에 대한 들여쓰기를 1로 설정
"indent": ["error", 2, { "SwitchCase": 1 }],
// var 키워드 사용을 금지
"no-var": "error",
// async 함수에서는 반드시 await 키워드를 사용
"require-await": "error",
// 일치 연산자(=== 및 !==)를 사용
"eqeqeq": "warn",
// React prop-types를 사용하지 않도록 설정
"react/prop-types": 0,
// 사용하지 않는 변수에 대한 경고를 비활성화
"no-unused-vars": "off",
"prettier/prettier": ["error", { "endOfLine": "auto" }]
}
}{
"bracketSpacing": true, // 객체 리터럴에서 괄호에 공백 삽입
"jsxBracketSameLine": false, // JSX의 마지막 `>`를 다음 줄로 내릴지 여부
"jsxSingleQuote": true, // JSX에 홑따옴표 사용 여부
"singleQuote": true, // 홑따옴표 사용 여부
"proseWrap": "preserve", // markdown 텍스트의 줄바꿈 방식 (v1.8.2)
"semi": true, // 세미콜론 사용 여부
"printWidth": 100, // 줄 바꿈 할 폭 길이
"endOfLine": "auto", // EoF 방식, OS별로 처리 방식이 다름
"useTabs": false, // 탭 사용 여부
"tabWidth": 2, // 탭의 너비를 2로 설정
"trailingComma": "all", // 여러 줄을 사용할 때, 후행 콤마 사용 방식
"arrowParens": "always" // 화살표 함수 괄호 사용 여부
}| FrontEnd | BackEnd | Design | 협업방식 | 컨벤션 |
|---|---|---|---|---|
     |
  제공된 API |
 |
    |
  |
- 저희 팀이 다른 상태 관리 라이브러리 대신 Recoil을 선택한 이유는 팀 내에서 리액트를 새로 배운 멤버가 많았고 Recoil은 다른 라이브러리보단 학습 곡선이 낮고 프로젝트의 복잡도가 비교적 작은 편이었기 때문에 Recoil을 사용함으로써 효과적으로 전역 상태를 관리할 수 있는 좋은 선택이라고 생각해 Recoil로 프로젝트를 진행하게 되었습니다.
- 리코일 사용 보러가기
- Axios를 활용하여 API 요청을 관리하는 중요한 특징 중 하나는 기본 인스턴스를 커스텀하게 설정할 수 있다는 점입니다. 이를 활용하여 프로젝트에서는 unauthInstance와 authInstance라는 두 개의 인스턴스를 생성했습니다.
- unauthInstance는 인증이 필요 없는 요청에 사용되며, 헤더에 Content-type: application/json을 설정하여 JSON 형식의 데이터를 기본으로 보냅니다. 반면, authInstance는 사용자의 토큰을 확인하고, 헤더에 Authorization: Bearer Token와 함께 Content-Type: application/json을 설정하여 인증이 필요한 요청에 대한 커스텀 설정을 적용합니다.
- 이를 가능케 하기 위해 인터셉터(interceptor) 를 활용하여 요청이 전송되기 전에 getToken 함수를 사용하여 로컬 스토리지에서 토큰을 가져와 해당 토큰을 요청 헤더의 Authorization 속성으로 자동으로 추가하도록 설정했습니다. 이로써, 인증이 필요한 요청에 대한 토큰을 자동으로 관리할 수 있어서 코드의 효율성과 가독성을 높일 수 있었습니다. 이러한 기능을 통해 Axios를 선택함으로써 API 요청과 토큰 관리를 간편하게 처리할 수 있게 되었습니다.
- 인스턴스 활용 보러가기
- CORS 이슈로 클라이언트에서 직접 알라딘 API를 호출하는 데 제약이 발생하여 이 문제를 해결하기 위해 Express 서버를 도입해 CORS 미들웨어를 사용하여 문제를 해결했습니다.
- express 사용 보러가기
| Splash | 회원가입 | 로그인 | 로그아웃 |
|---|---|---|---|
 |
 |
 |
 |
| 홈 화면 | 피드등록 - 책 후기 등록 | 검색(책 & 유저) |
|---|---|---|
 |
 |
 |
| 피드 목록 | 피드상세 - 수정/삭제/신고 | 피드상세 - 좋아요/댓글 | 피드상세 - 신고 |
|---|---|---|---|
 |
 |
 |
 |
| 글귀 목록 | 글귀 등록 | 글귀 수정 | 글귀 삭제 |
|---|---|---|---|
 |
 |
 |
 |
| 프로필설정 | 계정별 피드 | 팔로우 목록 | NotFound(404) |
|---|---|---|---|
 |
 |
 |
 |
-
네이버와 알라딘 API를 활용하여 사용자에게 최신 베스트셀러 및 신간 도서 정보를 제공합니다. 이를 통해 사용자는 독서에 대한 다양한 옵션을 쉽게 찾아볼 수 있습니다.
-
사용자가 원하는 책을 빠르게 찾을 수 있는 검색 기능을 구현합니다. 이를 통해 사용자는 키워드를 활용하여 특정 도서를 쉽게 찾아볼 수 있습니다.
-
책 상세 페이지에서 사용자가 손쉽게 리뷰를 작성할 수 있는 기능을 제공합니다. 이를 통해 사용자는 자신의 의견을 공유하고 독서 경험을 다른 이용자들과 공유할 수 있습니다.
-
사용자가 도서 내용 중에서 마음에 드는 글귀를 간편하게 저장하고 관리할 수 있는 기능을 제공합니다. 이를 통해 사용자는 독서 중에 감명깊은 구절을 쉽게 찾아볼 수 있습니다.
-
사용자가 자신의 관심사에 맞는 도서 카테고리를 프로필에서 설정할 수 있는 기능을 제공합니다. 이를 통해 사용자는 선호하는 도서 장르나 주제에 따라 개인화된 추천을 받을 수 있습니다.
-
사용자의 편의를 위해 토스트 알림, 모달, 스켈레톤 UI 등 다양한 UI 요소를 적절히 활용하여 명확한 피드백을 제공합니다. 특히, 스켈레톤 UI는 데이터 로딩 시 시각적 피드백을 통해 사용자가 대기하는 동안에도 사용성을 유지하도록 했습니다.
-
게시물과 댓글을 볼 때 '방금 전', '1분 전' 등의 표현을 사용하여 최신 정보임을 명확히 표시합니다. 이를 통해 사용자는 컨텐츠의 신선도를 직관적으로 파악할 수 있게 됩니다.
프로젝트에서는 제공받은 API를 통해 사용자가 저장하고 싶은 책을 데이터베이스에 저장하고, 저장된 책 목록을 확인하거나 삭제하는 기능이 필요했습니다. 이러한 요구사항을 효율적으로 처리하기 위해 Firebase Firestore를 선택하게 되었습니다. Firestore는 실시간 동기화, 자동 확장성, 그리고 Firebase 플랫폼과의 간편한 통합이라는 장점이 있어 우리의 요구사항을 충족시키는 데 적합한 데이터베이스 솔루션이었습니다.
- 책 저장: 사용자가 선택한 책을 Firestore에 저장하여 언제든지 접근할 수 있습니다.
- 목록 확인: 저장된 책 목록을 실시간으로 불러와 사용자가 확인할 수 있습니다.
- 책 삭제: 사용자가 저장한 책을 데이터베이스에서 삭제할 수 있습니다.
- 좋아요 기능: 각 책마다 사용자가 좋아요를 클릭할 수 있으며, 클릭한 좋아요 수가 Firestore에 저장되고 실시간으로 업데이트됩니다.
- 완독 상태 변경: 사용자가 책을 읽고 완독했을 경우에는 해당 책을 완독 상태로 변경할 수 있습니다. 변경된 상태는 Firestore에 저장되어 실시간으로 반영되며, 사용자는 읽은 책 목록에서 완독한 책을 다시 확인할 수 있습니다.
- 읽은 책 목록 확인: 사용자가 완독한 책들을 확인할 수 있는 기능을 구현하여, 읽은 책 목록을 실시간으로 불러올 수 있습니다.
이러한 기능을 통해 사용자는 자신이 읽은 책을 효과적으로 관리하고, 사용자가 좋아하는 책이 무엇인지 파악할 수 있으며, 책을 완독한 후의 진행 상황을 관리할 수 있습니다.
- 알라딘 API를 활용하여 정보를 가져오는 중, CORS(Cross-Origin Resource Sharing) 정책으로 인해 브라우저에서의 직접적인 API 호출이 차단되어 정보를 가져올 수 없었습니다. CORS 이슈란, 브라우저의 보안 정책에 따라, 다른 도메인에서의 자원 요청은 차단하는 것으로 클라이언트에서 직접 알라딘 API를 호출하는 경우, CORS 문제가 발생하여 데이터를 가져올 수 없는 상황이었습니다.
-
이 문제를 해결하기 위해 Express 서버를 도입하여 클라이언트가 Express 서버를 통해 알라딘 API의 정보를 받기위해 간단한 서버구축과 CORS 미들웨어를 활용하여 모든 도메인에서의 요청을 허용하도록 설정했습니다.
또한, Cloudtype의 배포 플랫폼을 활용하여 서버를 배포했습니다.
Cloudtype는 무료로 서버를 배포할 수 있는 플랫폼으로, Heroku를 고려했지만 유료화 정책 때문에 Cloudtype을 선택했습니다.
이를 통해 클라이언트는 Express 서버를 통해 Cloudtype에 배포된 서버로 요청을 보내고, Cloudtype 서버는 이 요청을 처리하여 알라딘 API로부터 데이터를 받아 클라이언트에 전달하여 CORS 문제를 해결할 수 있었습니다.
- 사용자의 프로필 탭에서 해당 사용자의 피드를 요청했을 때, 데이터가 초기 렌더링 시 제대로 로드되지 않는 문제가 발생했습니다. 이는 데이터가 로드되기 전에 프로필에 필요한 계정 이름이 설정되지 않아 발생한 문제였습니다.
- 데이터 로드와 렌더링의 시간 차이로 인해 초기 렌더링 시 사용자 계정 이름이 데이터로 설정되지 않았습니다. 이로 인해 프로필에 필요한 정보가 누락되었습니다.
- useEffect 훅을 사용하여 데이터 로딩 상태를 관리하고, 데이터가 로드된 후에만 프로필에 필요한 정보를 설정하도록 수정했습니다. 이로써 데이터가 로드된 후에만 프로필에 필요한 정보가 설정되어, 데이터 로딩 문제를 해결할 수 있었습니다.
- useTimeSince 훅이 시간 포맷을 올바르게 적용하지 못하는 문제가 발생했습니다.
- 훅이 컴포넌트의 최상위 레벨에서만 호출되어야 하는 규칙을 위반하여, 반복문, 조건문 또는 중첩된 함수 내에서 호출되었습니다. 이 규칙을 준수하지 않으면 리액트가 훅의 상태를 올바르게 관리할 수 없어 발생한 문제입니다.
- 각각의 댓글에 대해 useTimeSince를 호출하는 대신, 각 댓글의 시간을 변환하는 로직을 별도의 컴포넌트로 분리하여 사용할 수 있도록 변경했습니다. 훅이 각 댓글 컴포넌트 내에서 호출되도록 구조를 수정해야 했기 때문에 Comments 컴포넌트에서 렌더링되던 댓글 아이템을 CommentItem 컴포넌트로 분리하고 map 함수를 사용하여 각 CommentItem 컴포넌트를 렌더링했습니다. useTimeSince 훅은 각 CommentItem 컴포넌트의 최상위에서 호출되도록 구현하여 훅이 각 댓글의 생성 시간에 대해 정상적으로 적용되는 동시에 컴포넌트를 작은 단위로 분리하여 관리할 수 있게 되었습니다.
- 알라딘 도서 API를 사용 시 표지 이미지의 화질이 낮고 책의 상세 소개가 누락되는 문제 발생했습니다.
- API가 제공하는 데이터의 한계로 인해 사용자의 경험 저하되었습니다.
- 네이버 도서 API를 추가하여 알라딘 API와의 결합을 통해 표지 이미지와 책 정보의 품질 개선하였고 시스템에 네이버 API 통합 구현하여 두 API의 정보를 사용자에게 제공하는 방법으로 문제를 해결했습니다. 결과적으로 네이버 API 도입 후 책 정보의 상세한 정보와 표지 이미지의 화질이 향상되었으며, 두 API의 정보를 결합하는 방법으로 사용자의 경험을 개선할 수 있었습니다.
1차 프로젝트에서 다른 책 콘텐츠와의 차별성과 커뮤니티 특성에 부합하는 핵심 기능을 명확하게 고민해야 한다는 피드백을 받았습니다. 저희 팀은 글귀 중심의 사용자 경험을 강화할 것인지, 아니면 사용자 키워드를 활용한 맞춤형 추천 기능 등을 도입할 것인지를 고민하면서, 사용자 중심의 기능과 컨셉을 강조하여 더 많은 참여를 유도할 수 있도록 방향성을 설정하기 위해 프로젝트를 재검토하기로 결정했습니다.
-
피드백을 수렴하여 프로젝트 주제를 명확히 정의하고, 다른 책 콘텐츠와의 차별성을 강화하려는 목표를 설정했습니다.
-
읽은 도서에 대한 피드 작성 기능을 강화하여 사용자들 간의 활발한 교류를 유도할 것입니다. 이러한 방향성을 바탕으로 읽을 책, 읽은 책, 저장할 책 등의 탭을 도입하여 사용자들이 자신의 독서 활동을 체계적으로 기록하고 관리할 수 있도록 합니다.
-
사용자들에게 특화된 리포트 기능을 도입하여 맞춤형 도서 추천을 제공합니다. 이를 통해 사용자 중심의 경험을 제공하고 참여를 유도합니다.
| 김창영 | 박은진 | 박현석 | 이하연 | 팀 사진 |
|---|---|---|---|---|
 |
 |
 |
 |
 |
| changyoungg | eunjingrove | hspark9781 | cocorig | Coding Crusaders |