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

확인이 늦었습니다!문자열을 처리하는 방식에 ''(따옴표) 과 ``(벡틱)가 있는데, 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

Postman UI가 또 바뀌어서 Mockserver 를 찾을 수가 없습니다

Mock Server 부분은 이전에 업데이트를 따로 했었는데 혹시 어떤 부분이 현재 UI와 다른 걸까요?새로 업데이트 된 UI도 기존과 거의 유사한 UI를 가지는 것으로 보이긴 합니다.(사진)

노드 설치가 안됩니다

현재 시도하신 방법은 cmd가 아니라 powershell이라는 shell을 실행해야 가능한 것으로 보이는데요. 혹시 powershell을 찾아서 실행 후 다시 해보시겠어요?그리고 아래와 같이 여기서 바로 다운로드 하시는 것도 방법일 것 같은데, 이건 어떠신가요?(사진)

강의제공자의 답변을 원합니다 AI 답변만 있고 더이상 직접 답변을 안해주시네요?

안녕하세요 가을님 우선 불편을 드려 죄송합니다. 최근 들어 여러 사정들이 생겨서 답을 바로바로 해드리진 못했네요.UI 업데이트는 큰 변경점이 생기면, 새로 업데이트를 하곤 합니다. 아마 기존 강의에서 새로 변경된 UI들이 있다면 이 부분은 추가 강의를 조만간 제작하도록 하겠습니다. 이전에 올려주신 Postman Mock Server는 크게 변경된 부분은 없어보여서 답변을 달아두긴 했으니 확인 부탁드립니다.만약 계속해서 강의에 불편함이 크시다고 느껴지시면 tansfil@gmail.com으로 연락주시면 따로 환불해드리도록 하겠습니다.