variable error

[baaaam771]

[baaaam771]

type checking

string으로 인식식함 object로 변경해줘야함

[baaaam771]

mock server의 문제일수도도 있음

[suinj8]

저도 범기님이 하신방식이랑 똑같이 postman mock server 이용해서 공지사항 페이지 구현해봤습니다. 저는 post방식으로 받아왔는데 잘 받아와 지네요. 위에 오류는 어떤 오류인지 잘 이해가 가지 않습니다.

[baaaam771]

useState로 불러오는 것은 가능했지만

객체속 요소를 하나씩 보내주는 map을 사용할 때 에러 발생

에러 메세지의 주된 내용은 undefined type, undefined function

---

해결과정은 불러오는 과정 하나하나를 끊어서 테스트

1.useState에서 오류?

response.data를 useState 사용해서 member 변수에 넣을때 잘 입력되나 p태그를 통해 출력해봄

정상적으로 출력

2. type 오류

데이터가 잘 호출된 것은 확인했으니 member를 object로 잘 인식하는가 확인 console.log(typeof member);를 사용함

string으로 인식

3. type JSON으로 변환

내가 보낸 객체를 그냥 스트링으로 인식하길래 json으로 변환해서 넣어봤다 const obj = JSON.parse(member);을 사용함 결과는

Unexpected end of JSON input

이게 무슨 문제인가 찾아봤더니 syntax error일 확률이 큰 상황

4. Syntax error 해결

내가 처음에 입력했던 json data가 유효한 데이터인지 테스트 진행 https://jsonlint.com/ 링크에서 활용 확인해보니 마지막요소에 쉼표를 넣어 준것에 대해서 유효성 검사에서 error가 나왔다

before

[
  {
    "gray_subtitle": "원장",
    "title": "김원장",
    "subtitle": "공과대학 컴퓨터 공학부",
  },
  {
    "gray_subtitle": "연구부원장",
    "title": "박부원장",
    "subtitle": "공과대학 컴퓨터 공학부",
  },
  {
    "gray_subtitle": "기획부원장",
    "title": "이부원장",
    "subtitle": "공과대학 컴퓨터 공학부",
  },
]

after

[
  {
    "gray_subtitle": "원장",
    "title": "김원장",
    "subtitle": "공과대학 컴퓨터 공학부"
  },
  {
    "gray_subtitle": "연구부원장",
    "title": "박부원장",
    "subtitle": "공과대학 컴퓨터 공학부"
  },
  {
    "gray_subtitle": "기획부원장",
    "title": "이부원장",
    "subtitle": "공과대학 컴퓨터 공학부"
  }
]

유효성 검사를 통해 마지막 요소의 쉼표를 전부 제거함

그 결과 정상 작동

[LimEunSang]

와 오류 해결하고 해결 과정 정리한다고 엄청 고생하셨겠네요. 결과는 쉼표 단 하나 때문이었다니.. 같은 에러가 발생했을 때 범기님 노력 덕분에 빠르게 해결할 수 있을 거 같습니다. 감사합니다!