setCount가 전역변수에 없으면 setCount is not defined; 오류가 발생합니다.Codex가 Counter()는 문자열을 반환하고 setCount는 Counter의 지역변수라서 브라우저가 setCount를 전역에서 찾기 때문에 나타나는 오류라고 합니다. <--이부분이 어렵습니다.아래처럼 변경하거나 addEventListener의 콜백으로 구현하라고 하네요.const states = []; let cursor = 0; let setCount; function useState(initialValue) { const index = cursor; cursor++; if (states[index] === undefined) { states[index] = initialValue; } const setState = (newValue) => { states[index] = newValue; cursor = 0; render(); }; return [states[index], setState]; } function Counter() { const [count, _setCount] = useState(0); setCount = _setCount; return `<button onClick="setCount(${count + 1})">${count}</button>`; } function render() { const root = document.querySelector("#root"); cursor = 0; root.innerHTML = Counter(); } render(); 

블로그에 공부한것들을 간단하게 정리를 해도 괜찮을까요?

상태(State) 의 정의가 "시간이 지남에 따라 변할 수 있는 데이터" 라고 하셨는데, 여기서 "시간" 이 무엇을 의미하나요?

안녕하세요 위 제목 같이  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 안에 소스가 없네요.당연히 제가 작성하면 되겠지만...참조하는 차원에서.. ㅡㅡ;;소스를 얻을 수 있을까요? 다른 폴더안에는 소스가 제공되고 있는데 말이줘 .. 

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

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

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

 // 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'.혹시 문제가 있는걸까요?

Error starting ApplicationContext. To display the condition evaluation report re-run your application with 'debug' enabled.2026-04-28T17:27:55.938+09:00 ERROR 27483 --- [prac] [ main] o.s.b.d.LoggingFailureAnalysisReporter :

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 가 개편되었는데 특별하게 다른 점은 없어 보입니다. 일단 업로드 부분은 보류하고 다음 강의 들어야겠네요. 한번 살펴 봐 주시면 감사하겠습니다. 

import axios from "axios"; import { Heart } from "lucide-react"; import { useEffect, useState, useTransition } from "react"; interface Posts { id: number; isLike: boolean; } export default function App() { const [posts, setPosts] = useState<Posts[]>([]); const [isPending, startTransition] = useTransition(); useEffect(() => { startTransition(async () => { const { data } = await axios.get("http://localhost:3000/posts"); setPosts(data); }); }, []); if (isPending) return <h3>loading..</h3>; return ( <> {/* fill: 'none', stroke: 'currentColor' */} {/* fill: 'rgb(255,0,0)', stroke: 'rgb(255,0,0)' */} {posts.map((post) => { <Heart key={post.id} fill={post.isLike ? "rgb(255,0,0)" : "none"} stroke={post.isLike ? "rgb(255,0,0)" : "currentColor"} />; })} </> ); }   posts에 값이 설정되지 않는데요. 이런 경우가 처음이라 다른 예제는 이런 적이 없었습니다.몇 시간에 해보는데 뭐가 잘못되었는지 잘 모르겠네요.

배워보려고 결제하고 듣는중입니다. create-react-app 부터 적용되지가 않네요 Deprecate되었다고 나오고 React-Router에서 각페이지 분기시부터 에러가 발생하네요 각페이지 마다 수업에 따라가려면 버전을 낮춰야 하는건가요?

안녕하세요, 디스코드 초대장이 올바르지 않다고 합니다.혹시 디스코드 채널을 닫으신걸까요?

학습 관련 질문을 남겨주세요 성실히 답변해드립니다!강의와 관련이 없어도 유사한 학습 질문도 괜찮습니다강의에서 나오는대로 따라 모두 설치를 했습니다. 근데 제 vscode에서는 강의처럼 자동 완성을 강의처럼 제공해주지 않고 있어요... 혹시 어떤 익스텐션인지 알 수 있을까요? 그리고 fastapi와 react에서 더 유용한 익스텐션들이 있다면 알고 싶어요!

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.

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

보통 상위 컴포넌트에 함수를 정의하고 하위 컴포넌트에서는 이벤트가 발생했을 때 상위 컴포넌트의 함수를 호출하는 방식이 맞는건가요?강의를 보니 하위 컴포넌트에서도 함수를 정의하는 것 같아서 질문드립니다. 어느 쪽에 함수를 정의하는 것이 맞는 것인지 궁금합니다.

안녕하세요 axios가 fetch보다 편리해 보여서 거의 axios만 사용할 것 같은데,그래도 fetch를 사용해야 하는 상황이 존재하나요?실제 현업에서는 어떤 쪽을 더 많이 사용하나요?