1. 구현하기

진행 상황

• 질문 목록에 질문 데이터 렌더링
• 질문 작성시 질문 목록에 올라감
• 질문 하나의 답변 렌더링

진행 예정

• 답변 작성 기능 : 작성하면 해당 질문의 페이지에 답변 렌더링
• 질문 수정, 삭제
• 답변 수정, 삭제

---

2. TIL

2-1. eslint jests/globals 에러

npm start 할 때마다 에러 발생

npm start 할 때마다 뜨고 처음엔 방법을 못찾아서 다시 껐다가 start 하면 잘되길래 이 방법을 사용하다가 너무 비효율적이기도 해서 결국 해결 방법을 다시 찾아보기로 했다.

해결 방법

해결 방법은 생각보다 간단했는데 .eslintrc.json 파일에 설정 하나만 추가해주니 해결됐다!

  "extends": [
    "plugin:jest/recommended"
  ],

2-2. Parser 적용 에러

첫번째 인자는 반드시 문자열

get으로 id의 질문 데이터를 받아서 화면에 보이게끔 하려고 하는데, 그 중 content는 텍스트 에디터로 입력해서 화면에 그대로 html 태그까지 나오게 된다.
그래서 html react parser로 html이 적용된 채 나오게끔 하려고 content에 해당하는 데이터에 parser를 적용했는데 아래와 같은 에러가 뜨면서 하얀 화면만 나왔다.

시도한 방법

처음엔 단순히 문자열이니 빈 문자열을 넣으면 될 줄 알고 아래와 같이 state에 빈 배열 대신 빈 문자열을 주었지만 여전히 같은 에러 메시지가 떴다.
빈 배열일 때는 값이 undefined 였고, 빈 문자열일 때는 값이 공백이 출력되었다.
data.content 뿐만이 아니라 에러 때문에 data 자체에 모든 값이 안들어가는 것 같이 보였다.

const { id } = useParams();
const [data, setData] = useState('');
//const [data, setData] = useState([]);

const fetchData = async () => {
  const res = await axios.get(`http://localhost:3001/questions/${id}`);
  setData(res.data);
};

useEffect(() => {
  fetchData();
}, []);

console.log(Parser(data.content));

해결 방법

parser가 적용되는 data.content 부분만이 문제라고 생각하여 그 부분만 값이 없을 때 빈 문자열을 주면 어떨까라고 생각이 들었다.
그래서 data 객체의 키를 content 값을 빈 문자열을 주니 에러는 사라졌다!!

const [data, setData] = useState({ content: "" });

2-3. 렌더링 에러

Cannot read undefined

하나의 질문에 속한 댓글을 map으로 렌더링시키려고 했는데 undefined라는 속성을 읽을 수 없다는 에러 메시지가 떴다.
아무래도 아까의 parser 에러와 연관이 있는 것 같았다. 왜냐하면 parser도 undefined 거나 공백이면 parser를 적용할 수 없다고 떴었기 때문이다.

시도한 방법

data가 있을 때만 map으로 렌더링 하고, data가 없으면 렌더링을 하지 않게 작성했지만 해결되지 않았다. 그래서 구글링을 해보니 생각보다 문제는 간단했다!

{data && data.comments.map((comment) => {
    return <Answer comment={comment} key={comment.id} />;
  });
}

해결 방법

map은 배열 메소드이므로, 배열의 형태여야지 map을 사용할 수 있다. 하지만 나는 undefined에만 집중한 나머지 data 객체 그 자체가 아닌 내가 렌더링할 data.comments라는 배열이 undefined인지를 체크 했어야 했다!

{
  data.comments && data.comments.map((comment) => {
      return <Answer comment={comment} key={comment.id} />;
  });
}