안녕하세요 위 제목 같이  import {} 중괄호 차이점 1:import useCounter from "../context/counter/useCounter";2: import {useCounter} from "../context/counter/useCounter"; 중괄호 할때와 안할때의 차이점을 알고 싶습니다. 문의 답변 부탁드립니다. 

 후 connect 를 시도하면 아래와 같이 권한 문제로 접속이 안되고 있습니다.  (source tree는 관리자 권한으로 실행 되고 있습니다.)강사님~무엇이 문제인지요? 

제공되는 react_code.zip 중에 ..D:\su\code\SECTION11\11-02 D:\su\code\SECTION11\11-03 안에 소스가 없네요.당연히 제가 작성하면 되겠지만...참조하는 차원에서.. ㅡㅡ;;소스를 얻을 수 있을까요? 다른 폴더안에는 소스가 제공되고 있는데 말이줘 .. 

구입을 했는데 ...아래 비활성화 된 강의 리스트는 뭔가요? 뒤 강의를 보고 싶거든요

강의 잘 듣고있습니다. 한 가지 궁금한 점이 있어 질문드립니다."App.tsx를 Provider로 감싸는 순간 그 아래 모든 컴포넌트가 서버 컴포넌트로서의 최적화 기회를 잃는다"는 부분이 잘 이해되지 않습니다.제가 알기로는 Provider를 children prop으로 받는 composition pattern으로 작성하면, Provider 자체는 Client Component여도 그 안에 들어가는 children은 Server Component로 유지될 수 있는 것으로 알고 있습니다. Next.js App Router의 RootLayout에서 <Providers>{children}</Providers> 형태로 쓰는 패턴이 그 예시라고 알고 있고요.이 경우에도 RSC 최적화 기회를 잃는다고 보시는 건지, 아니면 제가 놓치고 있는 다른 맥락이 있는지 궁금합니다.

안녕하세요. 설명하시는 개념들이 매우 어렵게 느껴집니다. 굉장히 기본 개념을 설명하고 계신 것 같은데요. 강의를 어떤 자세로 수강해야 할까요? 부분 부분 계속 끊어져 있으니 이해가 안 됩니다. 책을 구매해서 보면 도움이 될까요?  

해당 강의 수강중에 정환님께서 진행해주신 부분 그대로 똑같이 따라했는데 화면에서는 아예 아무것도 보이지않는.. 출력이 안됩니다..ㅠㅠ 무슨 문제일까요??예상은 api를 저장하는 auth.ts 부분부터 뭔가 잘못된거같은데 이유를 모르겠습니다.(그리고, 예외사항으로 import 부분의 빨간밑줄오류나 코드에서 오타가 아닌 빨간밑줄오류는 왜 생기는걸까요??ㅠ) 현재 진행중인 코드를 한번에 알아보기 쉽게 Github에 바로 올렸습니다.링크 : https://github.com/Skyllerrr안에 Repository의 첫 번째 프로젝트(onebite-SNS)입니다.

❗질문 작성시 꼭 참고해주세요에러 메세지에서 단서를 찾을 수 있는 경우가 많습니다. 에러 메세지를 읽고 한번 검색해보시는것을 추천드립니다.질문글을 작성하실때는, 현재 문제(또는 에러)와 코드나 github을 첨부해주세요.개발중인 OS, ReactNative, Node 버전 등의 개발환경을 알려주셔야합니다.에러메세지는 일부분이 아닌 전체 상황을 올려주세요. 일부만 보여주시면 답변이 어렵습니다. (에러 일부만 자르거나 일부만 복사하지말아주세요) 개발을 진행하면서, 사용자마다 서로 다른 핸드폰을 가지고 있고, 디바이스 별 화면 크기가 다릅니다. 이에 대한 반응형 UI대응은 어떻게 대응하는 것이 좋을까요?

안녕하세요 6.11 회원가입시 프로필 정보 자동 생성하기 강의중18:17 분 쯤에아래처럼 useProfileData(session?.user.id) -> useEffect 훅을 선언하는데처음에는 session?.user.id이 값이 없는데 useProfileData 훅을 먼저 부르는게 맞나요?저는 useEffect -> useProfileData 이 순서가 맞다고 생각해서요 원본export default function SessionProvider({ children }: { children: ReactNode }) { const session = useSession(); const setSession = useSetSession(); const isSessionLoaded = useIsSessionLoaded(); const { data: profile, isLoading: isProfileLoading, isPending, } = useProfileData(session?.user.id); useEffect(() => { supabase.auth.onAuthStateChange((event, session) => { setSession(session); }); }, []); if (!isSessionLoaded) return <GlobalLoader />; if (isProfileLoading) return <GlobalLoader />; return children; } 내 생각 export default function SessionProvider({ children }: { children: ReactNode }) { const session = useSession(); const setSession = useSetSession(); const isSessionLoaded = useIsSessionLoaded(); useEffect(() => { supabase.auth.onAuthStateChange((event, session) => { setSession(session); }); }, []); const { data: profile, isLoading: isProfileLoading, isPending, } = useProfileData(session?.user.id); if (!isSessionLoaded) return <GlobalLoader />; if (isProfileLoading) return <GlobalLoader />; return children; }

