reesekimm/dev.readers

개발 도서를 리뷰하고 공유하는 독서 기록 SNS

dev.readers's Issues

[BE] 배포

설명

서버 배포

• 프론트 서버
• 백엔드 서버 + MySQL
• https 적용

[Common] 댓글 작성/수정/삭제 기능 백엔드 연동

설명

댓글 작성/수정/삭제 controller 추가 및 클라이언트단에 적용

구현 상세

• 댓글 작성
• 댓글 수정
• 댓글 삭제

[Common] 리뷰 로드/작성/수정/삭제 기능 백엔드 연동

설명

리뷰 작성/수정/삭제 백엔드 서버 controller 추가 및 클라이언트단에 적용

구현 상세

• 리뷰 로드
  • 도서 검색 > 검색 결과 클릭시 이미 작성된 리뷰가 있는 경우 > 해당 리뷰 로드
  • 메인화면 리뷰 목록 로드 (infinite scroll 적용)
• 리뷰 작성
• 리뷰 수정
• 리뷰 삭제
• 좋아요
• 좋아요 취소

[FE] 리뷰 좋아요 기능 구현

설명

작성된 리뷰에 좋아요 또는 좋아요를 취소할 수 있는 기능 구현

구현 상세

• 좋아요
• 좋아요 취소

[FE] 댓글 추가/수정/삭제 기능 구현

설명

댓글을 추가/수정/삭제 하는 기능 구현

구현 상세

• 댓글 추가
• 댓글 수정
• 댓글 삭제

[FE] Can't perform a React state update on an unmounted component

메인페이지 <-> 마이페이지 -> 검색페이지 이동시 다음과 같은 에러 발생

Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.

[Common] 알라딘 Open API 신청

• Open API 이용 안내
• 알라딘 Open API 매뉴얼

---

• TTB 신청 / 승인받기
• api 테스트
• premium 신청 여부 결정

ver1.0 기능 정의

• 1.0 버전에서 제공할 기능 정리

[Common] stack 선정

Front-end

• 기본 : React + Typescript
• 상태관리 : Redux Saga, (Redux toolkit)
• SSR : Next.js
• 테스트 : Jest, Enzyme, (Cypress)

Back-end

• 서버 : Node.js + Express
• DB : MySQL, sequelize
• 배포 : AWS EC2, S3, Route 53

[BE] 서버 재시작시 Github 인증 무효화

수행 절차 / 오류 내용

1. 사용자 로그인(Github 인증) 완료
2. 서버 파일 수정에 의해 nodemon으로 서버를 재시작
3. 이후 로그인이 필요한 요청 발생시 passport.js의 deserializeUser가 호출되지 않고 401 (Unauthorized) 를 응답함

[Common] 배포 준비

구현 상세

• 발견되는 버그 수정 / 코드 리팩토링
• 배포 준비

[FE] 디자인 시스템 구축

study

• Atomic design 학습 및 적용
• 반응형 (CSS Grid, media query 학습 및 적용)

components

- atoms

• Avatar
• Button
• Divider
• Img
• RatingTag
• Text
• Input

- molecules

• BookInfo
• BookListItem
• Search

- organisms

• BookList
• Footer
• Header
• ReviewList
• Modal

- templates

• BaseTemplate
• MainTemplate
• SearchAllTemplate
• SearchBookTemplate

pages

• Main
• SearchResult (all)
• SearchResult (book)
• ReviewWrite/Update
• ReviewDetail
• Profile
• Setting

common

• Popup -> Modal 사용
• Alert -> Modal 사용

[FE] 마이페이지

설명

마이페이지 화면 UI 제작 / 라우팅 / 상태관리 로직 추가

구현 상세

• UI
• Routing

[FE] 디테일 작업

설명

• 디테일한 기능 추가
• 코드 리팩토링
• 소소한 버그 수정

구현 상세

디테일한 기능 추가

• Header 영역 Avatar background color 지우기
• ReviewListItem 첫 3줄 / 최대 200자 노출
• ActionBar에 Avatar 추가 & 아바타 또는 닉네임 클릭시 사용자 페이지로 이동
• Comment에 Avatar 추가 & 아바타 또는 닉네임 클릭시 사용자 페이지로 이동
• 댓글 목록 높이 고정 / overflow 조정
• 비로그인 상태에서 좋아요 클릭시 로그인 요청 피드백
• 리뷰작성모달 로그인 버튼 활성화
• 비로그인 상태에서도 댓글 작성 양식 노출
• 리뷰 상세 모달 내부 스크롤바 숨기기
• 도서 검색 페이지 / 리뷰 작성 페이지 No result 컴포넌트 추가
• 비로그인 상태에서 리뷰 작성 페이지 접근시 메인페이지로 리다이렉트
• 페이지 타이틀 추가
• favicon 추가

리팩토링

• id type number로 통일
• 불필요한 주석 / 코드 / 파일 제거
• 문자열 상수화

버그 수정

• 댓글 추가시 push -> unshift
• 다른 사용자 페이지의 프로필 영역에 로그아웃 버튼 표시되는 버그

[Common] 마이페이지 서버 연동

설명

마이페이지 내가 작성한 리뷰 / 좋아요 리뷰 서버 연동

구현 상세

• (FE) 마이페이지 다이나믹 라우팅 적용 (/me -> /[nickname])
• (FE) 마이페이지 접근 권한 변경 (로그인한 사용자 -> 모든 접속자)
• (FE) 마이페이지 Redux 로직 추가
• (BE) 사용자 정보 / 작성한 리뷰 / 좋아요 리뷰 응답 로직 추가

