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 서버 주소를 브라우저 창에서 입력했을 때 값이 잘 들어오는지 먼저 테스트해보셔도 좋을 것 같아요!

일반적인 css 꾸미기에서 width와 height의 값?

안녕하세요. 확인이 늦어 죄송합니다. 제가 답변을 했다고 했는데 놓쳤었네요제 강의에서는 디자인에 대해서는 따로 실습이 포함되어 있지 않았고, 제가 임의로 width, height를 정해서 만들었다 보니 헷갈리실 수 있을 것 같아요말씀해주신 것 처럼 보통 width, height같이 CSS로 개발자가 개발할 때, 디자이너가 정해준 디자인(보통 피그마 같은 디자인 툴)을 확인하면서 코딩을 하게 됩니다. 실무에서는 보통 나온 디자인을 개발하는 경우가 일반적이고, 초기 스타트업처럼 인력이 부족한 경우 임의로 개발을 하거나 아니면 템플릿이나 잘 만들어진 UI 라이브러리를 사용해서 하는 경우들이 많습니다!사이드 프로젝트나 혼자 공부하실때는 피그마 디자인을 직접 만들고 나서 개발을 해보는 것도 실무에 좀 더 빠르게 적응하기 위한 방법이 될 것 같아요! 감사합니다.

<꼭 답변 부탁 드립니다>그랩선생님, [컴포넌트 사용하기] 강의에서 질문 있습니다.

안녕하세요! 제가 출장을 와있어 확인이 늦었네요. 죄송합니다!일반적으로 리액트 프로젝트를 실행하기 위해선 터미널에서 'npm start' 라는 명령어를 직접 실행해줘야 합니다. 구성요소인 App.js는 그냥 우리가 짠 코드들이 들어있는 개별 파일들이기 때문에 이를 연다고 프로젝트가 실행되진 않습니다!아래 'React 시작하기' 에서 3분 20초 부근을 보면 터미널을 열어서 npm start를 하는 장면을 다시 보시면 될 것 같아요 :)https://www.inflearn.com/courses/lecture?courseId=326174

그랩선생님, 질문 답변 부탁 드립니다.vscode에서 npm install -g create-react-app 입력 후 에러 입니다.

안녕하세요! 혹시 아래 솔루션대로 한 번 진행해보시겠어요?https://velog.io/@gwak2837/powershell-yarn-%EB%B3%B4%EC%95%88-%EC%98%A4%EB%A5%98

수업자료

안녕하세요!현재 도메인 주소 문제가 있어 아래 링크로 우선 직접 접속 부탁드립니다 :)https://grabyroom.notion.site/IT-A-to-Z-By-1e1fbc981b7c4c03ac44943085ac8304