inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

묻고 답해요

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

forwardRef 지원 중단에 대한 대응?

해결됨

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

https://ko.react.dev/reference/react/forwardRef 공식문서를 보면 앞으로는 forwardRef 지원을 중단한다고 나와있는데 이에 대응하려면 코드 작성을 어떻게 하면 될까요?

  • react-native
  • typescript
  • nestjs
  • react-query
  • zustand
rsuubinn 댓글 2 좋아요 0 조회수 163

강의 듣는 방법

미해결

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

안녕하세요. 강의를 어떤 방식으로 듣는 것이 가장 효율적인지 여쭤보고 싶습니다. 처음 page.tsx를 만들 때는 하나하나 따라 만들며 진행했지만, 중간부터는 급하게 따라가기만 하다 보니 시간도 오래 걸리고, 오히려 비효율적이라는 생각이 들었습니다. 또한 수업 자료의 GitHub를 보면 각 폴더 설명에 "따라치기 위해 보면 안 된다"고 안내되어 있어서, 제가 잘못된 방식으로 수강하고 있는 건 아닌지 고민이 됩니다. 그리고 ch0~ch4 강의 이후의 코드를 올려주신 것은, 강의를 들으면서 이해가 안 되거나 따라가지 못한 부분이 있을 경우 해당 코드를 참고하거나 다운로드해서 사용해도 괜찮다는 의미일까요? 또한 강의 초반에 GitHub에서 해당 폴더로 들어가 복사하고, 설명을 들으며 진도를 나가는 방식이라고 말씀하신 것을 보았는데, 그렇다면 굳이 모든 코드를 따라 치기보다는 전체 코드를 먼저 불러온 뒤 실행해두고, 강의를 들으며 흐름과 설명 위주로 이해하는 방식으로 수강해도 괜찮을지 궁금합니다. 지금처럼 따라치며 수강하려다 보니 상대적으로 시간이 많이 소요되고, 비효율적일 수 있다는 생각이 들어 이렇게 문의드립니다. 이에 대해 보다 효율적인 수강 방법에 대해 조언해주시면 감사하겠습니다.

  • react
  • next.js
  • react-query
  • next-auth
  • msw
yrkim7275 댓글 2 좋아요 0 조회수 136

40강 로그인

미해결

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

안녕하세요! 40강 관련 질문입니다. 강의에서 로그인 하는 방식을 두 가지 알려주셨습니다. 서버액션 사용 서버액션 미사용 서버액션 미사용해서 구현할 때 tanstack query 의 mutation 을 사용하는 방식도 좋지 않을까 생각을 하는데요, 로그인 버튼에 loading 처리를 하거나 등 의 이유로요! 근데 제로초님은 useState 만 쓰셨는데, 간단하게 보여주기 위해서 그렇게 하신걸까요? 로그인/회원가입에 tanstack query 를 사용하는 것이 추천하는 방식은 아닌걸까요?? 제가 강의 들으면서 개인프로젝트에 적용하고 있어서, 어떤 방식이 좋은지 고민이 돼서 여쭙니다!

  • react
  • next.js
  • react-query
  • next-auth
  • msw
찹찹이 댓글 1 좋아요 0 조회수 74

47강 팔로잉 게시글

미해결

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

안녕하세요 제로초님! 47강의 팔로잉 게시글은 SSR 안필요하다고 하셨는데 그 이유가 뭔가요?! 제 생각은.. 팔로우 한 것은 유저마다 달라서? ssr 자체가 말이 안돼서(?) 그런거라고 추측해봅니다.

  • react
  • next.js
  • react-query
  • next-auth
  • msw
찹찹이 댓글 2 좋아요 0 조회수 66

S3, EC2, RDS까지 다 연결 후

해결됨

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

S3, EC2, RDS까지 다 연결한 후에 끝인가요? ec2에 따로 postgresql를 설치해야하는 건가요?

  • react-native
  • typescript
  • nestjs
  • react-query
  • zustand
댓글 2 좋아요 0 조회수 119

강의를 들을 수가 없네요

미해결

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

