Table 생성시, 왜 created_at이 필요한가요? like 테이블에는 postId, userId만 있으면 될거같은데요...

강의 소스코드를 똑같이 했는데 새로고침 없이 바로 삭제가 안되네요ㅠ 다른거는 api함수를 한 군데에 모은 거 밖에 없는데...

안녕하세요 너무 쉽게 설명해주셔서 프론트 왕초보인 저도 아주 잘 따라가면서 강의를 듣고있습니다 ! 이번 파트에서 한가지 의문인점은저는 예전에 백엔드 서버를 구축할때 소셜로그인이 성공하면 백엔드 내에서 access 와 refresh 토큰을 만들어내서 refresh 를 쿠키형식으로 넘긴 후 소셜로그인 성공 리다이렉트를 바로 access token을 발급받을수있는곳으로 리다이렉팅시켜서 access를 추가적으로 받게끔 구축했었는데,이번 파트에서 의문인점은 보통 실무에서는 백엔드가 자체적으로 만드는 access refresh 토큰이 아니라 소셜서버자체에서 제공하는 access 와 refresh를 주로 활용하는걸까요 ?

전역 모달을 2개 쓰고 싶어서 일단 스토어 2개를 만들었는데요. 모달 프로바이더도 2개를 만들어야하는지, 아니면 하나의 모달 프로바이더에 2개 모달을 모두 넣어도 되는지 궁금합니다. 그리고 만약 하나의 모달 프로바이더에 두 모달을 넣는다면 어떻게 코드를 작성해야 하는지 궁금합니다.// 1번 export default function ModalProvider({ children }: { children: ReactNode }) { return ( <> {createPortal( <> <AModal /> <BModal /> </>, document.getElementById("modal-root")!, )} {children} </> ); } // 2번 export default function ModalProvider({ children }: { children: ReactNode }) { return ( <> {createPortal(<AModal />, document.getElementById("modal-root")!)} {createPortal(<BModal />, document.getElementById("modal-root")!)} {children} </> ); }

프로필 수정후 프로필 디테일 화면의 포스트 아이템들에서는 수정된 프로필 내용이 반영이 안되는 것이 확인됩니다. 시나리오대로라면 프로필 수정 후 포스트아이템의 프로필 ui 도 업데이트 해주는게 자연스러운듯 하여 위와 같이 아래 코드를 추가해 주었습니다. 맞을까요?queryClient.resetQueries({ queryKey: QUERY_KEYS.post.userList(updatedProfile.id), });

탄스택쿼리 파트를 먼저 수강중에 중복되는 자료가 있어 말씀드려요. 63,65강의 자료가 동일합니다.추가적으로, 65강 처음에 나오는 코드는 useEffect가 아닌 useQuery를 통한 분기처리인데, 이 경우 race condition위험이 없지 않나요?

안녕하세요. 요즘 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]); 

요즘 zustand 공식 Docs 사이트가 이상해요..zustand 문서를 보려고 docs 사이트에 접속하면GPU 사용율이 오르고, 컴퓨터 온도도 확 올라가면서웹브라우저에서 응답없음이 나오고 멈춰버립니다.저만 이런 건가 해서 github 이슈를 검색해 봤더니 2025년말에도 이 같은 이슈가 있었는데..이거 zustand 에게 상태 관리 맡겨도 될까요? ㅎㅎ

에러 메시지 한국어로 변경하는 부분을 보다 보니 문득 해당 라이브리가 있는지 찾아 봤는데 있더라구요. 설치와 사용법은 아래와 같습니다. npm i supabase-error-translator-jsimport { 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 '문제가 발생했습니다. 잠시 후 다시 시도해주세요.'; }

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.

id를 똑같이 string으로 다 바꿨고 코드도 동일한데 이 부분에서 타입 오류가 납니다 ,,

안녕하세요 저도 아래에 글 남기신 분과 같은 질문사항인데요 카카오개발자센터가 리뉴얼 되면서 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>

createObjectURL로 이미 메모리에 보관된 이미지 파일들은 단순히 filter로 삭제해도 삭제되지 않기때문에, 메모리 누수가 발생된다고 하셨는데요. 1. 실제로 메모리 누수가 발생하고 있는지는 어떻게 확인 할 수 있는건가요?? 2. 또 이미 AI가 많이 발전해버린 뒤에 개발을 접한 저는 수동적인 태도로만 공부를 해서인지, 여기에서 메모리 누수가 발생하겠구나. 이건 이런 문제가 생길텐데 어떻게 해결하지? 하는 생각을 하나도 안 하고있음을 깨달았습니다...어떤 태도로 임해야 저런 생각도 당연하게 할 수 있을까요?ㅠㅠ

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; }; }>둘 다 이렇게 동일하게 나오는데 어떤 차이점이 있는건가요?

todo list 추가/삭제 시 캐시데이터도 각각 따로 해줘야하는 내용은 알겠는데, 현재 체크박스만 변경할 때 캐시데이터를 업데이트 해주는거는 불필요하지않을까 생각이 듭니다. 만약 내용 수정같은경우라면 해줘야하겠지만..(?) 이전코드와 비교해봤을때 checkbox를 수정했을 때 "todo","list" 는 id만 갖고있어 문제는 캐시데이터 업데이트 해줄일은 없고, "todo", "detail"은 바로 업데이트가 되는데 굳이 코드 수정해주는 이유를 아직 모르겠습니다.

querykey factory에서 all은 언제 쓰나요??  

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 을 사용하신 이유가 궁금합니다.