묻고 답해요
161만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결[리뉴얼] 맛집 지도앱 만들기 (React Native & NestJS)
[3-2] TextInput 작동이 안됩니다
안녕하세요!천천히 따라서 코딩 하고 있었는데, 잘 따라 한것 같은데 InputField 설정 이후에 LoginScreen에서 placeholder 가 작동하지 않아서보니 클릭해도 키보드가 열리지 않더라고요InputField.tsximport React from 'react'; import { Dimensions, StyleSheet, Text, TextInput, TextInputProps, View, } from 'react-native'; import {colors} from '../constants'; interface InputFieldProps extends TextInputProps { disabled?: boolean; error?: string; } const deviceHeight = Dimensions.get('screen').height; function InputField({disabled = false, error, ...props}: InputFieldProps) { return ( <View style={[ styles.container, disabled && styles.disabled, Boolean(error) && styles.inputError, ]}> <TextInput editable={!disabled} placeholderTextColor={colors.GRAY_500} style={[styles.input, disabled && styles.disabled]} autoCapitalize="none" spellCheck={false} autoCorrect={false} {...props} /> {Boolean(error) && <Text style={styles.error}>{error}</Text>} </View> ); } const styles = StyleSheet.create({ container: { borderWidth: 1, borderColor: colors.GRAY_200, padding: deviceHeight > 700 ? 15 : 10, }, input: { fontSize: 16, color: colors.BLACK, padding: 0, }, disabled: { backgroundColor: colors.GRAY_200, color: colors.GRAY_700, }, inputError: { borderWidth: 1, borderColor: colors.RED_300, }, error: { color: colors.RED_500, fontSize: 12, paddingTop: 5, }, }); export default InputField; LoginScreen.tsximport React from 'react'; import {SafeAreaView, StyleSheet, View} from 'react-native'; import InputField from '../../components/InputField'; function LoginScreen() { return ( <SafeAreaView style={styles.container}> <View style={styles.inputContainer}> <InputField placeholder="이메일" error={'이메일을 입력해주세요.'} /> <InputField placeholder="비밀번호" /> </View> </SafeAreaView> ); } const styles = StyleSheet.create({ inputContainer: { flex: 1, margin: 30, }, container: { gap: 20, }, }); export default LoginScreen; color.tsconst colors = { WHITE: '#ffff', PINK_500: '#BF5C79', PINK_700: '#C63B64', RED_300: '#FFB4B4', RED_500: '#FF5F5F', GRAY_200: '#E7E7E7', GRAY_500: '#E8E8E8', GRAY_700: '#E575757', BLACK: '#000', }; export {colors}; 문제화면 몇번을 다시보고 input field를 다시 만들어서 해봐도 안되서 도움 요청드립니다 ㅜ
-
미해결[리뉴얼] 맛집 지도앱 만들기 (React Native & NestJS)
시뮬레이터는 열리는데 앱 실행이 안되고 그냥 핸드폰이 켜집니다
❗질문 작성시 꼭 참고해주세요현재 문제(또는 에러)와 코드(또는 github)를 첨부해주세요. 맥/윈도우, 안드로이드/iOS, ReactNative, Node 버전 등의 개발환경을 함께 적어주시면 도움이 됩니다. 에러메세지는 일부분이 아닌 전체 상황을 올려주세요. (일부만 자르거나 복사하지말아주세요.) 개발환경/코드에 대한 정보가 없을경우 답변이 어렵습니다. 안녕하세요!프로젝트 생성하고 yarn start -> i 해서 실행을 했는데, 강의 상에는 시뮬레이터가 켜지면서 자동으로 맛집 앱이 켜지게 되는데, 저는 그냥 하나의 아이폰 핸드폰 화면만 보여집니다. m1 macnode 22.13react-native 0.76.0
-
해결됨[리뉴얼] 맛집 지도앱 만들기 (React Native & NestJS)
[3-5] ref 오류
에뮬 실행시 정상적으로 작동은 되나 저 에러가 꼐속 떠있어서 이유가 궁금해 여쭤봅니다!
-
해결됨Next.js App router 기반 Chat GPT 만들기
loading이 동작하지 않습니다.
https://github.com/JeanYoungPark/next-chat-gptloading 부분 코드 작성중인데 loading 컴포넌트가 따로 로드되지 않는 것 같습니다. 원인을 알 수 있을까요?
-
미해결[리뉴얼] 맛집 지도앱 만들기 (React Native & NestJS)
newPost 'unknown' 형식에 'id' 속성이 없습니다.ts(2339)
안녕하세요 강사님 강의수강 중에 궁금한 점이 있어 문의드립니다. 강사님 PC에서는 해당 오류가 안나는데 저 소스에선 해당 에러가 뜨네요. 1.update response = newPost.id관련해서 타입을 지정하지 않는건 의도 한부분인지 궁금합니다. 2.eslint 설정이 안뜨는 rule 설정이 궁금합니다. 'unknown' 형식에 'id' 속성이 없습니다.ts(2339) ❗질문 작성시 꼭 참고해주세요현재 문제(또는 에러)와 코드(또는 github)를 첨부해주세요. 맥/윈도우, 안드로이드/iOS, ReactNative, Node 버전 등의 개발환경을 함께 적어주시면 도움이 됩니다. 에러메세지는 일부분이 아닌 전체 상황을 올려주세요. (일부만 자르거나 복사하지말아주세요.) 개발환경/코드에 대한 정보가 없을경우 답변이 어렵습니다.
-
미해결[리뉴얼] 맛집 지도앱 만들기 (React Native & NestJS)
react-native-safe-area-context & react-native-screens 에러
이러한 오류가 계속뜨는데 다른 질문에서 버전을 바꾸라고햇을떄 react-native-safe-area-context랑 react-native-screens 이것들의 버전을 바꾸는 방법을 모르겠습니다오늘 몇시간넘게 해결이 안돼 너무 답답해서 도와주시면 감사하겠습니다.
-
미해결[리뉴얼] 맛집 지도앱 만들기 (React Native & NestJS)
[2-3]에뮬레이터 실행 오류
질문을 계속해서 죄송합니다네비게이션 설치후 로그인스크린 구현후 에뮬레이터를 실행하려고하니 전까지 잘되던데 계속 에러가 뜨면서 실행이 안됩니다 ㅠㅠ
-
미해결[리뉴얼] 맛집 지도앱 만들기 (React Native & NestJS)
[2-0] front파일로 옮길떄 에러
말씀드린대로 front파일을 만들고 그 안에 전부 프로그램을 옮겻을떄Parsing error: No Babel config file detected for C:\Users\user\Documents\react native-study\MatzipApp\front\index.js. Either disable config file checking with requireConfigFile: false, or configure Babel so that it can find the config files.이러한 에러가 거의 모든 파일에 계속 나는데 왜그러는 걸까요.. ㅠㅠ
-
미해결[리뉴얼] 맛집 지도앱 만들기 (React Native & NestJS)
강사님의 계획?
선생님 준비중인 강의가 혹시 있으실까요?선생님같은분이 강의를 안한다는건 정말 재능 낭비인것 같습니다.만족도가 이렇게 높은 강의는 첨음이거든요그래서 혹시 다른 준비중인 강의가 있는지 묻고싶습니다.계속 기다리고 있어서 두통이 생깁니다. ㅎㅎ 개인적으로는 next 실무강의를 해주시면 좋겠지만 ㅎㅎ
-
미해결[리뉴얼] 맛집 지도앱 만들기 (React Native & NestJS)
오류ㅠㅠ
윈도우-안드로이드로 수강하는 중인데 이전 강의까지 잘 되다가 navigation 설치하고나서 이런 오류가 떠서 구글링도 해봤는데 해결이 잘 안되네요(yarn이 잘 안돼서 npm 설치과정 따라서 설치했습니다.)이런 오류가 뜨길래 구글링을 통해android { ... compileOptions { sourceCompatibility JavaVersion.VERSION_11 targetCompatibility JavaVersion.VERSION_11 } kotlinOptions { jvmTarget = "11" } } 이렇게 해보라길래 해봐도 오류가 뜨네요 ㅠㅠnode -v : v20.18.1java --version : openjdk 11.0.25
-
미해결[리뉴얼] 맛집 지도앱 만들기 (React Native & NestJS)
npm start (android) 에러
❗질문 작성시 꼭 참고해주세요현재 문제(또는 에러)와 코드(또는 github)를 첨부해주세요. 맥/윈도우, 안드로이드/iOS, ReactNative, Node 버전 등의 개발환경을 함께 적어주시면 도움이 됩니다. 에러메세지는 일부분이 아닌 전체 상황을 올려주세요. (일부만 자르거나 복사하지말아주세요.) 개발환경/코드에 대한 정보가 없을경우 답변이 어렵습니다.IOS는 잘 동작합니다.android 에뮬레이터 실행을 위해 'a'를 누르면 아래와 같은 에러가 발생합니다. .android studio에서 gradle 버전을 8.9로 올리라고 해서 올린후 실행한 결과입니다.
-
미해결Next.js App router 기반 Chat GPT 만들기
Runtime Error
// db/index.ts 코드 내용 import { neon } from '@neondatabase/serverless'; import { drizzle } from 'drizzle-orm/neon-http'; import * as schema from './schema'; const sql = neon(process.env.DATABASE_URL!); const db = drizzle(sql, {schema}); export default db;// action/signup.ts 내용 "use client"; import bcrypt from "bcryptjs"; import { getUserByEmail } from "@/data/user"; import { SignUpSchema } from "@/schemas/auth"; import { user } from "@/db/schema"; import db from "@/db"; import { redirect } from "next/navigation"; export const signUp = async(_:any, formData:FormData) => { //1. 필드 중요성 const validatedFields = SignUpSchema.safeParse({ name: formData.get("name"), email: formData.get("email"), password: formData.get("password") }) if(!validatedFields.success){ return { errorMessages: "잘못된 입력값이 있습니다.", }; } //2. 존재하는 사용자인지 체크 const {email, name, password} = validatedFields.data; //4. 성공 여부 반환 try { const existingUser = await getUserByEmail(email); if(existingUser){ return { errorMessages: "이미 가입된 사용자입니다.", }; } const hasehdPassword = await bcrypt.hash(password, 10); //3. db에 insert await db.insert(user).values({name, email, password: hasehdPassword}); } catch(error) { console.error(error) return {errorMessage: "알 수 없는 오류가 발생했습니다."}; } redirect("/login"); };회원가입 마무리 코드를 다 입력하고 저장한 뒤에 사이트를 확인했는데, 이런 오류가 납니다. DATABASE URL이 잘못됐나 싶어서 다시 확인해봤지만 이상이 없었습니다. 이전 강의인 회원가입 유효성 검사 기능 제작까지 문제가 없었는데, 문제 해결이 되지 않아 질문 남겨봅니다....
-
미해결[리뉴얼] 맛집 지도앱 만들기 (React Native & NestJS)
yarn start 오류
제가 윈도우라서 열심히 1-5과정 따라가고 있는데 밑에 과정까지는 완료했는데 yarn start부분에서 오류가 뜨네요(안드로이드,ios 다 오류떠요) 정말 죄송하지만 해결법을 알려주실 수 있으실까요?yarn start - a눌렀을때yarn start - i 눌렀을때 doctor2가지 문제가 있는 것 같네요..
-
미해결Next.js App router 기반 Chat GPT 만들기
Route Handler 에서 Post 코드 작성해봤는데 계속 에러가 납니다 ㅠㅠ
제가 수업을 기반으로 작성한 코드는 다음과 같습니다. import { NextResponse } from "next/server"; export async function POST(request: Request, {params}: {params: {testId: string}}){ const userData = await request.json(); console.log("server user data", userData); console.log("server param", params.testId); return NextResponse.json({message: "사용자가 성공적으로 생성되었습니다."}); }"use client"; export default function Page({params} : {params: {id:string}}){ const handlerSubmit = async (e:React.FormEvent) => { const response = await fetch('/api/test/1234', { method: "POST", headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({name: 'test name', email: 'test email'}), }); console.log(e); const data = await response.json(); console.log("response data", data); } return (<>다이나믹 라우트 페이지: {params.id} <button type="submit" onClick={handlerSubmit}> 전송 </button> </>); } 에러 메시지는 다음과 같습니다. ✓ Compiled /dashboard/[id] in 1716ms (597 modules) Error: Route "/dashboard/[id]" used `params.id`. `params` should be awaited before using its properties. Learn more: https://nextjs.org/docs/messages/sync-dynamic-apis at id (c:\study\chatgpt-clone\next-tutorial\app\dashboard\[id]\page.tsx:21:36) 19 | 20 | > 21 | return (<>다이나믹 라우트 페이지: {params.id} | ^ 22 | <button 23 | type="submit" 24 | onClick={handlerSubmit}> GET /dashboard/12345 200 in 2989ms ✓ Compiled /favicon.ico in 406ms (331 modules) GET /favicon.ico 200 in 543ms ✓ Compiled /api/test/[testId] in 337ms (614 modules) server user data { name: 'test name', email: 'test email' } Error: Route "/api/test/[testId]" used `params.testId`. `params` should be awaited before using its properties. Learn more: https://nextjs.org/docs/messages/sync-dynamic-apis at testId (c:\study\chatgpt-clone\next-tutorial\app\api\test\[testId]\route.ts:6:39) 4 | const userData = await request.json(); 5 | console.log("server user data", userData); > 6 | console.log("server param", params.testId); | ^ 7 | 8 | return NextResponse.json({message: "사용자가 성공적으로 생성되었습니다."}); 9 | } server param 1234 POST /api/test/1234 200 in 1402ms 응답은 잘 되는데, 동기? 비동기? 이쪽부분에서 문제가 있는 것 같습니다.. ㅠㅠ 영상이랑 똑같이 따라한 것 같은데.. 뭐가 문제인건지 감이 안잡히네요 ㅠㅠ (혹시 추가로 필요한 코드가 있다면 말씀해주세요 ㅠㅠ )
-
미해결[리뉴얼] 맛집 지도앱 만들기 (React Native & NestJS)
useAuth logout 401에러
안녕하세요 강사님!강사님께서 해당 강의에서 작성해주신대로 우선 Database와 백엔드서버를 구동시킨 채로 프론트엔드 서버를 npx react-native run-ios로 어플을 빌드하고로그아웃 버튼을 클릭했을때 위의 이미지와 같이 401에러가 발생합니다.제가 작성한 코드를 보여드리면src/hooks/queries/useAuth.ts function useLogout(mutationOptions?: UseMutationCustomOptions) { return useMutation({ mutationFn: logout, onSuccess: () => { console.log('useLogout onSuccess'); removeHeader('Authorization'); removeEncryptStorage(storageKeys.REFRESH_TOKEN); }, onSettled: () => { // auth에 해당하는 쿼리들을 캐시 무효화해서 업데이트 queryClient.invalidateQueries({queryKey: [queryKeys.AUTH]}); }, ...mutationOptions, }); } function useAuth() { const logoutMutation = useLogout(); return { logoutMutation, }; } export default useAuth; src/api/auth.tsconst logout = async () => { console.log('logout API call'); try { await axiosInstance.post('/auth/logout'); } catch (err) { console.error(`logout api err :::: ${err}`); } }; export { logout };3. src/api/axios.tsimport axios from 'axios'; const axiosInstance = axios.create({ baseURL: 'http://localhost:3030', withCredentials: true, }); export default axiosInstance;src/utils/header.tsimport axiosInstance from '../api/axios'; function setHeader(key: string, value: string) { axiosInstance.defaults.headers.common[key] = value; } function removeHeader(key: string) { if (!axiosInstance.defaults.headers.common[key]) { return; } delete axiosInstance.defaults.headers.common[key]; } export {setHeader, removeHeader}; src/screens/map/MapHomeScreen.tsximport React from 'react'; import {Button, StyleSheet, Text, View} from 'react-native'; import useAuth from '../../hooks/queries/useAuth'; const MapHomeScreen = () => { const {logoutMutation} = useAuth(); return ( <View> <Text>맵 스크린</Text> <Button title="로그아웃" onPress={() => logoutMutation.mutate(null)} /> </View> ); }; const styles = StyleSheet.create({}); export default MapHomeScreen;
-
미해결[리뉴얼] 맛집 지도앱 만들기 (React Native & NestJS)
useAuth
22:41 타임을 보시면src/hooks/queries/useAuth.ts파일에서 리액트 쿼리를 이용하여 선언한 것을 useAuth라는 함수로 만들어서 반환해주고 있는데요function useAuth() { const signupMutation = useSignup(); const refreshTokenQuery = useGetRefreshToken(); const getProfileQuery = useGetProfile({ enabled: refreshTokenQuery.isSuccess, // true일떄 쿼리가 실행 }); const isLogin = refreshTokenQuery.isSuccess; const loginMutation = useLogin(); return { signupMutation, refreshTokenQuery, getProfileQuery, isLogin, loginMutation, }; } src/navigations/root/RootNavigator.tsx 파일에서 위의 함수를 호출할때 const isLogin = useAuth();로 반환받고있습니다. 구조분해할당이 아니라 객체 그 자체로 받는 이유가 있을까요?
-
미해결[리뉴얼] 맛집 지도앱 만들기 (React Native & NestJS)
[!] Error installing boost
❗질문 작성시 꼭 참고해주세요현재 문제(또는 에러)와 코드(또는 github)를 첨부해주세요. 맥/윈도우, 안드로이드/iOS, ReactNative, Node 버전 등의 개발환경을 함께 적어주시면 도움이 됩니다. 에러메세지는 일부분이 아닌 전체 상황을 올려주세요. (일부만 자르거나 복사하지말아주세요.) 개발환경/코드에 대한 정보가 없을경우 답변이 어렵습니다.다시 따라해보는중인데npx react-native@0.72.6 init ykservice --version 0.72.6로 할경우 cocoapods 설치시 boost 설치 실패에러가 발생합니다. 0.72.6 으로 진행하려면 아래 링크 참조하여 수정하면 가능합니다. https://github.com/boostorg/boost/issues/843#issuecomment-1872943124 근데 인퍼런은 수업별로 질문게시판이 있으면 좋겠네요.
-
해결됨[리뉴얼] 맛집 지도앱 만들기 (React Native & NestJS)
1-5는 Mac 기준으로 설명이 되는 것 같은데 Windows 에서도 진행해야하는건가요?
윈도우 환경의 수강생입니다. 1-5를 진행하려 하는데 npm 이 실행이 안되어서 진행을 못하고 있습니다.윈도우 환경에서도 1-5는 수행을 해야하는건가요?
-
미해결[리뉴얼] 맛집 지도앱 만들기 (React Native & NestJS)
배포 질문인데요
오류에 관련된 질문은 아니고 일반적인 질문 입니다 .개발을 완료후 안드로이드에 배포를 하려고 하는데 테스트를 꼭 거쳐야 배포가 가능 한가요?
-
미해결[리뉴얼] 맛집 지도앱 만들기 (React Native & NestJS)
css에서 <View>가 없다면 왜 두 버튼 크기가 달라지는 지 궁금합니다.
<Pressable disabled={inValid} style={({pressed}) => [ styles.container, styles[size], pressed ? styles[`${variant}Pressed`] : styles[variant], inValid && styles.inValid, ]} {...props}> {/* <View style={styles[size]}> */} <Text style={[styles[`${variant}Text`], styles.text]}>{label}</Text> {/* </View> */} </Pressable> 강의 내용대로 수정을 진행하면 만들어주신대로 코드가 정상작동합니다. 그런데, 저는 강의 3:49초에서 <View/>를 넣기 전에도 동일한 width여야 된다 생각하는데, 왜 여기서 두 버튼의 크기가 다르고 view를 넣으면 어째서 고쳐지는 지를 잘 모르겠습니다.( text 크기 따라서 달라지는 거 같은데, pressable이 100%이니 view가 없어도 같은 크기여야하는 거 같은데 이해를 잘 못하겠습니다.)