여기 질문 답변 게시판을 보면 환경설정 버전 문제 때문에 질문이 한가득인데, 강사님과 인프런 측에서 새로운 영상이라도 만들어야 하는 것 아닐까요? 아니면 버전에 따라 업데이트된 공식 문서라도 제공해야 하는 것 아닌가요? 프로젝트를 시작을 할 수가 없네요

  • react-native
  • typescript
  • nestjs
  • react-query
  • zustand
최연승 댓글 3 좋아요 1 조회수 225

Post 정보 불러올 때

미해결

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

안녕하세요 제로초님 질문있습니다. 강의에서 post 데이터 서버로부터 불러오고 화면에 렌더링 해주는 과정을 아래와 같이 이해하였습니다. prefetchQuery 로 서버로부터 데이터를 가져온다. 그렇게 가져온 데이터를 client component 에서 useQuery 로 가져온다 위와 같이 하는 이유가 궁금합니다. 사실 처음부터 클라이언트 컴포넌트로 useQuery 만 써도 문제없이 동작할텐데 useQuery 이전에 prefetchQuery 로 먼저 불러오는 이유는 ssr 을 위해서이고, 그말은 즉 seo 를 위해서 인가요? (useQuery 만 사용하면 csr 방식이여서..?) 감사합니다.

  • react
  • next.js
  • react-query
  • next-auth
  • msw
찹찹이 댓글 1 좋아요 0 조회수 63

루비버전 에러

미해결

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

% npx react-native@0.72.6 init MatzipApp --version 0.72.6 ###### ###### ### #### #### ### ## ### ### ## ## #### ## ## #### ## ## ## ## ## ## ### ### ## ## ######################## ## ###### ### ### ###### ### ## ## ## ## ### ### ## ### #### ### ## ### ## #### ######## #### ## ## ### ########## ### ## ## #### ######## #### ## ### ## ### #### ### ## ### ### ## ## ## ## ### ###### ### ### ###### ## ######################## ## ## ### ### ## ## ## ## ## ## #### ## ## #### ## ## ### ### ## ### #### #### ### ###### ###### Welcome to React Native! Learn once, write anywhere ✔ Downloading template ✔ Copying template ✔ Processing template ✔ Installing Ruby Gems ℹ Installing Ruby Gems ⠧ Installing CocoaPods(node:89384) [DEP0053] DeprecationWarning: The util.isObject API is deprecated. Please use arg !== null && typeof arg === "object" instead. (Use node --trace-deprecation ... to show where the warning was created) (node:89384) [DEP0049] DeprecationWarning: The util.isFunction API is deprecated. Please use typeof arg === "function" instead. ✖ Installing CocoaPods error ✖ Installing CocoaPods error An error occured while trying to install CocoaPods, which is required by this template. Please try again manually: sudo gem install cocoapods. CocoaPods documentation: https://cocoapods.org/ . info Run CLI with --verbose flag for more details. % ruby -v ruby 2.7.6p219 (2022-04-12 revision c9c2245c0a) [arm64-darwin24] % 강의대로 따라해서 루비버전 ruby 2.7.6 으로 바뀌면 될 줄 알았는데 이렇게 나오네요 맥북프로 m4 셀은 zsh 쓰고 있습니다 이거 어떻게 하죠 뭐가 문제인지 알려주세요

  • react-native
  • typescript
  • nestjs
  • react-query
  • zustand
최연승 댓글 1 좋아요 0 조회수 99

버전관련

미해결

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

맥북쓰는데 웹사이트 가보니까 명령어가 이렇게 뜨는데 npx @react-native-community/cli@latest init AwesomeProject 강의랑은 완전 커맨드가 다른데 어떤 커맨드로 써야되나요 빨리 알려주세요

  • react-native
  • typescript
  • nestjs
  • react-query
  • zustand
최연승 댓글 1 좋아요 0 조회수 88

expo, cli 선택 중 고민이있습니다..

해결됨

아바타 커뮤니티앱 만들기 (React Native Expo)

