Pre-Project 7일차 회고

오늘 진행한 일

• React Query와 json 서버로 api 통신 연습
• 질문 리스트 json 서버에서 받아와 렌더링
• 질문 작성 페이지 로직 수정 (미완료)

내일 진행해야할 일

• 질문 작성 페이지 로직 완성 (마크다운 에디터)
• 질문 작성 기능구현 (React Query & json 서버)

오늘 어려웠던 점 & 회고

오늘 React Query를 get요청으로 처음 사용할 때 공식문서의 사용법대로 로직을 구현하고 data에 콘솔을 찍어봤지만 undefined가 반환돼서 조금 당황했던 기억이 있습니다.
처음엔 QueryClientProvider을 App.js내에서 감싼게 문제가 되나 싶어 index.js에서 App 컴포넌트를 감싸줬습니다. 하지만 에러는 사라지지 않았습니다.

오타 문제인가 싶어 계속 찾아 봤지만 오타 문제 또한 아니었습니다.
그래서 fetch도 다시 작성해보고 많은 고민을 했습니다.
몇 시간을 고민하다 먼저 데이터 받아오는 걸 성공한 프로젝트 팀원에게 물어봤고
같이 천천히 코드를 분석하기 시작했습니다.

const { isLoding, error, data } = useQuery("questionData", () =>
    fetch("http://localhost:3001/data").then((res) => res.json())
  );
//useQuery를 통해 get요청하는 로직

{data?.map((el) => {
              return (
                <QuestionsList key={el.questionId}>
                  <LikesAnswers>
                    <div className="likes">likes: {el.likes}</div>
                    <div className="answer">answers: {el.answer}</div>
                  </LikesAnswers>
                  <QuestionSection>
                    <StyledUserLink to={`/questions/${el.questionId}`}>
                      <QuestionTitle>{el.title}</QuestionTitle>
                    </StyledUserLink>
                    <QuestionContent>{el.text}</QuestionContent>
                    <AuthorTags>
                      <Tags />
                      <div className="author">{el.auther}</div>
                    </AuthorTags>
                  </QuestionSection>
                </QuestionsList>
              );
            })}

처음 로직엔 data 뒤에 ? 가 없었습니다.
그래서 data를 fetch 해오기 전에 언디파인드를 map하기 때문에 에러메시지가 뜨는 것이었습니다.

그리고 질문 작성페이지에서 마크다운 에디터를 form 태그로 묶고 onSubmit으로 작성된 데이터를 POST 메서드로 서버에 전송하는 로직을 구현하려고 했습니다.
그런데 마크다운 에디터를 form 태그에 넣자 에디터가 사라지는 문제가 발생했습니다.
내일 이러한 부분들을 더 학습해서 기능구현까지 진행할 예정입니다.