import { ChangeEvent, useState } from "react"; // 리팩토링 const Board = () => { const [writer, setWriter] = useState(""); const [title, setTitle] = useState(""); const [content, setContent] = useState(""); const [isActive, setIsActive] = useState(false); const onChangewriter = (event:ChangeEvent<HTMLInputElement>) => { setWriter(event.target.value); if (event.target.value !== "" && title && content) return setIsActive(true); setIsActive(false); }; const onChangeTitile = (event:ChangeEvent<HTMLInputElement>) => { setTitle(event.target.value); if (writer && event.target.value && content) return setIsActive(true); setIsActive(false); }; const onChangeContent = (event:ChangeEvent<HTMLInputElement>) => { setContent(event.target.value); if (writer && title && event.target.value) return setIsActive(true) setIsActive(false); }; const onClickSubmit = (event:MouseEvent<HTMLButtonElement>) => [ console.log(writer), console.log(title), console.log(content), alert("게시물 등록이 완료되었습니다"), ]; return ( <> 작성자 : <input type="text" onChange={onChangewriter} /> <br /> 제목 : <input type="text" onChange={onChangeTitile} /> <br /> 내용: <input type="text" onChange={onChangeContent} /> <br /> <button onClick={onClickSubmit} style={{ backgroundColor: isActive === true ? "yellow" : "none" }} > 등록 </button> </> ); }; export default Board;

import { ChangeEvent, useState } from "react"; // 리팩토링 const Board = () => { const [writer, setWriter] = useState(""); const [title, setTitle] = useState(""); const [content, setContent] = useState(""); const [isActive, setIsActive] = useState(false); const onChangewriter = (event:ChangeEvent<HTMLInputElement>) => { setWriter(event.target.value); if (event.target.value !== "" && title && content) return setIsActive(true); setIsActive(false); }; const onChangeTitile = (event:ChangeEvent<HTMLInputElement>) => { setTitle(event.target.value); if (writer && event.target.value && content) return setIsActive(true); setIsActive(false); }; const onChangeContent = (event:ChangeEvent<HTMLInputElement>) => { setContent(event.target.value); if (writer && title && event.target.value) return setIsActive(true) setIsActive(false); }; const onClickSubmit = (event:MouseEvent<HTMLButtonElement>) => [ console.log(writer), console.log(title), console.log(content), alert("게시물 등록이 완료되었습니다"), ]; return ( <> 작성자 : <input type="text" onChange={onChangewriter} /> <br /> 제목 : <input type="text" onChange={onChangeTitile} /> <br /> 내용: <input type="text" onChange={onChangeContent} /> <br /> <button onClick={onClickSubmit} style={{ backgroundColor: isActive === true ? "yellow" : "none" }} > 등록 </button> </> ); }; export default Board;

create-react-app my app 실행 시 아래와 같은 에러가 뜹니다. Installing template dependencies using npm...npm error code ERESOLVEnpm error ERESOLVE unable to resolve dependency treenpm errornpm error While resolving: my-app@0.1.0npm error Found: react@19.0.0npm error node_modules/reactnpm error react@"^19.0.0" from the root projectnpm errornpm error Could not resolve dependency:npm error peer react@"^18.0.0" from @testing-library/react@13.4.0npm error node_modules/@testing-library/reactnpm error @testing-library/react@"^13.0.0" from the root projectnpm errornpm error Fix the upstream dependency conflict, or retrynpm error this command with --force or --legacy-peer-depsnpm error to accept an incorrect (and potentially broken) dependency resolution.npm errornpm errornpm error For a full report see:npm error C:\Users\phhyu\AppData\Local\npm-cache\_logs\2025-01-06T07_30_45_069Z-eresolve-report.txtnpm error A complete log of this run can be found in: C:\Users\phhyu\AppData\Local\npm-cache\_logs\2025-01-06T07_30_45_069Z-debug-0.lognpm install --no-audit --save @testing-library/jest-dom@^5.14.1 @testing-library/react@^13.0.0 @testing-library/user-event@^13.2.1 web-vitals@^2.1.0 failed

