preproject ~ 04/19

1. 오늘 한 거

1-1. Toast UI를 이용한 Editor, Viewer 적용

Viewer 적용하여 질문의 body를 더 자세히 볼 수 있다.

Editor를 이용해 마크다운, wysiwyg 에디터를 적용

• https://ui.toast.com/
• 처음에 질문의 body는 dangerouslySetInnerHTML를 이용하여 표시하였다. 
• 그런데 답변 등록과 질문 등록의 input에 대해 찾아보니 toast ui라는 것을 알게 되었다.
• 이용하기도 간단했고 적용하는데 시간도 별로 안 결렸기에 너무 좋았다.
• Editor의 경우, 입력 값은 useRef를 이용하여 editorRef.current.getInstance().getHTML()로 입력 값을 얻을 수 있다.
• html형식으로 텍스트를 가져오려면, getHTML()
• 마크다운 형식으로 텍스트를 가져오려면, getMarkdown()

 

1-2. Page Buttons

1번 페이지

2번 페이지

• 질문의 개수에 맞는 페이지 버튼을 렌더링하도록 하였다.
• 현재 더미 데이터에 질문이 19개이기 때문에, 10개당 한 페이지로 해서 총 두 페이지가 나왔다.
• 스택오버플로우 홈페이지에는 우측에 15페이지, 30페이지, 50페이지 버튼도 있는데, 이는 질문의 개수가 각각의 조건을 충족하면 보이도록 하였다.
• 현재 질문은 19개이기 때문에 저 3개의 버튼은 보이지 않는다.

 

1-3. 현재 질문 id에 맞는 질문 가져오기

• 위의 두 질문은 질문 id가 다르다.
• 다른 팀원 분이 모든 질문 (더미) 데이터를 가져와주는 함수를 작성해주셨는데, 이를 조금 변경해서 find 함수를 이용해 id에 맞는 질문을 반환하는 함수를 만들었다.
• 그리고 이 함수를 이용해서 질문 상세 페이지를 구현하였다.

 

2. 어려웠던 것

• 1-3의 질문 id에 따른 질문을 보여주는 페이지에서 새로고침을 하지 않으면 질문 제목, 내용 등이 바뀌지 않는 현상이 있다. 새로고침하면 바뀐다. 이는 조만간 해결할 것이다.
• 전체적으로 다듬는 시간이었기에 위의 것을 제외한다면 특별히 어려웠던 것은 없다.