❗ 질문 작성시 꼭 참고해주세요 에러 메세지에서 단서를 찾을 수 있는 경우가 많습니다. 에러 메세지를 읽고 한번 검색해보시는것을 추천드립니다. 질문글을 작성하실때는, 현재 문제(또는 에러)와 코드나 github 을 첨부해주세요. 개발중인 OS, ReactNative, Node 버전 등의 개발환경 을 알려주셔야합니다. 에러메세지는 일부분이 아닌 전체 상황을 올려주세요. 일부만 보여주시면 답변이 어렵습니다. (에러 일부만 자르거나 일부만 복사하지말아주세요 ) 안녕하세요. 우면 R&D 사내 입니다. figma.com 에서 접속후 .fig 파일 import 가 진행되지 않습니다. 아마도 사내에서 파일 업로드를 막은 듯 한데요. 혹시 사외에서 교육 진행이 가능한가요? 감사합니다.
import { SafeAreaView, useSafeAreaInsets, } from "react-native-safe-area-context"; // react-native-safe-area-context: 5.4.0 강의 내용처럼 위 SafeAreaView 를 사용할 경우 아래 이미지처럼 헤더 아래 부분이 넓어지는데요. iOS android <Stack.Screen name="[id]" options={{ headerShown: true, 색상을 넣고 원인을 찾아보니 헤더가 true 일때 헤더 크기만큼 아래 중복되서 넓어지는 것을 발견했어요. 해결방법 <SafeAreaView style={styles.container} edges={["bottom", "left", "right"]} > 이렇게 edges 부분을 추가하시면 되요. https://github.com/AppAndFlow/react-native-safe-area-context/issues/650 깃이슈로도 올라와 있는데 추후 버전 업데이트 되서 해결되거나 다른 좋은 방법이 있으신 분들은 댓글로 알려주세요.
RDS 부분에서 vim .env 수정하면 된다는데, 어떻게 하라는 건지 이해가 안가요 .env 는 DB_HOST 만 수정해주면 되나요?? [Nest] 28937 - 2025. 09. 07. 오후 4:15:42 ERROR [TypeOrmModule] Unable to connect to the database. Retrying 에러도 발생하고 잇어요
안녕하세요 강사님 양질의 강의 재밌게 잘 수강중입니다! 푸시 알림 테스트 개발 단계까지 왔는데 IOS는 애플 개발자 멤버십에 가입을 해야해 과금이 부담되어 건너뛰었습니다. 안드로이드 환경에서라도 테스트 해보고 싶어서 강의 따라가면서 빌드는 성공했습니다! 실제 안드로이드 기기는 가지고 있지 않아서 코드 에디터 상에서 npx expo start 명령어 후에 development build 모드인것도 확인하고 android 에뮬레이터에서 바로 앱이 실행이 되었습니다 이런 에러화면도 띄워지고 콘솔창에 실제 기기를 사용해 주세요 라는 에러가 잡혀서 실제 기기를 사용해야 하나 하고 깔끔히 포기하려 합니다 실제 기기를 사용해야하는건지 또 다른 방법이 있는지 팁 부탁드려도 될까요? 강의에서는 에뮬레이터가 아닌 다른 걸 띄우신거 같은데 알려주시면 감사하겠습니다...!! ❗ 질문 작성시 꼭 참고해주세요 에러 메세지에서 단서를 찾을 수 있는 경우가 많습니다. 에러 메세지를 읽고 한번 검색해보시는것을 추천드립니다. 질문글을 작성하실때는, 현재 문제(또는 에러)와 코드나 github 을 첨부해주세요. 개발중인 OS, ReactNative, Node 버전 등의 개발환경 을 알려주셔야합니다. 에러메세지는 일부분이 아닌 전체 상황 을 올려주세요. 일부만 보여주시면 답변이 어렵습니다. 에러 잘라서 올리시면 안됩니다! (에러 일부만 자르거나 일부만 복사하지말아주세요)
❗ 질문 작성시 꼭 참고해주세요 에러 메세지에서 단서를 찾을 수 있는 경우가 많습니다. 에러 메세지를 읽고 한번 검색해보시는것을 추천드립니다. 질문글을 작성하실때는, 현재 문제(또는 에러)와 코드나 github 을 첨부해주세요. 개발중인 OS, ReactNative, Node 버전 등의 개발환경 을 알려주셔야합니다. 에러메세지는 일부분이 아닌 전체 상황을 올려주세요. 일부만 보여주시면 답변이 어렵습니다. 안녕하세요 강사님 강의를 따라서 실행해보고 있는데, 현재 ios는 시뮬레이터가 켜지지만, 안드로이드는 켜지지 않는 상황입니다. npx react-native doctor를 사용하여 뭐가 문제인지 확인했는데 해당 스크린샷처럼 나왔습니다 환경변수도 공식문서처럼 다 했습니다.
Distribute App 버튼 클릭 시, 다음과 같은 에러가 표시됩니다 Upload Symbols Failed The archive did not include a dSYM for the hermes.framework with the UUIDs 현재 React Native 버전으로 강의를 진행하다 보면 환경변수에서 Android 버전 관련 에러가 떠서, GitHub에서 pull 받아서 진행했는데 혹시 그게 원인일까요?
안녕하세요. 게시물 업로드 요청 시 500 Internal Server Error 에러가 발생합니다. 현재 코드에는 쿠키도 함께 전달되고, 네트워크 탭에서 확인해보면 formData 값도 정상적으로 전송되는 것으로 보입니다. const onSubmit: FormEventHandler = (e) => { e.preventDefault(); // formData 객체에 값 넣기 const formData = new FormData(); formData.append("content", content); preview.forEach((item) => { if (item) { formData.append("images", item.file); } }); // 전송 fetch(`${process.env.NEXT_PUBLIC_BASE_URL}/api/posts`, { method: "post", credentials: "include", body: formData, }); }; 그런데 서버에서는 userId가 undefined로 들어가고 User 정보가 없다(?)는 오류가 발생합니다. 다른 분들의 Internal server error 관련 질문을 살펴봐도, 이 문 제가 프론트에서 확인할 수 있는 부분인지 잘 구분이 되지 않아 질문드립니다. 제가 어디를 중점적으로 확인해보면 좋을까요?
❗ 질문 작성시 꼭 참고해주세요 에러 메세지에서 단서를 찾을 수 있는 경우가 많습니다. 에러 메세지를 읽고 한번 검색해보시는것을 추천드립니다. 질문글을 작성하실때는, 현재 문제(또는 에러)와 코드나 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로 설정되어서 발생하는 충돌문제 였던 것 같습니다. 강의 들으시는 분들에게 도움이 되었으면 합니다 .
안녕하세요 강사님 좋은 강의 잘 듣고 있습니다! useSuspenseQuery를 사용 중에 고민이 생겨서 질문 드립니다. 제가 구현하고 있는 프로젝트의 대부분 API는 인증이 필요합니다. refresh token 은 http only 쿠키로 관리하고, access token 은 쿠키에 저장하고, 요청 헤더에 넣어 인증을 하고 있습니다. useSuspenseQuery 를 사용하는 페이지에서 SSR 단계에 401 에러가 발생합니다. 이후 CSR 전환 시에는 정상적으로 데이터를 불러와 화면은 최종적으로 렌더링됩니다. 해당 페이지를 dynamic import 로 CSR 강제하면 401이 발생하지 않습니다. 제가 추정한 원인은 클라이언트 컴포넌트 내부라도 초기 렌더링 시 SSR 패스에서 useSuspenseQuery 가 실행되어 서버에서 API 요청이 발생. 이때 공통 axios 인스턴스가 클라이언트 전용 방식으로 쿠키를 읽어 헤더에 토큰을 주입하도록 구현되어 있어, 서버 환경에서는 토큰을 읽지 못해 401이 발생하는 것으로 판단했습니다. 해결을 위해 시도한 방법 prefetchQuery + useSuspenseQuery 조합으로, prefetchQuery 단계에서 next/headers 를 통해 서버 환경에서 토큰을 읽어 주입하면 401이 사라졌습니다. 다만, 모든 useSuspenseQuery 호출 지점마다 prefetchQuery 를 추가하는 것은 과도하다고 느껴 대안을 모색 중입니다. 질문 사항 왜 SSR에서 실행되나요? 클라이언트 컴포넌트 내부에서 호출하는데도 useSuspenseQuery 가 SSR 렌더링 단계에서 동작하는 메커니즘을 정확히 이해하고 싶습니다. useSuspenseQuery 의 단점/주의점 강의에서는 주 사용을 권장해 주셨는데, 모든 데이터 관리에 useQuery 대신 useSuspenseQuery 사용하는게 좋은건지 실제 서비스에서 고려해야 할 단점이나 주의사항이 궁금합니다. 401을 피하는 권장 패턴 제 환경처럼 서버에서 토큰을 읽지 못해 401이 나는 경우, 제가 시도한 방법 인 prefetchQuery 적용 외에 권장되는 표준 패턴이 있을까요? prefetchQuery 를 여러 곳에서 사용할 때의 리스크 여러 페이지/쿼리에서 prefetchQuery 를 널리 적용하면 TTFB 지연, 직렬화된 캐시의 HTML 페이로드 증가, 중복 호출 등의 문제가 커질 수 있을까요? 그렇다면 적절한 적용 기준이나 완화 전략이 궁금합니다. 그리고 어떤 기준으로 prefetchQuery 를 적용하면 좋을지도 궁금합니다. 문서와 블로그, GPT 등을 찾아봤지만 명확히 정리하기 어렵고, 제가 질문을 드릴 수 있는 최고 전문가라고 생각하여 의견을 여쭙니다. 긴글 읽어주셔서 감사합니다! 아래 에러가 발생하는 예시 코드 첨부 드립니다. (APage를 CSR로 강제하면 에러 미발생) import Spinner from "@/components/common/spinner/Spinner"; import A from "@/components/pages/A"; import { Suspense } from "react"; import { ErrorBoundary } from "react-error-boundary"; interface APageProps { params: { id: string; }; } export default async function APage({ params, }: APageProps) { const { id } = params; const parsedId = parseInt(id); return ( <ErrorBoundary fallback={<div>에러가 발생했습니다</div>}> <Suspense fallback={<Spinner fullscreen />}> <A id={parsedId} /> </Suspense> </ErrorBoundary> ); } "use client"; import { useGetAList } from "@/api/A/queries/useGetAList"; interface AProps { id: number; } export default function A ({ id }: AProps) { const { data: probiomeList } = useGetAList(id); // 생략 import { queryKeys } from "@/constants/queryKeys"; import { UseSuspenseQueryCustomOptions } from "@/types"; import { useSuspenseQuery } from "@tanstack/react-query"; import { getAList } from "../A"; import { AList } from "@/types/A"; export function useGetAList( id: number, queryOptions?: UseSuspenseQueryCustomOptions<AList> ) { return useSuspenseQuery({ queryFn: () => getAList(id), queryKey: [ queryKeys.A.BASE, queryKeys.A.GET_A_LIST, id, ], ...queryOptions, }); }
왜 배포전에 기능 다 구현하고 했는데, 배포하면 이런 기능을 못 쓰고, 추가로 파이어베이스 등을 사용해야만 가능한가요.... 정 방법이 없나요? 아니면 파이어 베이스 까지 활용해서 기능을 성공적으로 구현하는 걸 보고 싶은데 안될까요?? 추가 강의로든, 이 질문에 대한 답변으로든, 꼭 이번 프로젝트의 끝을 보고 싶습니다..!!
제가 본 바로는, 원래 notes 속성으로 db.json에 사전에 기입해둔 데이터가 있어서 실습하는 과정에서 해당 린캔버스는 오류가 없었는데, 다른 린캔버스 들어가면서 이런식으로 에러가 뜨네요. 전 짐코딩님 강좌 처음부터끝까지 다 스킵 안하고 보고 있는데, 저만 이런 오류가 뜨나 해서요. 혹시, 강좌에서 코드에 이런 오류는 반영이 안된걸까요?
function create(baseURL, options) { const instance = axios.create( Object.assign({ // baseURL: baseURL, baseURL, // key 와 값이 같으면 생략 가능 }), options, ); return instance; } 제가 사용한 코드입니다.(강의 내용 그대로 담았습니다. 주석 빼고 보면 강의 시 사용한 코드와 동일합니다. 제가 궁금한 것은, 인터넷으로 관련 문법을 찾아 본 결과 Object.assign(A,B,C)같은 형식으로 하여, A,B,C 각각의 객체를 merge한다고 알고 있는데, 강의에서는 Object.assign({baseURL}),options 으로 options객체를 object.assign 함수 바깥에 위치하더라구요? 이러면 아무 의미 없는 코드가 되어 버리는것 아닌가요? Object.assign({baseURL,},options)를 해야 되는거 같은데, 제가 놓친 부분이 있는걸까요? (코딩이 전공이 아니라 제가 잘 모르는 걸수도 있습니다. 알려주시면 감사하겠습니다)
next.js에서 제공하는 Request Memoization 기능은 같은 엔드포인트 경로로 여러 개의 요청이 들어왔을 때 하나의 요청으로 캐싱해주는걸로 알고있습니다. 이와 관련해서 3가지 궁금증이 있습니다. Request Memoization 기능은 같은 페이지 한정인가요. 아님 프로젝트 전역에 적용되는걸까요?? 예를 들어 /dashboard 와 /home 두 페이지 모두에서 getUserInfo 라는 fetch 함수를 호출한다면 이 경우도 Request Memoization 이 적용되는건가요. 만약 같은 엔드포인트지만 넘겨주는 파라미터가 다를 경우도 Request Memoization이 적용되나요? axios를 사용한다면 Request Memoization 기능을 활용할 수 없는걸로 알고있는데 react에서 제공하는 cache 함수를 사용하면 동일한 효과를 기대할 수 있나요? 감사합니다!!
