inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

묻고 답해요

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

Zustand 사용 중 컴포넌트 리렌더링 관련 질문

해결됨

한 입 크기로 잘라먹는 React.js 실전 프로젝트 - SNS 편

관련 챕터: Zustand 기본 사용법 2 질문 관련 부분: 4:34 ~ 6:20 질문 내용: 역할에 따라 컴포넌트를 분리하는 과정에서, count 값 변경 시 Controller 컴포넌트까지 리렌더링되는 이유에 대해 설명해주셨는데요. 제가 맞게 이해했는지 헷갈려서 질문 드립니다. count 값이 바뀔 때마다 Viewer , Controller 컴포넌트가 동시에 리렌더링된다. 버튼 태그를 포함하는 Controller 컴포넌트까지 리렌더링되는 이유는 1. Zustand는 store 안의 state 가 바뀌면 store 를 가져다 쓴 모든 컴포넌트가 다시 그 state 값을 반영하도록 리렌더링된다. 2. Controller 는 구조분해 할당으로 increase , decrease 만 쓴다고 해도, 훅이 반환한 객체 안에 count 도 포함돼 있으므로 count 가 바뀌면 Controller 도 리렌더링된다. 제가 맞게 이해한 걸까요?

  • react
  • typescript
  • react-query
  • supabase
  • zustand
춘식이 댓글 1 좋아요 0 조회수 134

tailwind css / sass 사용율? 에 대해서 궁금합니다

미해결

한 입 크기로 잘라먹는 React.js 실전 프로젝트 - SNS 편

저는 항상 scss를 많이 사용해서 쭉 사용하고있었는데 tailwind 가 무섭게 치고 올라오는거 같더라구요 ㅎㅎ 둘다 공부를 하면서 사용해보고있는데 혹시 실무나 이런쪽에서는 어느걸 더 많이 활용하는지도 궁금합니다 ㅎㅎ

  • react
  • typescript
  • react-query
  • supabase
  • zustand
므민 댓글 2 좋아요 0 조회수 192

4.6 useMutation 관련 질문 !

미해결

한 입 크기로 잘라먹는 React.js 실전 프로젝트 - SNS 편

useMutation에 대해 설명하실 때, createTodo라는 비동기 함수의 상태를 관리해야 하기 때문에 별도의 state를 만들어야 한다. 하지만, useMutation을 사용하면 이러한 상태까지도 관리해준다. 라고 설명해주셨는데 여기서 말씀하신 "비동기 함수의 상태 관리" 라는 것이 isLoading이나 isPending 이런 것들을 의미하는 걸까요??

  • react
  • typescript
  • react-query
창한 댓글 2 좋아요 0 조회수 128

강의 수강 순서 관련

미해결

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

강의를 11강 이후의 백엔드 구현 먼저 듣고 앞부분으로 돌아와도 문제가 있을까요? 수업이 구성된 방식이 궁금합니다.

  • react-native
  • typescript
  • nestjs
  • react-query
  • zustand
yeong 댓글 1 좋아요 0 조회수 114

supabase를 사용하는 기업들이 많이 있나요?

미해결

한 입 크기로 잘라먹는 React.js 실전 프로젝트 - SNS 편

supabase를 사용하는 기업들이 많이 있나요? 보통은 스프링부트 또는 노드, 네스트를 사용할거같은데 supabase를 사용하는 사례들이 많은지, 중소및 스타트업위주로 사용하는지 궁금합니다.

  • react
  • typescript
  • react-query
  • supabase
  • zustand
duddnd 댓글 2 좋아요 0 조회수 340

6.8 zustand 강의에서 devtools 미들웨어에 대한 질문입니다.

미해결

한 입 크기로 잘라먹는 React.js 실전 프로젝트 - SNS 편

zustand 강의에서 devtools 미들웨어를 사용하여 브라우저 도구 Redux 툴에서 Action 과 State 를 살펴보는데 강의 영상에서는 Action의 이름이 setSession 으로 나오는 데... 제 Redux 툴에서는 액션 명이 anonymous로 표시됩니다. 어떻게 액션명이 표시되는 지 궁금합니다. set 함수에서 액션명 표시하려면 이름을 주어 표시했는데 . 뭔가 다른가요 ? //... set({session, isLoaded: true}, undefined, 'setSession'); //...

  • react
  • typescript
  • react-query
  • supabase
  • zustand
