constants.ts에 쿼리키값 관련한 부분을 상수로 빼고, import하여 사용하는 방법을 배웠습니다!여기서 질문이 export const QUERY_KEYS = { todo: { all: ["todo"], list: ["todo", "list"], detail: (id: string) => ["todo", "detail", id], }, };  상수명만 대문자로 쓰고 내부 객체는 소문자로 사용하는게 맞는건가요?? 어떤 것이 관례인지 궁금합니다

강의대로 따라가다가 shadcn을 설치 후 app.tsx에 다음과 같은 경고가 뜹니다.import "./App.css"; import { Button } from "@/components/ui/button"; function App() { <div> <Button>버튼!</Button> </div>; } export default App; 이대로만 따라서 쳤는데 button.tsx에서 [{"resource": "/Users/minsu/Documents/onbite-exam/src/components/ui/button.tsx","owner": "eslint4","code": "react-refresh/only-export-components","severity": 4,"message": "Fast refresh only works when a file only exports components. Use a new file to share constants or functions between components.","source": "eslint","startLineNumber": 62,"startColumn": 18,"endLineNumber": 62,"endColumn": 32,"modelVersionId": 2}]라고 에러가 뜹니다.추가로 index.css에서도 에러가 다음과 같이 뜹니다..신경 안써도 되는 에러일까요?소스코드는 구글드라이브로 공유드립니다.https://drive.google.com/file/d/1gjyp7Io1bA6Tb2hriqhQN8T-jInXo7kY/view?usp=drive_link

안녕하세요 선생님input checkbox 에 onClick 을 사용하면 react 에서는 경고도 날리기도 하는데 onChange 대신 onClick 을 사용하신 이유가 궁금합니다.

 https://github.com/kkhhjjoo/onebite-sns

안녕하세요~ 15분 29초 하고있는데 빨간줄이 가서 여쭤봅니다github주소는 https://github.com/kkhhjjoo/onebite-sns입니다

모달이 닫힐 때 입력 상태(content, images)를 초기화하기 위해 useEffect에서 isOpen을 의존성으로 두고 setContent, setImages를 호출했는데이 과정에서 "calling setState synchronously within an effect can trigger cascading renders" 경고가 발생했습니다.useEffect가 외부 시스템과의 동기화를 위한 용도이기 때문에 생기는 오류인지 궁금합니다! 또한 그렇다면 UI 상태 초기화 목적으로 useEffect에서 state를 변경하는 방식은 권장되지 않는 패턴인가요?그래서 현재는 onClose, onCancel 등 모달이 닫히는 이벤트 시점마다 직접 setContent(""), setImages([])를 호출하는 방식으로 처리하고 있습니다. 

마지막 부분인 9.5 프로필 인가부분까지 수업을 들으면서 코드를 작성했는데, ProfileDetailPage가 제대로 렌더링 되지 않아서 질문드립니다. 코드가 혹시 잘못되었을까해서 깃허브 보고 다시 확인했는데, 코드는 강의 내용이랑 맞는 것 같습니다. 뭐가 문제인지 잘모르겠어요

강의에 관한 질문은 아니긴한데 개인적으로 궁금해서 여쭤봅니다..!강의 설명 준비하시는 거 말고 이 정도 규모 프로젝트 만들 때 얼마나 걸리시나요??.. 사람마다 다르겠지만 대충 기간이 궁금해서요..! 불편하신 질문이었다면 죄송합니당..

