안녕하세요. 지금 125강 제어 컴포넌트 부분 문의 드립니다. input type에서 onChange 함수에 handleInputchange를 호출을 하고 있는 부분을 따라하고 있었습니다. 리액트 객체의 타입을 알아야 하기 때문에 마우스를 e에다가 가져보면 저는 (parameter) e: ChangeEvent<HTMLInputElement> 이렇게 나오고 있습니다. 그런데 강의에서는 (parameter) e: React.ChangeEvent<HTMLInputElement> 이렇게 나오고 있어서요. 저의 VS CODE에서는 React. 이 부분이 누락이 되어서 알려주고 있습니다. const handleInputChange = (e: ChangeEvent<HTMLInputElement>) => { setInput( e.target .value); }; 이렇게 넣었을 시에 ChangeEvent 에 빨간불은 들어오지만 화면 자체에 에러는 안나오는 것 같습니다. 강사님 강의처럼 React. 이 부분을 넣지 않아도 괜찮을지에 관하여서 문의 드려봅니다. 강의 너무 잘 보고 있습니다 감사합니다.
서랍 네비게이션을 열 때마다 뒤에 MapView가 마운트 언마운트 되는 문제 아래 링크 영상처럼 서랍 네비게이션을 열 때마다 뒤에 MapView가 언마운트 마운트가 되면서 성능 관련 문제가 생기는 것 같습니다. 이게 애뮬레이터 문제인지 제 컴퓨터 문제인지, 강의에서는 이런 문제가 안보이는데.. 해당 문제 해결할 방법이 혹시 있을까요? 네비게이션을 열 때마다 렉이 걸려서 자꾸 애플리케이션이 다운됩니다 ㅠㅠ 방법을 찾아보고 메모이제이션도 해보고, Drawer 옵션도 사용해봤는데 무용지물이네요 ㅠ https://drive.google.com/file/d/1tM8iR9QgukKVd_I5zfk6GhbKneLE1DkZ/view?usp=drive_link
선생님, 안녕하세요. 강의 잘 듣고 있습니다 🙂 프로필 수정 기능구현하기 - 기능 강좌에서 useEffect(() => { if (profile && isOpen) { setNickname(profile.nickname); setBio(profile.bio); setAvatarImage(null); } }, [profile, isOpen]); setAvatarImage(null); setAvatarImage의 인수로 null 값으로 설정한 이유를 강의에서 말씀 주셨는데 설명을 들었는데도 아직 잘 이해가 안 돼서요 ㅠㅠ 해당 부분에 대해 좀 더 부연설명 해주실 수 있나요? 감사합니다. 새해 복 많이 받으세요!
안녕하세요. 누르신 키보드가 어떤것인지 질문 드립니다. useSta까지 입력하시고 자동생성된 useStateSnippet를 선택을 하셔서 const [first, setFirst] = useState 이게 자동으로 생성이 되는데 생성이 되자마자 어떤 키보드를 누르셨는지 [showNotification, setShowNotification]= useState(second) 로 변경이 되더라구요.. 어떤 것을 입력하셔서 변경이 됬는지 알 수 있을까요?
map 함수 안에서 자식 컴포넌트가 순회하는 코드가 있다고 할 때, 그 자식 컴포넌트 안에서 훅(ex useEditPost/useDeletePost)을 호출하는 것이 좋을까요? 아니면 부모에서 훅을 한번 호출한 뒤 자식 컴포넌트에 prop으로 내려주는 것이 좋을까요? 전자는 자식마다 호출되어 할당될 것 같아서 메모리 관리에 단점이 있을 것 같고 (추측입니다), 후자는 (훅의 함수를 받아야하는 대상 컴포넌트가 자식 내부에 더 깊은 뎁스에 있다고 할 때) Prop Drilling의 단점이 있을 것 같은데요 선생님은 어떻게 생각하시나요?
안녕하세요 강의 잘 듣고 있습니다! 다름이 아니고 (3.5) Zustand 미들웨어 2 강의를 들으며 실습 중, 알려주신 Redux DevTools 설치 이후 강의와 같이 한번 클릭하여도 anonymous가 두 번씩 찍혀서 노출되는데 제가 다시 확인해봐야 할 부분이 있을까요? 감사합니다.
안녕하세요 선생님 선생님 리액트 기초 강의를 들었는데 제 기억에서는 그 리액트 파일명을 대문자로 써야한다? 이렇게 들었던 거 같은데 (아니면 죄송) 왜 여기에서는 파일명을 소문자로 쓸까요? 그리고 파일명하고 그 내보내는 함수를 다르게 쓰는 이유가 있나요? 그리고 왜 화살표함수로 안만들고 function으로 할까요? 그리고 export를 아래에 안쓰는 이유가 있을까요? 수업시간에 설명했는데 제가 놓친거면 죄송합니다 ㅠㅠ
안녕하세요 선생님! 대단한 질문은 아니고 의견을 여쭙고자 질문 남깁니다. useProfileData 훅에서 queryFn에 profile 조회 실패 시 createProfile을 하는 로직을 짜주셨는데요 혹시 onError 콜백함수에 로직을 정의하지 않고 쿼리함수에 정의하신 이유가 따로 있을까요? 개인적으론 가독성상 onError에 넣는게 조금 더 명확하지않나 싶어서 의견을 여쭤보고 싶네요!
안녕하세요. App.tsx에서 스트링이랑 넘버로 보낸 이 후에 그 값을 받아오는 PrintValue.tsx에서 모든 타입들을 boolean으로 설정을 했는데 에러가 나고 있지 않습니다. 제가 뭘 잘못한건지를 아무리 찾아봐도 모르겠어서 질문을 올려봅니다... 강의 너무 잘 보고 있습니다.
안녕하세요 선생님. 강의를 모두 수강한 후 복습을 하던 중 궁금한 점이 생겨 질문드립니다. 좋아요 기능에서 동시성 문제를 해결하기 위해 행 잠금 을 사용하는 것으로 이해했습니다. 이 경우, 첫 번째 유저의 좋아요 요청이 처리되는 동안 해당 행이 잠기게 되는데, 만약 동시에 많은 사용자(수백~수천 명)가 좋아요 버튼을 누르는 상황 이라면 요청들이 순차적으로 대기하게 되어 응답 지연이 발생되지는 않나요?? 또한 이런 이유 때문에 클라이언트 단에서는 낙관적 업데이트 를 적용하는게 맞는걸까요??
toggleTodo = useCallback( ( id : number) => { <-- 여기 이 지점에 todos 라는 state 값이 필요한 상황 ( 체크 로직 등등.. ) setTodos( (todos) => todos.map( (todo) => todo.id === id ? { ...todo, completed: !todo.completed } : todo ); }, []); 위 부분에 todos 의 state 값이 필요하게 되면 의존성 배열에 todos 를 넣어줘야 될꺼 같은데요. 이렇게 되면 React.memo 에 의해 전달될 toggleTodo props 도 변경되게 될것으로 예측 되고 결국 자식 컴포넌트들이 리렌더링이 계속 발생되지 않을까 싶은데요. 위 부분에 todos 의 state 값이 필요하게 될 경우에는 어떻게 처리를 해줘야 될까요?
안녕하세요 강의 정말 잘 듣고있습니다. 현재 강의를 무한 중첩 댓글 구현하기까지 수강했습니다! 테스트를 위해 여러가지 사항들을 직접 체크하고있는데 Github로 로그인한 사용자의 정보들(avatar_url, name)들은 기본적으로 사용하지 않고 랜덤한 닉네임과 기본 아바타 이미지가 나오는게 정상 동작일까요? 제가 이해한 흐름은 다음과 같습니다. 1. Github(OAuth) 로그인 2. Supabase Authentication > Users에 사용자 생성 (profile 테이블에는 아직 생성 되지 않음) 3. SessionProvider에서 useProfileData 호출 export default function SessionProvider({ children }: { children: ReactNode }) { const session = useSession(); const setSession = useSetSession(); const isSessionLoaded = useIsSessionLoaded(); const { data: profile, isLoading: isProfileLoading } = useProfileData( session?.user.id, ); useEffect(() => { supabase.auth.onAuthStateChange((event, session) => { setSession(session); }); }, []); if (!isSessionLoaded) return <GlobalLoader />; if (isProfileLoading) return <GlobalLoader />; return children; } 4. fetchProfile(userId) 실행 export async function fetchProfile(userId: string) { const { data, error } = await supabase .from("profile") .select("*") .eq("id", userId) .single(); if (error) throw error; return data; } Supabase Table Editor > profile 에는 아무런 결과가 저장되어 있지 않기 때문에 PostgrestError: PGRST116 에러 발생 useProfileData catch 블록 실행 → createProfile 호출 랜덤한 닉네임 + avatar_url이 기본으로 저장 만약 제가 이해한 흐름이 맞다면 어떤 방법을 써야할까요? 제일 먼저 드는 생각은 createProfile에 session을 매개변수로 받아서 session.user.user_metadata.full_name 과 avatar_url 을 insert에 넣는걸 생각했습니다. createProfile export async function createProfile(userId: string, session?: Session) { const { data, error } = await supabase .from("profile") .insert({ id: userId, // ↓ 여기 수정 했어용 nickname: session?.user.user_metadata?.full_name || getRandomNickname(), avatar_url: session?.user.user_metadata?.avatar_url || null, }) .select() .single(); if (error) throw error; return data; } use-profile-data.ts export function useProfileData(userId?: string) { const session = useSession(); const isMine = userId === session?.user.id; return useQuery({ queryKey: QUERY_KEYS.profile.byId(userId!), queryFn: async () => { try { const profile = await fetchProfile(userId!); return profile; } catch (error) { if (isMine && (error as PostgrestError).code === "PGRST116") { return await createProfile(userId!, session!); // 여기 session 추가 했어용 } throw error; } }, enabled: !!userId, }); } 이렇게 코드를 수정하고 profile table을 삭제한 후 다시 Github로 로그인 하면 사용자의 프로필 이미지와 이름이 받아와졌습니다. 더 효율적이거나 더 좋은 방법이 있을까요? 혹은 제가 잘못 알고 있는게 있을까요?
안녕하세요, 강의 잘 듣고 있습니다! 6.2강 회원가입 구현 강의 18:06경에 설명해주시는 AuthResponse 타입의 정의?가 변경된 것인지, 제 코드 에디터에는 아래와 같이 표시됩니다. 첫 번째 객체 부분 {data: T; error: null}은 이해가 가는데요, 두 번째 객체 부분은 강의상 화면과 차이가 좀 있어서, 추가로 설명해주실 수 있으면 감사하겠습니다.
해당 강의대로 진행하면 잘 안됩니다ㅠㅠ 일단 Aurora and RDS로 진행했습니다. 지금 날짜로 AWS에 Amazon RDS가 없더라구요 그래서 문제가 있는지는 잘모르겠습니다. 1. 현재 package.json 명령어에서 dist/main이 아닌 dist/main.js로 해야 합니다. 이거 왜그런지 모르겠네요 보안 그룹을 설정해줘야 합니다. 사용자 지정 TCP 포트 3000 으로 열어줘야 합니다. 3. RDS 보안그룹 문제 어떤 분이 사용자 지정 TCP 해서 포트 3030을 추가해서 해결했다고 하는데 저는 잘모르겠습니다. 아래 에러가 나타나는 경우 1|main | [Nest] 6957 - 12/18/2025, 2:25:35 PM ERROR [TypeOrmModule] Unable to connect to the database. Retrying (7)... 1|main | error: no pg_hba.conf entry for host "172.31.32.15", user "mymap", database "mymap", no encryption app.module.ts에 아래 코드 추가 TypeOrmModule.forRoot({ type:'postgres', host: process.env.DB_HOST, port:5432, username: process.env.DB_USER, password: process.env.DB_PASSWORD, database: process.env.DB_NAME, ssl: { rejectUnauthorized:false, }, // 추가 }) 왜 추가해야하는지는 아직 자세히 모릅니다. 그러면 아래 에러가 뜹니다. error: database "mymap" does not exist 그럼 아래 과정 수행해야 합니다. 6. 이렇게 하면 아마도 잘 될 겁니다..ㅠ 만약에 pgAdmin에 연결해서 보고 싶으면 구글링해서 하시면 되는데 중요한 건 보안 그룹에서 인바운드 규칙 추가하는 것(PostgreSQL/TCP/5432/0.0.0.0/0)과 RDS 퍼블릭 엑세스가 "예"로 되어있어야 하는 것만 알아주시면 됩니다. 사실 여쭤보고 싶은 것 없지만 혹시나 보신다면 위 과정에서 문제될 건 없는지 알려주시면 감사하겠습니다!
안녕하세요! 타입 스크립트부터 현재 강의까지 너무 유용하게 잘 듣고 있는 수강생입니다! 9-1 강의를 수강하다가 문득 궁금함이 생겨서 질문 남겨 봅니다. A 유저와 B 유저가 있다고 가정했을 때 A 유저가 프로필 상세 화면을 보고 있는 상태에서 B 유저가 새로운 포스트를 올렸는데, 이후에 A 유저가 메인 리스트 화면으로 이동하면 B 유저가 올린 새로운 포스트가 로드되지 않는 것으로 보입니다! (새로 고침하면 당연히 정상적으로 보이고요) 제가 코드 작성을 하면서 놓친 부분이 있어 이러한 현상이 발생하는 것인지, 아니면 이후 강의에서 해당 부분이 수정되는 것인지 여쭤보고 싶습니다. 늘 좋은 강의 감사합니다! 🙂 좋은 하루 보내세요~!
안녕하십니까 이번에 책을 샀으나 잘 이해가 안되 강의와 함께 보기로 결정해서 공부하고잇는 초보자입니다 선생님 제가 공부를 하고있는데 자꾸 다 메모 할려고 하는데 프로그래밍은 메모하면서 공부하지말라고 암기하는것이 아닌 그때마다 찾아보라는 말이 많습니다 그래서 그냥 메모 같은거 필요없이 그때 이해만하고 넘어가도 진짜 괜찮을가요 뭔가 아직 초보자입장에서는 잊어먹을가 두렵습니다 예를 들면 바이트 와 웹팩의 차이 이런것도 암기를해둬야하는가 아닌 불안감 나중에 나혼자 만들수있을가? 같은불안이 좀 큽니다. 긴글 죄송합니다
