그랩님의 답변을 기다립니다/102강 전반적인 에러

안녕하세요! 혹시 github repo를 공유해주실 수 있으실까요~? 코드베이스를 확인해서 말씀드리는 게 빠를 것 같아서요!

[그랩님께]101강 안드로이드 에러들(Key prop)해결방법 궁금합니다.

key prop의 문제는 Array 형태로 렌더링을 하려고 할 때(products.map...) 해당 컴포넌트에 'key'라는 특성을 주입해줘야 한다는 건데요. 이건 React에서 기본적으로 지켜야 하는 규칙 중 하나입니다. 현재 아래 코드에서 key를 추가해주면 해결될 것 같습니다~as-is { products.map((product, index)=>{ return (Viewstyle={styles.productCard}>to-be { products.map((product, index)=>{ return (Viewstyle={styles.productCard} key={product.id}>config/constants 파일에 API_URL 변수의 값이 현재 어떻게 되어있나요? ngrok의 경우 재실행할 때마다 URL이 바뀌기 때문에 API_URL을 이에 맞춰 조정해주셔야 합니다!스크롤은 제품이 2개밖에 없어서 그런 것 같고, 제품이 늘어나면 자동 적용될 것입니다.

[재질문][그랩님 답변 부탁드립니다]101강

우선 3번의 이슈부터 설명을 드리면 서버를 실행해서 접속하기 위해선 포트가 필요합니다. 그리고 만약 다른 서버가 8080 포트를 점유했으면, 새로운 서버를 같은 포트로 실행하려고 하면 8081로 포트를 쓰라고 제안을 해주는 형태입니다. 아마 현재 질문자님께서는 기존에 실행된 서버가 있어서 8081, 8082가 뜨는 것 같습니다. 그 과정에서 2,3번 이슈가 뭔가 생기지 않았나 싶은데요.이를 해결하기 위해서는 기존 서버를 전부 종료해주고 하나의 서버만 우선 8080으로 시작하고 다시 테스트를 해보면 좋을 것 같습니다!특정 포트의 프로세스 죽이기 (window powershell 기준)netstat -ano | findstr : taskkill /PID /F예시: 'netstat -ano | findstr :8080' 으로 PID가 3283이 나오면 'taskkill /PID 3283 /F' 입력해서 서버 종료시키기

[그랩님 답변 부탁드립니다]101강 Axios 에러와 502 Bad Gateway 질문

안녕하세요!현재 ngrok을 통해 서버에 리소스를 가져오려고 하는데 '502 Gateway Error'는 API 서버 실행(port 8080)이 제대로 되고 있지 않는 상황으로 보입니다! 혹시 API 서버가 제대로 실행되고 있는지 확인해주실 수 있으실까요? 그리고 400 ERROR의 경우 일반적으로 클라이언트(모바일)에서 요청을 제대로 보내지 않을 때 발생하는 에러인데요! 판매되는 상품들 쪽을 구현한 코드를 확인해주시고 그래도 문제가 없으시다면 코드를 첨부해주시면 확인해보겠습니다 ㅎㅎ

Ngrok 설치 후 forwarding Url 에러

음 저기서 'visit site'를 누르면 어떻게 되시나요?아마 사용하시는 브라우저나 혹은 외부 설치 프로그램(알약..?)에서 자체적으로 보안상 이유로 한 번 저 화면을 띄우는 것 같은데 visit site를 누르면 아마 동일하게 화면이 보이지 않을까 싶습니다!

[그랩님께,Ngrok 악성코드 인식 해결방법]질문 드립니다.

안녕하세요. ngrok은 기본적으로 우리의 컴퓨터 내부에서 실행하는 특정 서버(엄밀하게는 port)에 대해서 외부와 연결해주는 장치입니다. 저희 실습에서 사용하는 케이스에서는 보안상 문제될 부분은 없어보입니다! 우선 실습을 위해서 잠시 치료를 안하고 설치해주셔도 괜찮을 것 같아요 :)

Ngrok 설치 후 forwarding Url로 연결 불가

확인이 늦어 죄송합니다.혹시 터미널에 ngrok 을 실행했을 때 화면을 보여주실 수 있을까요? 아래와 같이요!(사진)(macos 기준이긴 하지만) 아래와 같이 ngrok config 설정도 잘 되었는지 궁금합니다!https://dashboard.ngrok.com/get-started/setup/macos(사진)

그랩님, 상품 상세 페이지 에러와 의문점 질문드립니다.

확인이 늦었습니다!문자열을 처리하는 방식에 ''(따옴표) 과 ``(벡틱)가 있는데, products/${id} 같이 변수를 넣어야 하는경우 ``으로 처리를 해줘야 합니다.예를들면 const id = 1;const url = 'https://hello.com/products/${id}' 를 하게되면 실제로 url에는 products/1 이렇게 변수가 들어가는 구조가 아닌 문자열 그대로 처리되어 버립니다. 따라서 따옴표가 아닌 벡틱인 `...` 로 처리해주시면 잘 동작할 것 같습니다! {id}'를 하게되면 실제로 실행시 u{}'

그랩님, 해결되지 않은 에러 메시지 [꼭] 답변 부탁 드립니다.

상세하게 문제 사항 공유해주셔 감사합니다.서버에서는 클라이언트(React 웹)에게 데이터를 전달해주고, 클라이언트는 이를 받아서 우리에게 시각화해서 보여주게 되는데요. 이때 서버 역할을 하는 Postman Mock Server에서는 products 정보를 약속된 규격인 JSON 포맷으로 전달해줘야 합니다. 그래야 클라이언트가 이를 해석할 수 있게 됩니다.현재 올려주신 mock server의 응답값을 설정하는 이미지를 보면 빨간색으로 오류 선이 보이는 걸 알 수 있는데요. imageUrl의 값이 쌍따옴표("")가 아닌 따옴표('')로 되어있습니다. JSON 포맷으로 데이터를 주기 위해선 문자열은 모두 쌍따옴표로 감싸져야 합니다! 아래와 같이 응답값을 수정하시면 잘 동작할 것 같습니다. { "products": [ { "name": "농구공", "price": 10000, "seller": "조던", "imageUrl": "../images/products/basketball1.jpeg" }, { "name": "축구공", "price": 50000, "seller": "메시", "imageUrl": "../images/products/soccerball1.jpg" }, { "name": "키보드", "price": 10000, "seller": "그랩", "imageUrl": "../images/products/keyboard1.jpg" } ] } 추가적으로 성진님이 답변해주신 것 처럼 products의 값이 없을 때 경우를 대응해주면 product가 안보이지만 에러가 안나도록 설정은 할 수 있습니다!나중에 서버를 직접 개발하게 되면서 코드가 또 변경될거라 우선 동작만 확인하고 넘어가주셔도 좋을 것 같습니다 :)

Cannot read properties of undefined (reading 'map') TypeError: Cannot read properties of undefined (reading 'map') 에러 해결 어떻게 하나요?

위에 AI 인턴이 대답한 것처럼 처음에는 products라는 state가 빈 배열 [] 로 들어가있지만 axios를 통해 네트워크 통신이 일어나게 되면 setProducts가 불립니다. 그때 state인 products가 업데이트가 되는데 이게 undefined가 되다보니 {undefined}.map 으로 호출되서 에러가 발생합니다!보통 이는 postman 서버에서 제대로된 응답을 안주기 때문이고 응답을 잘주는지 확인을 먼저 해봐도 좋을 것 같습니다. 해당 mock 서버 주소를 브라우저 창에서 입력했을 때 값이 잘 들어오는지 먼저 테스트해보셔도 좋을 것 같아요!