안녕하세요복습하러 들어왔습니다.그나저나 코딩님.. 뭐하나 여쭤봐도..다른 어느 소스를 보니까.. component 1index.jscomponent2index.jscomponent3index.js.. 폴더마다..죄다 ...... index.js 가 있는데...짐코딩님께 여쭤 봐도 될련지요.. ?번거로우시겠지만.. 고견 , 첨언 부탁드립니다.(P.S: 또 ..AI가 답변할라나? .쩝) [ AI ]" 컴포넌트 폴더에 index.js를 두는 리팩토링 팁???? "리팩토링?... 엥? 저렇게 리팩토리 하라고?( 거 참..머 할라고 저렇게 한데??? .. ㅡㅡ;;) 코딩님..헬프용. ㅜㅜ;;;  

  node 버전 : v24.11.1[id.tsx] 파일입니다. 현재 상세 페이지를 가면 아래와 같이 댓글 버튼이 상단으로 올라오는 현상이 생겼습니다. 또한 답글 남기기를 눌러도 focus는 댓글 input으로 되지만, 화면처럼 스크롤이 내려가는 현상은 안나타납니다. npx expo start를 이용하여, 실기기로 테스트한겁니다!import AuthRoute from "@/components/AuthRoute"; import CommentItem from "@/components/CommentItem"; import FeedItem from "@/components/FeedItem"; import InputField from "@/components/InputField"; import { colors } from "@/constants"; import useCreateComment from "@/hooks/queries/useCreateComment"; import useGetPost from "@/hooks/queries/useGetPost"; import useKeyboard from "@/hooks/useKeyboard"; import { useLocalSearchParams } from "expo-router"; import { Fragment, useRef, useState } from "react"; import { Keyboard, KeyboardAvoidingView, Platform, Pressable, ScrollView, StyleSheet, Text, TextInput, View, } from "react-native"; import { SafeAreaView, useSafeAreaInsets, } from "react-native-safe-area-context"; export default function PostDetailScreen() { const { id } = useLocalSearchParams(); const { data: post, isPending, isError } = useGetPost(Number(id)); const createComment = useCreateComment(); const [content, setContent] = useState(""); const scrollRef = useRef<ScrollView | null>(null); const inputRef = useRef<TextInput | null>(null); const [parentCommentId, setParentCommentId] = useState<number | null>(null); const { isKeyboardVisible } = useKeyboard(); const insets = useSafeAreaInsets(); if (isPending || isError) { return <></>; } const handleReply = (commentId: number) => { setParentCommentId(commentId); inputRef.current?.focus(); }; const handleCancelReply = () => { setParentCommentId(null); Keyboard.dismiss(); }; const handleSubmitComment = () => { const commentData = { postId: post.id, content: content, }; if (parentCommentId) { createComment.mutate({ ...commentData, parentCommentId }); setContent(""); handleCancelReply(); return; } if (parentCommentId) { createComment.mutate({ ...commentData, parentCommentId }); setContent(""); handleCancelReply(); return; } createComment.mutate(commentData); setContent(""); setTimeout(() => { scrollRef.current?.scrollToEnd(); }, 500); }; return ( <AuthRoute> <SafeAreaView style={styles.container} edges={["right", "left", "bottom"]} > <KeyboardAvoidingView contentContainerStyle={styles.awareScrollViewContainer} behavior="height" keyboardVerticalOffset={ Platform.OS === "ios" || isKeyboardVisible ? 100 : insets.bottom } > <ScrollView ref={scrollRef} style={{ marginBottom: 75 }} contentContainerStyle={styles.scrollViewContainer} > <View style={{ marginTop: 12 }}> <FeedItem post={post} isDetail /> <Text style={styles.commentCount}> 댓글 {post.commentCount}개 </Text> </View> {post.comments?.map((comment) => ( <Fragment key={comment.id}> <CommentItem parentCommentId={parentCommentId} onReply={() => handleReply(comment.id)} onCancelReply={handleCancelReply} comment={comment} /> {comment.replies.map((reply) => ( <CommentItem key={reply.id} comment={reply} isReply /> ))} </Fragment> ))} </ScrollView> <View style={styles.commentInputContainer}> <InputField ref={inputRef} value={content} returnKeyType="send" onSubmitEditing={handleSubmitComment} onChangeText={(text) => setContent(text)} placeholder={ parentCommentId ? "답글 남기는중..." : "댓글을 남겨보세요." } rightChild={ <Pressable disabled={!content} style={styles.inputButtonContainer} onPress={handleSubmitComment} > <Text style={styles.inputButtonText}>등록</Text> </Pressable> } /> </View> </KeyboardAvoidingView> </SafeAreaView> </AuthRoute> ); } const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: colors.WHITE, }, awareScrollViewContainer: { flex: 1, backgroundColor: colors.GRAY_200, }, scrollViewContainer: { backgroundColor: colors.GRAY_200, }, commentCount: { marginTop: 12, backgroundColor: colors.WHITE, paddingVertical: 12, paddingHorizontal: 16, fontSize: 16, fontWeight: "bold", }, commentInputContainer: { width: "100%", borderTopColor: colors.GRAY_200, borderTopWidth: StyleSheet.hairlineWidth, backgroundColor: colors.WHITE, padding: 16, bottom: 0, position: "absolute", }, inputButtonContainer: { backgroundColor: colors.ORANGE_600, padding: 8, borderRadius: 5, }, inputButtonText: { color: colors.WHITE, fontWeight: "bold", }, });