안녕하세요 강사님. 자바스크립트에 대한 기본을 어느 정도 공부하고 와야 할까요?

 // main.tsx import { StrictMode } from "react"; import { createRoot } from "react-dom/client"; import App from "./App.tsx"; import { ThemeProvider } from "styled-components"; const theme = { colors: { primary: "red", secondary: "#gray", }, fontSizes: { normal: "16px", large: "20px", }, }; createRoot(document.getElementById("root")!).render( <StrictMode> <ThemeProvider theme={theme}> <App /> </ThemeProvider> </StrictMode>, ); // App.tsx import styled, { keyframes, css } from "styled-components"; const boxShadowMixin = css` margin: 20px; box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.5); `; const fadeIn = keyframes` from { opacity: 0; } to { opacity: 1; } `; const Title = styled.h1<{ $color: string; $decoration: string }>` color: ${(props) => props.$color}; text-decoration: ${(props) => props.$decoration}; animation: ${fadeIn} 2s ease-in; `; const BigTitle = styled(Title)` font-size: 50px; `; const Wrapper = styled.section` padding: 2rem; border: 1px solid red; `; const BlueBorderWrapper = styled(Wrapper)<{ $shadow: boolean }>` border-color: ${(props) => props.theme.colors.primary}; ${(props) => props.$shadow && boxShadowMixin}; `; export default function App() { return ( <> <BlueBorderWrapper $shadow={true}> <Title $color="#00ff00" $decoration="line-through" as="p"> App Component </Title> <BigTitle $color="#0000ff" $decoration="underline"> App Component </BigTitle> </BlueBorderWrapper> </> ); } border-color: ${(props) => props.theme.colors.primary};적용하는 부분에서 에러가 발생합니다.Property 'colors' does not exist on type 'DefaultTheme'.혹시 문제가 있는걸까요?

안녕하세요 6.8 Zustand를 이용해 세션 관리하기4:52초에 타입 선언 부분에 타입 문의가 있어서요!아래처럼 차이가 뭔지 잘 모르겟네요 강사님은 as 타입선언으로 자주 쓰시던데 ai 물어보니 initailState: State 이 형식이 명시적 타입 선언 이라 더 엄격해서 추천한다고 하던데 as로 타입 단언 하는 이유가 있으신가요? const initailState: State = { isLoaded: false, session: null, }; const initailState = { isLoaded: false, session: null, } as State;

안녕하세요 강사님 강의들 잘 보고 있습니다.2026년에 구입했던 "한입 리액트 실전 라이브러리 키트 - Zustand, Tanstack Query, TailwindCSS" 강의 다시 보게 되면서 "한 입 크기로 잘라먹는 React.js 실전 프로젝트 - SNS 편" 강의도 구매해서 보고 싶어 졌는데 예전에 받았던 할인 쿠폰이 만료 처리 되어 사용할 수가 없네요. 너무 늦은 시점에 요청 드려 염치가 없지만 혹시 쿠폰 재발급이 가능한지 문의 드립니다. 감사합니다.수고하세요. 

useMutation 적용후,새로운 아이템을 추가하면,아이템은 추가 되지만 안에 컨텐츠 내용은 안나오고, 삭제도 안되네요?어디를 놓친걸까요??  

안녕하세요,강의 소개에서 지속적인 업데이트를 강조하고 있고 이후 올해 1분기 내 추가 강의 업로드 예정이라는 안내를 보고 기다리고 있습니다.이제 2분기 중반임에도 별도 추가 강의 업로드나 공지가 없어서 일정이 변경된 것인지 궁금하여 문의드립니다.

다른분들이 이미 80강 내용없음 및 중복인 부분들 문의를 올렸는데 왜 개선되는게 하나도 없나요????최소한 모가 어떻다는 내용은 전달해 주셔야 하는거 아닌가요??

