bluepebble25 / phoca-review Goto Github PK

목적

카드 정보를 submit 하기 위한 data object를 만들 때 코드가 너무 길고 매번 붙여넣기를 하다보면 실수를 할 위험이 있다.
Card 클래스를 만들어 필드와 타입을 관리하고, 메소드로 데이터 만드는 과정을 추상화해서 세부 사항을 일일이 신경쓰지 않아도 되게 하자.

Tasks

• Card Class를 만들고 필드와 submit 데이터 생성 메소드를 만들자.
• CreateCardPage에서 데이터 생성 로직을 Card 인스턴스와 메소드를 이용해 대체하고 Submit이 성공적으로 이루어지는지 확인한다.

목적

카드 에디터에서 특정한 경우에 의도한 대로 작동하지 않는 UI나 기능 개선한다.

Problems

• TextArea에서 엔터 입력하면 미리보기에서 줄바꿈되게 하기. 저장될 때의 일도 신경써야 한다.
• 띄어쓰지 않고 쭉 영어를 입력할 경우 줄바꿈이 되지 않는 현상 해결하기 (overflow-wrap)
• 미리보기에서 제목/내용/작가의 내용이 일정 줄 수를 넘치면 감추기
• 텍스트 입력창에 복붙을 하면 글자 수 제한 안에 들어오는 글자만 추가되게 하기

목적

카드 에디터 화면을 줄이거나 늘이면 그에 맞게 변하도록 반응형 디자인으로 개선한다.

Tasks

• 화면이 변하는 것에 따라 어떻게 바뀌어야 할 지 계획하기
• 미디어쿼리와 flex, % 수치 등을 이용해 반응형으로 작동하게 코드를 변경한다.

목적

• 카드 에디터에서 create API를 통해 서버에 요청을 보내면 카드 생성이 성공적으로 이루어질 수 있도록 한다.

Tasks

• 프론트에서에서 formData를 이용해 데이터와 이미지를 POST하는 코드를 짠다.
• 프론트에서의 요청이 성공적으로 이루어지도록 프론트와 서버에 발생하는 오류를 고친다.
• 원하는 형식으로 데이터가 잘 저장이 되고 오류는 나지 않는지 테스트해본다.

목적

카드 편집 기능의 세부 기능을 구현한다.

Tasks

• Color picker로 카드 배경색을 선택할 수 있는 기능을 구현한다.
• 카드 배경 이미지 업로드 및 미리보기 기능을 구현한다.
• '내용' 항목 입력 시 글자 수 세기 및 글자 수 제한 기능을 구현한다.

목적

메인 페이지와 좌우로 넘길 수 있는 책을 구현한다.
API만 연동하면 바로 앨범의 카드 이미지가 보일 수 있을 정도로 만들어놓는다.

Tasks

• 메인 페이지 및 책 마크업
• 컴포넌트화
• 책 넘기는 기능 구현

목적

반복되는 코드를 줄이고 가독성을 높인다.
반복되는 코드는 최소단위의 함수로 분리해 재사용성을 높인다.
에러처리를 해준다.

Tasks

• 반복되는 기능을 함수로 분리한다
• 각 컨트롤러에서 기존 로직을 분리한 함수로 대체한다. 매 컨트롤러 리팩토링 완료할때마다 테스트하는 것 잊지말기
  • getAllCards
  • getCard
  • createCard
  • updateCard
  • deleteCard

목적

• 페이지로 가공하지 않은 순수한 card 정보도 필요하므로 기존에 페이지 정보를 담던 cardList에는 순수한 카드 정보만 담도록 하고, 페이지 정보는 pageList라는 state에 담도록 한다.
• 기존에 cardList를 참조했던 Page 관련 컴포넌트들은 pageList를 참조하도록 바꾼다.
• 페이지 가공하는 로직을 함수로 분리해서 fetch 함수의 길이를 줄인다.

목적

