팀프로젝트 trouble shooting
오늘 오후부터 팀프로젝트 개발을 시작했다.
공공데이터 포털에서 api 를 받아오는데, 아무래도 유저가 확보된 데이터가 아니라서 그런지 인증키가 로컬마다 다르게 적용된다. -> 기능구현 테스트도 계속 오락가락.. undefined 가 뜨는 이유가 코드때문인지 데이터때문인지 확인하려고 로그 찍는과정이 너무 빈번해서 개발 시작도 전에 벌써 좀 지쳤다.ㅜ
api key 값에 대한 오류는 밤에 발견한거라 내일 아침에 튜터님께 여쭤봐야할듯하다.
그래도 map 오류는 오늘 발견해서 정말 다행이다!
앞으로는 데이터 타입을 꼭!! 주의깊게 보고, 어떤 구조인지도 확실하게 정리한 후 개발 들어가기.!!
* CORS Error
- CORS는
Cross-Origin Resource Sharing의 줄임말로교차-출처 리소스 공유라고도 한다. - 즉, 다른 출처라고도 말할 수 있고 다른 출처이기 때문에 발생하는 에러라고도 할 수 있다.
- CORS는 한 도메인이 도메인 간의 요청을 가진 다른 도메인의 리소스에 액세스할 수 있게 해주는 보안 메커니즘으로 최신 브라우저에서 구현된 동일 출처 정책 때문에 등장하게 되었다.
❗리액트 앱의 주소와 공공데이터 API의 주소는 다르기때문에 브라우저의 cors 정책에 따라서 공공데이터를 가져오는 것이 허용되지 않는다.
💡 리액트 앱의 proxy를 사용해서 origin을 동일하게 해주면 공공데이터를 가져올 수 있다.
- package.json에
"proxy": "공공데이터 API 주소", 작성하기 - 엔드포인트를 작성하여 get 요청.
- 다른 추가방법🔗
- 해결된 모습
* 일관성 없는 Api key 값
Encoding key로 데이터 잘 받아오다가 중간에 갑자기 Decoding key로 바꿔야 데이터가 받아졌다. 팀장님께 여쭤보니 팀장님은 나랑 반대로 Decoding key로만 데이터가 받아와져서 작업하고 계셨다.
제주도 데이터인데, 제주시 / 서귀포 나뉜상태로 다른 데이터를 제공하는 것도 불안했는데, key 값도 이러니..ㅜ
배포하고난 후에는 어떻게 되는건지... 우선 try catch 로 인코딩, 디코딩 키에 대한 처리를 해놓긴 했다만, 불안정한 통신이 마음에 걸린다. 이부분은 백엔드쪽 같아서 데이터, 네트워크 요런부분의 지식을 튜터님께 여쭤봐야겠다.
* TypeError: .map is not a function
❗ 받아온 데이터를 그대로 .map 으로 돌리고 있었다.
💡Objects, {} in JavaScript does not have the method .map(). It's only for Arrays, [].
→ 오브젝트는 map()함수를 가지고있지 않아 사용할 수가 없다. 배열만 가능하다.
💡change data.map() to data.products.map() since products is an array which you can iterate upon.
→ data.map()으로 썼으면 data.product.map()으로 코드를 바꿔야한다. 왜냐면 product가 배열이므로 잘 반복될것이다.
→ json 데이터를 가져왔으니 전체목록(오브젝트)에서 개별 데이터(배열)로 한단계 더 들어가야 한다.
❗ 데이터가 들어오는 중에 .map 으로 뿌려도 undefined 에러 발생
-> List 컴포넌트가 렌더링 됐을때 data 가 받아와있지 않으면 당연히 data.map() 은 함수가 아니게 된다.
💡 jejuStores가 유효한 데이터인지 확인하는 조건걸기.
{jejuStores && jejuStores.item.map((store, index) => ( <div key={index}> <h3>{store.bsshNm}</h3> </div> ))}
- {jejuStores &&: 이 부분은 jejuStores 값이 null, undefined 또는 false 값이 아닌 경우에만 실행되도록 하는 조건문이다.
