[해결]그랩님 답변 주세요.

프로젝트를 확인하고 다시 답변 남깁니다! 안되시는 부분은 새 질문보다는 여기 답변으로 남겨주시면 감사하겠습니다!확인 결과 expo cli가 계속 업데이트됨에 따라 babel.config.js가 없어도 잘 동작하도록 변경이 되었는데요. 본 실습 환경에서는 강의 촬영 시점에서 개발 할 수 있도록 설정을 새로 해주셔야 할 것 같습니다 (추후 강의 업데이트를 해두겠습니다!)) 아래 가이드를 참고하시면 grab-market-mobile을 초기화하실 때 npx create-expo-app . --template blank@sdk-48 을 하도록 변경되었습니다. 번거로우시겠지만 grab-market-mobile 폴더를 새로 만들어서 저 커맨드로 진행해주실 수 있을까요? 만약 하시게 되면 강의 영상 코드와 동일하게 환경이 설정되서 강의를 잘 따라가실 수 있지 않을까 싶습니다.https://www.notion.so/React-Native-d18d66b10ef94779836bbafedf7bbf4f?source=copy_link#57673a120569472cb5ccbbb97ed5986c해보시고 안되는 게 있으면 편하게 질문 또 남겨주세요!

그랩님의 답변을 기다립니다/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가 안보이지만 에러가 안나도록 설정은 할 수 있습니다!나중에 서버를 직접 개발하게 되면서 코드가 또 변경될거라 우선 동작만 확인하고 넘어가주셔도 좋을 것 같습니다 :)