• 카드 상세페이지에서 카드 삭제를 진행할 지 묻는 모달창이 필요하다. 모달의 겉모습과 가장 기본적인 기능을 만든다.
• 모달창 컴포넌트를 마크업 하고, 취소 버튼을 누르거나 모달창 바깥 부분을 클릭하면 모달창이 닫히는 기능을 구현한다.

Tasks

• 모달창 마크업 및 스타일링
• 카드 상세페이지의 onClickOutside hook과 모달창 닫는 기능이 충돌하지 않도록 모달창이 닫히는 기능을 구현한다.

목적

• 프론트엔드와 백엔드를 연결할 때의 참고자료로 사용하기 위해 Card에 대한 REST API 문서를 작성한다.

Document Requirements

1. Card 객체에 대한 정의

• field
• 데이터 type
• 사용 예

2. 메소드 명, HTTP Method, API URI

메소드 명이란
각 동작을 잘 설명할 수 있도록 요약한 단어를 의미한다.
서버에서 컨트롤러 이름으로 쓰이거나 클라이언트에서 API 호출을 간편하게 하기 위해 URI와 매핑하여 사용할 예정이다.
API 호출 메소드명과 컨트롤러명은 동일하게 사용해서 혼돈이 없게 한다.

3. 각 동작에 대한 세부 설명

• 개요
• Request 날리는 법 (HTTP method, URI)
• Path/Query Parameter
• Request body
• Response body
• Request / Response의 JSON 예시
• Request / Response에서 각 Field 설명 (Field 명, data type, 설명)

목적

사용자 경험(UX) 향상.
SPA로 구현했기 때문에 현재는 페이지 이동이 너무 갑작스러워보인다. 의도적으로 약간의 지연을 주면 좋을 것 같다.
페이지가 전환될 때 사용자가 자연스러움을 느낄 수 있도록 페이지 전환 애니메이션을 부여한다.

Tasks

• framer motion 라이브러리 사용법 알아보기
• 라이브러리 설치
• 라우터에 적용한다.

목적

카드 에디터 화면을 마크업하고 구성요소를 컴포넌트화한다.
카드 편집 미리보기의 핵심 기능을 붙인다.

Tasks

• 화면 구성요소를 컴포넌트화한다. 버튼 등의 컴포넌트들은 props에 따라 재사용할 수 있도록 만든다.
• 카드 뒤집기 기능을 만든다.
• 입력한 카드 정보가 미리보기에 반영되게 한다.
• 선택한 카드 배경색상 및 텍스트 색상이 화면에 반영되게 한다.

목적

카드 에디터 화면에서 뒤로가기를 누르면 현재 저장사항을 모두 잃을 수 있는데 돌아가겠냐고 확인하는 Confirm 창을 띄운다.

Tasks

• 방법을 조사해서 정리한다.
• 뒤로가기 방지
• 창 닫기, 새로고침 방지
• 페이지 이동 방지

목적

• API를 사용할 수 있도록 환경 설정을 하고, 잘 연결되는지 테스트한다.

Tasks

• axios 인스턴스 설정
• CORS 설정
• axios로 CRUD 요청하는 메소드 모아놓는 클래스 생성
• 간단하게 get으로 연결테스트 해보기

목적

카드 수정 페이지를 만들고 저장된 카드 정보를 불러와 화면에 보여준다. 카드 수정 페이지는 기존 카드 생성 페이지를 재사용한다.

Tasks

• 카드 수정 페이지를 만든다.
• 카드 정보를 API에서 GET해서 화면에 보여준다.

문제 설명

• 이미지 파일 선택 -> 단색/그라디언트 배경을 선택 -> 다시 이미지 파일 선택을 하면 file input 부분에 onChange가 발생하지 않아서 카드 미리보기에 선택한 이미지가 보이지 않는 문제가 발생한다.

+) 원인은 file input의 value가 초기화되지 않았기 때문에 onChange로 감지되지 않는 것이었다. 이것도 해결하고 state의 file 값까지 비우면 더 좋다.

