pre_project_027team

진행

플로우 차트

사용자 요구사항 정의서

내가 맡은 역할

=> 이번 기회에 CRUD를 제대로 배우고 가고 싶어서, 어렵게 생각하는 메인 기능을 맡게 됐다.
=> 게시글 CRUD, 댓글 CRUD, 답변 CRUD

백엔드 분들이 제공해준 api문서

http://ec2-15-164-211-228.ap-northeast-2.compute.amazonaws.com:8080/docs/index.html

배포

http://pre-project-group-27.s3-website.ap-northeast-2.amazonaws.com/

깃헙 소스코드

팀 주소: https://github.com/codestates-seb/seb41_pre_027/tree/dev
개인 주소: https://github.com/FordangIT/seb41_pre_027

회고

잘한점

• React Custom Hooks를 제대로 활용해서 CRUD를 만들었다.
  useFetch를 이용해 데이터를 get 했고,
  useInput을 이용해 useState로 설정한 value, setValue, onChange 코드들을 마음껏 재활용했고,
  api문서화를 통해 fetch가 필요한 페이지 코드가 간결해졌다. 유지보수가 무척 쉬웠다.
• 마인드 컨트롤을 잘했다.
  마음이 너무 급해져서 집중이 안될 때는,
  마음이 풀어져서 집중이 안될 때는,
• 에러를 마주해도, 결국 풀어냈다.
  crud를 직접 구현해보는 것이 중요한 이유,,, 난 crud의 상태 값들이 다 연결되어 있어야 하는 줄알았다. 이 채팅을 기점으로 확 이해도가 높아졌다.
  

아쉬운 점

• 리덕스 툴킷으로 상태를 관리하고 싶어서, 리덕스 툴킷으로 게시판을 구현한 블로그를 따라 5일을 투자했는데, 2년전꺼라 바뀐 버전들이 너무 많아 진행이 더뎌졌다. 급한 마음에 어떻게 해야할지 갈피를 못잡다가, 결심하고 fetch를 이용해서 crud기능을 구현했다.
• 내가 맡은 역할을 수행하기에도 벅찼기 때문에 회원가입, 토큰관련 문제, 태그, 추천, proxy, cors에러, 배포는 신경을 아예 못썼다.
• 백엔드 분들이 무슨 말을 하는지 이해가 안갔다. ngrok이나, ec2등,,,
• 깃이 너무 어렵다.

도전하고 싶은 부분

• 토큰, 쿠키, Authorization, 회원가입, api 이용해서 쉽게 로그인하는 기능 => 유어클래스 클론 코드에서 추가해서 해보자.
• 추천/ 비추천 기능 => 스택오버플로우에서 추가해서 구현해보자.

공부해야 하는 부분

• 깃
• 서버 공부
• redux 공부

겪은 문제들 / 깨달은 것들

• fetchCreate, fetchDelete, fetchPatch만 있고, 데이터를 불러오는 것은 useFetch로 작성한 코드를 불러오면 되는 것이였다.

• 사용자 권한이 필요한 삭제/ 수정 기능은 fetch, headers에 Authrization에 토큰 값을 넣어줘야 한다.

• 내가 구현에 성공했는데, 성공한 줄 모르고 나아중에 알게돼서 다시 몇시간동안 코드를 수정한다.
  => 내가 코드를 고쳤다면 서버를 끄고, 다시 npm run start로 구현이 됐는지 확인을 해야한다.
  => 로그아웃하고 로그인을 다시 해서 만료된 토큰 때문인지 확인도 해봤어야 한다.

• useInput을 이용해 데이터의 상태를 관리할 때 fetch에 들어가는 데이터는 value가, input에 값으로 들어가는것은 {...bindSetValue}이 값이다!!!

• 댓글이나, 답변의 경우에는 useParams()를 통해 id 값을 가져오는 걸로는 해당 댓글과 답변을 가져올 수 없다는 것을 깨달았다. 그래서 각각 commentId나 answerId를 가져와야 했는데, 이때 props drilling으로는 엄청난 한계를 깨달았다. 내가 작성한 코드지만 어지러웠다. 그래서 redux를 이용해서 구현했더니,,, 너무나 편리해졌다.