안녕하세요, 강사님. 좋은 강의 감사히 듣고 있습니다! 현재 실제 앱 출시를 목표로 개발을 시작하려고 하는데, Expo와 CLI 중 어떤 방식으로 진행할지 고민 중입니다. 공식 문서에서도 Expo를 권장하고 있고, Prebuild 기능 덕분에 대부분의 네이티브 라이브러리도 사용할 수 있고, 성능 최적화도 많이 이루어진 것으로 알고 있습니다. CLI와 Expo 사이의 런타임 성능이나 최종 번들 용량 차이에 대한 정확한 비교 자료가 부족해 선택이 쉽지 않은 상황입니다. 강사님께서 CLI와 Expo를 모두 사용해보셨을 때, 두 방식 간에 실제 체감되는 성능이나 앱 용량 차이가 유의미했는지 궁금합니다. 만약 차이가 크다면 CLI를 선택하는 쪽이 맞을 것 같기도 한데, 강사님의 의견이 듣고 싶습니다. 감사합니다!

  • javascript
  • react
  • react-native
  • typescript
  • react-query
freshour 댓글 2 좋아요 1 조회수 153

안녕하세요 카카오 이미지 uri 부분이 잘못된 것이 아닌가 싶습니다?

미해결

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

카카오 이미지 uri는 카카오쪽 서버 도메인까지 모두 포함하고 있는데, 로컬호스트 도메인까지 앞에 붙여주는 것 같아서 그 부분이 정정되어야 할 것 같습니다?

  • react-native
  • typescript
  • nestjs
  • react-query
  • zustand
김효건 댓글 1 좋아요 0 조회수 57

무한스크롤 기능, 검색기능 대소문자

미해결

[풀스택 완성] Supabase로 웹사이트 3개 클론하기 (Next.js 14)

강의 잘 보고 있습니다. 무한 스크롤 기능 구현 해보았는데요 영화가 60개까지 나오고 진행이 되지 않다가 개발자 도구를 켜면 더 스크롤이 되는데 그것도 120번 영화에서 끊깁니다. 머가 문제일까요 ...ㅠ 검색기능에서 title 첫글자 대소문자 상관없이 하려면 어디를 수정해야 하나요?

  • firebase
  • next.js
  • tailwindcss
  • react-query
  • supabase
코딩딩딩 댓글 1 좋아요 0 조회수 135

token 관련 질문

해결됨

아바타 커뮤니티앱 만들기 (React Native Expo)

로그인 과정에서 refresh token은 강의 편의상 생략한 건가요?! 따로 사용하지 않은 이유가 있는지 궁금합니다.

  • javascript
  • react
  • react-native
  • typescript
  • react-query
노력왕 댓글 2 좋아요 0 조회수 104

데이터 캐싱 부분에 대해 질문있습니다.

미해결

React 완벽 마스터: 기초 개념부터 린캔버스 프로젝트까지

안녕하세요 현재 고급- 데이터캐싱 부분의 강의를 보고 있는데 Fresh 상태에서는 데이터를 가져온 후 저장되어 있어 이 저장된 데이터를 사용하다 Stale상태가 되면 자동으로 다시 데이터가 요청되어 가져온다 라고 이해하고 있는데 맞는걸까요?

  • react
  • React-Context
  • react-router
  • tailwindcss
  • react-query
부드러운 족제비 댓글 2 좋아요 0 조회수 93

저장 버튼이 생기지 않습니다.

해결됨

아바타 커뮤니티앱 만들기 (React Native Expo)

