inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

묻고 답해요

173만명의 커뮤니티!! 함께 토론해봐요.

[해결 방법] This API project is not authorized to use this API

해결됨

맛집 지도앱 만들기 (React Native & NestJS)

console.log(data)에서 아래처럼 응답받을 경우 {"error_message": "This API project is not authorized to use this API.", "results": [], "status": "REQUEST_DENIED"} const { data } = await axios.get( `https://maps.googleapis.com/maps/api/geocode/json?latlng=${latitude},${longitude}&result_type=street_address|route|political&key=?&language=ko`); console.log(data); Geocoding API 설치 !! https://stackoverflow.com/questions/32994634/this-api-project-is-not-authorized-to-use-this-api-please-ensure-that-this-api

  • react-native
  • typescript
  • nestjs
  • react-query
  • zustand
강프로그래머 댓글 1 좋아요 0 조회수 578

postgre 설치에 대해서 window 에서 설치하는 법 조금 더 리뷰 가능하신가요?

해결됨

맛집 지도앱 만들기 (React Native & NestJS)

여건이 되신다면 postgre 설치에 대해서 window 에서 설치하는 법 조금 더 리뷰 가능하신가요? connection 에러가 발생해서 진도를 못나가네요. ㅠㅠ 우여곡절을 거쳐서 Server 는 생성했지만, npm run start:dev 실행후 [Nest] 62440 - 2024. 10. 03. 오후 8:22:15 ERROR [TypeOrmModule] Unable to connect to the database. Retrying (1)... error: "matzip-app" �����ͺ��̽� ���� at Parser.parseErrorMessage (C:\rna\server\node_modules\pg-protocol\src\parser.ts:369:69) at Parser.handlePacket (C:\rna\server\node_modules\pg-protocol\src\parser.ts:188:21) at Parser.parse (C:\rna\server\node_modules\pg-protocol\src\parser.ts:103:30) at Socket.<anonymous> (C:\rna\server\node_modules\pg-protocol\src\index.ts:7:48) at Socket.emit (node:events:519:28) at addChunk (node:internal/streams/readable:559:12) at readableAddChunkPushByteMode (node:internal/streams/readable:510:3) at Socket.Readable.push (node:internal/streams/readable:390:5) at TCP.onStreamRead (node:internal/stream_base_commons:191:23) 이에러가 계속 뜹니다. 도대체 몇시간 째 검색을 하고 있는지. ....

  • react-native
  • typescript
  • nestjs
  • react-query
  • zustand
댓글 2 좋아요 0 조회수 270

안드로이드 내 위치 질문

해결됨

맛집 지도앱 만들기 (React Native & NestJS)

안녕하세요 강사님 혹시 안드로이드 Location Custom 할 수 있는 방법 여쭤볼 수 있을까요!!? 아래 글을 확인해서 말씀대로 설정창을 들어가봤는데 Location이 비어있습니다..ㅠㅠ https://www.inflearn.com/community/questions/1239274/%ED%98%84%EC%9E%AC%EC%9C%84%EC%B9%98-%EB%AC%B8%EC%A0%9C

  • react-native
  • typescript
  • nestjs
  • react-query
  • zustand
강프로그래머 댓글 2 좋아요 0 조회수 220

View, Pressable 질문 드립니다!

해결됨

맛집 지도앱 만들기 (React Native & NestJS)

안녕하세요 강사님 깃헙에서는 Pressable로 되어있고 강의에서는 View로 되어있는데 어떤걸로 진행해야될까요?!

  • react-native
  • typescript
  • nestjs
  • react-query
  • zustand
강프로그래머 댓글 2 좋아요 0 조회수 89

코드가 왜 그런지 모르겠는데, 이럴땐 어떻게 공부해야하나요?

해결됨

기초부터 배우는 Next YTMusic 클론 코딩 (with next.js 14, UI 마스터)