createPostWithImages에서 Promise.all로 이미지 업로드가 되는데 Promise.all은 순서 보장이 되나요?

현재 토큰을 제대로 받아오는 것을 확인했지만local storage에 들어가서 확인을 해보면 아무것도 없습니다!session storage에도 확인해 봤는데 여기도 저장이 안 되어 있습니다제가 직접 access token을 local storage에 저장하려고 시도하다가회원가입 성공 시 data에 session이 null이 나오는걸 확인했습니다. 그래서 local storage setItem해서 저장을 할 수가 없는걸까요?authorization에 access token이 담겨오는데 왜 session에는 null이 뜨는지 궁금합니다.

이번 강의를 통해 만든 소스를 github에 있나요? 있으면 링크 알려주세요.

아바타 만들기 /post 에는 글쓰기, 수정, 상세화면에 대한 정의가 되어 있습니다./post/[id].tsx/post/write.tsx/post/update/[id].tsx 글쓰기와 수정은 SafeAreaView를 적용하지 않았는데 상세보기에서 적용한 이유와 어떤 기준에 의해 적용하였는지 문의 드립니다./post/_layout.tsx 내에 Stack.Screen에서 headerShown : false일때 SafeAreaView를 적용하는걸로 생각했는데 그렇지 않은것 같습니다. 감사합니다.  

버전 호환 문제 현재 강의 흐름대로 react-native 0.79.4 버전을 깔고 이 강의에서 npm install @react-navigation/native과npm install react-native-screens react-native-safe-area-context를 그대로 실행해서 설치하면npx pod-install ios Need to install the following packages: pod-install@1.0.9 Ok to proceed? (y) y 🔍️ Scanning for pods... 1.16.2 > pod install Found 2 modules for target mapzip2 link_native_modules! {:ios_packages=>[{:configurations=>[], :name=>"react-native-safe-area-context", :root=>"/Users/kwakori/projects/react-native/learning/mapzip2/node_modules/react-native-safe-area-context", :path=>"../node_modules/react-native-safe-area-context", :podspec_path=>"/Users/kwakori/projects/react-native/learning/mapzip2/node_modules/react-native-safe-area-context/react-native-safe-area-context.podspec", :script_phases=>[]}, {:configurations=>[], :name=>"react-native-screens", :root=>"/Users/kwakori/projects/react-native/learning/mapzip2/node_modules/react-native-screens", :path=>"../node_modules/react-native-screens", :podspec_path=>"/Users/kwakori/projects/react-native/learning/mapzip2/node_modules/react-native-screens/RNScreens.podspec", :script_phases=>[]}], :ios_project_root_path=>"/Users/kwakori/projects/react-native/learning/mapzip2/ios", :react_native_path=>"../node_modules/react-native"} Auto-linking React Native modules for target mapzip2: RNScreens and react-native-safe-area-context Framework build type is static library Configuring the target with the New Architecture [!] Invalid Podfile file: [!] /opt/homebrew/bin/node ./../node_modules/react-native/scripts/generate-codegen-artifacts.js -p /Users/kwakori/projects/react-native/learning/mapzip2/ios/.. -o /Users/kwakori/projects/react-native/learning/mapzip2/ios -t ios [Codegen] Analyzing /Users/kwakori/projects/react-native/learning/mapzip2/package.json [Codegen] Searching for codegen-enabled libraries in the app. [Codegen] The "codegenConfig" field is not defined in package.json. Assuming there is nothing to generate at the app level. [Codegen] Searching for codegen-enabled libraries in the project dependencies. [Codegen] Found react-native [Codegen] Found react-native-safe-area-context [Codegen] Found react-native-screens [Codegen] Searching for codegen-enabled libraries in react-native.config.js [Codegen] Processing FBReactNativeSpec [Codegen] Searching for podspec in the project dependencies. [Codegen] Processing rncore [Codegen] Searching for podspec in the project dependencies. [Codegen] Processing safeareacontext [Codegen] Searching for podspec in the project dependencies. [Codegen] Supported Apple platforms: ios, macos, tvos, visionos for safeareacontext [Codegen] Processing rnscreens [Codegen] Searching for podspec in the project dependencies. [Codegen] Supported Apple platforms: ios, tvos, visionos for rnscreens [Codegen] Error: Unknown prop type for "environment": "undefined" [Codegen] Done. . # from /Users/kwakori/projects/react-native/learning/mapzip2/ios/Podfile:20 # ------------------------------------------- # > use_react_native!( # :path => config[:reactNativePath], # ------------------------------------------- Couldn't install Pods. Updating the Pods project and trying again...와 같은 에러가 발생합니다.아무래도 버전 호환성 문제인 것 같습니다.https://github.com/software-mansion/react-native-screens/blob/main/README.md#support-for-fabric위 문서를 참고하면 react-native-screens의 최신 버전인 4.19.0+ 는 react-native 0.81.0+ 에서만 호환된다고 하는 것 같습니다. 강의 들으시는 분들은 참고해주세요. 버전을 낮춰서 설치하시거나 하시면 정상적으로 설치되더라구요//아니면 혹시 그냥 react-native를 0.81.0＋ 로 설치해서 강의를 들어도 문제없으려나요?