Codingbear 댓글 2 좋아요 1 조회수 192

21강. 강의와 다른부분에서 todo 타입 에러가 납니다.

미해결

한 입 크기로 잘라먹는 React.js 실전 프로젝트 - SNS 편

import type { Todo } from "@/types"; import { create } from "zustand"; import { combine } from "zustand/middleware"; import { immer } from "zustand/middleware/immer"; const initialState: { todos: Todo[]; } = { todos: [], }; const useTodosStore = create( immer( combine(initialState, (set) => ({ actions: { createTodo: (content: string) => { set((state) => { state.todos.push({ id: new Date().getTime(), content }); }); }, deleteTodo: (targetId: number) => { set((state) => { state.todos = state.todos.filter((todo) => todo.id !== targetId); }); }, }, })), ), ); export interface Todo { id: number; content: string; } 오히려 강의에서 7분에 'never'에러나던 state.todos.push({ id: new Date().getTime(), content}); 이 코드 작성 시에는 에러가 나지않고, state.todos.filter((todo) => todo.id !== targetId); 여기서 todo 부분에서 에러가 납니다. 'todo' 매개 변수에는 암시적으로 'any' 형식이 포함됩니다. state.todos에 마우스오버해서 확인해보니 any 타입으로 뜹니다. 제가 중간에 설정하는 부분이나 놓친부분이 있는걸까요 ㅠㅠ?

  • react
  • typescript
  • react-query
  • supabase
  • zustand
정중한 사슴 댓글 3 좋아요 0 조회수 117

(6.1) 인증과 인가 아해하기

미해결

한 입 크기로 잘라먹는 React.js 실전 프로젝트 - SNS 편

질문은 아니고 오타가 있어서 제보 합니다. 이해하기 인데 아해하기로 되어 있네요 (6.1) 인증과 인가 아해하기

  • react
  • typescript
  • react-query
  • supabase
  • zustand
이주영 댓글 1 좋아요 1 조회수 125

next.js가 아닌 react.js로 강의를 한이유가 궁금합니다.

미해결

한 입 크기로 잘라먹는 React.js 실전 프로젝트 - SNS 편

next.js가 더 좋은거같은데 react.js로 하는이유가 있을까요? next.js요즘 안쓰는사람많던데 이유가 궁금합니다.

  • react
  • typescript
  • react-query
  • supabase
  • zustand
duddnd 댓글 3 좋아요 2 조회수 239

클라이언트 사이드에서 세션 관련 질문

미해결

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

서버쪽 코드의 .env 파일을 보면 JWT이 기본적으로 20분으로 설정되어 있는 것을 보았습니다. 예를 들어 JWT이 만료가 되고 이어서 진행을 하게 된다면, AuthRoute에 해당되는 경로들을 클라이언트에서는 여전히 접근이 가능하지만 서버에서 400번대를 응답합니다. 일반적으로 앱을 사용했던 경험을 생각하면 앱의 세션은 웹에 비해서 매우 길거나 백엔드에 대한 지식은 충분하지 않아 모르겠지만, 백엔드에서 새로 접속시 연장을 하는 등의 방법이 생각 나는데요 이런 경우에 클라이언트에서는 어떻게 처리를 해야하는지 아니면 실무적으로는 어떻게 처리하는 지 궁금합니다. 혹시라도 추가로 검색해서 공부할 수 있는 키워드가 있다면 알려주실 수 있을까요?

  • react-native
  • typescript
  • expo
  • react-hook-form
  • react-query
yeong 댓글 2 좋아요 0 조회수 122

컴포넌트 네이밍 컨벤션 관련 질문 드립니다.

미해결

한 입 크기로 잘라먹는 React.js 실전 프로젝트 - SNS 편

안녕하세요! 강의 잘 보고 있습니다. 정환님이 제작하신 강의는 모두 수강하고 있는데요, 리액트나 넥스트 강의에서 보면 컴포넌트 파일명도 케밥 케이스로 작성하시던데, 일반적으로 컴포넌트는 파스칼 케이스로 작성하는 경우가 많아서 혹시 특별한 이유가 있는지 궁금합니다!

  • react
  • typescript
  • react-query
  • supabase
  • zustand