7.4 PlayListCarousel - 1​ 강의의 6분 15초를 보시면, <div className="relative left-[-45px]"> 부분이 있는데요. left-[-45px]을 해야 화살표가 보이게 되는데, 이게 왜 그런질 모르겠습니다. 근데 제가 질문 드리고싶은 것은, 저 코드가 어떤 원리로 작동되는지가 아닙니다. 이럴때는 스스로 그냥 계속 문서를 참고하든 개발자도구를 참고하든 이해 될때까지 파고드는게 맞는 방법인지 여쭤보고 싶습니다. 이것 말고도 제가 어려웠던 부분에 대한 예시를 들자면, 1) components 폴더에 저장되는 것들과 components/elements 폴더에 저장되는 것들의 차이를 정확히 모르겠음. 2) 태그를 감쌀때 어떤 것은 div로 컨테이너를 주시고 어떤것은 안주시는 경우가 있는데, 차이를 모르겠음. 3) useUIState에 저장된 변수 이름이 "homeCategory"인데, 제 생각엔 이것 보다는 "selectedSubject" 같은 이름이 더 직관적이라 생각하는데, 그럼에도 제 생각보단 선생님 생각이 맞을건데 제 생각이 어느부분이 부족한질 모르겠음. 4) 위와 같은 문제들을 해결하고 싶어서, 책을 찾아보려 하는데 리액트 훅을 설명해주는 책들은 많은데, HTML CSS를 어떤 구조로 짜야 하는지, 리액트 앱 만들때 폴더구조는 어떻게 하는게 좋은지에 대한 책은 없어서 어떻게 해야할지 모르겠음. 이런 어려움이 있었습니다. 혹시 공부법 조언 부탁드려도 될까요?

  • react
  • 인터랙티브-웹
  • 클론코딩
  • next.js
  • tailwind-css
  • zustand
박상원 댓글 3 좋아요 1 조회수 264

[해결 방법] android 빌드 방법

해결됨

맛집 지도앱 만들기 (React Native & NestJS)

계속 까먹네요 ㅠ^ㅠ 참고~!! cd android ./gradlew build

  • react-native
  • typescript
  • nestjs
  • react-query
  • zustand
강프로그래머 댓글 1 좋아요 0 조회수 221

카카오 로그인시 url

해결됨

맛집 지도앱 만들기 (React Native & NestJS)

안녕하세요 선생님 카카오톡 로그인 부분에 에러가 있어서 질문 드립니다!! import axios from 'axios'; import {SafeAreaView, StyleSheet, View} from 'react-native'; import Config from 'react-native-config'; import WebView, {WebViewMessageEvent} from 'react-native-webview'; // kakao api 에서 적었던 uri 를 적어준다. const REDIRECT_URI = 'http://localhost:3030/auth/oauth/kakao'; function KakaoLoginScreen() { const handleOnMessage = (event: WebViewMessageEvent) => { console.log('event.nativeEvent.url :', event.nativeEvent.url); if (event.nativeEvent.url.includes(`${REDIRECT_URI}?code=`)) { const code = event.nativeEvent.url.replace(`${REDIRECT_URI}?code=`, ''); console.log('code :', code); requestToken(code); } }; const requestToken = async (code: string) => { const response = await axios({ method: 'post', url: 'https://kauth.kakao.com/oauth/token', params: { grant_type: 'authorization_code', client_id: Config.KAKAO_REST_API_KEY, redirect_uri: REDIRECT_URI, code, }, }); console.log('response.data :', response.data); }; return ( <SafeAreaView style={styles.container}> <WebView source={{ uri: `https://kauth.kakao.com/oauth/authorize?response_type=code&client_id=${Config.KAKAO_REST_API_KEY}&redirect_uri=${REDIRECT_URI}`, }} onMessage={handleOnMessage} injectedJavaScript={"window.ReactNativeWebView.postMessage('')"} /> </SafeAreaView> ); } const styles = StyleSheet.create({ container: { flex: 1, }, }); export default KakaoLoginScreen; 카카오 redirect URI 에서도 http://localhost:3030/auth/oauth/kakao 입력을 했는데 console.log('event.nativeEvent.url :', event.nativeEvent.url); 이부분의 로그가 왜 저는 https://kauth.kakao.com/oauth/authorize?response_type=code&client_id=해당코드&redirect_uri=http://localhost:3030/auth/oauth/kakao 이렇게 나올까용? 그래서 if 문을 타지 ㅇ낳아 requertToken 으로 넘어가지 못하고 있습니다.

  • react-native
  • typescript
  • nestjs
  • react-query
  • zustand
