[WEB-#90] 공통 컴포넌트 요소 common 폴더로 분리, 이슈 제목 수정 디자인 및 구현 완료

[rnjshippo]

이번 PR에 포함된 내용은 아니지만, 구현한 내용을 정리해봤습니다.

배포 서버에 변동사항을 쉽게 반영하려다 보니 그냥 바로바로 머지하는 바람에 앞선 커밋들은 모두 머지가 되었네요 ㅠ

---

1. components/common 폴더 생성

• 페이지에 종속적이지 않은 공통 요소들을 common 폴더로 분리했습니다. import하신 거랑은 충돌하지 않게끔 잘 export 처리했습니다. 앞으로 공통요소는 여기로 분리하면 좋을 듯해요.

2. componentWillUnmount 호출 상황에서 axios 요청 취소 처리

• 이미 사라진 컴포넌트에서 요청을 수신할 수 없고, 상태도 변경하면 안됩니다. 그래서 컴포넌트가 사라지는 상황에서 미리 요청을 취소하도록 구현했습니다. 취소하지 않으면 메모리 누수가 발생한다고 해요.

3. useEffect의 첫 번째 매개변수 관련

• 원래 useEffect에서 첫 번째 매개변수로 들어가는 함수는 async가 되면 에러가 떴는데, react 17버전이라 그런지 웹팩 설정을 잘못한건지 에러가 안뜨네요.
  • 하지만, useEffect 첫 번째 함수의 반환값은 componentWillUnmount 상황에서 실행할 함수를 반환해야 하기에, async 로직을 분리하는 게 좋을 것 같아요. async을 첫 번째 매개변수로 주면 리턴값이 Promise가 되버리기 때문입니다.
• https://www.robinwieruch.de/react-hooks-fetch-data 여기에 나온 것 중에 useEffect 관련 부분을 보시면 좋을 듯 해요.

4. backend 관련 대폭 수정

• iOS/프론트 통신관련해서 계속 작업하다보니 model쪽 코드가 이곳저곳 바뀌었습니다.

5. 이슈 상세페이지에서 사이드 바 기능 구현

• 해당 페이지에 맞는 이벤트 핸들러를 주입해서 구현완료했습니다.

그 외에 이것저것 많이 해놨습니다.

---

남은 할일

• comment edit 모드

• comment 등록 기능

• --> 얘네 두개는 Issue생성 페이지에서 썼던거를 재활용하면 쉽게 처리할 수 있을 것 같아요. 내일 후딱 끝내보겠습니다.

• mark up 모드로 변환

  • marked 모듈이 있으니.. 금방 되기를 바랄뿐..