[Common] 리뷰 상세 보기 로직 변경

설명

<변경 전>

• 리뷰 목록 렌더링시(getReviews) 리뷰 상세 내용을 모두 포함하여 응답
• 클라이언트단에서 모든 리뷰 상세 내용을 가지고 있다가 리뷰 상세 보기시 가지고있던 데이터를 모달에 전달하여 렌더링
  -> 최신상태의 좋아요, 댓글이 반영되지 않는 문제 발생

<변경 후>

• 리뷰 목록 렌더링시 목록 렌더링에 필요한 최소한의 데이터만 응답
• 리뷰 상세 보기시 리뷰 상세 데이터를 요청하고(getReview) 서버로부터 받은 응답내용을 모달에 렌더링

구현 상세

• (client) openReviewDetailModal / getReview 상태관리 로직 수정
• (server) getReviews, getUserReviews, getUserLikes 응답 데이터 수정 필요한지 확인

[FE] SSR 적용

설명

SSR 적용

구현 상세

• 메인페이지 - /
• 마이페이지 - /[nickname]
• 도서 검색 페이지 - /search/book
• 리뷰 작성 페이지 - /write
• CSS

[FE] Redux 셋업

설명

Redux-saga, Redux-tookit 사용하여 상태관리 플로우 설계

구현 상세

• Redux-saga + Redux-toolkit 학습
• 프로젝트 적용

[FE] 도서 검색 페이지 infinite scroll 버그

현상

검색 결과 리스트 최하단으로 스크롤하여 infinite scroll을 여러 번 실행한 후
다시 스크롤하여 화면 상단으로 이동시 추가적으로 데이터를 요청함

기대했던 내용

화면 상단으로 이동시에는 추가적으로 데이터를 요청하지 않아야 함

[FE] Modal 상태관리 로직 리팩토링

설명

• Modal 컴포넌트의 재사용성을 높이기 위해 리뷰작성, 리뷰상세 Modal의 open/close 및 Modal 내부 콘텐츠를 redux로 관리
• Modal의 wrapper 영역 클릭하여 Modal 닫는 기능 복구

구현 상세

• modal slice, saga 추가하여 어플리케이션 내부 어디에서든 리뷰작성, 리뷰상세 Modal을 open/close 할 수 있도록 함
• 페이지 단위 Template에 리뷰작성, 리뷰상세 Modal을 위치시킴
  • 기존 BookListItem 컴포넌트에 포함되어있던 리뷰작성 Modal 제거
  • 기존 WriteReviewTemplate에 포함되어있던 리뷰상세 Modal 제거
• 피드백 Modal의 경우 기존대로 컴포넌트 내부에 위치시키고 useModal을 사용하여 open/close
• Modal의 내부 콘텐츠는 Modal을 열 때 비동기적으로 요청하여 렌더링할 수 있음
  • (리뷰상세 Modal) 도서 검색 결과 -> 도서 클릭 -> 이미 작성한 리뷰가 있는 경우 -> 비동기 요청 후 응답 로드
  • (리뷰상세 Modal) 메인페이지 / 마이페이지 -> 리뷰 클릭 -> 동기적으로 로드
• 모든 Modal은 wrapper 영역 클릭시 닫힘

[Common] 회원탈퇴 기능

회원탈퇴 기능 구현

[FE] 리뷰 작성 기능 구현

설명

리뷰 작성 기능 구현

구현 상세

• 로그인 O -> 기존 리뷰 작성 화면 유지 / 로그인 X -> 로그인 안내
• 로그인시 Header에 '작성하기' 버튼 노출
• '작성하기' 버튼 클릭시 리뷰 작성 페이지로 이동 (STEP 1 : 도서 검색)
• 리뷰 작성 완료시 팝업 닫힘 (리뷰작성-도서 검색 페이지에 머무름)
• 작성한 리뷰는 메인페이지에서 확인 가능
• 이미 리뷰를 작성했을 경우 리뷰 상세 화면 제공

[FE] 도서 검색 기능 구현

설명

검색 페이지 - 도서 검색 기능

구현 상세

• 검색어 입력에 따른 검색 결과 제공
• 검색 결과 infinite scroll로 노출
• 페이지 뒤로가기 후 다시 돌아왔을 때 검색 결과 유지

[Common] 페이지 새로고침시 로그인 상태 유지 기능 구현

설명

로그인 상태에서 페이지 새로고침시 로그인 풀림 현상 해결

구현 상세

• (FE) loadMyInfo slice/saga 추가
• (BE) loadMyInfo router/controller 추가

[FE] 컴포넌트 구조 설계

주요 페이지 프로토타이핑

[FE] 피드백 모달 clickOutside 버그

수행 절차 / 오류 내용

리뷰작성 또는 리뷰상세 모달 내부에서 피드백 모달 렌더링시
wrapper 영역 클릭하면 리뷰작성 또는 리뷰 상세 모달이 함께 닫힘

[BE] API 서버 초기 개발환경 설정

설명

백엔드 api 서버 초기 셋업

구현 상세

• sequelize 모델 생성
• sequelize 관계 설정
• MySQL-express 연결

[Common] 로그인/로그아웃 기능 구현

설명

Github 로그인 기능 구현

구현 상세

• (FE) 로그인 안내 modal 추가
• (FE) 로그아웃 slice, saga 추가
• (BE) passport.js Github OAuth

[FE] 리뷰 수정/삭제 기능 구현

설명

작성한 리뷰를 수정 또는 삭제하는 기능 구현

구현 상세

• 리뷰 수정
• 리뷰 삭제

[FE] 초기 개발 환경 설정