호갱 댓글 2 좋아요 0 조회수 268

강의외 복잡한 ui 입력폼 관련 질문 있습니다

미해결

기초부터 배우는 Next YTMusic 클론 코딩 (with next.js 14, UI 마스터)

지금 여기까지 구현 했는데 이렇게 순서 바꾸기를 해야 되는데 잘안됩니다 혹시 원인이나 해결 방법 아시나요? https://okky.kr/questions/1516211 그리고 이렇게 데이터가 복잡할 경우 프론트에서 데이터 가공해서 디비로 보내는게 어쩔수 없다고 보시나요 아니면 조금 과잉이라고 보시나요? 그점도 궁금합니다

  • react
  • 인터랙티브-웹
  • 클론코딩
  • next.js
  • tailwind-css
  • zustand
현석오 댓글 2 좋아요 1 조회수 243

5-3 강의 질문

해결됨

맛집 지도앱 만들기 (React Native & NestJS)

5-3 강의에서 HeaderButton 컴포넌트를 만드신 후에, AddPostHeaderRight 컴포넌트에서 HeaderButton 을 호출하셨는데, 혹시 특별한 이유가 있을까요? AddPostScreen 에서 headerRight 에 HeaderButton 을 그대로 사용하지 않고, AddPostHeaderRight 를 만드신 점이 궁금합니다. 어떤 것을 구현하는데에는 다양한 방법이 있지만, 강사님이 그렇게 하신 데에 특별한 이유가 있는지, 배울점이 있을 수도 있을것 같아서 질문 드립니다! 강의 2회독 중인데, 저는 useEffect(() => { navigation.setOptions({ headerRight: () => <HeaderButton labelText={'등록'} />, }); }, []); 이렇게 하실 줄 알았는데, 한번 더 함수로 랩핑 하셔서 호기심이 생겼습니다.

  • react-native
  • typescript
  • nestjs
  • react-query
  • zustand
Ryan Kim 댓글 2 좋아요 0 조회수 168

윈도우에서 프로젝트 생성

해결됨

맛집 지도앱 만들기 (React Native & NestJS)

❗ 질문 작성시 꼭 참고해주세요 최대한 상세히 현재 문제(또는 에러)와 코드(또는 github) 를 첨부해주셔야 그만큼 자세히 답변드릴 수 있습니다. 맥/윈도우, 안드로이드/iOS, ReactNative 버전 등의 개발환경 도 함께 적어주시면 도움이 됩니다. 에러메세지는 일부분이 아닌 전체 상황 을 올려주세요. (일부만 잘라서 올리지 말아주세요.) 윈도우라 1-2,1-3은 패스하고 1-4까지 진행했고 1-5를 진행하려고 하는데 강의 환경이 맥이라 햇갈립니다. 윈도우에서는 어떻게 하면 될까요..?

  • react-native
  • typescript
  • nestjs
  • react-query
  • zustand
박지원 댓글 2 좋아요 0 조회수 227

'[5-0] 마커 표시하기' <Marker /> 컴포넌트 사용 시 Error 발생

미해결

맛집 지도앱 만들기 (React Native & NestJS)

