inflearn logo
강의

강의
N
챌린지

챌린지
멘토링

멘토링
N
클립

클립
로드맵

로드맵
지식공유

묻고 답해요

176만명의 커뮤니티!! 함께 토론해봐요.

모바일 앱은 API key 를 요청 url 에 그대로 사용해도 문제가 없나요?

해결됨

맛집 지도앱 만들기 (React Native & NestJS)

안녕하세요. [5-3] 장소 등록하기(4) - 주소 조회 with Google API 강의에서 질문이 있습니다. useGetAddress() hook 에서 get 요청 API 에 API Key 를 그대로 넣는데, 혹시 API key 가 노출될 위험이 없는 걸까요? 보통 웹 환경이었으면 클라이언트가 서버로 LatLng 를 넘겨서 요청하면, 서버에서 API Key 로 address 얻어서 클라이언트 사이드로 넘겨주었을것 같은데, 모바일은 이렇게 프리(?)하게 사용해도 보안상 큰 문제가 없는지 궁금합니다! (특히 Production 환경에 배포하는 코드에서도 문제가 없을지 궁금합니다.) 모바일 환경에서의 개발은 이 강의로 처음 하는거라 프로덕션 레벨까지 올렸을 때 어떻게 대응하는지에 대해 궁금한 점이 종종 생기는것같습니다.

  • react-native
  • typescript
  • nestjs
  • react-query
  • zustand
Ryan Kim 댓글 1 좋아요 1 조회수 314

type과 interface를 사용하는 기준이 궁금합니다.

미해결

Next + React Query로 SNS 서비스 만들기

model 폴더에서 PostImage는 interface를 사용하시고 Post컴포넌트에서는 type을 사용하셨는데 두 개를 다르게 사용하는 강사님만의 기준이 있나요 ? 제가 공부한 바로는 간단한 객체 타입일 경우 둘다 사용해도 상관없다. type은 복잡한 유니언 타입을 지정할때 사용한다 interface는 확장이 필요할 경우 사용한다고

  • react
  • next.js
  • react-query
  • next-auth
  • msw
한나릴 댓글 2 좋아요 0 조회수 266

8-2.카카오 로그인 구현하기 with WebView 강의중

해결됨

맛집 지도앱 만들기 (React Native & NestJS)

❗ 질문 작성시 꼭 참고해주세요 최대한 상세히 현재 문제(또는 에러)와 코드(또는 github) 를 첨부해주셔야 그만큼 자세히 답변드릴 수 있습니다. 맥/윈도우, 안드로이드/iOS, 버전 등의 개발환경 도 함께 적어주시면 도움이 됩니다. 에러메세지는 일부분이 아닌 전체 상황 을 올려주세요! 안녕하세요 강사님! 현재 15분 38초를 진행하고 있는데 카카오를 로그인하면 무한로딩되면서 홈화면에는 안넘어가고 있습니다. 일단 access_token은 잘넘어오는데 백엔드에서 [Nest] 77076 - 2024. 07. 09. 오후 2:32:09 ERROR [ExceptionsHandler] ENOENT: no such file or directory, stat '/uploads/index.html' Error: ENOENT: no such file or directory, stat '/uploads/index.html' 라고 오류가 나옵니다. kakakoLoginMuattion부분 코드는 깃헙보면서 오타는 없는지 확인했습니다

  • react-native
  • typescript
  • nestjs
  • react-query
  • zustand
장산 댓글 1 좋아요 1 조회수 501

내가 나에게 채팅을 거는 이유

미해결

Next + React Query로 SNS 서비스 만들기

