176만명의 커뮤니티!! 함께 토론해봐요.
해결됨
[풀스택 완성] Supabase로 웹사이트 3개 클론하기 (Next.js 14)
카카오 로그인 까지 구현 후 vercel에 배포 까지 한 상태이고 아직 도메인은 등록 하지않았습니다만 집에서 할 때는 vscode로 로컬 서버를 열어놔서 몰랏었는데 로컬 서버를 열어놨을 때는 잘되지만 밖에서 제가 vercel에 배포한 사이트를 들어가서 카카오 로그인을 시도해보니 localhost에서 연결을 거부했습니다. ERR_CONNECTION_REFUSED 에러가 나오는데 어디가 문제 인걸까요? ㅠ
미해결
Next + React Query로 SNS 서비스 만들기
강의를 따라하는 도중 이런 에러를 만났습니다 에러 경로를 보고 찾을려고 하는데 node_modules\oidc-token-hash\lib\shake256.js (3:1) 가 어딘지를 잘 못찾겠습니다
해결됨
맛집 지도앱 만들기 (React Native & NestJS)
npx react-native run-ios 로 실행하는 것이 아닌 Xcode 실행해서 빌드해야 적용됩니다!!
해결됨
맛집 지도앱 만들기 (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 & 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) 이에러가 계속 뜹니다. 도대체 몇시간 째 검색을 하고 있는지. ....
미해결
Next + React Query로 SNS 서비스 만들기
// auth.ts import NextAuth from "next-auth"; import CredentialsProvider from "next-auth/providers/credentials"; export const { handlers: { GET, POST }, auth, signIn, } = NextAuth({ pages: { signIn: "/i/flow/login", newUser: "/i/flow/signup", }, providers: [ CredentialsProvider({ credentials: { username: { label: "Username", type: "text", placeholder: "jsmith" }, password: { label: "Password", type: "password" }, }, async authorize(credentials) { const authResponse = await fetch( `${process.env.NEXT_PUBLIC_BASE_URL}/api/login`, { method: "POST", headers: { "Content-Type": "application/json", }, body: JSON.stringify({ id: credentials.username, password: credentials.password, }), } ); if (!authResponse.ok) { return null; } const user = await authResponse.json(); return { email: user.id, name: user.nickname, image: user.image, ...user, }; }, }), ], }); // route.ts export { GET, POST } from "@/auth"; 각종 커뮤니티 글을 보긴했지만,, 해당 에러는 보이지 않아서 문의 남깁니다. 서버쪽 에러는 [auth][error] CallbackRouteError: Read more at https://errors.authjs.dev#callbackrouteerror [auth][cause]: TypeError: fetch failed at Object.fetch (node:internal/deps/undici/undici:11372:11) at process.processTicksAndRejections (node:internal/process/task_queues:95:5) at async Object.authorize (webpack-internal:///(rsc)/./src/auth.ts:31:38) at async Module.callback (webpack-internal:///(rsc)/./node_modules/@auth/core/lib/actions/callback/index.js:241:39) at async AuthInternal (webpack-internal:///(rsc)/./node_modules/@auth/core/lib/index.js:66:24) at async Auth (webpack-internal:///(rsc)/./node_modules/@auth/core/index.js:127:34) at async /Users/kimyoungwoong/Desktop/next-x/node_modules/next/dist/compiled/next-server/app-route.runtime.dev.js:6:55759 at async eO.execute (/Users/kimyoungwoong/Desktop/next-x/node_modules/next/dist/compiled/next-server/app-route.runtime.dev.js:6:46527) at async eO.handle (/Users/kimyoungwoong/Desktop/next-x/node_modules/next/dist/compiled/next-server/app-route.runtime.dev.js:6:57093) at async doRender (/Users/kimyoungwoong/Desktop/next-x/node_modules/next/dist/server/base-server.js:1345:42) at async cacheEntry.responseCache.get.routeKind (/Users/kimyoungwoong/Desktop/next-x/node_modules/next/dist/server/base-server.js:1555:40) at async DevServer.renderToResponseWithComponentsImpl (/Users/kimyoungwoong/Desktop/next-x/node_modules/next/dist/server/base-server.js:1475:28) at async DevServer.renderPageComponent (/Users/kimyoungwoong/Desktop/next-x/node_modules/next/dist/server/base-server.js:1901:24) at async DevServer.renderToResponseImpl (/Users/kimyoungwoong/Desktop/next-x/node_modules/next/dist/server/base-server.js:1939:32) at async DevServer.pipeImpl (/Users/kimyoungwoong/Desktop/next-x/node_modules/next/dist/server/base-server.js:914:25) at async NextNodeServer.handleCatchallRenderRequest (/Users/kimyoungwoong/Desktop/next-x/node_modules/next/dist/server/next-server.js:272:17) at async DevServer.handleRequestImpl (/Users/kimyoungwoong/Desktop/next-x/node_modules/next/dist/server/base-server.js:810:17) at async /Users/kimyoungwoong/Desktop/next-x/node_modules/next/dist/server/dev/next-dev-server.js:339:20 at async Span.traceAsyncFn (/Users/kimyoungwoong/Desktop/next-x/node_modules/next/dist/trace/trace.js:154:20) at async DevServer.handleRequest (/Users/kimyoungwoong/Desktop/next-x/node_modules/next/dist/server/dev/next-dev-server.js:336:24) at async invokeRender (/Users/kimyoungwoong/Desktop/next-x/node_modules/next/dist/server/lib/router-server.js:173:21) at async handleRequest (/Users/kimyoungwoong/Desktop/next-x/node_modules/next/dist/server/lib/router-server.js:350:24) at async requestHandlerImpl (/Users/kimyoungwoong/Desktop/next-x/node_modules/next/dist/server/lib/router-server.js:374:13) at async Server.requestListener (/Users/kimyoungwoong/Desktop/next-x/node_modules/next/dist/server/lib/start-server.js:141:13) [auth][details]: { "code": "ECONNREFUSED", "provider": "credentials" } 이렇게 발생하고 있습니다. 신 버전인 만큼 .env AUTH_SECRET=woong 작성 해놨고 .env local 같은 경우는 NEXT_PUBLIC_API_MOCKING = enabled NEXT_PUBLIC_BASE_URL = http://localhost:9090 작성해놨습니다. 잘 해결이 안되서 글 남깁니다.
해결됨
맛집 지도앱 만들기 (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 & NestJS)
안녕하세요 강사님 깃헙에서는 Pressable로 되어있고 강의에서는 View로 되어있는데 어떤걸로 진행해야될까요?!
해결됨
맛집 지도앱 만들기 (React Native & NestJS)
계속 까먹네요 ㅠ^ㅠ 참고~!! cd android ./gradlew build
해결됨
맛집 지도앱 만들기 (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 으로 넘어가지 못하고 있습니다.
미해결
Next + React Query로 SNS 서비스 만들기
안녕하세요 CSR 경험만 있다보니, 프론트 서버에 로그인한다는 개념이 뭔가 와닿지가 않아서요 백엔드 서버에 쿠키로 인증이 되는데, 왜 프론트 서버에 로그인하는게 필요할까요? 클라이언트 사이드만 있을 때랑 뭔가 다른 느낌이네요..ㅠ
미해결
Next + React Query로 SNS 서비스 만들기
login버튼을 클릭했을 때 처음에 login페이지에 갔다가 replace로 인해서 i/flow/login으로 갈 때 인터셉팅 라우팅이 적용되어 페러렐 라우트를 사용한 (.)i/flow/login으로 이동하게 되는것 까지 이해하고 적용을 시켰고 이동은 잘 하지만 아래와 같은 에러가 발생합니다. 아래는 저의 LoginModal.tsx 코드입니다. "use client"; import { useState } from "react"; import style from "@/app/(beforeLogin)/_component/login.module.css"; import { useRouter } from "next/navigation"; export default function LoginModal() { const [id, setId] = useState(); const [password, setPassword] = useState(); const [message, setMessage] = useState(); const router = useRouter(); const onSubmit = () => {}; const onClickClose = () => { router.back(); }; const onChangeId = () => {}; const onChangePassword = () => {}; return ( <div className={style.modalBackground}> <div className={style.modal}> <div className={style.modalHeader}> <button className={style.closeButton} onClick={onClickClose}> <svg width={24} viewBox="0 0 24 24" aria-hidden="true" className="r-18jsvk2 r-4qtqp9 r-yyyyoo r-z80fyv r-dnmrzs r-bnwqim r-1plcrui r-lrvibr r-19wmn03" > <g> <path d="M10.59 12L4.54 5.96l1.42-1.42L12 10.59l6.04-6.05 1.42 1.42L13.41 12l6.05 6.04-1.42 1.42L12 13.41l-6.04 6.05-1.42-1.42L10.59 12z"></path> </g> </svg> </button> <div>로그인하세요.</div> </div> <form onSubmit={onSubmit}> <div className={style.modalBody}> <div className={style.inputDiv}> <label className={style.inputLabel} htmlFor="id"> 아이디 </label> <input id="id" className={style.input} value={id} onChange={onChangeId} type="text" placeholder="" /> </div> <div className={style.inputDiv}> <label className={style.inputLabel} htmlFor="password"> 비밀번호 </label> <input id="password" className={style.input} value={password} onChange={onChangePassword} type="password" placeholder="" /> </div> </div> <div className={style.message}>{message}</div> <div className={style.modalFooter}> <button className={style.actionButton} disabled={!id && !password}> 로그인하기 </button> </div> </form> </div> </div> ); } 저의 폴더 구조는 아래와 같습니다.
해결됨
맛집 지도앱 만들기 (React Native & NestJS)
5-3 강의에서 HeaderButton 컴포넌트를 만드신 후에, AddPostHeaderRight 컴포넌트에서 HeaderButton 을 호출하셨는데, 혹시 특별한 이유가 있을까요? AddPostScreen 에서 headerRight 에 HeaderButton 을 그대로 사용하지 않고, AddPostHeaderRight 를 만드신 점이 궁금합니다. 어떤 것을 구현하는데에는 다양한 방법이 있지만, 강사님이 그렇게 하신 데에 특별한 이유가 있는지, 배울점이 있을 수도 있을것 같아서 질문 드립니다! 강의 2회독 중인데, 저는 useEffect(() => { navigation.setOptions({ headerRight: () => <HeaderButton labelText={'등록'} />, }); }, []); 이렇게 하실 줄 알았는데, 한번 더 함수로 랩핑 하셔서 호기심이 생겼습니다.
해결됨
맛집 지도앱 만들기 (React Native & NestJS)
❗ 질문 작성시 꼭 참고해주세요 최대한 상세히 현재 문제(또는 에러)와 코드(또는 github) 를 첨부해주셔야 그만큼 자세히 답변드릴 수 있습니다. 맥/윈도우, 안드로이드/iOS, ReactNative 버전 등의 개발환경 도 함께 적어주시면 도움이 됩니다. 에러메세지는 일부분이 아닌 전체 상황 을 올려주세요. (일부만 잘라서 올리지 말아주세요.) 윈도우라 1-2,1-3은 패스하고 1-4까지 진행했고 1-5를 진행하려고 하는데 강의 환경이 맥이라 햇갈립니다. 윈도우에서는 어떻게 하면 될까요..?
미해결
맛집 지도앱 만들기 (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가 해결된 것이 맞지만, 잘 못된 방법인 것 같아 질문드립니다.
미해결
Next + React Query로 SNS 서비스 만들기
login 시 let setCookie = response.headers.get('Set-Cookie'); 가져오려고 할 때 response.headers에는 뜨는데 samesite 때문에 cookie를 가져올 수 없습니다. 개발자도구에서 samesite 에러 어떻게 해결할 수 있을까요?? 아래와 같이 수정했는데 같은 오류가 발생합니다. if (setCookie) { const parsed = cookies.parse(setCookie); cookies().set('connect.sid', parsed['connect.sid'], { sameSite: 'None', secure: true }); }
해결됨
맛집 지도앱 만들기 (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 & 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 & NestJS)
2-5강의 4분정도쯤에 createDrawerNavigator함수를 사용하면 강의에서는 타입을 잘 잡아주지만 저는 반환타입이 any로 잡힙니다. IDE를 껏다켜봐도 변함이없네요.. 뭐가 문제인걸까요? createDrawerNavigator함수: Drawer변수 타입:
해결됨
맛집 지도앱 만들기 (React Native & NestJS)
환경변수만 설정이 필요해서 저부분 강의로 보고 따라했는데 android 환경변수를 잘 받아와요. 그런데 강의에서도 ios는 따로 설정한 부분이 없어서 똑같이 재빌드만 했는데 undefined 나와요. 다른 곳에서 검색해보면 ios는 xcode 들어가서 추가 설정이 있는데 제가 무엇을 더 해야할까요? ex) https://velog.io/@chloedev/RN [RN] react-native-config 환경변수 사용하기 아니라면 제가 [5-7] 강의 부분 말고 다른 부분도 추가적으로 봐야 ios 환경변수를 적용할 수 있을까요? .evn 설정 android 터미널 ios 터미널