아랫분들처럼 강의를 사두고 이제야 수강하다가 쿠폰 관련한 공지를 늦게 보게 되었는데요.혹시 아직 쿠폰 발급이 가능할까요?

4분 20초에 input 태그에 줄바꿈되는 단축키가 뭔가요? 🚨 아래의 가이드라인을 꼭 읽고 질문을 올려주시기 바랍니다 🚨질문 하시기 전에 꼭 확인해주세요- 질문 전 구글에 먼저 검색해보세요 (답변을 기다리는 시간을 아낄 수 있습니다)- 코드에 오타가 없는지 면밀히 체크해보세요 (Date와 Data를 많이 헷갈리십니다)- 이전에 올린 질문에 달린 답변들에 꼭 반응해주세요 (질문에 대한 답변만 받으시고 쌩 가시면 속상해요 😢)질문 하실때 꼭 확인하세요- 제목만 보고도 무슨 문제가 있는지 대충 알 수 있도록 자세한 제목을 정해주세요 (단순 단어 X)- 질문의 배경정보를 제공해주세요 (이 문제가 언제 어떻게 발생했고 어디까지 시도해보셨는지)- 문제를 재현하도록 코드샌드박스나 깃허브 링크로 전달해주세요 (프로젝트 코드에서 문제가 발생할 경우)- 답변이 달렸다면 꼭 확인하고 반응을 남겨주세요- 강의의 몇 분 몇 초 관련 질문인지 알려주세요!- 서로 예의를 지키며 존중하는 문화를 만들어가요. - 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.

const shoesClick = () => { const intersects = raycaster.intersectObjects( gltf.scene.children, true ); };강의에서는 위와 같이 raycaster.intersectObject 메서드 호출시에 scene에 children을 넘겨주시는데 클릭 이벤트의 eventObject 를 넘겨주지 않았는데도 raycaster에 마우스 방향을 set 가능한가요?

12.8강) edit 컴포넌트 작성할때 저는 diary 컴포넌트처럼edit 컴포넌트 안에useParams 훅 호출해서import { useParams } from "react-router-dom"; const Edit = () => { const params = useParams(); return <div>{params.id}Edit</div>; }; export default Edit; 이렇게 설정해줘야route 설정할때도 id에 따른 페이지가 잘 보이던데저만 그런가요 아니면 강의에선 스킵이 된건가여