안녕하세요, 강사님, 개발 하는 도중에, test2계정으로 -> test1계정에 메시지를 걸 떄 원래는 test1계정이 나와야하는데, 현재 로그인한 유저의 정보를 불러오는 상황이 생겼습니다.이유가 무엇인지 궁금합니다!! import { HydrationBoundary, QueryClient, dehydrate, } from '@tanstack/react-query'; import style from './profile.module.css'; import UserPosts from './_component/UserPosts'; import { getUserPosts } from './_lib/getUserPosts'; import UserInfo from './_component/UserInfo'; import { auth } from '@/auth'; import { getUserServer } from './_lib/getUserServer'; import { User } from '@/model/User'; export async function generateMetadata({ params }: Props) { const user: User = await getUserServer({ queryKey: ['users', params.username], }); return { title: `${user.nickname} (${user.id})`, description: `${user.nickname} (${user.id})`, openGraph: { title: `${user.nickname} (${user.id}) / Z`, description: `${user.nickname} (${user.id})`, // 프로필 images: [ { url: `https://z.nodebirde.com${user.image}`, // upload width: 800, height: 600, }, ], }, }; } type Props = { params: { username: string }; }; export default async function Profile({ params }: Props) { const { username } = params; const queryClient = new QueryClient(); const session = await auth(); // 사용자 정보 쿼리로 가져옴 await queryClient.prefetchQuery({ queryKey: ['users', username], queryFn: getUserServer, }); // 해당 유저의 게시글 await queryClient.prefetchQuery({ queryKey: ['posts', 'users', username], queryFn: getUserPosts, }); const dehydratedState = dehydrate(queryClient); // 서버쪽에서 쿼리를 해온 것을 나중에 dehydratedState로 받으면 됨. // const user = { // id: 'zerohch0', // nickname: '제로초', // image: '/5Udwvqim.jpg', // }; return ( <main className={style.main}> <HydrationBoundary state={dehydratedState}> <UserInfo username={username} session={session} /> <div> <UserPosts username={username} /> </div> </HydrationBoundary> </main> ); }

  • react
  • next.js
  • react-query
  • next-auth
  • msw
김용민 댓글 1 좋아요 0 조회수 225

챕터1까지 듣고 질문입니다. 새로고침해도 @modal이 유지되게 할 순 없을까요?

해결됨

Next + React Query로 SNS 서비스 만들기

안녕하세요! 강의 잘듣고있습니다. login 폴더가 불필요한 루트 인 것 같아서 바로 인터셉터 라우터를 이용해 @modal로 연결했습니다. <Link href="/i/flow/login" className={styles.login}>로그인</Link> 또 추가로 새로고침 해도 Modal을 유지하고 싶어서 i/flow/login폴더에서 아래와 같이 마운트시에 인터셉터 하도록 유도하였습니다. "use client"; import { useRouter } from "next/navigation"; import { useEffect } from "react"; export default function Login() { const router = useRouter(); useEffect(() => { router.replace("/i/flow/login"); }, [router]); return null; } 기존 유입방식으로 SSR Page에서 i/flow/login으로 이동 시, 인터셉터 라우팅하여 병렬 라우팅 하던것과 달리, 바로유입 -> i/flow/login -> (replace) -> (.)i/flow/login/page.tsx 순으로 @modal이 출력될줄 알았는데 모달이 출력되질 않네요.. 이유가 i/flow/login으로 바로 접속했기에 상위 폴더 영역에서 {modal}을 선언한 layout을 찾지 못하기 때문에 아무것도 뜨지 않는건가요? 제가 이해한 것이 맞을지 검색해도 잘 안나와서 질문드립니다!

  • react
  • next.js
  • react-query
  • next-auth
  • msw
squirrel PARK 댓글 1 좋아요 0 조회수 249

EC2, RDS 배포중에 에러

해결됨

맛집 지도앱 만들기 (React Native & NestJS)

강사님 좋은 강의 잘 듣고 있습니다! 포스트맨으로 요청을 보내도 정상적으로 응답이오고, psql로 연결이 되었다고 나오고 테이블도 조회가 되는데 pm2 log를 보면 Unable to connect to the database. 라고 에러 메시지가 나옵니다. 열심히 해결해보려고 했는데 이유를 모르겠어서 질문합니다..

  • react-native
  • typescript
  • nestjs
  • react-query
  • zustand
dubu777 댓글 3 좋아요 0 조회수 397

팔로우 게시글 불러올 때 내 게시글이 가져와지는 문제

해결됨

Next + React Query로 SNS 서비스 만들기

getFollowingPosts 호출 시 내 게시글들이 불러와집니다. credentials: 'include' 제대로 넣어줬는데 원인을 모르겠습니다. 무한스크롤은 적용했고 팔로잉은 아직 없는 상태입니다. getFollowingPosts type Props = { pageParam?: number; }; export async function getFollowingPosts({ pageParam }: Props) { const response = await fetch( `${process.env.NEXT_PUBLIC_BASE_URL}/api/posts/followings?cursor=${pageParam}`, { next: { tags: ['posts', 'followings'], }, credentials: 'include', cache: 'no-store', }, ); if (!response.ok) { throw new Error('Failed to fetch data'); } return response.json(); } FollowingPosts 'use client'; import { InfiniteData, useInfiniteQuery } from '@tanstack/react-query'; import { getFollowingPosts } from '../_lib/getFollowingPosts'; import Post from '../../_components/post'; import type { Post as IPost } from '@/model/post'; import { useInView } from 'react-intersection-observer'; import { Fragment, useEffect } from 'react'; export default function FollowingPosts() { const { data, fetchNextPage, hasNextPage, isFetching } = useInfiniteQuery< IPost[], Object, InfiniteData<IPost[]>, [_1: string, _2: string], number >({ queryKey: ['posts', 'followings'], queryFn: getFollowingPosts, initialPageParam: 0, // required getNextPageParam: (lastPage) => lastPage.at(-1)?.postId, // required staleTime: 60 * 1000, gcTime: 300 * 1000, }); const { ref, inView } = useInView({ threshold: 0, delay: 0, }); useEffect(() => { //. inView: ref가 화면에 보일 때 //. !isFetching: 패칭상태 아닐때 (중복 패칭 방지) //. hasNextPage: 다음 페이지가 있을 때 console.log('useEffect', { inView, isFetching, hasNextPage }); if (inView && !isFetching && hasNextPage) { fetchNextPage(); } }, [inView, isFetching, hasNextPage, fetchNextPage]); return data?.pages.map((page, index) => ( <Fragment key={`posts-followings-page-${index}`}> {page.map((post) => ( <Post key={post.postId} post={post} /> ))} {!isFetching && <div ref={ref} style={{ height: 50 }}></div>} {isFetching && <div style={{ height: 50 }}></div>} </Fragment> )); } response에는 내 게시글들이 담겨옵니다 서버쪽 PostsService findAll 콘솔 찍어보면 유저정보 제대로 받아옵니다 { cursor: 0, type: 'followings', user: { id: 'asdf', nickname: '슈퍼맨', image: '/upload/dummy1719568724038.png' } }

  • react
  • next.js
  • react-query
  • next-auth
  • msw
andante 댓글 1 좋아요 0 조회수 285

유저정보 유지관련해서 세션쿠키, 엑세스토큰 질문드립니다.

미해결

Next + React Query로 SNS 서비스 만들기

안녕하세요 선생님 선생님강의 따라서 로그인을 구현했습니다. auth에서 관리해주는 세션으로는 프론트용, 로그인 후 내려주는 connect.id 세션으로는 백엔드용, 으로 사용했습니다. 그런데 궁금한게 로그인을 하고 기간이 지나거나 그런 경우를 대비해서 엑세스토큰, 리프레시 토큰을 많이 사용하는 것을 보았는데 선생님은 넥스트에서 어떤 방식을 사용하시는지, 어떤방식을 추천하시는지 궁금합니다. 검색해보니까 엑세스토큰이 아닌 쿠키세션으로 사용할때에는 일정시간 inter시켜주고 특정시간지나면 쿠키시간을 업데이트해주기도 하더라구요. 선생님 조언이 궁금합니다. 감사합니다.

  • react
  • next.js
  • react-query
  • next-auth
  • msw
챠챠_ 댓글 1 좋아요 0 조회수 217

채팅 구현했는데 소켓 연결이 됐다 안됐다 늦게 됐다 합니다.

해결됨

Next + React Query로 SNS 서비스 만들기

안녕하세요 선생님 강의를 보고 참고해서 채팅 기능을 만들었습니다. 그런데 a,b가 채팅화면에 들어왔을때 소켓 연결이 안되거나, 늦게 되거나 하는 경우가 있어서 제가 로직을 잘못짠건지 어딜 확인해야하는건지 조언을 들을수 있을까해서 문의 남깁니다. 먼저 서버에서 이렇게 socket.io 를 설정해주고 /app.js const app = express(); const httpServer = new createServer(app); const io = new Server(httpServer, { cors: { origin: 'https://zzimzzim.com', credentials: true, }, }); /utils/io.js module.exports = function (io, db) { const userSockets = {}; const nsp = io.of('/messages'); nsp.on('connection', (socket) => { console.log('soket connected'); socket.on('disconnect', () => { console.log('-----------------user disconnected'); }); socket.on('login', (user) => { userSockets[user.id] = socket.id; console.log(userSockets, '-------------------------------userSockets'); console.log(`User ${user.id} connected with socket id ${socket.id} --------- 유저입장`); }) socket.on('sendMessage', async (data) => { try { const roomId = data.room.split('-').sort().join('-'); console.log(roomId, '---------------------------------roomId'); console.log(data, '---------------------------------data'); console.log(userSockets, '---------------------------------userSockets'); let room = await db.Room.findOne({ where: { room: roomId }, include: [ { model: db.User, as: 'RoomSender', attributes: ['id', 'email', 'gender', 'mbti'], include: [{model: db.Image}], }, { model: db.User, as: 'RoomReceiver', attributes: ['id', 'email', 'gender', 'mbti'], include: [{model: db.Image}] }, ] }); if (room) { room = await room.update({ content: data.content }); } else { const roomCreated = await db.Room.create({ SenderId: data.senderId, ReceiverId: data.receiverId, content: data.content, room: roomId, }) console.log(roomCreated, '------------------------------roomCreated') room = await db.Room.findOne({ where: { room: roomId }, include: [ { model: db.User, as: 'RoomSender', attributes: ['id', 'email', 'gender', 'mbti'], include: [{model: db.Image}], }, { model: db.User, as: 'RoomReceiver', attributes: ['id', 'email', 'gender', 'mbti'], include: [{model: db.Image}] }, ] }) } const savedMessage = await db.Message.create({ SenderId: data.senderId, ReceiverId: data.receiverId, content: data.content, room: roomId, }); // console.log(savedMessage, '------------------------Message saved'); console.log(room, '------------------------room saved'); const receiverSocketId = userSockets[data.receiverId]; if (receiverSocketId) { socket.to(receiverSocketId).emit('receiveMessage', savedMessage); socket.to(receiverSocketId).emit('receiveRoom', room); } else { console.log(`User ${data.receiverId} is not connected`); } } catch (error) { console.error('Error saving message:', error); } }); }) } 클라이언트에서는 선생님이 useSocket만든것과는 다르게 useContext를 이용해서 /src/app/(afterLogin)/messages/_component/SocketProvider.tsx 'use client'; import { useSession } from 'next-auth/react'; import { ReactNode, createContext, useCallback, useEffect, useMemo, useState } from 'react'; import { io, Socket } from 'socket.io-client'; type Props = { children: ReactNode }; type SocketContextType = { socket: Socket | null; isConnected: boolean; disconnect: Function; goDown: boolean; setGoDown: Function; } export const SocketContext = createContext<SocketContextType>({ socket: null, isConnected: false, disconnect: () => { }, goDown: false, setGoDown: () => {}, }) export default function SocketProvider({ children }: Props) { const { data: session } = useSession(); const [socket, setSocket] = useState<any | null>(null); const [isConnected, setIsConnected] = useState(false); const [goDown, setGoDown] = useState(false); const disconnect = useCallback(() => { socket?.disconnect(); setSocket(null); }, [socket]); const value = useMemo(() => { return { socket, isConnected, disconnect, goDown, setGoDown } }, [socket, isConnected, disconnect, goDown]); useEffect(() => { console.log(socket, '-----------------------------------------socket???'); if (!socket) { const socketInstance = io(`${process.env.NEXT_PUBLIC_BASE_URL}/messages`, { withCredentials: true, }); socketInstance.on('connect', async () => { setIsConnected(true); console.log("소켓연결 성공!!!", socketInstance.id); // console.log(socketInstance, '--------------------socketInstance'); }) setSocket(socketInstance); } }, [socket]); useEffect(() => { if (socket?.connected && session?.user?.id) { console.log('--------------------------------------------socket emit login') socket?.emit('login', { id: session?.user?.id }); } }, [session, socket]); return ( <SocketContext.Provider value={value}> {children} </SocketContext.Provider> ) } 이런식으로 만들고 /src/app/(afterLogin)/messages/layout.tsx import { ReactNode } from 'react'; import SocketProvider from './_component/SocketProvider'; type Props = { children: ReactNode }; export default function Layout({ children }: Props) { return ( <SocketProvider> {children} </SocketProvider> ) } 레이에다가 적용해주었습니다. 이런식으로 해주면 소켓연결을 한번만 하고 원할때 메세지를 주고 받을 수 있을거라고 생각해서 적용한건데 혹시 소켓 연결 관련해서 더 확인해야하거나 수정할 부분이 있을지 궁금합니다. 감사합니다!

  • react
  • next.js
  • react-query
  • next-auth
  • msw
챠챠_ 댓글 1 좋아요 0 조회수 270

주소 변경없이 모달창 구현하기

미해결

Next + React Query로 SNS 서비스 만들기

Q질문 로그인 버튼 클릭시 주소변경없이 모달창을 보이게 하려면 결국 라우팅만 이용해서는 할 수 없고 , 기존에 리액트에서 사용하던 모달 state를 관리해주는 방식 으로 해야한다. 라고 생각되어집니다. 이 부분에 대해서 강사님의 생각을 여쭤봅니다. 이렇게 생각한 이유는 로그인 버튼 클릭시 주소변경없이 모달창을 띄우려면 우선, 패러렐 라우팅과 인터셉트 라우팅 둘다 사용해야 하며 '/' 주소가 아닌 '/login' 주소로 바뀌어야만 한다. (이때 인터셉트 라우팅을 사용해야 하는 이유는 새로고침이 뒤에있는 모달창을 안보여도, 뒤에있던 화면은 보여야하기 때문이다. ) 주소가 바뀌어야 하는 이유를 설명하자면 패러렐 라우팅을 '/' 주소로 하게 되면 처음 브라우저에 방문하게 되면 모달창이 보이게 되기 때문이다. 그러므로 로그인 버튼 클릭시 '/login' 의 주소에서 홈화면과 모달창이 보이게 해야한다.

  • react
  • next.js
  • react-query
  • next-auth
  • msw
한나릴 댓글 1 좋아요 1 조회수 219

TypeError: Cannot read properties of undefined (reading 'X_OK')

해결됨

맛집 지도앱 만들기 (React Native & NestJS)

❗ 질문 작성시 꼭 참고해주세요 최대한 상세히 현재 문제(또는 에러)와 코드(또는 github) 를 첨부해주셔야 그만큼 자세히 답변드릴 수 있습니다. 맥/윈도우, 안드로이드/iOS, 버전 등의 개발환경 도 함께 적어주시면 도움이 됩니다. 에러메세지는 일부분이 아닌 전체 상황 을 올려주세요! 안녕하세요 npx react-native doctor을 했을 때 이런 에러가 뜨는데 어떻게 해결할 수 있을까요?ㅠ TypeError: Cannot read properties of undefined (reading 'X_OK') at Object.getDiagnostics (/Users/name/Desktop/Test/TestProject/node_modules/@react-native-community/cli-doctor/build/tools/healthchecks/gradle.js:42:57) at /Users/name/Desktop/Test/TestProject/node_modules/@react-native-community/cli-doctor/build/commands/doctor.js:116:29 at Array.map (<anonymous>) at iterateOverHealthChecks (/Users/name/Desktop/Test/TestProject/node_modules/@react-native-community/cli-doctor/build/commands/doctor.js:106:51) at Array.map (<anonymous>) at iterateOverCategories (/Users/name/Desktop/Test/TestProject/node_modules/@react-native-community/cli-doctor/build/commands/doctor.js:139:70) at Object.doctorCommand [as func] (/Users/name/Desktop/Test/TestProject/node_modules/@react-native-community/cli-doctor/build/commands/doctor.js:140:41) at async Command.handleAction (/Users/name/Desktop/Test/TestProject/node_modules/@react-native-community/cli/build/index.js:116:9)

  • react-native
  • typescript
  • nestjs
  • react-query
  • zustand
우디 댓글 1 좋아요 0 조회수 485

type, interface 용도 차이

해결됨

맛집 지도앱 만들기 (React Native & NestJS)

❗ 질문 작성시 꼭 참고해주세요 최대한 상세히 현재 문제(또는 에러)와 코드(또는 github) 를 첨부해주셔야 그만큼 자세히 답변드릴 수 있습니다. 맥/윈도우, 안드로이드/iOS, 버전 등의 개발환경 도 함께 적어주시면 도움이 됩니다. 에러메세지는 일부분이 아닌 전체 상황 을 올려주세요! 안녕하세요 강사님!! 강의에서 type을 정의할 때 type과 interface 키워드 모드 사용하는걸 볼 수 있는데,어떨때 type을 사용하고 interface를 사용하는지 알 수 있을까요? 느낌상 확장성(extends), 재사용성(제네릭) 등 타입이 확정적이지 않은곳에서 interface를 사용하고 그 이외에는 type을 사용하는것같은데 맞을까요?

  • react-native
  • typescript
  • nestjs
  • react-query
  • zustand
정재웅 댓글 1 좋아요 1 조회수 356

[8-3] 혹시 애플 개발자 등록 할 때 연간 비용이 드는게 맞나요?

해결됨

맛집 지도앱 만들기 (React Native & NestJS)

안녕하세요. 강의 진행 중 애플 로그인 구현하기 까지 진행하고 있습니다. 강의에서는 별다른 설명 없이 등록이 진행 되는걸로 보여지는데 저는 멤버십을 구매하라고 나오네요.. 제가 혹시 가입 중 뭔가 잘못 한건가요? 아니면 원래 애플 개발자에 등록을 하려면 개인도 13만원 가량 하는 금액을 지불해야 하는건가요? 제가 혹시 잘못 가입 한거라면 비용을 지불하지 않고 개발자를 등록하는 방법을 한번만 자세히 알려주시면 감사드리겠습니다!

  • react-native
  • typescript
  • nestjs
  • react-query
  • zustand
wjdrlf5986 댓글 1 좋아요 1 조회수 697

ios 실행 시 에러

해결됨

맛집 지도앱 만들기 (React Native & NestJS)

❗ 질문 작성시 꼭 참고해주세요 최대한 상세히 현재 문제(또는 에러)와 코드(또는 github) 를 첨부해주셔야 그만큼 자세히 답변드릴 수 있습니다. 맥/윈도우, 안드로이드/iOS, 버전 등의 개발환경 도 함께 적어주시면 도움이 됩니다. 에러메세지는 일부분이 아닌 전체 상황 을 올려주세요! 안녕하세요, yarn start를 하고 i를 눌러 Ios를 실행하면 이런 에러가 뜹니다 ㅠ i - run on iOS a - run on Android d - open Dev Menu r - reload app info Opening app on iOS... info A dev server is already running for this project on port 8081. Error: Error: Command failed with exit code 1: xcodebuild -list -json xcode-select: error: tool 'xcodebuild' requires Xcode, but active developer directory '/Library/Developer/CommandLineTools' is a command line tools instance at getInfo (/Users/woojin/Desktop/Repos/AwesomeProject/node_modules/@react-native-community/cli-platform-apple/build/tools/getInfo.js:31:11) at getConfiguration (/Users/woojin/Desktop/Repos/AwesomeProject/node_modules/@react-native-community/cli-platform-apple/build/commands/buildCommand/getConfiguration.js:36:37) at Object.func (/Users/woojin/Desktop/Repos/AwesomeProject/node_modules/@react-native-community/cli-platform-apple/build/commands/runCommand/createRun.js:113:52) at process.processTicksAndRejections (node:internal/process/task_queues:95:5) at async Command.handleAction (/Users/woojin/Desktop/Repos/AwesomeProject/node_modules/@react-native-community/cli/build/index.js:118:9) 그리고 자꾸 이런 것도 뜨는데 저는 다른 포트가 없는데 왜 뜨는걸까요? info A dev server is already running for this project on port 8081.

  • react-native
  • typescript
  • nestjs
  • react-query
  • zustand
우디 댓글 1 좋아요 0 조회수 599

새 프로젝트 만드는 명령어 관련 질문.

해결됨

맛집 지도앱 만들기 (React Native & NestJS)

❗ 질문 작성시 꼭 참고해주세요 최대한 상세히 현재 문제(또는 에러)와 코드(또는 github) 를 첨부해주셔야 그만큼 자세히 답변드릴 수 있습니다. 맥/윈도우, 안드로이드/iOS, 버전 등의 개발환경 도 함께 적어주시면 도움이 됩니다. 에러메세지는 일부분이 아닌 전체 상황 을 올려주세요! 안녕하세요! 강의에서는 npx react-native@latest init ~~ 이라고 되어있는데 지금 공식 문서에는 npx @react-native-community/cli@latest init AwesomeProject 이라고 되어 있습니다. 어떤 차이가 있는걸까요?

  • react-native
  • typescript
  • nestjs
  • react-query
  • zustand
우디 댓글 1 좋아요 0 조회수 288

JAVA_HOME 은 설정할 필요 없는걸까요?

해결됨

맛집 지도앱 만들기 (React Native & NestJS)

❗ 질문 작성시 꼭 참고해주세요 최대한 상세히 현재 문제(또는 에러)와 코드(또는 github) 를 첨부해주셔야 그만큼 자세히 답변드릴 수 있습니다. 맥/윈도우, 안드로이드/iOS, 버전 등의 개발환경 도 함께 적어주시면 도움이 됩니다. 에러메세지는 일부분이 아닌 전체 상황 을 올려주세요! 안녕하세요! 이거 설정은 필요 없는걸까요? 강좌에 설명이 없어서 질문 드립니다!

  • react-native
  • typescript
  • nestjs
  • react-query
  • zustand
우디 댓글 1 좋아요 0 조회수 258

안드로이드 api 33 34 가 없습니다

해결됨

맛집 지도앱 만들기 (React Native & NestJS)

❗ 질문 작성시 꼭 참고해주세요 최대한 상세히 현재 문제(또는 에러)와 코드(또는 github) 를 첨부해주셔야 그만큼 자세히 답변드릴 수 있습니다. 맥/윈도우, 안드로이드/iOS, 버전 등의 개발환경 도 함께 적어주시면 도움이 됩니다. 에러메세지는 일부분이 아닌 전체 상황 을 올려주세요! 안녕하세요, 안드로이드 스튜디오에서 SDK 플랫폼 설정에서 안드로이드 api 34 가 있고 33을 추가로 설치하라고 하셨는데, 저한테는 그게 없는데 어떻게 할까요?

  • react-native
  • typescript
  • nestjs
  • react-query
  • zustand
우디 댓글 1 좋아요 0 조회수 484

강의를 다 보고 궁금한점이 생겼습니다! (afterLogin)에 대해서 질문있습니다.

해결됨

Next + React Query로 SNS 서비스 만들기

https://github.com/ZeroCho/next-app-router-z/blob/master/lecture/src/app/(afterLogin)/layout.tsx 제로초님 강의를 다 듣고 코드를 살펴보던 중 의문이 있어 질문 드립니다. 해당 코드를 보면 lecture/src/app/(afterLogin)/layout.tsx 파일에서 거의 최고 부모컴포넌트인 <RQProvider>가 "use client"를 사용하여 클라이언트 컴포넌트가 되는것으로 알고있는데 이렇게 한다면 그 하위 컴포넌트들은 전부 클라이언트 컴포넌트가되는게 아닌가요? 어떻게 서버컴포넌트를 사용할 수 있는건지 궁금합니다.

  • react
  • next.js
  • react-query
  • next-auth
  • msw
cloud 댓글 1 좋아요 0 조회수 201

메세지 보내고 백엔드에 저장하는 부분이 어디인지 궁금합니다.

미해결

Next + React Query로 SNS 서비스 만들기

안녕하세요 선생님 완강하고 채팅을 구현해보려고 합니다. 그런데 강의와 깃헙을 보면 soket으로 보내는 내용, 쿼리에 데이터 추가하는 내용은 있는데 소켓으로 보낸 내용이 백엔드에 저장되는 부분이 보이질 않더라구요, 클라이언트에서 소켓으로 데이터를 보내면 그걸 받고 백엔드에서 저장해주는 로직이 따로 있는걸까요?

  • react
  • next.js
  • react-query
  • next-auth
  • msw
챠챠_ 댓글 1 좋아요 0 조회수 178

react-query key 관련해서 궁금한게 있습니다.

미해결

Next + React Query로 SNS 서비스 만들기

// 1번 - A 컴포넌트 useQuery({ queryKey: ['user'], queryFn: () => getUser(user), staleTime: 6000 }) // 2번 - B 컴포넌트 useQuery({ queryKey: ['user'], queryFn: () => getUser(user), }) StaleTime 덮어 써지는지 질문 1번이 A 컴포넌트에서 실행되고, 1분이 지나기전에 B 컴포넌트에 선언한 2번이 실행 될 경우 1번에 선언한 키값이 같기 때문에 1분이 지나지 않았다면 실제 fetching 없이 캐싱된 데이터를 가져온다 키가 같더라도 useQuery로 선언했기 때문에 fetch되고 1번에 선언한 staleTime은 2번으로 덮어써져서 추후 무시된다 1번이 A 컴포넌트에서 실행되고, 1분이 지난 후 B 컴포넌트에 선언한 2번이 실행 될 경우 1분이 지났기 때문에 다시 2번에서 fetching이 일어나고 1번에 선언한 staleTime은 유지된다 1분이 지났기 때문에 다시 fetching이 일어나고 2번으로 덮어써져서 추후 staleTime은 2번에 정의된 대로 없어진다(기본값 0으로 세팅된다) getQueryData 정확하게 사용 하는 방법 // 1번 - A 컴포넌트 useQuery({ queryKey: ['user'], queryFn: () => getUser(user), staleTime: 6000 }) // 2번 - B 컴포넌트 const data = queryClient.getQueryData(['user']) 위 처럼 선언했을 경우 A 컴포넌트 -> B 컴포넌트가 순차 실행되면 getQueryData를 잘 가져 오겠지만 만약 B 컴포넌트가 먼저 실행될 경우 어떻게 해야 할까요? 있는지 검사하고 없으면 1번처럼 다시 선언해야 할까요? 순차 보장이 안된다면 B컴포넌트도 동일하게 useQuery로 staleTime 동일하게 작성해야 할까요?

  • react-query
리온 댓글 2 좋아요 0 조회수 391

인기 태그

인프런 TOP Writers

주간 인기글