할 일

• file input 두 개(앞/뒷면 용)에 ref를 단다.
• input file값 초기화 함수를 작성한다. ref.current.value = 0
• 배경색 혹은 그라디언트를 선택하는 로직에서 파일값 초기화 함수를 실행하고 state의 file 값도 초기화한다.

목적

카드 GET API와 화면을 연동해서 카드의 정보를 조회할 수 있게 하기.

Tasks

• client에 있는 CardApi 클래스에 id로 카드 정보를 GET 해오는 메소드 작성
• useEffect로 카드 정보를 불러와서 화면에 보여주기.

목적

카드 배경으로는 어떤 옵션을 골랐는지, 폰트 색은 무엇을 골랐는지 사용자가 알 수 있게 표시해주는 것이 목적이다.
선택된 칩은 회색 오퍼시티가 옅게 깔리고 체크 아이콘이 가운데에 떠서 선택된 것임을 알 수 있게 한다.

목적

• API로부터 카드 정보를 불러와 앨범에 차례대로 보이게 하고, 다음 페이지 버튼을 누르면 일정 페이지마다 다음 데이터를 불러온다.

Tasks

• API에서 카드 정보들을 GET 해온다.
• 데이터를 split해서 페이지별로 보기 편하도록 데이터를 가공한다.
• location(현재 위치)이 일정 숫자가 되고 이미 불러진 데이터가 없다면 새로 데이터를 불러와서 렌더링해준다.
• z-index 오류를 해결한다.

문제 분석

• Outlet을 사용해 BookPage 위에 카드 상세페이지를 띄웠기 때문에 navigate(’/’)으로 이전 페이지인 BookPage로 이동하면 새로고침이 되지 않아서 삭제된 카드 정보가 남아있다. 그래서 그것을 클릭하면 존재하지 않는 카드를 클릭했기 때문에 404 에러가 뜨게 된다.
• 따라서 BookPage와 카드 상세페이지가 cardList라는 같은 state를 공유하게 하고, 카드를 삭제한다면 cardList에서도 데이터를 삭제해야 한다.

Tasks

• cardList와 paperList 정보를 바탕으로 전체 Paper에 카드를 다시 분배하는 함수를 작성한다.
• Outlet에서 카드 정보와 페이지 상태를 조작할 수 있도록 넘겨줄 handler 함수를 작성한다.
  • id를 바탕으로 cardList에서 특정 카드를 찾아 제거한다.
  • 페이지에 카드 재분배하는 함수를 호출해 paperList state를 다시 설정한다.

목적

• Book의 카드를 클릭하면 URL 경로가 /cards/:id 형식으로 변하면서 카드 상세정보를 담은 모달창이 뜨게 한다.
• Book의 카드를 누르면 뒤의 배경 맥락은 그대로 유지하면서 새로 모달이 뜨게 하고, 만약 URL로 직접 접근한다면 Book을 보여주는 초기화면을 띄우고, 그 위에 모달창을 렌더링한다.

Tasks

• React-router-dom의 중첩라우팅과 Outlet을 이용해, 메인화면의 아래에 모달 역할을 할 카드 상세페이지를 위치시키고, /cards/:id path를 부여한다.
• Book의 CardUI에 카드 상세페이지로 갈 수 있게 <Link/>를 연결한다.
• 카드 상세페이지에 dimmed와 카드 컴포넌트, 버튼 컴포넌트를 배치하고 스타일링한다.

목적

• 기존에는 이미지가 없는 것을 image: {filename: ''}와 같이 빈 문자열로 표현했었다. 새로 바뀐 API 문서에 따라 이미지가 없는 카드는 image 프로퍼티가 없는 것으로 표현하고 있는데, 새로 바뀐 규정에 따라 update API 로직을 고치자.
• 그리고 그 외에 위의 사항으로부터 발생하는 자잘한 에러를 고친다.

Tasks

