묻고 답해요
161만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결한 입 크기로 잘라먹는 실전 프로젝트 - SNS 편
next.js가 아닌 react.js로 강의를 한이유가 궁금합니다.
next.js가 더 좋은거같은데 react.js로 하는이유가 있을까요?next.js요즘 안쓰는사람많던데 이유가 궁금합니다.
-
미해결아바타 커뮤니티앱 만들기 (React Native Expo)
클라이언트 사이드에서 세션 관련 질문
서버쪽 코드의 .env 파일을 보면 JWT이 기본적으로 20분으로 설정되어 있는 것을 보았습니다. 예를 들어 JWT이 만료가 되고 이어서 진행을 하게 된다면, AuthRoute에 해당되는 경로들을 클라이언트에서는 여전히 접근이 가능하지만 서버에서 400번대를 응답합니다. 일반적으로 앱을 사용했던 경험을 생각하면 앱의 세션은 웹에 비해서 매우 길거나 백엔드에 대한 지식은 충분하지 않아 모르겠지만, 백엔드에서 새로 접속시 연장을 하는 등의 방법이 생각 나는데요 이런 경우에 클라이언트에서는 어떻게 처리를 해야하는지 아니면 실무적으로는 어떻게 처리하는 지 궁금합니다. 혹시라도 추가로 검색해서 공부할 수 있는 키워드가 있다면 알려주실 수 있을까요?
-
미해결한 입 크기로 잘라먹는 실전 프로젝트 - SNS 편
컴포넌트 네이밍 컨벤션 관련 질문 드립니다.
안녕하세요! 강의 잘 보고 있습니다.정환님이 제작하신 강의는 모두 수강하고 있는데요,리액트나 넥스트 강의에서 보면 컴포넌트 파일명도 케밥 케이스로 작성하시던데, 일반적으로 컴포넌트는 파스칼 케이스로 작성하는 경우가 많아서 혹시 특별한 이유가 있는지 궁금합니다!
-
미해결한 입 크기로 잘라먹는 실전 프로젝트 - SNS 편
Zustand의 get/set 메서드 관련 질문 드립니다.
안녕하세요! 강의 잘 듣고 있습니다.(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 객체의 참조를 이미 가지고 있어서 가능한 건가요?
-
해결됨한 입 크기로 잘라먹는 실전 프로젝트 - SNS 편
.prettierrc 자동완성
.prettierrc 파일에서 플러그인 설정 관련 코드를 작성하실 때 자동완성이 되시는데 혹시 어떤 설정을 해야하나요??
-
미해결아바타 커뮤니티앱 만들기 (React Native Expo)
Android 에뮬레이터 환경설정 및 실행 (for Mac) 에러 문의
강사님, 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 & NestJS)
애뮬레이터 실행 방법
개발 환경windownode 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 Expo)
[5-13] useLikePost 쿼리 구현 중 Tanstack Query 관련 질문
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 Expo)
Expo 54 버전 ios에서 headerLeft
ios 26부터 headerLeft 주위에 그림자가 생기고 클릭시 안에 내용이 커지는 효과가 생기는데 없앨 수 있는 방법이 있을까요? 열심히 검색해봐도 쉽지 않네요 ㅎㅎ,,
-
미해결[풀스택 완성] Supabase로 웹사이트 3개 클론하기 (Next.js 14)
supabase 오픈 소스 사용에 대해서
supabase는 공식 사이트에서 요금을 받고 있지만 오픈 소스로 로컬에 설치할 수 있잖아요.그러면 기존의 스토리지 트래픽 비용이,리눅스 호스팅 업체의 트래픽 비용으로 대체되나요?
-
미해결아바타 커뮤니티앱 만들기 (React Native Expo)
어플 개발 후 배포 시에 주의할 사항이 있을까요?
안녕하세요! 이제 절반 이상 수강중인 열혈 수강생입니다 !! 다름이 아니고, 올해, 어플 배포가 목표인데요 아바타 이미지는 저작권이 있기에 모두 제거하고 자체 제작으로 이미지 파일을 구성하여 다시 추가하려 합니다. 인강을 다 듣고 나서 제 아이디어를 첨가하고 아바타 이미지만 바꿔 출시해도 되는 부분일까요?
-
미해결[풀스택 완성] Supabase로 웹사이트 3개 클론하기 (Next.js 14)
next와 react query 버전 업데이트 관련 질문
next와 react query 버전이 업데이트 되면서서버 액션에 폼데이터를 전달하는 것이 불가능해진것 같은데 어떤식으로 수정하면 좋을까요?
-
미해결[리뉴얼] 맛집 지도앱 만들기 (React Native & NestJS)
ios 실기기 연결
ios 실기기를 연결해도 맥 환경이 아니면 테스트가 불가능한가요?!.. ❗질문 작성시 꼭 참고해주세요에러 메세지에서 단서를 찾을 수 있는 경우가 많습니다. 에러 메세지를 읽고 한번 검색해보시는것을 추천드립니다.질문글을 작성하실때는, 현재 문제(또는 에러)와 코드나 github을 첨부해주세요.개발중인 OS, ReactNative, Node 버전 등의 개발환경을 알려주셔야합니다.에러메세지는 일부분이 아닌 전체 상황을 올려주세요. 일부만 보여주시면 답변이 어렵습니다. (에러 일부만 자르거나 일부만 복사하지말아주세요)
-
해결됨React 완벽 마스터: 기초 개념부터 린캔버스 프로젝트까지
AI와 CSS 라이브러리의 궁합
안녕하세요.CSS 라이브러리에 대한 비교 설명까지 너무 감사합니다.앞으로 AI Agent를 활용한 코딩을 고려하고 있습니다.이런 경우 더욱 적합한 CSS 라이브러리를 추천해 주실 수 있을까요?예를 들어 저는 현재 Cursor AI를 이용하고 있습니다. 좋은 강의 감사합니다.
-
미해결[리뉴얼] 맛집 지도앱 만들기 (React Native & NestJS)
npm run ios에러
npm run ios> matzip@0.0.1 ios> react-native run-iosinfo A dev server is already running for this project on port 8081.info Found Xcode workspace "matzip.xcworkspace"info Found booted 재돌이의 iPhoneinfo Building (using "xcodebuild -workspace matzip.xcworkspace -configuration Debug -scheme matzip -destination id=00008110-00141C6C2E06401E")info 💡 Tip: Make sure that you have set up your development environment correctly, by running npx react-native doctor. To read more about doctor command visit: https://github.com/react-native-community/cli/blob/main/packages/cli-doctor/README.md#doctorerror Signing for "matzip" requires a development team. Select a development team in the Signing & Capabilities editor. (in target 'matzip' from project 'matzip')error Failed to build ios project. "xcodebuild" exited with error code '65'. To debug build logs further, consider building your app with Xcode.app, by opening 'matzip.xcworkspace'.yoojaeseok@yujaeseog-ui-MacBookAir matzip %
-
미해결아바타 커뮤니티앱 만들기 (React Native Expo)
코드 수정 시 ios 시뮬레이터에서 자동반영이 안 되는데 왜그럴까요?
❗질문 작성시 꼭 참고해주세요에러 메세지에서 단서를 찾을 수 있는 경우가 많습니다. 에러 메세지를 읽고 한번 검색해보시는것을 추천드립니다.질문글을 작성하실때는, 현재 문제(또는 에러)와 코드나 github을 첨부해주세요.개발중인 OS, ReactNative, Node 버전 등의 개발환경을 알려주셔야합니다.에러메세지는 일부분이 아닌 전체 상황을 올려주세요. 일부만 보여주시면 답변이 어렵습니다.에러 잘라서 올리시면 안됩니다!(에러 일부만 자르거나 일부만 복사하지말아주세요) 코드 수정 시안드로이드 시뮬레이터는 자동 반영이 되는데,ios 시뮬레이터는 자동으로 반영이 안 됩니다..그리고 r 버튼 눌러서 reload app 하려하면No apps connected. Sending "reload" to all React Native apps failed. Make sure your app is running in the simulator or on a phone connected via USB.이렇게 나오네요.. 연결은 된 것 같은데 왜 그럴까요?
-
미해결아바타 커뮤니티앱 만들기 (React Native Expo)
텍스트가 다 상단위로 올라가있는데 어떻게 해야할까요?
강의 내용을 따라하는데저같은경우emulator : Pixel_9_Proexpo version : 54.0.12입니다.
-
미해결아바타 커뮤니티앱 만들기 (React Native Expo)
Axios Network error...
❗질문 작성시 꼭 참고해주세요에러 메세지에서 단서를 찾을 수 있는 경우가 많습니다. 에러 메세지를 읽고 한번 검색해보시는것을 추천드립니다.질문글을 작성하실때는, 현재 문제(또는 에러)와 코드나 github을 첨부해주세요.개발중인 OS, ReactNative, Node 버전 등의 개발환경을 알려주셔야합니다.에러메세지는 일부분이 아닌 전체 상황을 올려주세요. 일부만 보여주시면 답변이 어렵습니다.에러 잘라서 올리시면 안됩니다!(에러 일부만 자르거나 일부만 복사하지말아주세요) 윈도우 컴에서 코드 실행시키고 아이폰에서 expo app으로 실습하고 있는데 db에도 들어가지 않습니다. 뭐가 문제인지 모르겠어요
-
해결됨[리뉴얼] 맛집 지도앱 만들기 (React Native & NestJS)
10월 삭제 예정인 강의는 이유를 알 수 있을까요?
❗질문 작성시 꼭 참고해주세요에러 메세지에서 단서를 찾을 수 있는 경우가 많습니다. 에러 메세지를 읽고 한번 검색해보시는것을 추천드립니다.질문글을 작성하실때는, 현재 문제(또는 에러)와 코드나 github을 첨부해주세요.개발중인 OS, ReactNative, Node 버전 등의 개발환경을 알려주셔야합니다.에러메세지는 일부분이 아닌 전체 상황을 올려주세요. 일부만 보여주시면 답변이 어렵습니다. (에러 일부만 자르거나 일부만 복사하지말아주세요) 10월 삭제 예정인 강의는 이유를 알 수 있을까요?
-
해결됨Next + React Query로 SNS 서비스 만들기
팔로우 추천 목록이 빈 배열로 들어옵니다.
안녕하세요. 팔로우 추천 API는 팔로워 수가 많은 순으로 최대 3명을 가져오도록 되어 있는 것으로 알고 있습니다.현재 발생하는 현상으로는 회원가입한 유저가 없는 경우에 기존 유저에게 추천 목록이 빈 배열로 나타납니다.그런데 회원가입 후 로그인하면 추천 목록에 로그인한 본인 아이디가 뜨고, 로그아웃 후 기존 유저 A로 로그인하면 이전에 회원가입한 유저 아이디가 추천 목록에 나타납니다.기존 유저 A가 그 회원가입 한 유저를 팔로우한 상태에서, 다른 기존 유저 B로 로그인하면 A가 팔로우했던 아이디가 추천 목록에서 사라져 있습니다.팔로우나 언팔로우 기능을 사용할 때 데이터는 정상적으로 들어오는 것으로 확인되고, 팔로워가 있는 아이디가 추천 목록에 나타나야 하는데 빈 배열로 표시됩니다.어느 부분을 점검해야 문제를 정확히 파악할 수 있을지 감이 잡히지 않아 질문 남겨봅니다..!import { MouseEventHandler } from "react"; import { User } from "@/model/User"; import { useMutation, useQueryClient } from "@tanstack/react-query"; import { useSession } from "next-auth/react"; type Props = { user: User; }; export default function FollowRecommend({ user }: Props) { const queryClient = useQueryClient(); const { data: session } = useSession(); const followed = !!user.Followers?.find((v) => v.id === session?.user?.id); // 팔로우 const follow = useMutation({ // 호출 시마다 userId를 전달 mutationFn: (userId: string) => { return fetch( `${process.env.NEXT_PUBLIC_BASE_URL}/api/users/${userId}/follow`, { method: "POST", credentials: "include", }, ); }, onMutate: (userId: string) => { const data: User[] | undefined = queryClient.getQueryData([ "users", "followRecommends", ]); if (data) { // 내가 팔로우 하는 대상 // User 배열 중에 팔로우 버튼을 누른 대상의 userId를 찾아서 그 유저의 Followers 수정 const index = data.findIndex((users) => users.id === userId); const shallow = [...data]; shallow[index] = { ...shallow[index], Followers: [{ id: session?.user?.id as string }], _count: { ...shallow[index]._count, Followers: shallow[index]._count.Followers + 1, }, }; queryClient.setQueryData(["users", "followRecommends"], shallow); } }, onError: (error, userId: string) => { console.error("팔로우/언팔로우 에러:", error); console.log("실패한 userId:", userId); const data: User[] | undefined = queryClient.getQueryData([ "users", "followRecommends", ]); if (data) { const index = data.findIndex((users) => users.id === userId); const shallow = [...data]; shallow[index] = { ...shallow[index], // 내 아이디가 대상 유저의 팔로워 목록에서 빠져야함 Followers: shallow[index].Followers.filter( (f) => f.id !== (session?.user?.id as string), ), _count: { ...shallow[index]._count, Followers: shallow[index]._count.Followers - 1, }, }; queryClient.setQueryData(["users", "followRecommends"], shallow); } }, }); // 팔로우 끊기 const unfollow = useMutation({ mutationFn: (userId: string) => { return fetch( `${process.env.NEXT_PUBLIC_BASE_URL}/api/users/${userId}/follow`, { method: "DELETE", credentials: "include", }, ); }, onMutate: (userId: string) => { const data: User[] | undefined = queryClient.getQueryData([ "users", "followRecommends", ]); if (data) { const index = data.findIndex((users) => users.id === userId); const shallow = [...data]; shallow[index] = { ...shallow[index], Followers: shallow[index].Followers.filter( (f) => f.id !== (session?.user?.id as string), ), _count: { ...shallow[index]._count, Followers: shallow[index]._count.Followers - 1, }, }; queryClient.setQueryData(["users", "followRecommends"], shallow); } }, onError: (error, userId: string) => { const data: User[] | undefined = queryClient.getQueryData([ "users", "followRecommends", ]); if (data) { const index = data.findIndex((users) => users.id === userId); const shallow = [...data]; shallow[index] = { ...shallow[index], Followers: [{ id: session?.user?.id as string }], _count: { ...shallow[index]._count, Followers: shallow[index]._count.Followers + 1, }, }; queryClient.setQueryData(["users", "followRecommends"], shallow); } }, }); const onFollow: MouseEventHandler<HTMLButtonElement> = (e) => { e.stopPropagation(); e.preventDefault(); if (followed) { console.log("언팔로우"); unfollow.mutate(user.id); } else { console.log("팔로우"); follow.mutate(user.id); } };