1. '[4-5] GoogleMap 커스텀 스타일 적용하기' 강의까지 문제 없이 진행 후 '[5-0] 마커 표시하기' 강의로 넘어와서 <Marker />컴포넌트를 넣었을 때 발생한 문제입니다. 2. 강의를 따라서 MapHomeScreen.tsx 파일 내 Marker 관련 코드를 동일하게 적용. VScode에서 Error가 발생하지 않아 시뮬레이터를 실행시켰습니다.  3. 시뮬레이터 실행 시 해당 에러 발생. (ios, android 모두 동일한 에러가 지속적으로 나타났습니다.) * <Marker />를 주석처리하면 에러가 나타나지않고, 지도가 잘 나타납니다.  react-native 버전과 react-native-maps 버전 문제 확인, npm uninstall react-native-maps npm install react-native-maps --save-exact npx pod-install ios 등등 여러가지 시도해도 보았습니다. = 에러가 해결되지 않았습니다. 4. 강사님께서 제공해주시는 깃허브 코드 확인. https://github.com/InKyoJeong/Matzip/blob/lecture/5-0/front/src/screens/map/MapHomeScreen.tsx 제공된 코드 전체를 저의 MapHomeScreen.tsx 파일에 붙여넣기 후 VScode 내 Error없음을 확인. npm start --reset-cache로 다시 시뮬레이터 실행. = 해결안됨 여전히 시뮬레이터에서 TypeError: this.getNativeComponent is not a function (it is undefined) 에러 발생.. 5. StackOverFlow검색 및 Google검색 결과.. StackOverFlow에서는 해결사례를 찾을 수 없었습니다. Google 검색을 통해서도 명확한 해결사례를 찾을 수 없는 상황에서 아래와 같은 사이트에서 제시한 방법을 통해 에러가 더 이상 뜨지 않는 것을 확인하였습니다. 출처 : https://github.com/react-native-maps/react-native-maps/issues/4861  주석처리.  마커가 잘 뜨는 것을 확인.  6. Error가 해결된 것이 맞지만, 잘 못된 방법인 것 같아 질문드립니다.

  • react-native
  • typescript
  • nestjs
  • react-query
  • zustand
reacNN 댓글 3 좋아요 0 조회수 388

프로젝트 생성시 error bundler: failed to load command: pod

해결됨

맛집 지도앱 만들기 (React Native & NestJS)

안녕하세요 선생님 선생님의 cli 셋팅을 잘 따라라고 마지막으로 프로젝트 생성을 위해 npx react-native@0.72.6 init AwesomeProject --version 0.72.6 를 하였는데 설치도중 error bundler: failed to load command: pod 에러가 나왔는데 구글링을해봐도 해결이되지 않아서요 어떤문제가 있는걸까요 ?

  • react-native
  • typescript
  • nestjs
  • react-query
  • zustand
댓글 1 좋아요 0 조회수 270

이미지업로드 동작없음

해결됨

맛집 지도앱 만들기 (React Native & NestJS)