저장 버튼을 동일하게 작성했는데 화면상에 그려지지 않더라구요. 공식문서도 확인해보고 찾아보는데, isFocused나 useLayoutEffect등을 통해 실험해봐도 저장 버튼이 보이지 않습니다. 무엇을 잘못 작성했나 싶어 자료를 다운로드 받아 post 의 _layout.tsx 와 write.tsx도 복사, 붙여넣기 하여 확인했는데도 저장버튼이 보이지 않았습니다. 그런데, post의 _layout에서 headerRight을 작성하니 보입니다. setOptions가 동작하지 않는 것 같이 보이는데, 원인을 잘 모르겠습니다. 어떻게 해결하면 될까요? import CustomButton from "@/components/CustomButton"; import DescriptionInput from "@/components/DescriptionInput"; import TitleInput from "@/components/TitleInput"; import useCreatePost from "@/hooks/queries/useCreatePost"; import { ImageUri } from "@/types"; import { useNavigation } from "expo-router"; import { useEffect } from "react"; import { FormProvider, useForm } from "react-hook-form"; import { StyleSheet } from "react-native"; import { KeyboardAwareScrollView } from "react-native-keyboard-aware-scroll-view"; type FormValues = { title: string; description: string; imageUris: ImageUri[]; }; export default function PostWriteScreen() { const navigation = useNavigation(); const createPost = useCreatePost(); const postForm = useForm<FormValues>({ defaultValues: { title: "", description: "", imageUris: [], }, }); const onSubmit = (formValues: FormValues) => { createPost.mutate(formValues); }; useEffect(() => { navigation.setOptions({ headerRight: () => ( <CustomButton label="저장" size="medium" variant="standard" onPress={postForm.handleSubmit(onSubmit)} /> ), }); }, []); return ( <FormProvider {...postForm}> <KeyboardAwareScrollView contentContainerStyle={styles.container}> <TitleInput /> <DescriptionInput /> </KeyboardAwareScrollView> </FormProvider> ); } const styles = StyleSheet.create({ container: { margin: 16, gap: 16, }, }); import { colors } from "@/constants"; import { Feather } from "@expo/vector-icons"; import { Link, Stack } from "expo-router"; export default function PostLayout() { return ( <Stack screenOptions={{ headerTintColor: colors.BLACK, contentStyle: { backgroundColor: colors.WHITE, }, }} > <Stack.Screen name="write" options={{ title: "글쓰기", headerShown: true, headerLeft: () => ( <Link href={"/"} replace> <Feather name="arrow-left" size={28} color={"black"} /> </Link> ), }} /> </Stack> ); } +추가로 확인한 부분. app의 _layout.tsx에서 <Stack.Screen name="post" options={{ headerShown: false }} /> 이 친구를 주석하면 헤더가 두 개 나오게 되는데, 숨겨놨던 루트에 저장 버튼이 떠 있더라구요. 이걸 어떻게 수정하면 되는건지.. 어렵네요

  • javascript
  • react
  • react-native
  • typescript
  • react-query
프롱 댓글 2 좋아요 0 조회수 219

RootNavigator 리렌더링 시점

미해결

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

(너무 초보적인 질문이라면 죄송합니다 ㅠ.. 리액트 초보여서,,) 제가 알기로는 리액트에서는 컴포넌트 리렌더링 시점이 컴포넌트 함수를 직접 재호출하거나, 내부 state가 변경됐을 때로 알고 있는데요, 그런 개념을 가지고 코드를 살펴보면 RootNavigator에서 로그인 여부에 따라 분기처리를 하고 있는데, 여기서 내부 state를 가지고 있는 것도 아닌데, useAuth의 로그인이나 로그아웃 메서드 호출만으로 리렌더링이 되어서 스크린이 변경되고 있는데 어떻게 이 동작이 가능한건지가 궁금합니다. 리렌더링을 발생시키는 조건이 궁금합니다.

  • react-native
  • typescript
  • nestjs
  • react-query
  • zustand
김효건 댓글 1 좋아요 0 조회수 109

useGetRefreshToken 에서 성공/실패 시 useEffect로 감싸서 동작

미해결

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

안녕하세요! useGetRefreshToken 에서 응답 성공/실패 시에 각각 useEffect로 감싸서 후속처리를 하게 작성해주셨는데요, 해당 로직들은 항상 해당 함수가 호출되고 나서 응답이 온 후에 순차적으로 실행되어야 하는 로직으로 생각이 들어서 비동기로 동작하는 useEffect를 굳이 사용할 필요가 없다고 생각이 드는데요, useEffect로 사용하신 특별한 이유가 있으실까요!?

  • react-native
  • typescript
  • nestjs
  • react-query
  • zustand
김효건 댓글 1 좋아요 0 조회수 90

버전으로 인한 오류 이슈

미해결

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