피그마 디자인에서는 < 를 사용했는데강의에서는 Foundation "home"을 사용했어요!의도하신걸까요? 디자인이 최종 시안이라던가.. 그게 아니라면강의는 동영상이니 바꾸는데 공수가 많이 들어가니피그마에서 아이콘 바꿔주셔도 좋을것같습니다! 잡담으로 저는 자바스프링 백엔드로 시작해서 jQuery/Angular/Vue/React/Next를 풀스택으로 쓰는 회사들로 이직하면서 최종적으로 코틀린스프링을 메인스택으로 하고 있는데요.취미/공부/사이드 프로젝트로 Next.js랑 Flutter 배우고 이번에 RN배우는데 강사님의 코드퀄리티나 강의력이 깔끔한것 같아서 잘 보고 있습니다ㅎㅎ 25년 초에 릴리즈한 강의인데 26년에도 미션이나 질문에도 답 잘 달아주셔서 감사합니다.

이렇게 내용이 길어져서 모달 전체 크기인 max-h-[90vh]에 도달할 경우, 저는 모달 내부에 있는 버튼이 밖으로 안튀어나가게 작동할거라고 예상했는데, 첨부한 이미지처럼 튀어나가더라고요...이런 경우는 어떻게 해결할 수 있나요?

안녕하세요 강의를 너무 잘 보고 있습니다. 강의를 보다가 문득 궁금한점이 있는데 프론트엔드 취업을 위해서 어느정도로 알고 있어야 되는지 그리고 어디까지 공부를 하고 회사를 지원을 해야되는지 궁금하더라구요. 뭔가 완벽히 그리고 많이 알야된다는 걱정에 지원을 못하고 계속 공부만 하게 되는거 같은데 조언 부탁드립니다

갑자기 이해가.. .이게 왠.. ㅡㅡ;;;  const handleDeleteItem = id => { setDummyData(dummyData.filter(item => item.id !== id)); };에서 id 값을 어디서 가지고 오는지 알 수 있을까요?

❗질문 작성시 꼭 참고해주세요에러 메세지에서 단서를 찾을 수 있는 경우가 많습니다. 에러 메세지를 읽고 한번 검색해보시는것을 추천드립니다.질문글을 작성하실때는, 현재 문제(또는 에러)와 코드나 github을 첨부해주세요.개발중인 OS, ReactNative, Node 버전 등의 개발환경을 알려주셔야합니다.에러메세지는 일부분이 아닌 전체 상황을 올려주세요. 일부만 보여주시면 답변이 어렵습니다.에러 잘라서 올리시면 안됩니다!(에러 일부만 자르거나 일부만 복사하지말아주세요) 지금은 잘 되는 것 같은데(제가 아직 안드로이드 애뮬레이터로만 테스트 한 상태이긴 하지만)혹시 지금도 안되는지 궁금합니다!