• 코드 상 멀리 떨어져 있는 title의 input과 content의 toast ui를 버튼 하나로 post하는것이 어렵게 느껴졌으나 form 태그로 해결했다.

• 댓글 수정 페이지를 따로 만들기 싫어서 => 모달창으로 해결본건 참 잘했다.

• toast ui에서 적용한 마크다운이 실제 view에선 적용이 안됐다. => <Viewr initialState/>를 나타내는 페이지에 작성해준다.
  뷰 페이지에 import { Viewer } from '@toast-ui/react-editor'추가
  [Viewer 컴포넌트에 제이슨 그대로 전달해주니 잘보이네요 ~
  html 포맷으로 내보내는건 리스트에 보여지는 텍스트를 정규식 검색해서 해결
  그러면 write 페이지에서 데이터 내보낼 때는 html 포맷으로 줘야 정규식을 안고쳐도 될 것 같습니다getMarkDown() (x) / getHTML() (o) 근데 이거 마크다운이나 위지윅으로 작성하면 잘 되기도 하고 fetch 에러도 나오고 해서 이미지가 원인이 아니고 토스트에서 보내는 http요청 자체에 어떤 버그가 있을 수도 있겠네요 //초이님 말씀]

• 내가 해본 유효성 검사는 required 속성을 추가해준 것이다.

• 상태 값을 잘 받아왔는지 console.log로 해보는 것보다 alert의 방식이 더 좋았다.

• 환경변수 처리한 api url 코드를 푸시해서, 환경변수 파일 만들고 클라이언트 개발서버를 껐다 켜줘야 된다.

undefined/api 프록시의 문제였다. 깃 pull을 받아오면서 gitignore처리된 환경변수들이 안들어가서 에러가 생긴 것이다.
.env.development랑 .env.production 파일 넣어주고 코드도 작성해준다.

• .env.development
  REACT_APP_DB_HOST=""
• .env.production
  REACT_APP_DB_HOST="http://ec2-15-164-211-228.ap-northeast-2.compute.amazonaws.com:8080"
• git merge 메세지 뜨는게 난 vim이 아니라 nano로 뜨는 거였다. vim을 사용하는게 맞는 듯?
• AnswerDetail.js에 답변 개수 받아오는 코드가
  fetch 받기 전에는 값이 null이라 .length 메소드를 사용할 수 없어서 페이지가 안 열리는 버그가 있었다. 밑의 코드로 초이님께서 해결

<div className="answer__length">
   {getanswer ? getanswer.length : 0} Answer
</div>

깃이 pull 완료했다는데, 내 로컬에 코드들이 안들어올 때 최후의 방법,,,

• button type=submit (따로 설정 안하면 default값)이어서 버튼 누르면 submit이 될텐데
  submit을 하면 페이지 리로딩이 되어서 onSubmit에 연결된 이벤트핸들러에는 event.preventDefault() 작성해서 리로딩하는거 막아야한다.
• 셋타임아웃 코드 빼고 확인해봤더니 150밀리초 언저리로 데이터 들어오는 것 같아요. 셋타임아웃 시간값을 150~200밀리초 정도로만 변경해주셔도 괜찮을 것 같다.
  
• headers에 content-type이랑 authorization도 안보내줘도 된다. 쿠키에 저장돼있어서 자동으로 간다.
• [gh-pages로 테스트 해보는 것은 중단하겠습니다.
  이 과정에서 로컬 개발서버와 달리 proxy 설정이 배포환경에서 적용되지 않는 것을 알게 되었는데요
  환경변수를 이용해서 개발서버에서는 proxy를 사용한 서버요청을, 배포환경에서는 ec2서버 주소로 직접 http 요청을 보낼 수 있도록 처리해주면 된다고 합니다.// 초이님 말씀]

그냥 올려두고 가고 싶은 것들

• 로컬스토리지였다가 쿠키로 변경해서 이런 코드들이 필요했음

import { Cookies } from 'react-cookie'; 
const cookies = new Cookies();
const Authorization = cookies.get('Authorization');

[요청 헤더]
Authorization : Bearer (accessToken)
[요청 바디]
title: 제목
text: 내용