저를 포함한 많은 수강생분들께서 설치시 Gem 과 rn 버전등 강의와 latest 버전의 충돌로 인해 많은 어려움을 겪고 계신 것 같아 2025년 5월 기준 제가 해결한 방법을 공유드리려고 올려둡니다! React Native 공식 문서는 최신이 아닌 0.73 버전으로 확인합니다 => 0.73 버전 안내 링크 프로젝트 생성시에는 @latest 가 아닌 0.73 버전으로 설치를 합니다 npx react-native@0.73 init 사용하실프로젝트명 --version 0.73 설치되어 있는데도 CLT가 기본 설정이면, Xcode 경로로 전환해줘야 합니다 터미널에서 xcode-select -p 를 입력해서 경로를 확인합니다. 만일 결과가 /Library/Developer/CommandLineTools 이렇게 되어있다면 오류가 나는 원인 중 하나입니다! 이 경우 아래 3-b 순서를 통해 변경해줘야 합니다 터미널에서 sudo xcode-select -s /Applications/Xcode.app/Contents/Developer 를 입력해 경로를 변경해줍니다 터미널에서 xcode-select -p 를 입력해 /Applications/Xcode.app/Contents/Developer 와 같이 경로가 변경되었는지 확인해줍니다 여기까지 한 후에도 npm start 가 오류가 발생하면 cd ios rm -rf Pods Podfile.lock pod install cd .. 이를 통해서 cocoapod 관련 찌꺼기를 없애고, bundle install 를 해서 필요한 gem 들을 다시 .install 해줍니다. 이렇게 한 후 npm start 를 하여 오류를 수정했었습니다! IOS 는 또 어떤 요류로 잘 안 될 수 있는지 모르니 .. 그냥 최신 버전으로 하고 강의 내용을 최신 버전에 맞추는게 현명할지도..

  • react-native
  • typescript
  • nestjs
  • react-query
  • zustand
Junho 댓글 2 좋아요 1 조회수 322

fetchQuery와, invalidateQueries 사용 질문있습니다.

미해결

아바타 커뮤니티앱 만들기 (React Native Expo)

선생님께서는 로그인직후 내 정보불러오기위해서 fetchQuery를쓰셨는데 invalidateQueries 를 써도 되는거아닌가? 무슨차이때문에 그런걸까?를 생각해봤는데 fetchQuery는 즉시 가져오는거기때문에 이후 /이나 뭐 어디다른페이지를가도 로딩이안뜨고 바로 최신상태를 유지하는 반면 invalidateQueries 를 사용하면 기존 쿼리를 scale로 처리해줘서 캐싱무효화를해주고 그 해당 query key를 사용중인 페이지에 들어가면 그때 서버로부터 리페치를 한다? 그렇기때문에 로딩이뜬다. 그래서 여기선 fetchQuery를 사용하신거다로 이해했는데 맞을까요?

  • javascript
  • react
  • react-native
  • typescript
  • react-query
반가우면반갑다고해 댓글 0 좋아요 0 조회수 138

린캔버스 수정1 강의 매개변수에 대해 질문있습니다.

미해결

React 완벽 마스터: 기초 개념부터 린캔버스 프로젝트까지

안녕하세요 강의 잘 보고 있습니다. 린캔버스 수정1 강의 부분을 보고 있는데 조금씩 점점 어려워 질수록 헷갈리는 부분이 많은데 handleNotesChange 함수의 section, updatedNotes 의 매개변수가 작성이 되었는데 아직 초보자인 제가 이처럼 함수를 작성할 때 매개변수가 필요한지 필요하지 않는지에 대해 잘 모르겠더라구요. 정말 간단한거 예를 들어 삭제기능을 할땐 삭제할 id가 필요하니 id를 매개변수로 받아오고 이러한 부분은 이해를 하지만 지금처럼 조금 복잡해질때 어떤 매개변수가 필요하고 왜 필요한지에 대해 아직 어려운데 이럴때 어떤식으로 공부를 하면 좋을까요?

  • react
  • React-Context
  • react-router
  • tailwindcss
  • react-query
부드러운 족제비 댓글 1 좋아요 0 조회수 102

인기 태그

인프런 TOP Writers

주간 인기글