popo 댓글 2 좋아요 0 조회수 131

Zustand의 get/set 메서드 관련 질문 드립니다.

미해결

한 입 크기로 잘라먹는 React.js 실전 프로젝트 - SNS 편

안녕하세요! 강의 잘 듣고 있습니다. (3.2) Zustand 기본 사용법 1 강의의 9분 21초경 에서 궁금한 점이 생겨 질문드립니다. 강의에서 get 메서드는 store(객체) 전체를 반환 한다고 설명하셨습니다. 그리고 set 메서드는 인자로 전달된 객체의 프로퍼티만을 갱신 한다고 하셨는데요. 그런데 아래 코드처럼 보면, set 내부에서는 따로 get() 을 호출하지 않아도 count 값을 바로 참조해 업데이트하고 있습니다. increase: () => { const count = get().count; // 여기서 store의 count 프로퍼티를 가져온다 set({ count: count + 1 }); // 그런데 여기서는 count를 직접 사용할 수 있다? } 제가 이해하기로는 store의 값을 변경하기 위해 프로퍼티를 참조할 때에도(여기서는 count: ) 먼저 get() 으로 현재 store의 참조를 얻은 뒤 수정해야 할 것 같은데, set({ count: count + 1 }) 처럼 직접 count를 갱신할 수 있는 이유 가 궁금합니다. 즉, set 은 내부적으로 get() 을 다시 호출해서 현재 store 상태를 알고 있는 건가요? 아니면 set 이 store 객체의 참조를 이미 가지고 있어서 가능한 건가요?

  • react
  • typescript
  • react-query
  • supabase
  • zustand
popo 댓글 2 좋아요 0 조회수 176

.prettierrc 자동완성

해결됨

한 입 크기로 잘라먹는 React.js 실전 프로젝트 - SNS 편

.prettierrc 파일에서 플러그인 설정 관련 코드를 작성하실 때 자동완성이 되시는데 혹시 어떤 설정을 해야하나요??

  • react
  • typescript
  • react-query
  • supabase
  • zustand
mandoo 댓글 1 좋아요 1 조회수 141

Android 에뮬레이터 환경설정 및 실행 (for Mac) 에러 문의

미해결

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

강사님, npx expo start를 입력후, a를 선택하면, 아래와 같이 에러 메시지가 나옵니다. 아래 이미지와 같이 pixel 9 pro가 정상적으로 설치되어 있는데, 뭐가 잘못된건지 모르겠어서 문의드립니다.ㅠ › Opening on Android... CommandError: No Android connected device found, and no emulators could be started automatically. Connect a device or create an emulator ( https://docs.expo.dev/workflow/android-studio-emulator ). Then follow the instructions here to enable USB debugging: https://developer.android.com/studio/run/device.html#developer-device-options . If you are using Genymotion go to Settings -> ADB, select "Use custom Android SDK tools", and point it at your Android SDK directory.

  • react-native
  • typescript
  • expo
  • react-hook-form
  • react-query
Ethan 댓글 1 좋아요 0 조회수 180

애뮬레이터 실행 방법

미해결

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

개발 환경 window node 18 기타 wifi 인터넷 환경 애뮬레이터를 띄워서 확인하고 싶은데요. npm start 안드로이드 스튜디오에서 안드로이드 애뮬레이터 실행 npm run andriod > matzip@0.0.1 android > react-native run-android info A dev server is already running for this project on port 8081. info Installing the app... > Task :app:installDebug Installing APK 'app-debug.apk' on 'Medium_Phone(AVD) - 16' for :app:debug Installed on 1 device. [Incubating] Problems report is available at: file:///C:/Users/hangy/Desktop/matzip/android/build/reports/problems/problems-report.html Deprecated Gradle features were used in this build, making it incompatible with Gradle 9.0. You can use '--warning-mode all' to show the individual deprecation warnings and determine if they come from your own scripts or plugins. For more on this, please refer to https://docs.gradle.org/8.13/userguide/command_line_interface.html#sec:command_line_warnings in the Gradle documentation. BUILD SUCCESSFUL in 30s 58 actionable tasks: 9 executed, 49 up-to-date info Connecting to the development server... info Starting the app on "emulator-5554"... Starting: Intent { act=android.intent.action.MAIN cat=[android.intent.category.LAUNCHER] cmp=com.matzip/.MainActivity } 애뮬레이터 반응 없이 아래 하면 표시함. 도움 부탁드립니다. 환경 설정이 되어야 진도를 나가는데. 애뮬레이터가 아무런 반응이 없네요. 좋은 강의 감사합니다.

  • react-native
  • typescript
  • nestjs
  • react-query
  • zustand
예컨데 댓글 2 좋아요 0 조회수 153

[5-13] useLikePost 쿼리 구현 중 Tanstack Query 관련 질문

미해결

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

optimistic-updates#updating-a-single-todo 문서를 보면 useMutation - onError의 모든 parameter err, newPost (variables), onMutationResult, context와 onSettle의 모든 parameter를 사용해서 구현하는데, client를 queryClient를 가져와서 쓰는 강의 중 예제와, 문서 내의 내용으로 구현한 아래의 주석처리된 구현은 어떤 차이가 있을까요? onError: (err, newPost, context) => { queryClient.setQueryData( [queryKeys.POST, queryKeys.GET_POST, context?.newPost?.id], context?.previousPost, ); }, // onError: (err, newPost, onMutationResult, context) => { // context.client.setQueryData( // [ // queryKeys.POST, // queryKeys.GET_POST, // onMutationResult?.previousPost?.id, // ], // onMutationResult?.previousPost, // ); // }, onSettled: (data, error, variables, context) => { queryClient.invalidateQueries({ queryKey: [queryKeys.POST, queryKeys.GET_POST, variables], }); queryClient.invalidateQueries({ queryKey: [queryKeys.POST, queryKeys.GET_POSTS], }); }, // onSettled: (data, error, variables, onMutationResult, context) => { // context.client.invalidateQueries({ // queryKey: [queryKeys.POST, queryKeys.GET_POST, variables], // }); // context.client.invalidateQueries({ // queryKey: [queryKeys.POST, queryKeys.GET_POSTS], // }); // }, a

  • react-native
  • typescript
  • expo
  • react-hook-form
  • react-query
yeong 댓글 1 좋아요 0 조회수 93

Expo 54 버전 ios에서 headerLeft

미해결

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

ios 26부터 headerLeft 주위에 그림자가 생기고 클릭시 안에 내용이 커지는 효과가 생기는데 없앨 수 있는 방법이 있을까요? 열심히 검색해봐도 쉽지 않네요 ㅎㅎ,,

  • react-native
  • typescript
  • expo
  • react-hook-form
  • react-query
wjsyuwls 댓글 2 좋아요 1 조회수 194

supabase 오픈 소스 사용에 대해서

미해결

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

supabase는 공식 사이트에서 요금을 받고 있지만 오픈 소스로 로컬에 설치할 수 있잖아요. 그러면 기존의 스토리지 트래픽 비용이, 리눅스 호스팅 업체의 트래픽 비용으로 대체되나요?

  • firebase
  • next.js
  • tailwindcss
  • react-query
  • supabase
유니온 댓글 0 좋아요 0 조회수 132

어플 개발 후 배포 시에 주의할 사항이 있을까요?

미해결

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

안녕하세요! 이제 절반 이상 수강중인 열혈 수강생입니다 !! 다름이 아니고, 올해, 어플 배포가 목표인데요 아바타 이미지는 저작권이 있기에 모두 제거하고 자체 제작으로 이미지 파일을 구성하여 다시 추가하려 합니다. 인강을 다 듣고 나서 제 아이디어를 첨가하고 아바타 이미지만 바꿔 출시해도 되는 부분일까요?

  • react-native
  • typescript
  • expo
  • react-hook-form
  • react-query
Kim Da Bin 댓글 1 좋아요 0 조회수 115

next와 react query 버전 업데이트 관련 질문

미해결

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

next와 react query 버전이 업데이트 되면서 서버 액션에 폼데이터를 전달하는 것이 불가능해진것 같은데 어떤식으로 수정하면 좋을까요?

  • firebase
  • next.js
  • tailwindcss
  • react-query
  • supabase
둘기 댓글 1 좋아요 0 조회수 101

인기 태그

인프런 TOP Writers

주간 인기글