안녕하세요 선생님.로그인 후에 새로고침이나 url을 치고 /(메인)으로 가면 홈으로 잘 리다이렉트 되는데 로그인 후 바로 뒤로가기를 누르면 리다이렉트되지 않고 / 페이지로 이동합니다. 이 부분 어떻게 하면 좋을지 문의 드립니다. 회원가입 후303뜨면서 홈으로 이동하는데, 이 303이 괜찮은건지와이동 후에 로그아웃버튼에서 session 정보를 가져오지 못하고 있습니다. 새로고침하면 잘 나옵니다. me정보를 가져올때 useEffect로 바꿔야할지 문의 드립니다.로그를 보면 회원가입 후, 로그인도 잘 되는것 같은데 어떤부분을 확인해야할지 알려주시면 감사하겠습니다. @/app/(beforelogin)/_lib/signup.tsx'use server'; import { signIn } from '@/auth'; import { redirect } from 'next/navigation'; const onSubmit = async (prevState: any, formData: FormData) => { if (!formData.get('id') || !(formData.get('id') as string).trim()) { return { message: 'no_id' }; } if (!formData.get('name') || !(formData.get('name') as string).trim()) { return { message: 'no_name' }; } if (!formData.get('password') || !(formData.get('password') as string).trim()) { return { message: 'no_password' }; } if (!formData.get('image')) { return { message: 'no_image' }; } let shouldRedirect = false; try { console.log('-------------------------signup start'); const response = await fetch(`${process.env.NEXT_PUBLIC_BASE_URL}/api/users`, { method: 'post', body: formData, credentials: 'include', // cookie 전달 위해서 }); // console.log(response); console.log(response.status); if (response.status === 403) { return { message: 'user_exists' }; } const user = await response.json(); console.log(user, '-------------------------signup'); shouldRedirect = true; // 회원가입 성공하고 로그인 시도 await signIn("credentials", { username: formData.get('id'), password: formData.get('password'), redirect: false, }) } catch (error) { console.error(error); return { message: null }; } if (shouldRedirect) { redirect('/home'); // redirect는 try/catch문에서 쓰면 안된다. } } export default onSubmit; @/auth.tsimport NextAuth from "next-auth" // import CredentialsProvider from "next-auth/providers/credentials" import Credentials from "next-auth/providers/credentials" export const { // api 라우트 handlers: { GET, POST }, // auth 함수 실행하면 로그인 유무알 수 있다. auth, // 로그인 하는 함수 signIn } = NextAuth({ pages: { signIn: "/i/flow/login", newUser: '/i/flow/signup', }, providers: [ Credentials({ // You can specify which fields should be submitted, by adding keys to the `credentials` object. // e.g. domain, username, password, 2FA token, etc. credentials: { id: {}, password: {}, }, authorize: async (credentials) => { console.log('-------------------------------------------auth.ts'); const authResponse = await fetch(`${process.env.NEXT_PUBLIC_BASE_URL}/api/login`, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(credentials) }) // console.log('authResponse-----------------------------------', authResponse); // 로그인 실패 if (!authResponse.ok) { return null } // 로그인 성공 const user = await authResponse.json(); console.log('user', user); // return user object with the their profile data return { ...user, name: user.nickname } }, }), ] }) @/app/(beforelogin)/_component/loginmodal.tsx'use client'; import style from '@/app/(beforeLogin)/_component/login.module.scss'; import { useRouter } from 'next/navigation'; import { SubmitHandler, useForm } from 'react-hook-form'; // import { signIn } from '@/auth'; // 서버환경일 때 import { signIn } from 'next-auth/react'; // 클라이언트일 때 type formProps = { id: string, password: string, } export default function LoginModal() { const { register, handleSubmit, formState: { errors } } = useForm<formProps>(); const router = useRouter(); const onClickClose = () => { router.back(); // TODO: 뒤로가기가 /home이 아니면 /home으로 보내기 }; const onSubmit: SubmitHandler<formProps> = async (data: formProps) => { console.log(data); try { await signIn('credentials', { ...data, redirect: false }); router.replace('/home'); } catch(error) { console.error(error); console.log('아이디와 비밀번호가 일치히자 않습니다.'); } }; 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={handleSubmit(onSubmit)}> <div className={style.modalBody}> <div className={style.inputDiv}> <label className={style.inputLabel} htmlFor='id'> 아이디 </label> <input id='id' className={style.input} type='text' placeholder='' {...register('id', { required: '아이디를 입력해주세요.' })} /> {errors.id?.message && typeof errors.id.message === 'string' && <p>{errors.id.message}</p>} </div> <div className={style.inputDiv}> <label className={style.inputLabel} htmlFor='password'> 비밀번호 </label> <input id='password' className={style.input} type='password' placeholder='' {...register('password', { required: '비밀번호를 입력해주세요.' })} /> {errors.password?.message && typeof errors.password.message === 'string' && <p>{errors.password.message}</p>} </div> </div> <div className={style.modalFooter}> <button className={style.actionButton}>로그인하기</button> </div> </form> </div> </div> ); }  @/app/(beforelogin)/page.tsximport Main from '@/app/(beforeLogin)/_component/Main'; import { auth } from '@/auth'; import { redirect } from 'next/navigation'; export default async function Home() { console.log('--------------before login home'); const session = await auth(); if (session?.user) { redirect('/home'); return null; } return ( <> <Main /> </> ); }  

강사님! 저의 문제점이 다른 질문자들의 내용과 같은 상황이라 질문과 답변 내용을 참고하여 오류를 찾아보았는데 여전히 회원가입과 로그인버튼이 제대로 동작하지 않습니다. 서버도 켜놓았고 로그를 출력했으때 data값이 출력은 됩니다. 코드 확인 해주실수 있을까요? 한참 찾아보는데 문제가 어떤건지 못찾고있습니다.https://github.com/happyssun/FoodsMap

계정 버튼을 누르고 클릭했을 떄, 강사님 처럼 인증서 부분이 뜨지 않는데, 멤버십을 구입해야지 가능한것일까요?

테일윈드랑 비교하셨는데욥!tailwind는 결국 프레임워크이고다른 css 는 직접 작성을 해야하니 목적이 다르다고 생각했는데요.css를 직접 작성하신 이유가있을까요??테일윈드를 쓰면 호불호가 있긴 하겠지만 강의특성상 css 를 빠르게 사용할수있다고 생각되어서요

제로초님 강의를 보면서 새롭게 페이지 작업을 하고 있는데 최다 클라이언트 컴포넌트로 작업이 되고 잇어서 고민이 됩니다.예를들어 쇼핑몰의 상세페이지를 만드는데 좋아요나 판매하기 기타등등 여기에 써야하는 click이벤트 들때문에 서버컴포넌트를 쓰기는 애매해서 클라이언트 컴포넌트로 작업 중인데... 모든 컴포넌트들이 이런 상황입니다ㅠㅠ 혹시 클라이언트 컴포넌트와 서버컴포넌트를 나누는 기준 같은거 알수 잇을까요??

next.config.js 파일이 아닌 next.config.mjs 파일이 생기는데 import 문을 사용하면 해결이 되는 것 같습니다. 그런데 기본적으로 js -> mjs파일이 셋팅되는 이유와 mjs파일을 그대로 쓰는게 나을지 js 파일로 사용하면 될지 궁금합니다.

안녕하세요 선생님msw 방식에 대해서 강의해주신것과 다른 질문들을 보다가 궁금한게 생겨서 문의드립니다.강의에서는 클라리언트 환경에서는 mockServiceWorker.js가 api(요청)를 가로채서, http.ts(서버)로 보낸다.그리고 handlers.ts가 실행된다. 이렇게 말씀해주셨는데, 다른질문에서msw express 서버는 next server에서 요청보내는 걸 모킹하는 것이고요. MSWComponent는 브라우저에서 요청을 보내는 걸 모킹하는 것 이런 답변을 보았습니다. 그렇다면 제가 이해하기로는기본적으로는 아래와 같이 실행이 되는데,클라리언트 환경에서는 mockServiceWorker.js가 api(요청)를 가로채서, http.ts(서버)로 보낸다.그리고 handlers.ts가 실행 next server에서 요청받은 것은(ssr) createMiddleware에서 받아서 handlers로 보내고클라이언트에서 요청받은 것은 MSWComponent에서 받아서, brwoser로 보낸다음에 handlers로 보낸다로 이해하면 될까요?  

pgAdmin 서버 생성이 아래 첨부한 이미지에서 나오는 에러메세지가 나오면서 되지 않아요..whoami 를 입력하면 나오는 USER를 Username으로 설정하고 비밀번호를 postgres 로하면 아래와 같은 에러가 발생하고username 을 postgres 로 하고 비밀번호를 postgreSQL을 처음 받을때 제가 설정한 슈퍼유저 비밀번호로 하면 생성이 됩니다..window 운영체제에서 진행하고 있습니다. 

 LOG  a {"latitude": 37.550165, "longitude": 127.12752} LOG  [AxiosError: Request failed with status code 401강의영상 잘 따라하고, REST API KEY까지 제대로 입력했는데, 위와 같은 에러가 발생합니다.import React from 'react'; import {StyleSheet, TextInput, TextInputProps, View} from 'react-native'; import Ionicons from 'react-native-vector-icons/Ionicons'; import {colors} from '@/constants'; interface SearchInputProps extends TextInputProps { onSubmit: () => void; } function SearchInput({onSubmit, ...props}: SearchInputProps) { return ( <View style={styles.container}> <TextInput style={styles.input} autoCapitalize="none" placeholderTextColor={colors.GRAY_500} returnKeyType="search" onSubmitEditing={onSubmit} clearButtonMode="while-editing" {...props} /> <Ionicons name={'search'} color={colors.GRAY_700} size={20} onPress={onSubmit} /> </View> ); } const styles = StyleSheet.create({ container: { flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', borderWidth: 1, borderColor: colors.GRAY_200, paddingVertical: 8, paddingHorizontal: 10, borderRadius: 5, }, input: { flex: 1, fontSize: 16, paddingVertical: 0, paddingLeft: 0, color: colors.BLACK, }, }); export default SearchInput; import axios from 'axios'; import {useEffect, useState} from 'react'; import Config from 'react-native-config'; import {LatLng} from 'react-native-maps'; type Meta = { total_count: number; pageable_count: number; is_end: boolean; same_name: { region: string[]; keyword: string; selected_region: string; }; }; export type RegionInfo = { address_name: string; category_group_code: string; category_group_name: string; category_name: string; distance: string; id: string; phone: string; place_name: string; place_url: string; road_address_name: string; x: string; y: string; }; type RegionResponse = { meta: Meta; documents: RegionInfo[]; }; function useSearchLocation(keyword: string, location: LatLng) { const [regionInfo, setRegionInfo] = useState<RegionInfo[]>([]); const [pageParam, setPageParam] = useState(1); console.log(keyword, location); useEffect(() => { (async () => { try { const {data} = await axios.get( `https://dapi.kakao.com/v2/local/search/address.json?query=${keyword}&y=${location.latitude}&x=${location.longitude}&page=${pageParam}`, { headers: { Authorization: `KakaoAK ${Config.KAKAO_REST_API_KEY}`, }, }, ); console.log('data', data); } catch (error) { console.log(error); } })(); }, [keyword, location]); return {regionInfo}; } export default useSearchLocation; GOOGLE_API_KEY=키내용들 KAKAO_REST_API_KEY=키내용들 어떤 부분이 잘못되어서 401 에러가 발생하는지 알고싶습니다.

안녕하세요 선생님.수업을 듣다 궁금한게 생겨서 문의 드립니다.모달창만 열려면 intercept를 쓰지 않고 패러렐 라우트에 일반라우트 폴더를 넣어도 작동하더라구요. (beforelogin)/@modal2/i/flow/login하지만 새로고침때는 그 페이지를 찾을 수 없기에 not-found.tsx를 호출하는걸 확인했습니다.modal에 intercept route를 사용하는 이유가 새로고침했을때를 위함이라고 이해하면 될까요? 혹은 다른 추가적인 이유가 더 있는지 궁금합니다.

❗질문 작성시 꼭 참고해주세요최대한 상세히 현재 문제(또는 에러)와 코드(또는 github)를 첨부해주셔야 그만큼 자세히 답변드릴 수 있습니다.맥/윈도우, 안드로이드/iOS, 버전 등의 개발환경도 함께 적어주시면 도움이 됩니다. 에러메세지는 일부분이 아닌 전체 상황을 올려주세요!안녕하세요 저는 현재 웹으로 다른걸 개발하고 있는데, react-query로 auth를 개발하신거 참고하려고 강의내용을 따라가던중 버그같은게 있어서 질문드립니다. 저는isLoggedIn 상태를 이런식으로 설정해보았는데요.const isLoggedIn = refreshTokenQuery.isSuccess; 예를 들어 제가 프로필 페이지에 있는데isLoggedIn ? 개인프로필 내용 보여주기 : 로그인 버튼만 보여주기인데요.저는 로그인을 oauth 로그인만 구현해둔 상태입니다(google,kakao,naver)예를들어 제 프로필페이지 isLoggedIn가 false인 상태이니 "로그인하세요" 버튼이 보일 것이고 클릭하면 bottom sheet로 올라오고 카카오 로그인 버튼을 누르면 카카오의 약관동의화면이나 아이디,비밀번호입력하는 페이지가 렌더링되겠죠그 페이지에서 브라우저 뒤로가기버튼을 클릭하여 다시 프로필페이지로 이동하면 useGetRefreshToken을 타면서 getAccessToken함수가 호출되고 디스크 캐시로 부터 받아온 data를 가져와 isSuccess 상태가 되어버리면서 isLoggedIn은 true인 상태가 되어버리고 프로필페이지 접근 인가가 되어버립니다.구글링해보니 백포워드 캐시때문에 그렇다고 하는데, 해결방안이 GetAccessToken api header에 Cache-control:no-store옵션을 주면 cache를 거부하게 만드는 방법이 있더라구요.(근데 저같은경우는 이런 옵션을 주면 getAccessToken api가 호출이 안되더라구요..)  근데 의문점은 로그아웃하면서 'auth'에 해당하는 캐싱된 쿼리들을 무효화 시켰을텐데 캐싱된 데이터를 가져온다는게 좀 이해가 안됩니다. queryclient.removequeries 도 안되더라구요. 

안녕하세요search 페이지 props에서 searchParams props가 기본적으로 제공된다고 알고있는데 저는 콘솔로 찍어보니 나오지 않습니다..! 혹시 제가 잘못적용한건지 아니면 다시한번 확인해야 될곳이 있을까요?/import SelectBox from "@/components/common/SelectBox"; import SelectStack from "@/components/common/SelectStack"; import Peoples from "@/components/people/Peoples"; import SearchForm from "@/components/common/SearchForm"; type Props = { searchParams: { page: string; size: string; sort?: string; keyword?: string; position?: string; teckStack?: string; }; }; export default function Page({ searchParams }: Props) { console.log("??", searchParams); return ( <div> <div className="relative flex items-center gap-4"> <h1 className="text-[36px] font-bold">People</h1> </div> <div className="flex justify-between"> <div className="flex gap-3"> <SelectBox options={option} title="포지션" /> <SelectStack /> </div> <SearchForm keyword={searchParams.keyword as string} /> </div> <Peoples searchParams={searchParams} /> </div> ); }

하트 버튼을 눌러서 Heart 배열에 userId를 넣어줄 때Hearts: [...value.pages[pageIndex][index].Hearts, { userId: session?.user?.email as string }],위와 같이 기존 Hearts 배열에 본인 userId 값을 추가하는 방식이 아니라Hearts: [{ userId: session?.user?.email as string }],이렇게 Hearts 배열에 본인 userId 값만 넣어주는 이유는 무엇인가요? 어차피 보여지는 결과는 동일하기 때문에 굳이 배열을 복사하는 과정을 거치지 않아 성능을 높이기 위함이라고 보면 될까요?

안녕하세요 선생님프리즈마로 api만드시는 강의는 언제쯤 나올지 알 수 있을까요?직접만든 api랑 이번수업에서 배울next로 플젝을 만들고 싶은데 궁금합니다.

공지의 올려주신대로 auth.ts 를 수정하였으며 loginModal 의 redirect:trueexport const { handlers: { GET, POST }, auth, signIn, } = NextAuth({ pages: { signIn: "/i/flow/login", newUser: "/i/flow/signup", }, callbacks: { // async signIn() // async authorized({ auth }) { // if (!auth) { // // 쿠키가 없으면 로그인 페이지로 돌리기 // return NextResponse.redirect("http://localhost:3000/i/flow/login"); // } // return true; // }, }, providers: [ CredentialsProvider({ async authorize(credentials) { const authResponse = await fetch( `${process.env.NEXT_PUBLIC_BASE_URL}/api/login`, // NEXT_PUBLIC_BASE_URL=http://localhost:9090 { method: "POST", headers: { "Content-Type": "application/json", }, body: JSON.stringify({ id: credentials.username, password: credentials.password, }), } ); // 여기 주목!!! 서버에서 에러가 발생할 때 그 에러 내용이 서버에 담겨 있을 겁니다. console.log(authResponse.status, authResponse.statusText); if (!authResponse.ok) { const credentialsSignin = new CredentialsSignin(); if (authResponse.status === 404) { credentialsSignin.code = "no_user"; } else if (authResponse.status === 401) { credentialsSignin.code = "wrong_password"; } throw credentialsSignin; } const user = await authResponse.json(); console.log("user", user); // id, name, image, email만 허용 return { id: user.id, name: user.nickname, image: user.image, }; }, }), ], }); 아래와 같은 오류가 계속 해서 발생하고 있습니다. TypeError: next_dist_server_web_exports_next_request__WEBPACK_IMPORTED_MODULE_0__ is not a constructor pakage.json 의 버젼은 아래와 같이 사용하고 있고요 "@auth/core": "^0.27.0", "next-auth": "^5.0.0-beta.16",혹시 이 부분의 같은 에러가 나오신 분들 중 해결 하신 분들이 있을까요?  

Data/meltingpot-gquvlbyucsuermbjkfmfldzpeszt/Build/Intermediates.noindex/Pods.build/Debug-iphonesimulator/React-Codegen.build export TEMP_DIR\=/Users/kim-yongmin/Library/Developer/Xcode/DerivedData/meltingpot-gquvlbyucsuermbjkfmfldzpeszt/Build/Intermediates.noindex/Pods.build/Debug-iphonesimulator/React-Codegen.build export TEMP_FILES_DIR\=/Users/kim-yongmin/Library/Developer/Xcode/DerivedData/meltingpot-gquvlbyucsuermbjkfmfldzpeszt/Build/Intermediates.noindex/Pods.build/Debug-iphonesimulator/React-Codegen.build export TEMP_FILE_DIR\=/Users/kim-yongmin/Library/Developer/Xcode/DerivedData/meltingpot-gquvlbyucsuermbjkfmfldzpeszt/Build/Intermediates.noindex/Pods.build/Debug-iphonesimulator/React-Codegen.build export TEMP_ROOT\=/Users/kim-yongmin/Library/Developer/Xcode/DerivedData/meltingpot-gquvlbyucsuermbjkfmfldzpeszt/Build/Intermediates.noindex export TEST_FRAMEWORK_SEARCH_PATHS\=\ /Applications/Xcode.app/Contents/Developer/Platforms/iPhoneSimulator.platform/Developer/Library/Frameworks\ /Applications/Xcode.app/Contents/Developer/Platforms/iPhoneSimulator.platform/Developer/SDKs/iPhoneSimulator17.4.sdk/Developer/Library/Frameworks export TEST_LIBRARY_SEARCH_PATHS\=\ /Applications/Xcode.app/Contents/Developer/Platforms/iPhoneSimulator.platform/Developer/usr/lib export TOOLCHAINS\=com.apple.dt.toolchain.XcodeDefault export TOOLCHAIN_DIR\=/Applications/Xcode.app/Contents/Developer/Toolchains/XcodeDefault.xctoolchain export TREAT_MISSING_BASELINES_AS_TEST_FAILURES\=NO export UID\=501 export UNINSTALLED_PRODUCTS_DIR\=/Users/kim-yongmin/Library/Developer/Xcode/DerivedData/meltingpot-gquvlbyucsuermbjkfmfldzpeszt/Build/Intermediates.noindex/UninstalledProducts export UNSTRIPPED_PRODUCT\=NO export USER\=kim-yongmin export USER_APPS_DIR\=/Users/kim-yongmin/Applications export USER_LIBRARY_DIR\=/Users/kim-yongmin/Library export USE_DYNAMIC_NO_PIC\=YES export USE_HEADERMAP\=YES export USE_HEADER_SYMLINKS\=NO export USE_HERMES\=true export USE_RECURSIVE_SCRIPT_INPUTS_IN_SCRIPT_PHASES\=YES export VALIDATE_DEVELOPMENT_ASSET_PATHS\=YES_ERROR export VALIDATE_PRODUCT\=NO export VALID_ARCHS\=arm64\ arm64e\ i386\ x86_64 export VERBOSE_PBXCP\=NO export VERSION_INFO_BUILDER\=kim-yongmin export VERSION_INFO_FILE\=React-Codegen_vers.c export VERSION_INFO_STRING\=\"@\(\#\)PROGRAM:React-Codegen\ \ PROJECT:Pods-\" export WRAP_ASSET_PACKS_IN_SEPARATE_DIRECTORIES\=NO export XCODE_APP_SUPPORT_DIR\=/Applications/Xcode.app/Contents/Developer/Library/Xcode export XCODE_PRODUCT_BUILD_VERSION\=15E204a export XCODE_VERSION_ACTUAL\=1530 export XCODE_VERSION_MAJOR\=1500 export XCODE_VERSION_MINOR\=1530 export XPCSERVICES_FOLDER_PATH\=/XPCServices export YACC\=yacc export arch\=undefined_arch export variant\=normal /bin/sh -c /Users/kim-yongmin/Library/Developer/Xcode/DerivedData/meltingpot-gquvlbyucsuermbjkfmfldzpeszt/Build/Intermediates.noindex/Pods.build/Debug-iphonesimulator/React-Codegen.build/Script-46EB2E00012AD0.sh /bin/sh: /Users/kim-yongmin/Desktop/RN: No such file or directory Command PhaseScriptExecution failed with a nonzero exit code warning: Run script build phase '[CP-User] [Hermes] Replace Hermes for the right configuration, if needed' will be run during every build because it does not specify any outputs. To address this warning, either add output dependencies to the script phase, or configure it to run in every build by unchecking "Based on dependency analysis" in the script phase. (in target 'hermes-engine' from project 'Pods') warning: Run script build phase 'Bundle React Native code and images' will be run during every build because it does not specify any outputs. To address this warning, either add output dependencies to the script phase, or configure it to run in every build by unchecking "Based on dependency analysis" in the script phase. (in target 'meltingpot' from project 'meltingpot') warning: Run script build phase '[CP-User] [RN]Check rncore' will be run during every build because it does not specify any outputs. To address this warning, either add output dependencies to the script phase, or configure it to run in every build by unchecking "Based on dependency analysis" in the script phase. (in target 'React-Fabric' from project 'Pods') --- xcodebuild: WARNING: Using the first of multiple matching destinations: { platform:iOS Simulator, id:6467FA54-9230-43CA-9818-9D9D12368E26, OS:17.4, name:iPhone 15 } { platform:iOS Simulator, id:6467FA54-9230-43CA-9818-9D9D12368E26, OS:17.4, name:iPhone 15 } ** BUILD FAILED ** The following build commands failed: PhaseScriptExecution [CP-User]\ Generate\ Specs /Users/kim-yongmin/Library/Developer/Xcode/DerivedData/meltingpot-gquvlbyucsuermbjkfmfldzpeszt/Build/Intermediates.noindex/Pods.build/Debug-iphonesimulator/React-Codegen.build/Script-46EB2E00012AD0.sh (in target 'React-Codegen' from project 'Pods') (1 failure)이런 에러가 발생하면서, 안드는 정상 동작하지만 ios는 정상 동작하지 않습니다. 해결 방법을 열심히 찾아봤는데 잘 모르겠습니다...!!

react-query를 사용 하고 있는 그중 useQuery를 사용 하고 있습니다 네트워크 탭상에서는 한번만 호출 햇는데 console에서는 회색으로 아래와 같이 두번 호출 한것 처럼 나오는데 이건 어떻게 못막을까요?!조건을 걸어서 확인을 해봤지만 계속 해서 나오더라구여 ㅠㅠ두번의 호출인지 소켓을 요청 했을때 두번을 요청 하더라구여 ㅜㅜ

일반적인 웹 개발의 경우, module css, tailwind css, styled-components, emotion, style-x, module css 등 정말 다양한 대체안들이 많은것으로 알고 있습니다.리액트 네이티브도, tailwind css나, styled-components, emotion을 사용할 수 있는 것으로 알고 있는데, 현업이나 다양한 프로젝트에서도, react-native에서 제공해주는 style-sheet를 사용하는 편인가요? 보통 리액트에서, 스타일을 적용할 떄 일반적인 컴포넌트 코드와, 스타일 코드를 따로 분리해서 적용시켜주는 방식을 많이 쓰곤하는데, 리액트 네이티브는 이렇게 한 파일에 사용하는 방법밖에 없는지 이 부분도 궁금합니다!

팔로우 버튼을 누르면 로그인 화면으로 가도록 기능을 넣어봤습니다.FollowRecommend 컴포넌트에서 router.replace('/i/flow/login'); 를 하면 notfound 페이지가 뜹니다. (당연히 router.replace('/home')을 해도 마찬가지 입니다.<- /i/flow/login으로 가기때문)그러나 이 상태에서 새로고침하면 로그인 화면 잘 뜹니다.이렇게 root 경로로는 잘 넘어가서 일단은 메인화면으로 해놨는데, 왜 이런 현상이 발생하는 걸까요..? 감사합니다.

import { http, HttpResponse } from "msw"; const testData = [ { result: "success", userId: 2, nickname: "닉네임", favoriteCount: 223, viewCount: 336, position: "Backend", userFileUrl: "/Users/user/Desktop/pictures/userPicture.jpg", year: "경력없음", techStack: "react, java, ---", softSkill: "소통, 적극성, ---", links: "http://블로그주소", alarmStatus: true, content: "안녕하세요 구인 중입니다", }, ]; export const handlers = [ http.post("/api/post", () => { return HttpResponse.text(JSON.stringify("ok")); }), http.get("/api/get", ({ request }) => { console.log("request", request); return HttpResponse.json(testData); }), ]; export default handlers;"use client"; import { redirect } from "next/navigation"; export default function Home() { const handleClick = () => { fetch(`${process.env.NEXT_PUBLIC_BASE_URL}/api/get`, { method: "get", }) .then((res) => console.log("res", res.json())) // JSON 형식으로 변환된 데이터를 가져옴 .then((data) => console.log("res?", data)); // JSON 데이터를 로그에 출력 }; return ( <> <div> <button onClick={handleClick}>test btn</button> <p>계정을 생성하세요</p> <form> <div> <> <label htmlFor="id">아이디</label> <input type="text" id="id" name="id" required /> </> <> <label htmlFor="name">이름</label> <input type="text" id="name" name="name" required /> </> <button type="submit">가입하기</button> </div> </form> </div> </> ); } browser.ts, handlers.ts, http.ts, MSWComponent.tsx, server.ts 는 제로초님과 다 동일하게 설정하였고 get부분에서 위와같이 하였는데 Unexpected token '<', "<!DOCTYPE "... is not valid JSON 라는 에러가 계속 발생합니다 ㅠㅠ 어떤부분이 문제일까요.. !console.log("res", res.json())) 이부분에서 res만 콘솔로 확인하면 이렇게 나옵니다..!