172만명의 커뮤니티!! 함께 토론해봐요.
해결됨
한 입 크기로 잘라먹는 React.js 실전 프로젝트 - SNS 편
프로필 수정후 프로필 디테일 화면의 포스트 아이템들에서는 수정된 프로필 내용이 반영이 안되는 것이 확인됩니다. 시나리오대로라면 프로필 수정 후 포스트아이템의 프로필 ui 도 업데이트 해주는게 자연스러운듯 하여 위와 같이 아래 코드를 추가해 주었습니다. 맞을까요? queryClient.resetQueries({ queryKey: QUERY_KEYS.post.userList(updatedProfile.id), });
해결됨
React 마스터 클래스: Part 3 - 실무 핵심 라이브러리 정복 (TypeScript, Zustand, React Hook Form, TanStack Query)
탄스택쿼리 파트를 먼저 수강중에 중복되는 자료가 있어 말씀드려요. 63,65강의 자료가 동일합니다. 추가적으로, 65강 처음에 나오는 코드는 useEffect가 아닌 useQuery를 통한 분기처리인데, 이 경우 race condition위험이 없지 않나요?
해결됨
한 입 크기로 잘라먹는 React.js 실전 프로젝트 - SNS 편
안녕하세요. 요즘 React 19로 다시 강의를 학습하고 있습니다. 그러다 보니 useEffect 내에서 setState() 호출 시 새로운 Lint 규칙으로 react-hooks/set-state-in-effect 대한 경고가 나옵니다. 즉 useEffect 에서 setState() 호출하여 불필요한 추가 렌더링이 발생한다고 경고합니다. ( https://ko.react.dev/reference/eslint-plugin-react-hooks/lints/set-state-in-effect) 아래 pos-editor-modal.tsx 에서도 setContent(""); 에서도 경고가 발생하네요.. useEffect(() => { if (!isOpen) return; textareaRef.current?.focus(); setContent(""); // 경고 발생!! }, [isOpen]); 요즘 들어 이런 경고가 신경 쓰이는 데.. 왜 이런 규칙이 생겼나요 ? 수정 방법은 아래와 같이 코드를 수정하라 해서 변경했는데 .. startTransition() 을 사용해야 하나요.. useEffect(() => { if (!isOpen) return; textareaRef.current?.focus(); startTransition(() => { setContent(''); }); }, [isOpen]);
해결됨
한 입 크기로 잘라먹는 React.js 실전 프로젝트 - SNS 편
요즘 zustand 공식 Docs 사이트가 이상해요.. zustand 문서를 보려고 docs 사이트에 접속하면 GPU 사용율이 오르고, 컴퓨터 온도도 확 올라가면서 웹브라우저에서 응답없음이 나오고 멈춰버립니다. 저만 이런 건가 해서 github 이슈를 검색해 봤더니 2025년말에도 이 같은 이슈가 있었는데.. 이거 zustand 에게 상태 관리 맡겨도 될까요? ㅎㅎ
해결됨
한 입 크기로 잘라먹는 React.js 실전 프로젝트 - SNS 편
에러 메시지 한국어로 변경하는 부분을 보다 보니 문득 해당 라이브리가 있는지 찾아 봤는데 있더라구요. 설치와 사용법은 아래와 같습니다. npm i supabase-error-translator-js import { AuthError } from '@supabase/supabase-js'; import type { ErrorService } from 'supabase-error-translator-js/dist/types'; import { setLanguage, translateErrorCode } from 'supabase-error-translator-js'; setLanguage('ko'); export function errorTranslator(error: unknown, service: ErrorService = 'auth') { if (error instanceof AuthError && error.code) { return ( translateErrorCode(error.code, service) ?? '알 수 없는 인증 오류가 발생했습니다. 잠시 후 다시 시도해 주세요.' ); } return '문제가 발생했습니다. 잠시 후 다시 시도해주세요.'; }
미해결
타입스크립트로 배우는 리액트(React.js) : 기초부터 최신 기술까지 완벽하게
import { useId } from "react"; type CheckboxProps = Omit<React.ComponentPropsWithoutRef<"input">, "type"> & { type?: "checkbox"; parentClassName: string; }; export default function Checkbox(props: CheckboxProps) { const uuid = useId(); const { parentClassName, children, ...rest } = props; return ( <> <div className={parentClassName}> <input id={uuid} {...rest} /> <label htmlFor={uuid}>{children}</label> </div> </> ); } useEffect(() => { const randomText = Array.from( { length: 100 }, (_, index) => `Todo Item #${index + 1}`, ); randomText.forEach((text) => addTodo(text)); }, []); 대량 데이터 생성 후 테스트를 하는데 중복 키값이 생성되었는데요. uuid 부분인 것 같은데. 노트북 장비 사양 때문에 그런건지요? installHook.js:1 Encountered two children with the same key, 1770775434402 . Keys should be unique so that components maintain their identity across updates. Non-unique keys may cause children to be duplicated and/or omitted — the behavior is unsupported and could change in a future version.
미해결
한 입 크기로 잘라먹는 React.js 실전 프로젝트 - SNS 편
id를 똑같이 string으로 다 바꿨고 코드도 동일한데 이 부분에서 타입 오류가 납니다 , ,
미해결
타입스크립트로 배우는 리액트(React.js) : 기초부터 최신 기술까지 완벽하게
안녕하세요 저도 아래에 글 남기신 분과 같은 질문사항인데요 카카오개발자센터가 리뉴얼 되면서 Web 플랫폼 등록을 어디서 해야될지 모르겠습니다. 올려주신 리뉴얼 영상에서는 리다이렉트 URL 설정하는 부분만 나와있습니다. 그리고 앱 띄워서 로그인 버튼을 클릭하면 아무런 반응이 없는데 onClick 같은 요소가 존재하지 않아서 그런 것 같습니다. 확인해주시면 감사하겠습니다. {/* 카카오 로그인 버튼 */} <button className="w-full flex items-center justify-center gap-2 bg-[#FEE500] text-[#000000] py-3 rounded-lg hover:bg-[#FDD800] transition-colors font-medium"> <img src="https://developers.kakao.com/assets/img/about/logos/kakaolink/kakaolink_btn_small.png" alt="Kakao Logo" className="w-5 h-5" /> Continue with Kakao </button>
미해결
한 입 크기로 잘라먹는 React.js 실전 프로젝트 - SNS 편
createObjectURL로 이미 메모리에 보관된 이미지 파일들은 단순히 filter로 삭제해도 삭제되지 않기때문에, 메모리 누수가 발생된다고 하셨는데요. 1. 실제로 메모리 누수가 발생하고 있는지는 어떻게 확인 할 수 있는건가요?? 2. 또 이미 AI가 많이 발전해버린 뒤에 개발을 접한 저는 수동적인 태도로만 공부를 해서인지, 여기에서 메모리 누수가 발생하겠구나. 이건 이런 문제가 생길텐데 어떻게 해결하지? 하는 생각을 하나도 안 하고있음을 깨달았습니다...어떤 태도로 임해야 저런 생각도 당연하게 할 수 있을까요?ㅠㅠ
해결됨
한 입 크기로 잘라먹는 React.js 실전 프로젝트 - SNS 편
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 편
todo list 추가/삭제 시 캐시데이터도 각각 따로 해줘야하는 내용은 알겠는데, 현재 체크박스만 변경할 때 캐시데이터를 업데이트 해주는거는 불필요하지않을까 생각이 듭니다. 만약 내용 수정같은경우라면 해줘야하겠지만..(?) 이전코드와 비교해봤을때 checkbox를 수정했을 때 "todo","list" 는 id만 갖고있어 문제는 캐시데이터 업데이트 해줄일은 없고, "todo", "detail"은 바로 업데이트가 되는데 굳이 코드 수정해주는 이유를 아직 모르겠습니다.
해결됨
한 입 크기로 잘라먹는 React.js 실전 프로젝트 - SNS 편
querykey factory에서 all은 언제 쓰나요??
해결됨
한 입 크기로 잘라먹는 React.js 실전 프로젝트 - SNS 편
constants.ts에 쿼리키값 관련한 부분을 상수로 빼고, import하여 사용하는 방법을 배웠습니다! 여기서 질문이 export const QUERY_KEYS = { todo: { all: ["todo"], list: ["todo", "list"], detail: (id: string) => ["todo", "detail", id], }, }; 상수명만 대문자로 쓰고 내부 객체는 소문자로 사용하는게 맞는건가요?? 어떤 것이 관례인지 궁금합니다
미해결
한 입 크기로 잘라먹는 React.js 실전 프로젝트 - SNS 편
강의대로 따라가다가 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) : 기초부터 최신 기술까지 완벽하게
보통 상위 컴포넌트에 함수를 정의하고 하위 컴포넌트에서는 이벤트가 발생했을 때 상위 컴포넌트의 함수를 호출하는 방식이 맞는건가요? 강의를 보니 하위 컴포넌트에서도 함수를 정의하는 것 같아서 질문드립니다. 어느 쪽에 함수를 정의하는 것이 맞는 것인지 궁금합니다.
미해결
한 입 크기로 잘라먹는 React.js 실전 프로젝트 - SNS 편
안녕하세요 선생님 input checkbox 에 onClick 을 사용하면 react 에서는 경고도 날리기도 하는데 onChange 대신 onClick 을 사용하신 이유가 궁금합니다.
해결됨
한 입 크기로 잘라먹는 React.js 실전 프로젝트 - SNS 편
https://github.com/kkhhjjoo/onebite-sns
해결됨
한 입 크기로 잘라먹는 React.js 실전 프로젝트 - SNS 편
안녕하세요~ 15분 29초 하고있는데 빨간줄이 가서 여쭤봅니다 github주소는 https://github.com/kkhhjjoo/onebite-sns 입니다
해결됨
한 입 크기로 잘라먹는 React.js 실전 프로젝트 - 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([]) 를 호출하는 방식으로 처리하고 있습니다.
미해결
타입스크립트로 배우는 리액트(React.js) : 기초부터 최신 기술까지 완벽하게
안녕하세요 axios가 fetch보다 편리해 보여서 거의 axios만 사용할 것 같은데, 그래도 fetch를 사용해야 하는 상황이 존재하나요? 실제 현업에서는 어떤 쪽을 더 많이 사용하나요?