Test suite failed to run ReferenceError: TextEncoder is not defined 1 | 2 | import "@testing-library/jest-dom"; > 3 | import * as nock from "nock"; | ^ 4 | import { QueryClient, QueryClientProvider } from "@tanstack/react-query"; 5 | import { 6 | fireEvent, at Object.<anonymous> (node_modules/@mswjs/interceptors/src/utils/bufferUtils.ts:1:17) at Object.<anonymous> (node_modules/@mswjs/interceptors/lib/browser/index.js:4:24) at Object.<anonymous> (node_modules/nock/lib/intercept.js:13:30) at Object.<anonymous> (node_modules/nock/lib/recorder.js:8:44) at Object.<anonymous> (node_modules/nock/lib/back.js:4:18) at Object.<anonymous> (node_modules/nock/index.js:3:14) at Object.<anonymous> (src/__test__/Login.spec.tsx:3:1) ReferenceError: TextEncoder is not defined에러가 발생합니다.node -v => v18.18.2노드 버전이랑, util 라이브러리를 사용해 문제를 해결하려 했지만, 잘 되지 않아 질문드립니다.

링크는 chapter16으로 되어있는데 클릭하면 chapter14 입니다.

1.next auth core를 설치하는 이유가 있을까요 ?prisma를 사용중인데 beta 버전을 설치하면 prisma adapter와 호환성이 안된다고 하는데 4버전을 사용해도 될까요?4버전 사용시 export const {auth} 와 같은 코드가 호환될까요?그리고 middleware 에서 session이 아닌 getToken 으로 토큰을 불러와도 상관 없을까요 ?

🚨 아래의 가이드라인을 꼭 읽고 질문을 올려주시기 바랍니다 🚨질문 하시기 전에 꼭 확인해주세요- 질문 전 구글에 먼저 검색해보세요 (답변을 기다리는 시간을 아낄 수 있습니다)- 코드에 오타가 없는지 면밀히 체크해보세요 (Date와 Data를 많이 헷갈리십니다)- 이전에 올린 질문에 달린 답변들에 꼭 반응해주세요 (질문에 대한 답변만 받으시고 쌩 가시면 속상해요 😢)질문 하실때 꼭 확인하세요- 제목만 보고도 무슨 문제가 있는지 대충 알 수 있도록 자세한 제목을 정해주세요 (단순 단어 X)- 질문의 배경정보를 제공해주세요 (이 문제가 언제 어떻게 발생했고 어디까지 시도해보셨는지)- 문제를 재현하도록 코드샌드박스나 깃허브 링크로 전달해주세요 (프로젝트 코드에서 문제가 발생할 경우)- 답변이 달렸다면 꼭 확인하고 반응을 남겨주세요- 강의의 몇 분 몇 초 관련 질문인지 알려주세요!- 서로 예의를 지키며 존중하는 문화를 만들어가요. - 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 안녕하세요 선생님강의 잘 듣고 있습니다! 1.8 연산자 2 에서 수업을 듣고 저 혼자 해보는 중에 선생님께서 작성하신 문법과 다르게 작성한 식에서 정답이 출력 되었습니다.제가 적은 문법이 추후에 다른 문법이나 개발을 하는데 충돌이 나거나 에러가 날 수 있는 경우가 생길 지 여쭤보고 싶어서 문의 남깁니다! 제가 적은 식은 아래와 같습니다. console 에 찍힌 값 : 10 입니다.var1 = null; var2 = 10; var3 = 30; console.log((var4 = var1 ?? var2));

React와 Vue(2 기준) 두 뷰 라이브러리 | 프레임워크를 모두 사용해본 현직 실무 풀스택 (백엔드는 자바 스프링) 개발자 입니다.아직 실무에서 타입스크립트 도입을 하지 않았고, 타입스크립트에 대한 관심도가 매우 높아 기대하는 마음에 해당 강의를 신청하고 듣게 되었습니다.제가 질문하고싶은 JSX.Element 타입 관련해서 의문이 드는점은, 다른 사람들이 짜놓은 Typescript React 깃허브 프로젝트들을 찾아 보게되면 Props나 Children을 사용할때는 강의에서 알려주신 JSX.Element 타입 대신 React.FC 혹은 ReactNode, ReactElement 등 다른 타입을 제너릭과 함께 사용하여 작성하고 있는것을 본적이 있습니다.구글링을 조금 해 봤더니 무조건 적으로 JSX.Element 타입만을 선언하는것은 아니더라구요. 왜 이런 필수개념이 빠져있는지... 저는 그런것들에 대한 궁금증도 많았기에, 이 강의를 결제했는데.... 뭔가 강의를 잘못 선택했고, 리액트에서 사용하는 타입스크립트 타입에 잘못 접근하고 있는 기분이 듭니다..회사에서 비즈니스 계정 입력해서 지원금 받아서 강의를 신청했는데, 이거 보고 내용 정리해서 보고서와 함께 실무자들 앞에서 발표해야 합니다...........발표 할 때 그에 대한 리뷰 질문들이 들어오게 되면 출처 밝히고 해당 강의에서는 이런 식으로 가르쳐줬다. 라고 말하면 얼굴 공개하면서 까지 자부하시고 찍은 강사님 커리어와 프라이드에도 그렇게 좋은 영향은 가지 않을것이라 생각이 듭니다..분명 AI가 답변을 달텐데 강사님 다시한번 확인해주시고 답변 달아주시고 이 부분에 대해 부연 설명 대신 강의 영상 자체를 조금 더 디테일하게 수정해서 보안해주시길 바랍니다.매우 실망스러워요....

.

리액트와 뷰 모두 포함해서 프로젝트를 생성하는 가이드영상이 아에 없는거같은데요.그동안 타입스크립트를 접목하지 않은 react와 vue만 사용했고 경험이 있는 상태에서typescript를 리액트와 뷰만의 생태계에서 어떻게 사용하는지 따라해보려고하는데, 백문이 불여일타 라고 프로젝트 초기 세팅 가이드 영상은 기본이라고 생각합니다...;;; 실망이 매우 크네요....혹시 pdf로라도 없는건가요????세팅조차 없이 그냥 바로 본론으로 들어가버리면...이건 좀 아닌거같아요.돈 날린 기분입니다... 이 부분에 대해서 추가 영상이나 교안 등 개선이 필요할거 같습니다.강사님 직접 확인하시고 답변주세요;;

안녕하세요.강의 정말 재밌게 보고 있습니다. 딱 두 가지 몇번을 돌려봐도 궁금증이 풀리지 않아 문의드립니다.(* Page Router 를 사용하는 Next 14버전 기준)1) ISR 질문ISR은 기본적으로 SSR의 형태라고 생각 되는데(빌드 타임에 페이지를 생성해놓는것이..)일정 시간을 두고 페이지를 재 생성 한다는 게 이해가 안 갑니다.. 이미 빌드를 마치고 서버에 배포를 했다고 가정하고(제가 원래 백엔드 개발자라..)그 후에 페이지가 서버에서 재 생성되면 빌드가 다시 한번 이뤄지는건가요..?(빌드가 계속해서 이뤄질수는 없을텐데..) 아니면 처음에는 미리 생성 된 페이지를 전달해주고 이후로는 SSR 형태로페이지가 생성되는걸까요? 데이터가 계속 최신으로 변경 되니전체 페이지가 SSG일수는 없을거고(처음 요청에 응답한 페이지만 미리 생성된 페이지일텐데) 초기 SSG에 변경된 데이터만 SSR형식으로 만들어지는 건지..상식적으로 리빌드가 계속 될일은 없는데 페이지가 새로 생성이 된다고하니빌드를 안 했는데 페이지가 생성될수 있나 싶고..제가 너무 틀에 갖혀서.. 2) 동적 페이지 + SSG 방식으로 렌더링하기이것도 비슷한 결의 질문인 것 같은데요 fallback 옵션을 true로 했을 때 서버에서 필요한 작업을 마치면,그 이후로는 캐싱이 되어서 없던 요청에 대한 페이지가반쪽짜리 SSG에서 완전한 SSG로 작동하는건지 궁금합니다. 그리고 만약 캐싱이 되는게 맞다면 서버에서 캐싱이 되는걸까요? 추운 날씨에 감기조심하세요 감사합니다.

- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 안녕하세요. npx create-react-app my-app 명령어를 입력하면 어떤 에러가 발생하는 것도 아니고, 성공했다는 메시지도 나오지 않고 다시 명령어를 입력할 수 있는 상태로 돌아갑니다. nodeJs 버전은 22.12.0 이고 npm 버전은 10.9.0 입니다.에러가 발생하지 않으니 해결 방법을 찾기가 쉽지 않아서 질문 남깁니다. 감사합니다.

if(타이머 === "아직실행안함") 상태에서스크롤퍼센트가 >= 0.7 이면 타이머 값을 다른 값으로 변경해주어야타이머 = setTimeout(()=>{타이머="아직실행안함"},1000)이 코드로 스로틀링 되는게 아닌가요?영상에서는 타이머 값을 다른 값으로 변경해주지 않는데 이러면 타이머 = setTimeout(()=>{타이머="아직실행안함"},1000)이 코드를 추가하기 전과 같지 않나요?

안녕하세요. 프로젝트 세팅을 진행하고 파일목록을 보는데, .eslintrc.json 파일은 없고 eslint.config.mjs 파일이 있는 것을 확인했습니다. 이대로 진행을 해도 되는 것일까요..?

안녕하세요, 비슷한 유형의 질문이 이미 있어 저도 글을 남겨봅니다. 미리 구매해둔 후 이제 듣기 시작하려 하니, 새로운 교육과정으로 리뉴얼 되었다고 하는데, 시기를 놓쳐 쿠폰 혜택을 받지 못했습니다. 해당 강의에 기대를 많이 하고 있었는데, 리뉴얼된 버전으로 듣지 못한다는 사실이 안타까워 혹시 쿠폰을 받을 다른 방법이 없을지 문의드립니다. 감사합니다.