( 해당 섹션 수강하던 2026-04-03 기준 )npx shadcn@latest init 명령어 입력하면 2가지 선택지를 제공해줘요.Select a component library 라고 떠요선택지에 Radix, Base 있는데 Radix가 흔히 아는 Shadcn/ui 라고 합니다.Which preset would you like to use?Nova (아이콘 Lucide, 폰트 Geist)Vega (아이콘 Lucide, 폰트 Inter)Maia (아이콘 Hugeicons, 폰트 Figtree)Lyra (아이콘 Phosphor, 폰트 JetBrains Mono)Mira (아이콘 Hugeicons, 폰트 Inter)Luma (아이콘 Lucide, 폰트 Inter)강의에선 7:16 참고 하시면 base color 고르라는 선택지가 나왔고, 강사님께선 Neutral 고르셨습니다. 저는 저게 안나와서 gemini 에게 물어봤고 이와 같은 답변을 얻어서 진행했습니다. 혹시나 참고가 될까싶어 작성합니다.

session.tsimport type { Session } from "@supabase/supabase-js"; import { create } from "zustand"; import { combine, devtools } from "zustand/middleware"; type State = { isLoaded: boolean; session: Session | null; }; const initialState = { isLoaded: false, session: null, } as State; const useSessionStore = create( devtools( combine(initialState, (set) => ({ actions: { setSession: (session: Session | null) => { set({ session, isLoaded: true }); }, }, })), { name: "sessionStore", }, ), ); export const useSession = () => { const session = useSessionStore((store) => store.session); return session; }; export const useIsSessionLoaded = () => { const isSessionLoaded = useSessionStore((store) => store.isLoaded); return isSessionLoaded; }; export const useSetSession = () => { const setSession = useSessionStore((store) => store.actions.setSession); return setSession; }; App.tsximport { Button } from "@/components/ui/button"; import RootRoute from "./root-route"; import supabase from "@/lib/supabase"; import { useEffect } from "react"; import { useSetSession } from "@/store/session"; export default function App() { const setSession = useSetSession(); useEffect(() => { //console.log("111"); supabase.auth.onAuthStateChange((event, session) => { setSession(session); }); }, []); return <RootRoute />; } 코드는 강의와 동일하게 잘따라간 것 같은데개발자 도구 에서 session이랑 isLoaded가 안보입니다.새로고침을 해도, 탭을 껏다 켜도, 리액트를 껏다 켜도,제미나이한테 물어봐도 이게 해결이 안됩니다..... +추가App.tsximport { Button } from "@/components/ui/button"; import RootRoute from "./root-route"; import supabase from "@/lib/supabase"; import { useEffect } from "react"; import { useIsSessionLoaded, useSession, useSetSession } from "@/store/session"; export default function App() { const setSession = useSetSession(); const session = useSession(); const isLoaded = useIsSessionLoaded(); useEffect(() => { //console.log("111"); supabase.auth.onAuthStateChange((event, session) => { setSession(session); }); }, []); useEffect(() => { console.log("현재 세션 상태:", { session, isLoaded }); }, [session, isLoaded]); // 값이 바뀔 때마다 실행됨 return <RootRoute />; } 이렇게 하고 새로고침하면 콘솔에는 찍히긴 합니다 단순한 리덕스 툴킷 버그인지콘솔에 찍히니까 넘어가도 상관없는지 모르겠습니다. 

if (previewImage) { const formData = new FormData(); formData.append("file", previewImage); formData.append("upload_preset", "react_blog"); // formData.append("api_key", "688125195814112"); // formData.append("api_secret", "S2HFi155abf2HkDpkcgArvWP5HE"); // formData.append("public_id", "87f7932d-354d-4a7f-8f39-5dbf751f1c46"); const { data } = await axios.post( "https://api.cloudinary.com/v1_1/dptshe37e/image/upload", { formData }, ); console.log(data); https://api.cloudinary.com/v1_1/dptshe37e/image/upload  { "error": { "message": "Upload preset must be specified when using unsigned upload" }}일단 강의가 정말 훌륭합니다. 잘 듣고 있고 정말이지 많은 도움이 되고 있습니다.게시글 등록하기 -4 강을 듣고 있는데 파일 업로드 부분에서 좀 막히네요.요청 시 오류가 나는데요. 여러가지 방향으로 시도해 봤는데 잘 안되네요. 강의 촬영 시점하고 cloudnary 가 개편되었는데 특별하게 다른 점은 없어 보입니다. 일단 업로드 부분은 보류하고 다음 강의 들어야겠네요. 한번 살펴 봐 주시면 감사하겠습니다. 

강의 잘 듣고있습니다. tailwindcss@v4로 변경되고 이후론 사용을 안해봐서 이번 강의가 매우 도움이 되고있습니다. 섹션2 모든 챕터 수강 이후 퀴즈를 푸는데 문제 1개가 강의에 사용되는 버전인 v4가 아닌 v3에 대한 내용이 있는 것 같아서 Q&A 올렸습니다.공식문서 - docs - getting started - upgrade guide에서도 확인 가능합니다. 강의 감사합니다.