안녕하세요 강사님 제가 이미지 업로드 강의를 따라 구현하고 있는데요 사진 추가 버튼을 클릭해도 아무런 액션이 일어나지 않는데 혹시 그게 제 pc 가 노트북이 아니라 pc 라서 그런걸까요? 어디까지 접근하는지 보려고 log 를 남겼는데 console.log('useImagePicker'); 로그가 찍히는데 console.log('handleChange'); 해당 부분은 로그가 찍히지 않습니다. AddPostScreen.tsx 에서 <ImageInput onChange={iamgePicker.handleChange} /> 이렇게 onChange 로 호출하는데 혹시 잘못된 부분이 있거나 더 살펴봐야될 곳이 있을까요? function useImagePicker({initialImages = []}: ImagePickerProps) { console.log('useImagePicker'); const [imageUris, setImageUris] = useState(initialImages); const uploadImages = useMutateImages(); const addImageUris = (uris: string[]) => { setImageUris(prev => [...prev, ...uris.map(uri => ({uri}))]); }; const handleChange = () => { console.log('handleChange'); ImagePicker.openPicker({ mediaType: 'photo', multiple: true, includeBase64: true, maxFiles: 5, cropperChooseText: '완료', cropperCancelText: '취소', }) .then(images => { const formData = getFormDataImages(images); uploadImages.mutate(formData, { onSuccess: data => addImageUris(data), }); }) .catch(error => { if (error.code !== 'E_PICKER_CANCELLED') { //에러처리 } }); }; return {imageUris, handleChange}; } export default useImagePicker;

  • react-native
  • typescript
  • nestjs
  • react-query
  • zustand
호갱 댓글 2 좋아요 0 조회수 183

DrawNavigator 타입 추론

해결됨

맛집 지도앱 만들기 (React Native & NestJS)

2-5강의 4분정도쯤에 createDrawerNavigator함수를 사용하면 강의에서는 타입을 잘 잡아주지만 저는 반환타입이 any로 잡힙니다. IDE를 껏다켜봐도 변함이없네요.. 뭐가 문제인걸까요? createDrawerNavigator함수: Drawer변수 타입:

  • react-native
  • typescript
  • nestjs
  • react-query
  • zustand
SEON 댓글 2 좋아요 0 조회수 191

npx랑 yarn이랑 같이 써도 되나요?

해결됨

기초부터 배우는 Next YTMusic 클론 코딩 (with next.js 14, UI 마스터)

프로젝트 세팅할때는 yarn을 쓰셨는데요. shadcn에서 avatar 설치할때는 npx을 쓰셔서요. 같이 써도 문제가 없나요?

  • react
  • 인터랙티브-웹
  • 클론코딩
  • next.js
  • tailwind-css
  • zustand
박상원 댓글 2 좋아요 0 조회수 472

[5-7] 환경변수 설정하기 android는 되는데 ios는 안돼요 ㅜㅠ

해결됨

맛집 지도앱 만들기 (React Native & NestJS)

환경변수만 설정이 필요해서 저부분 강의로 보고 따라했는데 android 환경변수를 잘 받아와요. 그런데 강의에서도 ios는 따로 설정한 부분이 없어서 똑같이 재빌드만 했는데 undefined 나와요. 다른 곳에서 검색해보면 ios는 xcode 들어가서 추가 설정이 있는데 제가 무엇을 더 해야할까요? ex) https://velog.io/@chloedev/RN [RN] react-native-config 환경변수 사용하기 아니라면 제가 [5-7] 강의 부분 말고 다른 부분도 추가적으로 봐야 ios 환경변수를 적용할 수 있을까요? .evn 설정 android 터미널 ios 터미널

  • react-native
  • typescript
  • nestjs
  • react-query
  • zustand
gwlab 댓글 3 좋아요 0 조회수 356

ios 캐시 삭제 방법 알 수 있을까요?

해결됨

맛집 지도앱 만들기 (React Native & NestJS)

아래 방법을 진행하고 앱을 실행해도 앱이 사용자의 위치를 사용하도록 허용하시겠습니까? 라는 알림이 나오지를 않습니다. 혹시 방법이 있을까요!? 방법 1. 설정 -> 개발자 -> Xcode 프로젝트 빌드 파일 -> 2개 삭제 방법 2. npx react-native start --reset-cache 방법 3. yarn cache clean

  • react-native
  • typescript
  • nestjs
  • react-query
  • zustand
강프로그래머 댓글 2 좋아요 0 조회수 630

[해결 방법] Specs satisfying the RNPermissions...

해결됨

맛집 지도앱 만들기 (React Native & NestJS)

수정 1) Xcode -> IOS Deployment Target 변경 (12.0 -> 13.0) 수정 2) VSC -> Podfile -> 13버전으로 업! platform :ios, '13.0'

  • react-native
  • typescript
  • nestjs
  • react-query
  • zustand
강프로그래머 댓글 1 좋아요 0 조회수 160

article / section 태그에 관해

해결됨

기초부터 배우는 Next YTMusic 클론 코딩 (with next.js 14, UI 마스터)

article 과 section tag 를 자주 사용하시는데, 혹시 어떤 기준으로 사용하시나요?

  • react
  • 인터랙티브-웹
  • 클론코딩
  • next.js
  • tailwind-css
  • zustand
femaster1 댓글 1 좋아요 0 조회수 197

카테고리 변경 시 이미지 로딩

해결됨

기초부터 배우는 Next YTMusic 클론 코딩 (with next.js 14, UI 마스터)

카테고리 관련 강의를 수강 중입니다. 카테고리 변경 시 백그라운드 변경되는 부분이 있는데요 해당 부분이 이미지 로딩(변경?)이 매우 늦게 되더라구요 해당 부분 개선해보려면 어떤 것을 시도해보면 좋을까요?

  • react
  • 인터랙티브-웹
  • 클론코딩
  • next.js
  • tailwind-css
  • zustand
femaster1 댓글 2 좋아요 1 조회수 233

인기 태그

인프런 TOP Writers

주간 인기글