MongDB관련 질문입니다!

[Dexter]

실험차원에서 리액트에서 Axios로 App.js에 불러와서 자료 갖다 써보고 있습니다.

리액트 떠있는 브라우저를 새로고침 하지 않고 파일들 수정하는 거는 전혀 문제 없이 수정 및 변경이 되는데 새로고침만 하면 에러가 뜹니다

map 돌린곳을 주석처리하고 저장하면 원상복귀 되는데 다시 주석해제 하면 잘만 돌아갑니다.

그리고 브라우저 새로고침하면 또 에러나구요...

이제 본격적으로 데이터베이스 돌려보려고 하는데 이렇게 에러나면 나중에 엄청 귀찮지 않을까 해서 문의드려봅니다!

혹시 이런 정보들을  index.js에 불러온다음에 redux store에 담으면 될까 궁금하기도 합니다! 

이건 무슨 현상이라고 하고 어떻게 해결할 수 있을까요...?

[codingapple]

저건 그냥 food 라는 변수가 array자료가 아니라는 소리같습니다 array인지 확인합시다 

[Dexter]

위의 사진들과 같이 Array가 맞는데...

주석처리하고 돌리면 에러 사라지고 Array라고 뱉어줍니다.

그리고 새로고침 후 주석해제 하고 저장 눌러주면 map 잘 돌아갑니다.

 

그러다가 브라우저에서 새로고침 누르면... 다시 이렇게 반복되더라구요... 오늘 리액트 업글해라고 해서 18버전으로 업글했는데.... 그래서 그런걸까요...??

[codingapple]

food라는 변수안에 데이터가 없으면 html 보여주지 마세요~

라고 if문으로 html부분을 조건문처리하면 될듯합니다 

[Dexter]

네 안그래도 그렇게 해결하고 댓글 달러 왔습니다

변수 && 변수.map() 이렇게 돌리니 바로 해결되네요! 감사합니다!

[Dexter]

리액트 프로젝트 index.js 에서 provider를 통해 데이터들을 쏴주는데

index.js에 Axios.get으로  

Axios.get('http://localhost:8080/read').then((res) => {res.data})

이렇게 해서 데이터를 가져오는 방법이 있을까요?

App.js 에서는 useEffect, useState를 써서 간단하게 되는데 그러면 redux 사용이 어려운 것 같더라구요. 

[codingapple]

거기서도 import axios from 'axios' 하면 쓸 수 있습니다

그런데 컴포넌트에서 ajax 요청을 담당하고

redux에는 변경사항만 반영하는 식으로 코드짜는게 더 나을 수도 있습니다 

[Dexter]

App 안에다가 redux를 깔아서 뿌리는 방법과 말씀하신데로 컴포넌트에서 자료 조금씩 가져오는 방법으로 해결했습니다~ 감사합니다!

 

하나의 시련이 지나면 다음 시련이 오는 것 같네요...

이번에는 잘만 구동되던 리액트가 갑자기 wepack v5로 바뀌면서 polyfill 안해준다고 하면서 오류 27개가 떴습니다.. 적혀 있는데로 하나씩 해결해나가면... 되는 걸까요? 이렇게 프로젝트 4개째 다시 만들어보고 있긴 한데... 처음엔 잘되다가 갑자기 오류가 뜨기 시작합니다...

[codingapple]

워닝메세지는 기능잘되면 냅둬도 됩니다

싫으면 새로 프로젝트 만들어서 옮기거나 그러면 됩니다 

[글쓴이]

글