강사님 안녕하세요, 백엔드 서버 연결하고 게시물(PostForm.tsx) 올리는 부분에서 오류가 발생하여 질문드립니다. (섹션5 - 게시글 업로드 완성)hydration 이슈를 찾아봤는데 (https://velog.io/@jhplus13/NextJS-React-Hydration-Error-%ED%95%B4%EA%B2%B0%EA%B8%B0) typeof window과 관련있는거 같은데 혼자 해결하기 어려워 링크 첨부드립니다..!오류해결을 위해 (hydration / PostRecommends.tsx) 해당 부분을 수정하였습니다..!변수입력확인(Date.now(),Math.random(), new Date()) + faker 해당부분은 주석처리 했습니다.태그 중첩 확인, layout.tsx font 연결 확인 [콘솔 에러]intercept-console-error.js:56 A tree hydrated but some attributes of the server rendered HTML didn't match the client properties. This won't be patched up. This can happen if a SSR-ed Client Component used: - A server/client branch `if (typeof window !== 'undefined')`. - Variable input such as `Date.now()` or `Math.random()` which changes each time it's called. - Date formatting in a user's locale which doesn't match the server. - External changing data without sending a snapshot of it along with the HTML. - Invalid HTML tag nesting. It can also happen if the client has a browser extension installed which messes with the HTML before React loaded. https://react.dev/link/hydration-mismatch ... <HotReload assetPrefix=""> <ReactDevOverlay state={{nextId:1, ...}} dispatcher={{...}}> <DevRootNotFoundBoundary> <NotFoundBoundary notFound={<NotAllowedRootNotFoundError>}> <NotFoundErrorBoundary pathname="/home" notFound={<NotAllowedRootNotFoundError>} notFoundStyles={undefined} ...> <RedirectBoundary> <RedirectErrorBoundary router={{...}}> <Head> <link> <RootLayout> <html lang="ko" className="__variable..."> <body className="__className_fde3a9" - cz-shortcut-listen="true" > ... ...[Fragment key값 오류내용]// package.json { "name": "zcom", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "next lint" }, "dependencies": { "@auth/core": "^0.27.0", "@fortawesome/fontawesome-svg-core": "^6.7.1", "@fortawesome/free-solid-svg-icons": "^6.7.1", "@fortawesome/react-fontawesome": "^0.2.2", "@tanstack/react-query": "^5.62.11", "@vanilla-extract/css": "^1.16.1", "@vanilla-extract/recipes": "^0.5.5", "@vanilla-extract/sprinkles": "^1.6.3", "classnames": "^2.5.1", "clsx": "^2.1.1", "dayjs": "^1.11.13", "next": "^15.0.4", "next-auth": "^5.0.0-beta.25", "react": "^19.0.0", "react-dom": "^19.0.0", "react-intersection-observer": "^9.14.1", "react-textarea-autosize": "^8.5.6", "zustand": "^5.0.2" }, "devDependencies": { "@faker-js/faker": "^9.3.0", "@tanstack/react-query-devtools": "^5.62.11", "@types/node": "^20", "@types/react": "^19", "@types/react-dom": "^19", "@vanilla-extract/next-plugin": "^2.4.7", "@vanilla-extract/webpack-plugin": "^2.3.15", "msw": "^2.6.8", "typescript": "^5" }, "msw": { "workerDirectory": [ "public" ] } }