176만명의 커뮤니티!! 함께 토론해봐요.
해결됨
맛집 지도앱 만들기 (React Native & NestJS)
안녕하세요 강사님 앱을 종료했다가 접속하면 정상적으로 보입니다. 그런데 이미지, 닉네임을 설정하고 뒤로가기하면 아래와 같이 오류가 발생합니다.. 😭 그런데 또 왔다갔다 하다보면 다시 또 프로필이 보입니다.. 🥲 https://github.com/KMSKang/react.git
해결됨
Next + React Query로 SNS 서비스 만들기
안녕하세요, app router에 대해 계속 공부하다가 route handlers 에 대한 궁금증이 해결되지 않아 질문하게 됐습니다. Next app router에서 정확히 route handlers를 사용해야 하는 이유가 무엇인가요? 제가 생각했을 땐 서버 데이터 캐싱이나 API 엔드포인트를 숨길 수 있다는 장점이 있는데 이건 서버 컴포넌트에서 fetch하는 것으로도 대체가 되는데 route handlers를 사용해야 하는 특별한 이유가 따로 있는 것인가요? 모든 API를 route handlers로 하면 Next서버에 부하가 걸릴텐데 어떻게 해결할 수 있을까요? 이 부분은 공식문서에서 제가 못 찾은 것 같은데, 만약 외부 백엔드 API가 있고 여기에 데이터 요청을 할 때 클라이언트 컴포넌트에서의 모든 API 요청을 1차로 route handler에 하고 여기서 외부 백엔드 API로 요청하게되면 route handlers에 요청이 몰리게 되는데 이때 Next 서버에 걸리는 부하를 어떻게 해소할 수 있을까요?
미해결
Next + React Query로 SNS 서비스 만들기
제로초님 하신대로 그대로 프로젝트를 생성하고 실행했더니 화면은 그대로 뜨는데 에러가 1개 있어서 봤더니 hydration 에러라고 뜨네요 ㅠㅠ 지금 z-com 프로젝트를 수업용 / 연습용으로 총 2개 진행중인데 수업용 프로젝트는 이런 에러가 없었는데 연습용에서 에러가 발생하네요. 아래는 에러 코드입니다 ! Console Error Hydration failed because the server rendered HTML didn't match the client. As a result this tree will be regenerated on the client. This can happen if a SSR-ed Client Component used - A server/client branch if (typeof window !== 'undefined') . - Variable input such as Date.now() or Math.random() which changes each time it's called. - Date formatting in a user's locale which doesn't match the server. - External changing data without sending a snapshot of it along with the HTML. - Invalid HTML tag nesting. It can also happen if the client has a browser extension installed which messes with the HTML before React loaded
해결됨
Next + React Query로 SNS 서비스 만들기
안녕하세요 nextjs를 활용해서 프로젝트를 진행하는 중에 해결되지 않는 문제가 발생하여 질문 드립니다. 현재 도커를 활용해서 nextjs를 배포하고 있는데 middleware에서 request.nextUrl.origin값이 https://localhost:3000이 들어가고 있습니다. x-forwarded-host를 찍었을때는 제가 사용하는 https://test.domain.com이 들어가는데 request.nextUrl.origin에 x-forwared-host와 같은 값이 들어가도록 설정하기 위한 방법이 있는지 알 수 있을까요??
미해결
문제가 발생한 코드 로직에 대해 설명드리자면 유저가 어떤 상태 선택창을 띄우고 상태를 변경하면 서버로 요청을 보내고 응답이 와서 변경된 데이터로 새로 렌더링 되는 로직입니다. 그런데 여기서 저는 상태 선택창을 닫히지 않게 하고 싶습니다. 그런데 useState를 사용하면 리렌더링 됐을 때 당연히 상태가 초기화 돼서 선택창이 사라질 것이기 때문에 useRef를 사용했습니다. 아래가 그 코드인데 useRef로 했음에도 리렌더링 되고 초기 상태인 false로 바뀌어버립니다. 그래서 상태창을 유지하지 못하고 있습니다. 해결법 좀 아시는 고수님들 도움 좀 주셨으면 좋겠습니다 ㅠ const maintainStatus = useRef(false); const changeStatus = (status: LocationStatusType) => { mutate({ locationStatus: status }, { onSuccess: async (res) => { // 성공시 await queryClient.invalidateQueries({ queryKey: homelessListQueryKey }); // 쿼리 최신화 maintainStatus.current = true; console.log("maintainStatus.current:", maintainStatus.current) //true 출력 } }) } useEffect(() => { console.log("Updated maintainStatus.current:", maintainStatus.current); // false 출력 }, [maintainStatus.current]);
해결됨
맛집 지도앱 만들기 (React Native & NestJS)
윈도우를 사용하고 있습니다 선생님 강의를 듣던 와중에 똑같이 따라서 설정 했는데 런타임 오류가 발생해서 여쭤봅니다
미해결
맛집 지도앱 만들기 (React Native & NestJS)
{ "name": "matzip", "version": "0.0.1", "private": true, "scripts": { "android": "react-native run-android ", "ios": "react-native -run-ios --simulator 'iPhone 16 Pro'", "lint": "eslint .", "start": "react-native start --reset-cache", "test": "jest" }, "dependencies": { "@react-native-community/geolocation": "^3.4.0", "@react-native-community/slider": "^4.5.5", "@react-native-masked-view/masked-view": "^0.3.1", "@react-navigation/drawer": "^6.7.2", "@react-navigation/native": "^6.1.18", "@react-navigation/stack": "^6.4.1", "@tanstack/react-query": "^5.59.16", "axios": "^1.7.7", "react": "18.3.1", "react-native": "0.76.0", "react-native-date-picker": "^5.0.7", "react-native-encrypted-storage": "^4.0.3", "react-native-gesture-handler": "^2.20.1", "react-native-maps": "^1.18.2", "react-native-permissions": "^5.0.2", "react-native-reanimated": "^3.16.1", "react-native-safe-area-context": "^4.11.1", "react-native-screens": "^3.34.0", "react-native-vector-icons": "^10.2.0" }, "devDependencies": { "@babel/core": "^7.25.2", "@babel/plugin-transform-private-methods": "^7.25.9", "@babel/preset-env": "^7.25.3", "@babel/runtime": "^7.25.0", "@react-native-community/cli": "15.0.0-alpha.2", "@react-native-community/cli-platform-android": "15.0.0-alpha.2", "@react-native-community/cli-platform-ios": "15.0.0-alpha.2", "@react-native/babel-preset": "0.76.0", "@react-native/eslint-config": "0.76.0", "@react-native/metro-config": "0.76.0", "@react-native/typescript-config": "0.76.0", "@types/react": "^18.2.6", "@types/react-native-vector-icons": "^6.4.18", "@types/react-test-renderer": "^18.0.0", "babel-jest": "^29.6.3", "babel-plugin-module-resolver": "^5.0.2", "eslint": "^8.19.0", "jest": "^29.6.3", "prettier": "2.8.8", "react-test-renderer": "18.3.1", "typescript": "5.0.4" }, "engines": { "node": ">=18" }, "packageManager": "yarn@3.6.4" }const {data: markers = [], isPending, error} = useGetMarkers(); function MapHomeScreen() { // const {data: markers = []} = useGetMarkers();기존코드 const {data: markers = [], isPending, error} = useGetMarkers(); //바뀐코드 //추가한코드 if (isPending) return <Text>Loading...</Text>; if (error) return <Text>{error.message}</Text>; //추가한코드 return ( <> <MapView ... //기존코드 {selectLocation && ( <Callout> <Marker coordinate={selectLocation} /> </Callout> ) } //기존코드 {selectLocation != null ? ( <Callout> <Marker coordinate={selectLocation} /> </Callout> ) : ( <Callout> <Marker coordinate={selectLocation} /> </Callout> )} //바뀐코드 렌더링에 계속 문제가 생겨서 하루종일 봤네요 이미 존재하던 마커가 롱 프레스 이후에 노출되는 이슈가 있었는데 isPending 이후에 렌더링 하도록 하니 잘 노출 됩니다. 처음 롱 프레스 이벤트시 마커가 출력 되지 않고 애드포스트 버튼 클릭후 뒤로가기 시 선택한 마커가 사라지지 않고 누적되는 이슈가 있었습니다. selectLocation에 값이 잘 전달 되지만 렌더링이 되지않는 이슈였고 강제로 컨디션문으로 null 일때와 아닐 때 둘다 렌더링 하게 했더니 해결 되었습니다
해결됨
맛집 지도앱 만들기 (React Native & NestJS)
맥 OS만 써있고 window는 그냥 알아서 설치하라는 느낌인데 강의 환불 어떻게 하나요
해결됨
맛집 지도앱 만들기 (React Native & NestJS)
useSignup 함수에서 mutationFn에 회원가입 함수를 넣어줘서 Omit으로 'mutationFn'를 제외하셨는데 useLogin 함수에서는 mutationFn랑 onSuccess, onSettled 함수를 추가로 설정해주셨는데 Omit으로 onSuccess랑 onSettled를 추가하지 않았는데 왜 에러가 발생하지 않는건지 궁금합니다! useLogin에서 onSuccess에서 성공해서 토큰들을 설정해줬는데 onSettled에서 토큰을 또 설정해주는건가요?
해결됨
맛집 지도앱 만들기 (React Native & NestJS)
지금 [3-3] 폼 로직 리팩토링 & 유효성 검증 강의까지 들은 상태여서 뒷 강의에서 다루시는 부분이 있을 수도 있지만 useForm 내부에 setErrors를 하는 useEffect가 무한으로 실행되는 현상을 겪어서 공유드립니다. CustomButton.tsx에 console.log('SCREEN : ', Dimensions.get('screen').height) console.log('WINDOW : ', Dimensions.get('window').height) 로깅하는 부분이 무한으로 실행되서 알게되었습니다. 해결 방법 validateLogin을 useCallback으로 최적화 또는 useEffect 의존성 배열에 validate 제거 const login = useForm({ initialValue, validate: useCallback(validateLogin, []), })
해결됨
[풀스택 완성] Supabase로 웹사이트 3개 클론하기 (Next.js 14)
# Material Tailwind 와 연관된 라이브러리 설치 npm install @emotion/react @emotion/styled @material-tailwind/react @mui/icons-material --save npm install @tailwindcss/typography autoprefixer --save-dev 지난주 공개된 next.js 15에서 Material Tailwind 설정하려니 안되서 도움 부탁드립니다. 아직 초보라 이런 부분들이 개인적으로 좀 어렵네요~~^^;
해결됨
맛집 지도앱 만들기 (React Native & NestJS)
{ "name": "matzip", "version": "0.0.1", "private": true, "scripts": { "android": "react-native run-android ", "ios": "react-native -run-ios --simulator 'iPhone 16 Pro'", "lint": "eslint .", "start": "react-native start --reset-cache", "test": "jest" }, "dependencies": { "@react-native-masked-view/masked-view": "^0.3.1", "@react-navigation/drawer": "^6.7.2", "@react-navigation/native": "^6.1.18", "@react-navigation/stack": "^6.4.1", "@tanstack/react-query": "^5.59.16", "axios": "^1.7.7", "react": "18.3.1", "react-native": "0.76.0", "react-native-encrypted-storage": "^4.0.3", "react-native-gesture-handler": "^2.20.1", "react-native-maps": "^1.18.2", "react-native-reanimated": "^3.16.1", "react-native-safe-area-context": "^4.11.1", "react-native-screens": "^3.34.0" }, "devDependencies": { "@babel/core": "^7.25.2", "@babel/plugin-transform-private-methods": "^7.25.9", "@babel/preset-env": "^7.25.3", "@babel/runtime": "^7.25.0", "@react-native-community/cli": "15.0.0-alpha.2", "@react-native-community/cli-platform-android": "15.0.0-alpha.2", "@react-native-community/cli-platform-ios": "15.0.0-alpha.2", "@react-native/babel-preset": "0.76.0", "@react-native/eslint-config": "0.76.0", "@react-native/metro-config": "0.76.0", "@react-native/typescript-config": "0.76.0", "@types/react": "^18.2.6", "@types/react-test-renderer": "^18.0.0", "babel-jest": "^29.6.3", "babel-plugin-module-resolver": "^5.0.2", "eslint": "^8.19.0", "jest": "^29.6.3", "prettier": "2.8.8", "react-test-renderer": "18.3.1", "typescript": "5.0.4" }, "engines": { "node": ">=18" }, "packageManager": "yarn@3.6.4" } 최신버전으로 작업중입니다 node 버전 22.6.0 으로 바꾸시면 해결됩니다. node -v 버전뜨시는거 보고 vscode 창 무조건 닫고 명령어 실핼시킬 터미널에서도 node -v 꼭 써서 버전확인하세여
해결됨
맛집 지도앱 만들기 (React Native & NestJS)
강의 듣는 중 Slider 패키지를 설치하고 아래와같은 에러가 발생합니다.
해결됨
Next + React Query로 SNS 서비스 만들기
안녕하세요, 아래 ISR에 대해서 질문드렸었는데, nextjs 에서 2가지 구현 방법이있다고 해서 두가지가 어떤 차이점이 있고 어떻게 활용하는게 좋을지 궁금해서 질문드립니다! 1번 방법 = fetch API 의 revlidate를 활용하여 ISR 구현 import ProductList from "@/component/ProductList"; import { getQueryClient } from "@/component/TanstackQueryOption"; import { getProducts } from "@/fetch/getProducts"; import { dehydrate, HydrationBoundary, QueryClient } from "@tanstack/react-query"; import Image from "next/image"; export default async function ProductPage () { const queryClient = getQueryClient(); await queryClient.prefetchQuery({ queryKey:['products'], queryFn: getProducts, }) return ( <> <section className='visual-sec'> <Image src="/visual.png" alt="visual" width={1920} height={300}/> </section> <section className="product-sec"> <h2>상품 리스트</h2> <HydrationBoundary state={dehydrate(queryClient)}> <ProductList /> </HydrationBoundary> </section> </> ) } import { isServer, QueryClient, defaultShouldDehydrateQuery, } from '@tanstack/react-query' function makeQueryClient() { return new QueryClient({ defaultOptions: { queries: { staleTime: 10 * 1000, }, dehydrate: { shouldDehydrateQuery: (query) => defaultShouldDehydrateQuery(query) || query.state.status === 'pending', }, }, }) } let browserQueryClient: QueryClient | undefined = undefined export function getQueryClient() { if (isServer) { return makeQueryClient() } else { if (!browserQueryClient) browserQueryClient = makeQueryClient() return browserQueryClient } } 'use client' import { getQueryClient } from '@/component/TanstackQueryOption'; import { QueryClientProvider, } from '@tanstack/react-query' import { ReactQueryDevtools } from '@tanstack/react-query-devtools'; import { ReactNode } from 'react' export default function TanstackQueryProvider({ children }: { children: ReactNode }) { const queryClient = getQueryClient() return ( <QueryClientProvider client={queryClient}> {children} <ReactQueryDevtools initialIsOpen={true} /> </QueryClientProvider> ) } export const getProducts = async () => { const res = await fetch(`http://localhost:9090/api/products`, { method: "GET", headers: { "Content-Type": "application/json", }, next: { revalidate: 10, } }); const data = await res.json(); const currentTime = new Date().toLocaleTimeString('ko-KR', { hour: '2-digit', minute: '2-digit', second: '2-digit', fractionalSecondDigits: 3, hour12: false, }); if (typeof window === "undefined") { console.log('fetch products', 'server', currentTime); console.table(data); } else { console.log('fetch products', 'client', currentTime); console.table(data); } if(!res.ok) { throw new Error("Failed to fetch products"); } return data; } 2번 방법 = export const revalidate 로 시간 설정 후 fetch로 받은 data 값을 바로 렌더링 시키기 import Product from "@/component/Product"; import styles from '@/component/ProductList.module.css'; import Image from "next/image"; export const revalidate = 10; export default async function Product2Page() { const data = await fetch('/api/products'); const products = await data.json(); console.log(revalidate, 'Product2Page'); return ( <> <section className='visual-sec'> <Image src="/visual.png" alt="visual" width={1920} height={300}/> </section> <section className="product-sec"> <h2>상품 리스트</h2> <div className={styles.productList}> {products.map((product: any) => ( <Product key={product.item_no} product={product} /> ))} </div> </section> </> ) } 2개다 ISR로 구현되며, 1번 방법은 Data Cache 캐싱 매커니즘을 활용하고, 2번 방법은 Full Router Cache 캐싱 매커니즘을 활용한다의 차이점으로 생각이 드는데, 이 외에 다른 차이점과 실제 개발을 하면서 선호되는 방식이 따로 있을까요? 해당 페이지만 보았을때는 2번 방법으로 해도 어차피 주기적으로 다시 생성해서 최신 데이터를 반영하면 복잡하게 react-query를 사용하고, Hydration을 하면서 데이터를 동기화할 필요가 있나 싶어서 어떻게 사용해야할지 감이 안잡히네여
해결됨
맛집 지도앱 만들기 (React Native & NestJS)
강의 중 빨간줄이 떠서 문의드립니다. 빌드도 정상으로 되는데 저기 빨간줄은 왜 계속 떠있는거죠?
해결됨
Next + React Query로 SNS 서비스 만들기
// src/components/TanstackQueryOption.ts import { isServer, QueryClient, defaultShouldDehydrateQuery, } from '@tanstack/react-query' function makeQueryClient() { return new QueryClient({ defaultOptions: { queries: { staleTime: 15 * 1000, }, dehydrate: { shouldDehydrateQuery: (query) => defaultShouldDehydrateQuery(query) || query.state.status === 'pending', }, }, }) } let browserQueryClient: QueryClient | undefined = undefined export function getQueryClient() { if (isServer) { return makeQueryClient() } else { if (!browserQueryClient) browserQueryClient = makeQueryClient() return browserQueryClient } } // src/components/TanstackQueryProvider.tsx 'use client' import { getQueryClient } from '@/component/TanstackQueryOption'; import { QueryClientProvider, } from '@tanstack/react-query' import { ReactQueryDevtools } from '@tanstack/react-query-devtools'; import { ReactNode } from 'react' export default function TanstackQueryProvider({ children }: { children: ReactNode }) { const queryClient = getQueryClient() return ( <QueryClientProvider client={queryClient}> {children} <ReactQueryDevtools initialIsOpen={process.env.NEXT_PUBLIC_MODE === 'local'} /> </QueryClientProvider> ) } // src/app/layout.tsx import Banner from "@/component/Banner"; import Footer from "@/component/Footer"; import Header from "@/component/Header"; import TanstackQueryProvider from "@/component/TanstackQueryProvider"; import type { Metadata } from "next"; import { Inter } from "next/font/google"; import "@/app/global.css"; const inter = Inter({ subsets: ["latin"] }); export const metadata: Metadata = { title: "Create Next App", description: "Generated by create next app", }; export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode; }>) { return ( <html lang="en"> <body> <TanstackQueryProvider> <div className='container'> <Banner/> <Header/> <main>{children}</main> <Footer/> </div> </TanstackQueryProvider> </body> </html> ); } // src/app/page.tsx import ProductList from "@/component/ProductList"; import { getQueryClient } from "@/component/TanstackQueryOption"; import { getProducts } from "@/fetch/getProducts"; import { dehydrate, HydrationBoundary, QueryClient } from "@tanstack/react-query"; import Image from "next/image"; export default function Page () { const newQueryClient = getQueryClient(); newQueryClient.prefetchQuery({ queryKey:['products'], queryFn: getProducts, }) return ( <> <section className='visual-sec'> <Image src="/visual.png" alt="visual" width={1920} height={300}/> </section> <section className="product-sec"> <h2>상품 리스트</h2> <HydrationBoundary state={dehydrate(newQueryClient)}> <ProductList /> </HydrationBoundary> </section> </> ) }; 'use client' // src/components/ProductList.tsx import Product from "@/component/Product"; import { getProducts } from "@/fetch/getProducts"; import { useQuery, useSuspenseQuery } from "@tanstack/react-query"; import styles from "@/component/ProductList.module.css"; export const ProductList = () => { const {data, isLoading, isFetching} = useSuspenseQuery({queryKey: ['products'], queryFn: getProducts}); console.log(`isLoading: ${isLoading}, isFetching: ${isFetching}`) return ( <div className={styles.productList}> {data?.map((product: any) => ( <Product key={product.item_no} product={product} /> ))} </div> ) }; export default ProductList; // src/components/Product.tsx import Link from "next/link"; import Image from "next/image"; export const Product = ({product} : any) => { return ( <Link href={`/product/${product.item_no}`} prefetch> <Image src={product.detail_image_url} alt={product.item_name} width={500} height={300} /> <h3>{product.item_name}</h3> <span>{product.price}</span> </Link> ) } export default Product; // src/app/product/[id]/page.tsx export default function ProductDetailPage() { return ( <> 상품 상세페에지 </> ) } // src/fetch/getProducts.ts export const getProducts = async () => { const res = await fetch(`http://localhost:9090/api/products`, { method: "GET", headers: { "Content-Type": "application/json", }, next: { revalidate: 10, } }); const currentTime = new Date().toLocaleTimeString(); const data = await res.json(); if (typeof window === "undefined") { console.log('fetch products', 'server', currentTime); console.table(data); } else { console.log('fetch products', 'client', currentTime); console.table(data); } if(!res.ok) { throw new Error("Failed to fetch products"); } return data; } // src/server/server.js import express from "express"; import cors from "cors"; const app = express(); const port = 9090; app.use(cors()); app.use(express.json()); app.get("/api/products", (req, res) => { const currentTime = new Date().toLocaleTimeString(); console.log(`Received request at ${currentTime}`); const products = [ { item_no: 122997, item_name: '상품 1', detail_image_url: 'https://picsum.photos/id/237/500/500', price: 75000, }, { item_no: 768848, item_name: '상품 2', detail_image_url: 'https://picsum.photos/id/238/500/500', price: 42000, }, { item_no: 552913, item_name: '상품 3', detail_image_url: 'https://picsum.photos/id/239/500/500', price: 240000, }, // { // item_no: 1045738, // item_name: '상품 4', // detail_image_url: // 'https://picsum.photos/id/240/500/500', // price: 65000, // }, ]; res.json(products); }); app.listen(port, () => console.log('Server is running')); 안녕하세요, fetch와 tanstackQuery를 사용해서 ISR 동작을 테스트하고있었습니다. 테스트 마다 .next 파일은 지우고 새로 build 하여 run start를 통하여 확인하였습니다. staleTime과 revalidate 의 시간이 서로 상이한데, 동일하게 설정했을때, 시간의 간격을 두었을때의 차이점을 직접 확인하려고 하였는데 어떤점에서 차이가 나는지 보고도 이해가 안가서 질문드립니다. 궁금점 1. staleTime과 revalidate 는 gcTime 처럼 staleTime이 revalidate보다 적은 시간으로 설정을 해야하는지? 그렇다면 그 이유는 gcTime보다 작게 설정하는 이유와 같은지? 가 궁금합니다. 2. server.js에 주석처리해놓은 item을 다시 주석을 해지하면 처음 revaildate의 10초 설정으로 인해 새로고침을해도 아이템은 계속 페이지에서 3개만 노출되고있고, 상품을 클릭해서 이동을 하면서 staleTime의 설정인 15초가 되었을때는 client 요청이 발생하여 아이템이 4개로 잘 노출되고있습니다. 하지만 이 때 새로고침을 하게되면 처음 fetch revalidate로 cache되어있던 데이터인 아이템 3개까지만 노출이 되고 새로고침을 한번 더 진행해야 그때서야 4개로 노출이되는데 클라이언트와 서버 쪽이 서로 싱크가 안맞는거같은데 이러한 문제점이 왜 일어나는지 이해가 잘안됩니다! 3. 확장된 fetch와 tanstackQuery를 어떻게 분리해서 사용해야할까도 많이 고민이 되는데.. queryFn 에 이미 fetch로 만들어둔 함수를 가져와 사용하니 분리라는 개념을 생각하면 안되는걸까요? fetch를 독립적으로 사용하는 경우도있다고하는데 이 경우는 왜 독립적으로 사용하는지 잘모르겠습니다.
해결됨
맛집 지도앱 만들기 (React Native & NestJS)
❗ 질문 작성시 꼭 참고해주세요 최대한 상세히 현재 문제(또는 에러)와 코드(또는 github) 를 첨부해주셔야 그만큼 자세히 답변드릴 수 있습니다. 맥/윈도우, 안드로이드/iOS, ReactNative, Node 버전 등의 개발환경 도 함께 적어주시면 도움이 됩니다. 에러메세지는 일부분이 아닌 전체 상황 을 올려주세요. ( 일부만 자르거나 일부만 복사해서 올려주시면 답변이 어렵습니다. ) m1 맥 ios Node : 20.10.0 ruby : 3.1.0 - 2.7.6 버전으로 다운받고 실행했을때 cocoapods가 현재는 2.7.6버전이 아닌 3.1.0버전 이상이 필요하다하여 사용했습니다. cd ios rm -rf Pods rm -rf Podfile.lock pod install 위 명령어를 사용해서 pod도 재설치 한 뒤 xcode로 실행해도 빌드가 되지 않습니다. xcode에서는 아래와같은 오류가 나옵니다. Command PhaseScriptExecution failed with a nonzero exit code vscode에서는 아래와 같이 나옵니다. info Opening the app on iOS... info Found Xcode workspace "MatzipApp_01.xcworkspace" info No booted devices or simulators found. Launching first available simulator... info Launching iPhone SE (3rd generation) (iOS 18.0) info Building (using "xcodebuild -workspace MatzipApp_01.xcworkspace -configuration Debug -scheme MatzipApp_01 -destination id=675A0CA6-486F-4EF1-A232-AAC4D04C438D") info 💡 Tip: Make sure that you have set up your development environment correctly, by running react-native doctor. To read more about doctor command visit: https://github.com/react-native-community/cli/blob/main/packages/cli-doctor/README.md#doctor Command line invocation: /Applications/Xcode.app/Contents/Developer/usr/bin/xcodebuild -workspace MatzipApp_01.xcworkspace -configuration Debug -scheme MatzipApp_01 -destination id=675A0CA6-486F-4EF1-A232-AAC4D04C438D User defaults from command line: IDEPackageSupportUseBuiltinSCM = YES Prepare packages ComputeTargetDependencyGraph note: Building targets in dependency order note: Target dependency graph (56 targets) Target 'MatzipApp_01' in project 'MatzipApp_01' ➜ Implicit dependency on target 'Pods-MatzipApp_01' in project 'Pods' via file 'libPods-MatzipApp_01.a' in build phase 'Link Binary' ➜ Implicit dependency on target 'CocoaAsyncSocket' in project 'Pods' via options '-lCocoaAsyncSocket' in build setting 'OTHER_LDFLAGS' ➜ Implicit dependency on target 'DoubleConversion' in project 'Pods' via options '-lDoubleConversion' in build setting 'OTHER_LDFLAGS' ➜ Implicit dependency on target 'Flipper' in project 'Pods' via options '-lFlipper' in build setting 'OTHER_LDFLAGS' ➜ Implicit dependency on target 'Flipper-Boost-iOSX' in project 'Pods' via options '-lFlipper-Boost-iOSX' in build setting 'OTHER_LDFLAGS' ➜ Implicit dependency on target 'Flipper-Fmt' in project 'Pods' via options '-lFlipper-Fmt' in build setting 'OTHER_LDFLAGS' ➜ Implicit dependency on target 'Flipper-Folly' in project 'Pods' via options '-lFlipper-Folly' in build setting 'OTHER_LDFLAGS' ➜ Implicit dependency on target 'Flipper-PeerTalk' in project 'Pods' via options '-lFlipper-PeerTalk' in build setting 'OTHER_LDFLAGS' ➜ Implicit dependency on target 'FlipperKit' in project 'Pods' via options '-lFlipperKit' in build setting 'OTHER_LDFLAGS' ➜ Implicit dependency on target 'RCT-Folly' in project 'Pods' via options '-lRCT-Folly' in build setting 'OTHER_LDFLAGS' ➜ Implicit dependency on target 'RCTTypeSafety' in project 'Pods' via options '-lRCTTypeSafety' in build setting 'OTHER_LDFLAGS' ➜ Implicit dependency on target 'React-Codegen' in project 'Pods' via options '-lReact-Codegen' in build setting 'OTHER_LDFLAGS' ➜ Implicit dependency on target 'React-Core' in project 'Pods' via options '-lReact-Core' in build setting 'OTHER_LDFLAGS' ➜ Implicit dependency on target 'React-CoreModules' in project 'Pods' via options '-lReact-CoreModules' in build setting 'OTHER_LDFLAGS' ➜ Implicit dependency on target 'React-NativeModulesApple' in project 'Pods' via options '-lReact-NativeModulesApple' in build setting 'OTHER_LDFLAGS' ➜ Implicit dependency on target 'React-RCTAnimation' in project 'Pods' via options '-lReact-RCTAnimation' in build setting 'OTHER_LDFLAGS' ➜ Implicit dependency on target 'React-RCTAppDelegate' in project 'Pods' via options '-lReact-RCTAppDelegate' in build setting 'OTHER_LDFLAGS' ➜ Implicit dependency on target 'React-RCTBlob' in project 'Pods' via options '-lReact-RCTBlob' in build setting 'OTHER_LDFLAGS' ➜ Implicit dependency on target 'React-RCTImage' in project 'Pods' via options '-lReact-RCTImage' in build setting 'OTHER_LDFLAGS' ➜ Implicit dependency on target 'React-RCTLinking' in project 'Pods' via options '-lReact-RCTLinking' in build setting 'OTHER_LDFLAGS' ➜ Implicit dependency on target 'React-RCTNetwork' in project 'Pods' via options '-lReact-RCTNetwork' in build setting 'OTHER_LDFLAGS' ➜ Implicit dependency on target 'React-RCTSettings' in project 'Pods' via options '-lReact-RCTSettings' in build setting 'OTHER_LDFLAGS' ➜ Implicit dependency on target 'React-RCTText' in project 'Pods' via options '-lReact-RCTText' in build setting 'OTHER_LDFLAGS' ➜ Implicit dependency on target 'React-RCTVibration' in project 'Pods' via options '-lReact-RCTVibration' in build setting 'OTHER_LDFLAGS' ➜ Implicit dependency on target 'React-cxxreact' in project 'Pods' via options '-lReact-cxxreact' in build setting 'OTHER_LDFLAGS' ➜ Implicit dependency on target 'React-debug' in project 'Pods' via options '-lReact-debug' in build setting 'OTHER_LDFLAGS' ➜ Implicit dependency on target 'React-hermes' in project 'Pods' via options '-lReact-hermes' in build setting 'OTHER_LDFLAGS' ➜ Implicit dependency on target 'React-jsi' in project 'Pods' via options '-lReact-jsi' in build setting 'OTHER_LDFLAGS' ➜ Implicit dependency on target 'React-jsiexecutor' in project 'Pods' via options '-lReact-jsiexecutor' in build setting 'OTHER_LDFLAGS' ➜ Implicit dependency on target 'React-jsinspector' in project 'Pods' via options '-lReact-jsinspector' in build setting 'OTHER_LDFLAGS' ➜ Implicit dependency on target 'React-logger' in project 'Pods' via options '-lReact-logger' in build setting 'OTHER_LDFLAGS' ➜ Implicit dependency on target 'React-perflogger' in project 'Pods' via options '-lReact-perflogger' in build setting 'OTHER_LDFLAGS' ➜ Implicit dependency on target 'React-runtimescheduler' in project 'Pods' via options '-lReact-runtimescheduler' in build setting 'OTHER_LDFLAGS' ➜ Implicit dependency on target 'React-utils' in project 'Pods' via options '-lReact-utils' in build setting 'OTHER_LDFLAGS' ➜ Implicit dependency on target 'ReactCommon' in project 'Pods' via options '-lReactCommon' in build setting 'OTHER_LDFLAGS' ➜ Implicit dependency on target 'SocketRocket' in project 'Pods' via options '-lSocketRocket' in build setting 'OTHER_LDFLAGS' ➜ Implicit dependency on target 'Yoga' in project 'Pods' via options '-lYoga' in build setting 'OTHER_LDFLAGS' ➜ Implicit dependency on target 'YogaKit' in project 'Pods' via options '-lYogaKit' in build setting 'OTHER_LDFLAGS' ➜ Implicit dependency on target 'fmt' in project 'Pods' via options '-lfmt' in build setting 'OTHER_LDFLAGS' ➜ Implicit dependency on target 'glog' in project 'Pods' via options '-lglog' in build setting 'OTHER_LDFLAGS' ➜ Implicit dependency on target 'libevent' in project 'Pods' via options '-llibevent' in build setting 'OTHER_LDFLAGS' Target 'Pods-MatzipApp_01' in project 'Pods' ➜ Explicit dependency on target 'CocoaAsyncSocket' in project 'Pods' ➜ Explicit dependency on target 'DoubleConversion' in project 'Pods' ➜ Explicit dependency on target 'FBLazyVector' in project 'Pods' ➜ Explicit dependency on target 'FBReactNativeSpec' in project 'Pods' ➜ Explicit dependency on target 'Flipper' in project 'Pods' ➜ Explicit dependency on target 'Flipper-Boost-iOSX' in project 'Pods' ➜ Explicit dependency on target 'Flipper-DoubleConversion' in project 'Pods' ➜ Explicit dependency on target 'Flipper-Fmt' in project 'Pods' ➜ Explicit dependency on target 'Flipper-Folly' in project 'Pods' ➜ Explicit dependency on target 'Flipper-Glog' in project 'Pods' ➜ Explicit dependency on target 'Flipper-PeerTalk' in project 'Pods' ➜ Explicit dependency on target 'FlipperKit' in project 'Pods' ➜ Explicit dependency on target 'OpenSSL-Universal' in project 'Pods' ➜ Explicit dependency on target 'RCT-Folly' in project 'Pods' ➜ Explicit dependency on target 'RCTRequired' in project 'Pods' ➜ Explicit dependency on target 'RCTTypeSafety' in project 'Pods' ➜ Explicit dependency on target 'React' in project 'Pods' ➜ Explicit dependency on target 'React-Codegen' in project 'Pods' ➜ Explicit dependency on target 'React-Core' in project 'Pods' ➜ Explicit dependency on target 'React-CoreModules' in project 'Pods' ➜ Explicit dependency on target 'React-NativeModulesApple' in project 'Pods' ➜ Explicit dependency on target 'React-RCTActionSheet' in project 'Pods' ➜ Explicit dependency on target 'React-RCTAnimation' in project 'Pods' ➜ Explicit dependency on target 'React-RCTAppDelegate' in project 'Pods' ➜ Explicit dependency on target 'React-RCTBlob' in project 'Pods'
해결됨
맛집 지도앱 만들기 (React Native & NestJS)
강의 내용 내에서의 질문입니다. 23:54에서 콘솔에 isComback이 4회가 찍히는 이유가 뭔가요?
해결됨
맛집 지도앱 만들기 (React Native & NestJS)
❗ 질문 작성시 꼭 참고해주세요 최대한 상세히 현재 문제(또는 에러)와 코드(또는 github) 를 첨부해주셔야 그만큼 자세히 답변드릴 수 있습니다. 맥/윈도우, 안드로이드/iOS, ReactNative, Node 버전 등의 개발환경 도 함께 적어주시면 도움이 됩니다. 에러메세지는 일부분이 아닌 전체 상황 을 올려주세요. ( 일부만 자르거나 일부만 복사해서 올려주시면 답변이 어렵습니다. ) 안녕하세요! 강의 너무 잘 듣고 있습니다. 만들면서 따라가다 보니 에러가 나거나 하지는 않았지만 궁금한 점이 생겨서 질문남깁니다. 이번 강의에서 ScoreInput 컴포넌트에 전달하는 onChangeScore 함수로 handleChangeScore 를 정의해서 넘기셨는데, 사실 이 함수가 하는 일은 현재 setScore를 하는 것 뿐이라 그냥 setScore 함수를 넘겨도 되지 않는지 의문이 들어서요. 혹여 그렇게 했을 경우 문제가 되거나 하는 부분이 있다면 말씀 부탁드립니다. 감사합니다!
미해결
Next + React Query로 SNS 서비스 만들기
로그인하고 홈 메인페이지에서 새로고침하면 오류 뜹니다 PostForm.tsx쪽 TextAreaAutosize 라이브러리 이 부분 주석하면 에러 안뜨는데 라이브러리 문제인지 제가 잘못한건지 모르겠습니다 key값 없다고 하는데 TrendSection.tsx에 {data?.map((trend) => ( <Trend trend={trend} key={trend.tagId} /> ))} 여기 trend.tagId에서 tagId를 못찾는거 같은데 백엔드 문제인가요??? 타입스크립트 Hashtag에 tagId: number 있어요
