묻고 답해요
169만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결한 입 크기로 잘라먹는 React.js 실전 프로젝트 - SNS 편
4.6 id를 string으로 바꾸니까 오류가 나요
id를 똑같이 string으로 다 바꿨고 코드도 동일한데 이 부분에서 타입 오류가 납니다 ,,
-
미해결Next + React Query로 SNS 서비스 만들기
캡처링부분 질문있습니다.
https://inf.run/h6CDM저도 이분과 동일한 생각을 했는데요캡처링이 아닌 버블링을 하는게 맞지않나? 라는 생각이 들더라구요혼돈이 와서그러는데 강사님의 생각을 알수있을까요?
-
미해결한 입 크기로 잘라먹는 React.js 실전 프로젝트 - SNS 편
이미지 메모리 누수 관련 질문
createObjectURL로 이미 메모리에 보관된 이미지 파일들은 단순히 filter로 삭제해도 삭제되지 않기때문에, 메모리 누수가 발생된다고 하셨는데요. 1. 실제로 메모리 누수가 발생하고 있는지는 어떻게 확인 할 수 있는건가요?? 2. 또 이미 AI가 많이 발전해버린 뒤에 개발을 접한 저는 수동적인 태도로만 공부를 해서인지, 여기에서 메모리 누수가 발생하겠구나. 이건 이런 문제가 생길텐데 어떻게 해결하지? 하는 생각을 하나도 안 하고있음을 깨달았습니다...어떤 태도로 임해야 저런 생각도 당연하게 할 수 있을까요?ㅠㅠ
-
해결됨한 입 크기로 잘라먹는 React.js 실전 프로젝트 - SNS 편
56강 alertModalStore 구현 중 질문
store에서 actions를 생성하고 store를 내보내려고 할 때에export const useAlertModal = () => { const store = useAlertModalStore(); return store as typeof store & State; }; 이렇게 as 단언문을 추가하셨는데저는 as typeof store & State 이 부분을 추가하지 않아도 똑같이 추론이 되고 있습니다. const store: Write<State, { actions: { open: (params: Omit<OpenState, "isOpen">) => void; close: () => void; }; }>둘 다 이렇게 동일하게 나오는데 어떤 차이점이 있는건가요?
-
미해결한 입 크기로 잘라먹는 React.js 실전 프로젝트 - SNS 편
checkbox 캐시 update
todo list 추가/삭제 시 캐시데이터도 각각 따로 해줘야하는 내용은 알겠는데, 현재 체크박스만 변경할 때 캐시데이터를 업데이트 해주는거는 불필요하지않을까 생각이 듭니다. 만약 내용 수정같은경우라면 해줘야하겠지만..(?) 이전코드와 비교해봤을때 checkbox를 수정했을 때 "todo","list" 는 id만 갖고있어 문제는 캐시데이터 업데이트 해줄일은 없고, "todo", "detail"은 바로 업데이트가 되는데 굳이 코드 수정해주는 이유를 아직 모르겠습니다.
-
해결됨한 입 크기로 잘라먹는 React.js 실전 프로젝트 - SNS 편
querykey factory
querykey factory에서 all은 언제 쓰나요??
-
미해결아바타 커뮤니티앱 만들기 (React Native Expo)
백엔드도 궁금합니다!
안녕하세요!클라이언트 부분 열심히 반복 수강 중에 있습니다 🙂 코드가 굉장히 깔끔하고 가독성이 좋아서 서버 부분도 배우고 싶더라구요! 서버 구성과 효율적인 코드를 작성하는 법도 배우고 싶다는 마음이 커지더라구요! 혹시 추후에 서버 강의를 진행하실 예정이 없으실까요? 없으시다면,,, 기존 강의에 있던 맛집 어플 서버 부분만 참고해도 충분할까요...?
-
해결됨한 입 크기로 잘라먹는 React.js 실전 프로젝트 - SNS 편
28. 데이터 무효화하기 부분에서 질문
constants.ts에 쿼리키값 관련한 부분을 상수로 빼고, import하여 사용하는 방법을 배웠습니다!여기서 질문이 export const QUERY_KEYS = { todo: { all: ["todo"], list: ["todo", "list"], detail: (id: string) => ["todo", "detail", id], }, }; 상수명만 대문자로 쓰고 내부 객체는 소문자로 사용하는게 맞는건가요?? 어떤 것이 관례인지 궁금합니다
-
미해결한 입 크기로 잘라먹는 React.js 실전 프로젝트 - SNS 편
`2.4 Shadcn/ui를 소개합니다` 에서 에러가 뜹니다.
강의대로 따라가다가 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
-
미해결한 입 크기로 잘라먹는 React.js 실전 프로젝트 - SNS 편
input checkbox 에 onChange 대신 onClick 을 사용하신 이유
안녕하세요 선생님input checkbox 에 onClick 을 사용하면 react 에서는 경고도 날리기도 하는데 onChange 대신 onClick 을 사용하신 이유가 궁금합니다.
-
해결됨한 입 크기로 잘라먹는 React.js 실전 프로젝트 - SNS 편
51[6.11] 회원가입이 안되고 프로필 생성하려니까 빨간색이 뜨네요ㅜ
https://github.com/kkhhjjoo/onebite-sns
-
해결됨한 입 크기로 잘라먹는 React.js 실전 프로젝트 - SNS 편
6.11 빨간줄이가고 id에 마우스를 가면 Session | null이 안떠요
안녕하세요~ 15분 29초 하고있는데 빨간줄이 가서 여쭤봅니다github주소는 https://github.com/kkhhjjoo/onebite-sns입니다
-
해결됨한 입 크기로 잘라먹는 React.js 실전 프로젝트 - SNS 편
useEffect 안에 setState 사용 시 뜨는 오류
모달이 닫힐 때 입력 상태(content, images)를 초기화하기 위해 useEffect에서 isOpen을 의존성으로 두고 setContent, setImages를 호출했는데이 과정에서 "calling setState synchronously within an effect can trigger cascading renders" 경고가 발생했습니다.useEffect가 외부 시스템과의 동기화를 위한 용도이기 때문에 생기는 오류인지 궁금합니다! 또한 그렇다면 UI 상태 초기화 목적으로 useEffect에서 state를 변경하는 방식은 권장되지 않는 패턴인가요?그래서 현재는 onClose, onCancel 등 모달이 닫히는 이벤트 시점마다 직접 setContent(""), setImages([])를 호출하는 방식으로 처리하고 있습니다.
-
미해결한 입 크기로 잘라먹는 React.js 실전 프로젝트 - SNS 편
안녕하세요 9.3 프로필 수정 기능 구현하기 질문드립니다.
마지막 부분인 9.5 프로필 인가부분까지 수업을 들으면서 코드를 작성했는데, ProfileDetailPage가 제대로 렌더링 되지 않아서 질문드립니다. 코드가 혹시 잘못되었을까해서 깃허브 보고 다시 확인했는데, 코드는 강의 내용이랑 맞는 것 같습니다. 뭐가 문제인지 잘모르겠어요
-
미해결한 입 크기로 잘라먹는 React.js 실전 프로젝트 - SNS 편
이런 플젝 만드는데 얼마나 걸리시나요?
강의에 관한 질문은 아니긴한데 개인적으로 궁금해서 여쭤봅니다..!강의 설명 준비하시는 거 말고 이 정도 규모 프로젝트 만들 때 얼마나 걸리시나요??.. 사람마다 다르겠지만 대충 기간이 궁금해서요..! 불편하신 질문이었다면 죄송합니당..
-
미해결React 완벽 마스터: 기초 개념부터 린캔버스 프로젝트까지
뭐하나 여쭤봐도 될까요?
안녕하세요복습하러 들어왔습니다.그나저나 코딩님.. 뭐하나 여쭤봐도..다른 어느 소스를 보니까.. component 1index.jscomponent2index.jscomponent3index.js.. 폴더마다..죄다 ...... index.js 가 있는데...짐코딩님께 여쭤 봐도 될련지요.. ?번거로우시겠지만.. 고견 , 첨언 부탁드립니다.(P.S: 또 ..AI가 답변할라나? .쩝) [ AI ]" 컴포넌트 폴더에 index.js를 두는 리팩토링 팁???? "리팩토링?... 엥? 저렇게 리팩토리 하라고?( 거 참..머 할라고 저렇게 한데??? .. ㅡㅡ;;) 코딩님..헬프용. ㅜㅜ;;;
-
미해결아바타 커뮤니티앱 만들기 (React Native Expo)
댓글 버튼 하단에 고정되지 않는 이슈
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", }, });
-
해결됨한 입 크기로 잘라먹는 React.js 실전 프로젝트 - SNS 편
안녕하세요 7.4 이미지업로드구현하기2 질문드립니다.
createPostWithImages에서 Promise.all로 이미지 업로드가 되는데 Promise.all은 순서 보장이 되나요?
-
해결됨한 입 크기로 잘라먹는 React.js 실전 프로젝트 - SNS 편
회원가입 시 엑세스 토큰이 localStorage에 자동으로 저장이 안됩니다.
현재 토큰을 제대로 받아오는 것을 확인했지만local storage에 들어가서 확인을 해보면 아무것도 없습니다!session storage에도 확인해 봤는데 여기도 저장이 안 되어 있습니다제가 직접 access token을 local storage에 저장하려고 시도하다가회원가입 성공 시 data에 session이 null이 나오는걸 확인했습니다. 그래서 local storage setItem해서 저장을 할 수가 없는걸까요?authorization에 access token이 담겨오는데 왜 session에는 null이 뜨는지 궁금합니다.
-
해결됨한 입 크기로 잘라먹는 React.js 실전 프로젝트 - SNS 편
참고 소스 질문
이번 강의를 통해 만든 소스를 github에 있나요? 있으면 링크 알려주세요.