묻고 답해요
156만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결[리뉴얼] 맛집 지도앱 만들기 (React Native & NestJS)
안드로이드 안켜집니다.
❗질문 작성시 꼭 참고해주세요에러 메세지에서 단서를 찾을 수 있는 경우가 많습니다. 에러 메세지를 읽고 한번 검색해보시는것을 추천드립니다.질문글을 작성하실때는, 현재 문제(또는 에러)와 코드나 github을 첨부해주세요.개발중인 OS, ReactNative, Node 버전 등의 개발환경을 알려주셔야합니다.에러메세지는 일부분이 아닌 전체 상황을 올려주세요. 일부만 보여주시면 답변이 어렵습니다. 안녕하세요 강사님강의를 따라서 실행해보고 있는데,현재 ios는 시뮬레이터가 켜지지만, 안드로이드는 켜지지 않는 상황입니다.npx react-native doctor를 사용하여 뭐가 문제인지 확인했는데 해당 스크린샷처럼 나왔습니다환경변수도 공식문서처럼 다 했습니다.
-
미해결[리뉴얼] 맛집 지도앱 만들기 (React Native & NestJS)
ios 배포 - Distribute App 에러
Distribute App 버튼 클릭 시, 다음과 같은 에러가 표시됩니다 Upload Symbols FailedThe archive did not include a dSYM for the hermes.framework with the UUIDs 현재 React Native 버전으로 강의를 진행하다 보면 환경변수에서 Android 버전 관련 에러가 떠서, GitHub에서 pull 받아서 진행했는데 혹시 그게 원인일까요?
-
미해결[코드캠프] 부트캠프에서 만든 '완벽한' 프론트엔드 코스
유저 포인트 관련해서 질문 드립니다
유저의 상품을 다른 사용자가 구매할 시 '거래 후 잔액'과 '포인트'의 값이 일치해야 되는 게 아닌지 궁금합니다!
-
미해결[리뉴얼] 맛집 지도앱 만들기 (React Native & NestJS)
안드로이드에서 react-native-image-crop-picker의 설정 옵션에 대한 문제
❗질문 작성시 꼭 참고해주세요에러 메세지에서 단서를 찾을 수 있는 경우가 많습니다. 에러 메세지를 읽고 한번 검색해보시는것을 추천드립니다.질문글을 작성하실때는, 현재 문제(또는 에러)와 코드나 github을 첨부해주세요.개발중인 OS, ReactNative, Node 버전 등의 개발환경을 알려주셔야합니다.에러메세지는 일부분이 아닌 전체 상황을 올려주세요. 일부만 보여주시면 답변이 어렵습니다. (에러 일부만 자르거나 일부만 복사하지말아주세요) 안드로이드 환경에서 프로필 사진 수정 강의를 수강중에 계속 에러가 발생해서 진행하지 못했는데제가 문제원인을 추론해봤습니다. 우선 문제가 발생한 부분은 AddLocationScreen에서는 여러가지 사진을 등록해도 괜찮지만 프로필 사진은 단 한장만 등록해야하기 때문에useImagePicker 훅에 single과 multiple mode를 설정하는 과정에서 발생했습니다 .강의의 모든 코드를 따라서 적고 프로필 수정을 하기위해 actionSheet에서 [앨범에서 사진선택]을 누르면권한을 확인해 달라는 Toast오류 메시지가 발생했습니다. 하지만 AddLocation화면에서 이미 권한을 허용해 줬기 때문에 권한으로 인한 문제는 아니라 파악했고 useImagePicker 훅의 handleChangeImage 함수에서 에러 로그를 찍어본 결과 java.lang.IllegalArgumentException: Max items must be higher than 1이러한 로그를 확인 할 수 있었습니다 . 그래서 추측한 결과는강사님 코드에서 ImageCropPicker.openPicker({ mediaType: 'photo', multiple: true, includeBase64: true, maxFiles: mode === 'multiple' ? 5 : 1, })이 부분이 multiple은 true로 되어있지만, singlemode로 들어올 경우 maxFiles가 1로 설정되기 때문에 두 옵션이 충돌이 발생하는걸로 추측됩니다 . 그래서 저는 아래와 같이 일단 수정해서 문제를 해결했습니다.const handleChangeImage = () => { ImageCropPicker.openPicker({ mediaType: 'photo', multiple: mode === 'multiple', includeBase64: true, ...(mode === 'multiple' && { maxFiles: 5 }), }) .then(images => { const imageArray = Array.isArray(images) ? images : [images]; const formData = getFormDataImages('images', imageArray); uploadImages.mutate(formData, { onSuccess: data => mode === 'multiple' ? addImageUris(data) : replaceImageUri(data), onSettled: () => onSettled && onSettled(), }); }) .catch(error => { if (error.code !== 'E_PICKER_CANCELLED') { console.log('[error]', error); Toast.show({ type: 'error', text1: '권한을 허용했는지 확인해주세요.', position: 'bottom', }); } }); };multiple옵션은 mode==='multiple' 코드를 통해 mode의 값에 따라 true / false로 주어지게 하였고maxFiles 옵션또한 mode가 multiple인 경우에만 maxFiles:5라는 옵션이 주어지게 하였습니다.아마 multiple옵션이 false로 주어지면 maxFiles가 자동으로 1로 설정되어서 발생하는 충돌문제 였던 것 같습니다.강의 들으시는 분들에게 도움이 되었으면 합니다 .
-
미해결[리뉴얼] 맛집 지도앱 만들기 (React Native & NestJS)
[8-12] ios 연동 시, 라이브러리 버전 에러 질문
현재 기준 react-native-apple-authentication 버전을 2.4.1로 설치하면 Gradle 에러가 발생합니다.강의에서는 2.3.0 버전을 사용하는 것 같은데, 혹시 해당 버전이 강의에서 사용된 버전이 맞는지 궁금합니다.
-
미해결React Native with Expo: 제로초에게 제대로 배우기
푸시 토큰 만료 시간?
최신 버전 쓰고 있어요expo push token이 만료시간이 따로 있나요? 지금은 프로젝트에서 하루에 한번씩 앱 시작할때마다 토큰 갱신하고 있는데 이렇게 할 필요가 있는지 궁금해요
-
미해결React Native with Expo: 제로초에게 제대로 배우기
router 질문있습니다.
현재 expo 제일 최신버전인 53.0.20 버전으로 강의를 듣고있습니다.강사님처럼 const router= useRouter() 말고import {router} from 'expo-router' 에서router.push 이런거도 동일하게 동작하나요?
-
미해결React Native with Expo: 제로초에게 제대로 배우기
` /home -> / ` 아니라 ` /index -> / ` 아닌가요?
7.중첩 라우터와 그룹폴더의 활용 / 영상 시작 0:30 질문: ### /home -> / ### 이 아니라 ### /index -> / ### 아닌가요?이 부분 설명에서 /home 은 실제 home 디렉토리를 찾습니다.상위 경로에 _layout.tsx, index.tsx 가 있으면 상위 경로 index.tsx 로 이동하니까index.tsx 파일이 설명에 부합하는거 같아서 질문드립니다.### /index -> / ###
-
해결됨[코드캠프] 부트캠프에서 만든 '완벽한' 프론트엔드 코스
npx create-react-app
npx create-react-app myproject 입력하니까 무한로딩만 되고 설치가 안 돼서 yarn create react-app myproject으로 했는데도 안 되더라구요 다른 방법이 있을까요?
-
미해결[리뉴얼] 맛집 지도앱 만들기 (React Native & NestJS)
[4-6] 안드로이드 커스텀 맵 적용 안됨
MapHomeScreen.tsx 파일에서 MapView에 googleMapId를 추가했는데, ios에는 적용되지만 안드로이드에서는 적용이 되지 않습니다 별도로 설정해줘야하는 부분이 있을까요?
-
미해결[코드캠프] 부트캠프에서 만든 '완벽한' 프론트엔드 코스
fetchTravelproductsIPicked 관련 질문 드립니다
해당 API 요청 시사진처럼 $regex 오류 때문에 data를 받아오지 못하고 있습니다.백엔드 문제일까요?
-
미해결[리뉴얼] 맛집 지도앱 만들기 (React Native & NestJS)
8월 공개 예정인 강의들은 언제즈음 올라올까요
기다리고 있어요 엉엉
-
미해결React Native with Expo: 제로초에게 제대로 배우기
apk 파일 추출 관련 문의 드립니다.
만들어보고 있는 앱을 실 기기에 설치해서 테스트 해볼 일이 있어 apk 파일을 추출하려 합니다.백엔드 url이 http 라 app.json android 내에 useClearTextTraffic true 도 추가해주었습니다. "usesCleartextTraffic": trueeas.json 내 build 에 release 를 추가하였고, "release": { "android": { "buildType": "apk" } }eas build --platform android --profile release 명령어를 통해 빌드 했습니다.생성된 apk 를 실 기기에 설치 후 실행 했을 때 api 호출을 통해 데이터를 받아와서 뿌려주는 부분에 데이터가 하나도 나오고 있지 않습니다.설치 된 development build 를 에뮬레이터에서 실행해보아도 마찬가지로 데이터가 하나도 나오지 않고, catch 부분에서 에러도 콘솔에 찍히지 않고 있습니다.ㅠㅠnpm run android 실행 후 s > a 입력해서 expo go 환경에서 확인해봤을 땐 데이터도 잘 받아와지는데혹시 어느 부분을 확인해봐야할까요? npm ls react├─┬ @expo/vector-icons@14.1.0│ └── react@19.0.0 deduped├─┬ @react-native-community/datetimepicker@8.4.1│ └── react@19.0.0 deduped├─┬ @react-native-kakao/core@2.4.0│ └── react@19.0.0 deduped├─┬ @react-native-kakao/user@2.4.0│ └── react@19.0.0 deduped├─┬ @react-navigation/bottom-tabs@7.4.6│ └── react@19.0.0 deduped├─┬ @react-navigation/drawer@7.5.7│ ├─┬ react-native-drawer-layout@4.1.12│ │ └── react@19.0.0 deduped│ ├── react@19.0.0 deduped│ └─┬ use-latest-callback@0.2.4│ └── react@19.0.0 deduped├─┬ @react-navigation/elements@2.6.3│ ├── react@19.0.0 deduped│ └─┬ use-sync-external-store@1.5.0│ └── react@19.0.0 deduped├─┬ @react-navigation/native@7.1.17│ ├─┬ @react-navigation/core@7.12.4│ │ └── react@19.0.0 deduped│ └── react@19.0.0 deduped├─┬ expo-blur@14.1.5│ └── react@19.0.0 deduped├─┬ expo-font@13.3.2│ └── react@19.0.0 deduped├─┬ expo-image@2.4.0│ └── react@19.0.0 deduped├─┬ expo-linear-gradient@14.1.5│ └── react@19.0.0 deduped├─┬ expo-linking@7.1.7│ └── react@19.0.0 deduped├─┬ expo-router@5.1.4│ ├─┬ @radix-ui/react-slot@1.2.0│ │ ├─┬ @radix-ui/react-compose-refs@1.1.2│ │ │ └── react@19.0.0 deduped│ │ └── react@19.0.0 deduped│ ├─┬ @react-navigation/native-stack@7.3.25│ │ └── react@19.0.0 deduped│ └─┬ react-native-is-edge-to-edge@1.2.1│ └── react@19.0.0 deduped├─┬ expo-status-bar@2.2.3│ ├─┬ react-native-edge-to-edge@1.6.0│ │ └── react@19.0.0 deduped│ └── react@19.0.0 deduped├─┬ expo@53.0.20│ ├─┬ expo-asset@11.1.7│ │ └── react@19.0.0 deduped│ ├─┬ expo-keep-awake@14.1.4│ │ └── react@19.0.0 deduped│ └── react@19.0.0 deduped├─┬ react-dom@19.0.0│ └── react@19.0.0 deduped├─┬ react-native-gesture-handler@2.24.0│ └── react@19.0.0 deduped├─┬ react-native-gifted-charts@1.4.63│ ├─┬ gifted-charts-core@0.1.65│ │ └── react@19.0.0 deduped│ └── react@19.0.0 deduped├─┬ react-native-reanimated@3.17.5│ ├─┬ react-native-is-edge-to-edge@1.1.7│ │ └── react@19.0.0 deduped│ └── react@19.0.0 deduped├─┬ react-native-safe-area-context@5.4.0│ └── react@19.0.0 deduped├─┬ react-native-screens@4.11.1│ ├─┬ react-freeze@1.0.4│ │ └── react@19.0.0 deduped│ └── react@19.0.0 deduped├─┬ react-native-svg@15.11.2│ └── react@19.0.0 deduped├─┬ react-native-web@0.20.0│ └── react@19.0.0 deduped├─┬ react-native-webview@13.13.5│ └── react@19.0.0 deduped├─┬ react-native@0.79.5│ ├─┬ @react-native/virtualized-lists@0.79.5│ │ └── react@19.0.0 deduped│ └── react@19.0.0 deduped└── react@19.0.0 npm ls react-native├─┬ @expo/vector-icons@14.1.0│ └── react-native@0.79.5 deduped├─┬ @react-native-async-storage/async-storage@2.1.2│ └── react-native@0.79.5 deduped├─┬ @react-native-community/datetimepicker@8.4.1│ └── react-native@0.79.5 deduped├─┬ @react-native-kakao/core@2.4.0│ └── react-native@0.79.5 deduped├─┬ @react-native-kakao/user@2.4.0│ └── react-native@0.79.5 deduped├─┬ @react-navigation/bottom-tabs@7.4.6│ └── react-native@0.79.5 deduped├─┬ @react-navigation/drawer@7.5.7│ ├─┬ react-native-drawer-layout@4.1.12│ │ └── react-native@0.79.5 deduped│ └── react-native@0.79.5 deduped├─┬ @react-navigation/elements@2.6.3│ └── react-native@0.79.5 deduped├─┬ @react-navigation/native@7.1.17│ └── react-native@0.79.5 deduped├─┬ expo-apple-authentication@7.2.4│ └── react-native@0.79.5 deduped├─┬ expo-blur@14.1.5│ └── react-native@0.79.5 deduped├─┬ expo-constants@17.1.7│ └── react-native@0.79.5 deduped├─┬ expo-image@2.4.0│ └── react-native@0.79.5 deduped├─┬ expo-linear-gradient@14.1.5│ └── react-native@0.79.5 deduped├─┬ expo-linking@7.1.7│ └── react-native@0.79.5 deduped├─┬ expo-router@5.1.4│ ├─┬ @expo/metro-runtime@5.0.4│ │ └── react-native@0.79.5 deduped│ ├─┬ @react-navigation/native-stack@7.3.25│ │ └── react-native@0.79.5 deduped│ └─┬ react-native-is-edge-to-edge@1.2.1│ └── react-native@0.79.5 deduped├─┬ expo-status-bar@2.2.3│ ├─┬ react-native-edge-to-edge@1.6.0│ │ └── react-native@0.79.5 deduped│ └── react-native@0.79.5 deduped├─┬ expo-symbols@0.4.5│ └── react-native@0.79.5 deduped├─┬ expo-system-ui@5.0.10│ └── react-native@0.79.5 deduped├─┬ expo-web-browser@14.2.0│ └── react-native@0.79.5 deduped├─┬ expo@53.0.20│ ├─┬ expo-asset@11.1.7│ │ └── react-native@0.79.5 deduped│ ├─┬ expo-file-system@18.1.11│ │ └── react-native@0.79.5 deduped│ └── react-native@0.79.5 deduped├─┬ react-native-gesture-handler@2.24.0│ └── react-native@0.79.5 deduped├─┬ react-native-gifted-charts@1.4.63│ ├─┬ gifted-charts-core@0.1.65│ │ └── react-native@0.79.5 deduped│ └── react-native@0.79.5 deduped├─┬ react-native-reanimated@3.17.5│ ├─┬ react-native-is-edge-to-edge@1.1.7│ │ └── react-native@0.79.5 deduped│ └── react-native@0.79.5 deduped├─┬ react-native-safe-area-context@5.4.0│ └── react-native@0.79.5 deduped├─┬ react-native-screens@4.11.1│ └── react-native@0.79.5 deduped├─┬ react-native-svg@15.11.2│ └── react-native@0.79.5 deduped├─┬ react-native-webview@13.13.5│ └── react-native@0.79.5 deduped└─┬ react-native@0.79.5└─┬ @react-native/virtualized-lists@0.79.5└── react-native@0.79.5 deduped npm ls expo├─┬ @react-native-community/datetimepicker@8.4.1│ └── expo@53.0.20 deduped├─┬ @react-native-kakao/core@2.4.0│ └── expo@53.0.20 deduped├─┬ expo-apple-authentication@7.2.4│ └── expo@53.0.20 deduped├─┬ expo-blur@14.1.5│ └── expo@53.0.20 deduped├─┬ expo-build-properties@0.14.8│ └── expo@53.0.20 deduped├─┬ expo-constants@17.1.7│ └── expo@53.0.20 deduped├─┬ expo-dev-client@5.2.4│ ├─┬ expo-dev-launcher@5.1.16│ │ └── expo@53.0.20 deduped│ ├─┬ expo-dev-menu-interface@1.10.0│ │ └── expo@53.0.20 deduped│ ├─┬ expo-dev-menu@6.1.14│ │ └── expo@53.0.20 deduped│ ├─┬ expo-manifests@0.16.6│ │ └── expo@53.0.20 deduped│ ├─┬ expo-updates-interface@1.1.0│ │ └── expo@53.0.20 deduped│ └── expo@53.0.20 deduped├─┬ expo-font@13.3.2│ └── expo@53.0.20 deduped├─┬ expo-haptics@14.1.4│ └── expo@53.0.20 deduped├─┬ expo-image@2.4.0│ └── expo@53.0.20 deduped├─┬ expo-linear-gradient@14.1.5│ └── expo@53.0.20 deduped├─┬ expo-router@5.1.4│ └── expo@53.0.20 deduped├─┬ expo-splash-screen@0.30.10│ └── expo@53.0.20 deduped├─┬ expo-symbols@0.4.5│ └── expo@53.0.20 deduped├─┬ expo-system-ui@5.0.10│ └── expo@53.0.20 deduped├─┬ expo-web-browser@14.2.0│ └── expo@53.0.20 deduped└─┬ expo@53.0.20├─┬ expo-asset@11.1.7│ └── expo@53.0.20 deduped├─┬ expo-file-system@18.1.11│ └── expo@53.0.20 deduped└─┬ expo-keep-awake@14.1.4└── expo@53.0.20 deduped
-
해결됨[코드캠프] 부트캠프에서 만든 '완벽한' 프론트엔드 코스
강의에서 사용하는 api 접속 불가
안녕하세요~강의에서 사용하는 api 2개 다 접속이 안되네요1번은 외부 서버라 안될수 있는데,2번은 서버가 죽은 건가요? koreanjson.comhttp://main-example.codebootcamp.co.kr/graphql
-
미해결아바타 커뮤니티앱 만들기 (React Native Expo)
윈도우 환경입니다.
import DescriptionInput from "@/components/DescriptionInput"; import TitleInput from "@/components/TitleInput"; import { FormProvider, useForm } from "react-hook-form"; import { StyleSheet } from "react-native"; import { KeyboardAwareScrollView } from "react-native-keyboard-aware-scroll-view"; type FormValues = { title: string; description: string; }; export default function PostWriteScreen() { const postForm = useForm<FormValues>({ defaultValues: { title: "", description: "", }, }); return ( <FormProvider {...postForm}> <KeyboardAwareScrollView contentContainerStyle={styles.container}> <TitleInput /> <DescriptionInput /> <DescriptionInput /> <DescriptionInput /> <DescriptionInput /> <DescriptionInput /> <DescriptionInput /> <DescriptionInput /> </KeyboardAwareScrollView> </FormProvider> ); } const styles = StyleSheet.create({ container: { margin: 16, gap: 16 }, }); KeyboardAwareScrollView를 써도 여전히 키보드가 입력창을 가리는데 이유가 뭔지 잘 모르겠습니다.
-
해결됨[코드캠프] 부트캠프에서 만든 '완벽한' 프론트엔드 코스
강의 커리큘럼에 대해 질문이 있습니다.
안녕하세요 강의를 구매 후 듣다가 일이 생겨서 오랜만에 다시 공부하려고 하는데 커리큘럼을 다시 보니 처음에 html, css 강의 순서대로 나오다가 js가 나오고 또 섹션04부분에서 다시 css가 나오고 또 js가 나오더라구요 그래서 이 부분이 헷갈리는데 그냥 처음부터 순서대로 강의를 들으면 될까요?
-
미해결따라하며 배우는 리액트 네이티브 기초
svg질문
안녕하세요 react-navie 강의중 18강 보고 있는데요 svg 잘 설치 되어있고, 이미지도 잘 넣었는데 저는 이미지 스타일 편집하는게 안보이고 svg 파일 클릭을 하면 svg 파일 모양만 보이고 있어서 svg 테스트시 화면에 이미지 너무 크게 보입니다. 툴에서 어떻게 설정하면 svg 스타일이 보일까요?
-
해결됨[코드캠프] 부트캠프에서 만든 '완벽한' 프론트엔드 코스
윈도우 -> 맥 파일 옮기기 / 실행
안녕하세요! 지금까지 수업을 윈도우 노트북으로 듣고 있었습니다. 그런데 노트북에 문제가 생겨 새로운 노트북으로 구매 후 파일을 옮기려고 하는데 이번에 구매한 노트북 운영체제 맥os입니다. 간편하게 옮기고 빠르게 실행 할 수 있는 방법이 있을까요?? 일단 node, npm, yarn까지 다운 받은 상태 입니다.
-
미해결React Native with Expo: 제로초에게 제대로 배우기
카카오 로그인이 안됩니다.
//app\login.tsx import { initializeKakaoSDK, getKeyHashAndroid } from "@react-native-kakao/core"; const onKakaoLogin = async()=>{ console.log(await getKeyHashAndroid()); try{ const result = await kakaoLogin(); // 로그인 완료될 때까지 대기 console.log("로그인 결과:", result); } catch (error) { console.error("로그인 실패:", error); } };코드를 이렇게 작성해서 콘솔창에 출력된 키 해시를 kakao dev 홈페이지에도 등록했습니다.이 화면까지는 잘 뜨는데, accept and continue를 눌러도 다시 앱으로 돌아가지도 않고 콘솔창에도 access token과 같은 로그인 여부 로그가 안뜹니다..
-
미해결비전공자를 위한 진짜 입문 올인원 개발 부트캠프
그랩님, 상품 상세 페이지 에러와 의문점 질문드립니다.
그랩님, 강의 잘 듣고 있습니다.다름이 아니라, 상품 상세 페이지 에러와 의문점이 있어서 어떻게 해결해야 하는지 궁금한 사항이 있어 질문 드리게 되었습니다.일단 src/main/index.js 소스 코드를 첨부합니다.import './index.css'; import axios from "axios"; import React from 'react'; import {Link} from 'react-router-dom'; function MainPage(){ const [products, setProducts]=React.useState([]); React.useEffect( function(){ axios.get("제 mock 서버 주소 넣었습니다/products") .then(function(result){ const products=result.data.products; setProducts(products); }).catch(function(error){ console.error("에러 발생:",error); }); },[]); return ( <div> <div id="header"> <div id="header-area"> <img src="../images/icons/logo.png" /> </div> </div> <div id="body"> <div id="banner"> <img src="../images/banners/banner1.png" /> </div> <h1>판매되는 상품들</h1> <div id="product-list"> { products.map(function(product, index){ return ( <div className="product-card"> <Link className="product-link" to={`/products/${product.id}`}> <div> <img className="product-img" src={product.imageUrl} /> </div> <div className="product-contents"> <span className="product-name">{product.name} </span> <span className="product-price">{product.price}원 </span> <div className="product-seller"> <img className="product-avatar" src="../images/icons/avatar.png" /> <span>{product.seller}</span> </div> </div> </Link> </div> ); }) } </div> </div> <div id="footer"></div> </div> ); } export default MainPage;2.src/product/index.js 소스 첨부합니다.import {useParams} from 'react-router-dom'; import axios from "axios"; import { useEffect, useState } from 'react'; function ProductPage(){ // const params=useParams(); const {id} = useParams(); const [product, setProduct] = useState(null); useEffect(function(){ axios.get('제 mock 서버 주소 넣었습니다/products/${id}' ) .then(function (result) { setProduct(result.data); // console.log(result); }).catch(function(error){ console.error(error); } ); },[]); console.log(product); // console.log(params); return <h1>상품 상세 페이지 {id} 상품</h1>; } export default ProductPage;-->여기서부터 의문점과 문제점이 발생하게 되니 읽어주시고 해결할 수 있는 방법을 알려주시면 좋겠습니다. 위 소스에서axios.get('제 mock 서버 주소 넣었습니다/products/${id}') 처럼 소스를 달러 중괄호 아이디 입력하면, 아래와 같은 첨부 사진처럼 에러가 납니다. --> 위 에러 첨부 사진은 어떻게 해결해야 할까요?3. 하지만, 위 소스대로 입력 안하면 axios.get('제 mock 서버 주소 넣었습니다/products/1') 하면 제대로 데이터를 오류 없이 아래 첨부 사진처럼 받아 오는 것을 알 수 있습니다. 3-1. 그랩님, 강의 소스에서 처럼 axios.get('제 mock 서버 주소 넣었습니다/products/${id}')해서 하면 위 첨부 사진 처럼 에러가 나는데요, 성공적으로 오류 없이 불러오고 싶은데요, 어떻게 해야 하나요? 단계별로 어떻게 소스를 수정해야하는지 알려주시면 좋겠습니다.확인하시면 답변 부탁 드립니다.