• CardApi.update 함수를 작성한다.
• submit 버튼에 update 요청을 바인딩한다.
• 서버에서 발생하는 에러를 점검한다.
• 에러를 고친다.
• 이미지가 원래 있었는지, 수정할 때 이미지를 첨부했는지 여부에 따라 잘 작동하는가 다음 표를 채우며 테스트한다.

원래/나중	(X, X)	(X, O)	(O, X)	(O, O)
(X, X)
(X, O)
(O, X)
(O, O)

목적

책을 넘길 때 마지막 페이지에서는 더 이상 못 넘기도록 총 페이지 수를 계산해야 한다. 이를 위해 카드 목록 GET 요청을 보내면 서버에 존재하는 카드의 총 개수를 X-Total-Count라는 헤더로 보내주도록 한다.

Tasks

• 디렉토리에 존재하는 카드의 총 개수 세는 함수 만들기
• X-Total-Count 헤더에 카드의 총 개수를 실어 보낸다.

목적

• 카드 삭제 확인 모달창에서 '삭제'를 누르면 카드 삭제 API에 요청을 보낸다.

Tasks

• CardApi 클래스에 카드 삭제 서비스 메소드를 작성한다.
• 삭제 버튼에 onClick으로 카드 삭제 메소드를 붙인다.

목적

• 카드 상세보기 페이지에서 다운로드 버튼을 누르면 카드의 앞 뒷면을 이미지 파일로 변환해서 다운받을 수 있는 기능을 추가한다.

Tasks

• html2canvas 사용법 찾아서 정리
• 패키지 다운받기
• 화면 캡쳐하는 코드 작성
• 생성한 이미지 다운받는 코드 작성

목적

모달창의 바깥을 클릭하면 창이 닫히고 이전 페이지인 BookPage로 돌아간다.

Tasks

• 클릭한 영역이 모달창의 바깥인지 아닌지 검사하는 useOnClickOutside hook을 만든다.
  1. useOnClickOutside hook은 두 개의 인자를 받아야 한다. 첫번째 인자로는 modalRef를 받고 , 두 번째 인자로는 modal ref가 아닌 곳을 클릭했을 때 실행할 함수(handler)를 받는다.
  2. hook의 안쪽에서는 클릭 이벤트가 발생했을 때 실행할 리스너 함수를 만든다. 리스너 함수는 현재 클릭한 곳(event.target)이 ref.current에 포함되는지 검사하고, 포함되지 않는다면 바깥쪽인 거니까 handler 함수를 실행한다.
  3. useEffect 안에서 document에 클릭 이벤트로 아까 만든 리스너 함수를 등록한다. 언마운트 될 때에는 반드시 이벤트를 remove해줘야 이벤트가 계속 document에 남아있지 않는다.
  4. 모달창 페이지에서 hook을 실행한다.

목적

• 카드 위에 띈 회전 아이콘을 클릭하면 카드가 뒤집히게 한다.

Tasks

• 카드 회전 아이콘을 position: absolute로 카드 컴포넌트 중앙에 위치시킨다.
• 카드가 현재 앞면인지 뒷면인지 구분하기 위한 state를 만들고, 회전 아이콘에 onClick 이벤트를 붙여 토글되게 한다.
• 카드 영역 위에 마우스가 들어오면 버튼이 보이고, 마우스가 나가면 버튼이 보이지 않게 한다.

• express와 multer를 설치한다.
• /card를 get, post, put, delete하는 라우터를 생성한다.
• 이미지 파일과 json 정보를 어떻게 저장할 지 고안한다.
• json 스키마 모델을 작성한다.
• 컨트롤러 함수를 작성한다.
• POSTMAN으로 요청을 날려본다.

프론트를 만들 때 도움이 되는 정도로 토대만 만들면 되기 때문에 완벽하지 않아도 된다.
프론트를 만들며 조금씩 기능을 수정할 것이다.
예외처리와 테스트는 나중에 API 문서를 만들면서 할 예정