pre-project 8일차 (22.08.29. 질문 상세페이지 구현)

✅ 오늘한 일

질문 상세 페이지 구현

먼저 틀을 잡는게 꽤나 고생을 했었다. Navbar와 크기가 비슷하게 어우러져야 했던게 가장 큰 이유였다.

해당 글을 클릭했을 때 주소값에 질문의 ID를 Param에 담아서 전달해 오면 Param에 담긴 ID로 get요청을 하여 ID에 해당하는 질문에 대한 정보를 나타내는 것으로 시작했다. 아직 없는 데이터들은 하드코딩을 하여 일반적인 텍스트를 담아두었다. Vote 버튼, history, 뒤로가기 등이 있다.

오른쪽 사이드바의 경우 메인에서 나와있는 팀원이 만들어둔 메인 사이드바를 가져와서  배치시켰다. 이유는 CSS 부분을 조금적게 하고 기능적인 부분에 조금더 비중을 두기 위해서였다. 프리프로젝트인 만큼 디자인 쪽 보다는 백엔드와의 통신, 기능 부분을 자세히 해보는 것이 중요하다고 생각했기 때문이다.

그리고.... 질문의 내용을 보여주려 할 때, 일반적으로 div태그 안에 내용을 전달해주면 될 것이라는 안일한 생각을 했다. 그 결과 질문 작성 페이지에서 줄바꿈이 일어난 시점을 제대로 화면에 출력해주지 못하는 일이 있었다. 검색을 통해 pre 태그라는 것을 사용한다면 띄어쓰기, 줄바꿈 등의 모든 것을 반영하여 화면에 출력해준다는 사실을 알게되어 적용해서 해결할 수 있었다.🥳 확실히 코딩을 할 때 궁금한 것은 여러가지 사이트를 찾아보면서 해결하는 것이 재미있다!!!😀

 

질문 링크 공유하기 구현

질문의 링크를 공유하고 싶다는 생각이 들어서 찾아보던중 navigator.clipboard.writeText 라는 것을 발견하게 되었고 사용했더니 해당 질문 페이지의 링크를 클립보드에 저장해주었고 실제로 적용이 되었다. (로컬에서만 적용되고 주소가 http로 바뀌니 보안성 때문에 복사되지 않는 이슈 발생)

navigator.clipboard
    .writeText(`http://localhost:3000/questions/${questionId}`)
    // 링크 복사에 성공하게 될 경우 alert 창 출력
    .then(() => {
        window.alert("Link copy complete!");
  });

 

질문 삭제 구현

질문 수정하기를 먼저 구현하려 했지만 수정하기 위해선 하나의 페이지가 더 필요하다는 것을 알게되어서 가장 쉽게 할 수 있는 삭제하기를 먼저 구현했다. 나는 CRUD 중 가장 수운 부분은 삭제하기라고 생각이 든다. 실제 업무에서는 데이터는 곧 회사의 자산이기 때문에 삭제대신 글을 숨기는 식으로 진행이 된다고 알고 있지만 프리 프로젝트인 만큼 삭제 그 자체를 구현하기로 했다.

실제 오버플로우에서는 삭제전에 질문을 복구할 수 있도록 휴지통 같은 개념의 스택에 담아 두는 것으로 알고 있다.

질문 상세 페이지 구현

 

답변 보기 틀 구현

질문 보기와 같은 구조로 이루어져 있다는 것이 파악되어 질문 보기 컴포넌트를 재사용하여 빠르고 간단하게 구현할 수 있었다. props로 값만 따로 보내주면 된다고 판단했기 때문이다.

 

답변 작성 틀 구현

답변을 작성하면 해당 페이지가 재랜더 되면서 작성된 답변이 실시간으로 올라오는 것이 되어야 했다. 이것에 꽤나 애를 먹었다. 너무 빠른 속도로 재랜더링이 되면 해당 답변이 올라가기도 전에 재랜덩이 되어 실시간으로 반영이 되지 않았던 것이다.

그래서 아래와 같은 코드로 답변이 정상적으로 올라간다면 then에서 재랜더링이 작동이 되도록하니 바로 해결할 수 있었다. 간단한 이유였는데 너무 파악을 늦게한 것 같다. 

axios를 사용할때 비동기적으로 async, await을 사용해야하는데 이것을 사용하지 않는 것도 문제라고 생각했다.....

  axios
    .post(
      `${process.env.REACT_APP_API_URI}/v1/answers`,
      // 멤버 아이디 추가
      { ...answerPost, memberId: memberid, questionId: Number(`${questionId}`) },
      {
        headers: headers,
      }
    )
    .then((res) => window.location.reload())
    .catch((err) => console.log(err));

답변 상세보기, 작성 틀 구현

📌 해야할 일

• 질문 수정 페이지 구현
• 답변 수정 페이지 구현
• 백엔드와 통신하기