안녕하세요.컴포넌트 최적화 하는 부분에서 질문있습니다. 10.3강에서 대략 5분 40초쯤에 Header 컴포넌트에 memo 기능을 사용해서 최적화 한 뒤에, 체크박스를 클릭하면서 헤더 컴포넌트가 리렌더링이 일어났는지에 대해 확인하는 부분이 있습니다. 질문사항은 memo 기능을 통해 최적화를 하던 안하던 개발자 도구에서 Header 컴포넌트가 항상 리렌더링이 일어나는것 같은데 어떻게된걸까요? 헤더부분이 계속 노란색으로 뜨면 리렌더링이 일어났다는걸로 보이는데 강의 영상에서도 다른 컴포넌트와 동일하게 노란색으로 변경됩니다. 강의에서 TodoItem을 커스텀한 부분은 강의대로 적용됐습니다.(이부분은 리렌더링이 발생하지 않습니다.)

위와 같이 노드와 npm 이 을 설치하였습니다. 그리고 나서 PS C:\Users\Kim_Seung_Yeon> npx create-react-app my-app Creating a new React app in C:\Users\Kim_Seung_Yeon\my-app. Installing template dependencies using npm... npm error code ERESOLVE npm error ERESOLVE unable to resolve dependency tree npm error npm error While resolving: my-app@0.1.0 npm error Found: react@19.0.0 npm error node_modules/react npm error react@"^19.0.0" from the root project npm error npm error Could not resolve dependency: npm error peer react@"^18.0.0" from @testing-library/react@13.4.0 npm error node_modules/@testing-library/react npm error @testing-library/react@"^13.0.0" from the root project npm error npm error Fix the upstream dependency conflict, or retry npm error this command with --force or --legacy-peer-deps npm error to accept an incorrect (and potentially broken) dependency resolution. npm error npm error npm error For a full report see: npm error C:\Users\Kim_Seung_Yeon\AppData\Local\npm-cache\_logs\2024-12-10T07_05_37_613Z-eresolve-report.txt npm error A complete log of this run can be found in: C:\Users\Kim_Seung_Yeon\AppData\Local\npm-cache\_logs\2024-12-10T07_05_37_613Z-debug-0.log `npm 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크리에이트 하게되면 위와같은 에러가 뜨네요 ... 어떻게 처리해야 할까요 ?

수강평 적었는데 쿠폰이 안들어와서 문의 드려요!

안녕하세요! 1~3 파트 까지 완강했고..다른 강의자보다 범쌤 강의가 저에게 너무 잘 맞아서..범쌤 다음 강의만 기다리고 있습니다 ㅠ ㅅ ㅠ 다음 강의 오픈 일정 예정이 언제쯤 일까요?! ㅠ

init() { window.addEventListener('scroll', () => { this.scrollRunHandler(); this.scrollPosition(this.mainElem); }); } scrollRunHandler() { clearTimeout(this.scrollState); if (!this.scrollState) { this.mainElem.classList.add('running'); } this.scrollState = setTimeout(() => { this.scrollState = false; this.mainElem.classList.remove('running'); }, 500); } scrollPosition = (elem) => { if (elem.lastScrollTop > window.scrollY) { // 스크롤을 아래로 this.mainElem.dataset.direction = 'backward'; } else { // 스크롤 위로 this.mainElem.dataset.direction = 'forward'; } elem.lastScrollTop = window.scrollY; } 생성자 함수를 클래스 함수로 변경하면서 this가 character를 가리켜야 되는데 window를 가리키는 문제가 생겨서 변수를 그냥 넣어줘서 작동은 하는데 이렇게 하는게 맞는지 궁금합니다.

 혹시 이 강의에서 쓴 ppt나 pdf파일은 제공 못받을까요 ..?

강의 재밌게 잘 들었습니다!다름아니오라 감정 일기장 실습 중 section12에서 궁금한 것이 생겼습니다생성된 일기를 삭제하면 "일기를 정말 삭제할까요? 다시 복구되지 않아요!" 컨펌 다이얼로그가 나타나는 건 잘됩니다.근데 ok 버튼을 클릭하면 바로 home 페이지로 이동하지 않고"존재하지 않는 일기입니다."라는 얼럿 다이얼로그가 그 다음으로 뜨고나서 ok 버튼을 클릭해야 home 페이지로 이동하게 됩니다.올려주신 정환님의 깃헙 소스 파일을 다운받아 실행시키면 이런 문제는 발생하지 않아서 어디를 고쳐야할지 막막합니다.제 소스 코드는 링크에 달아두었습니다.답변해주셔서 감사합니다!

안녕하세요! 강의 잘 수강하고 있습니다.강사님 코드를 따라하면서 하고 있는데,사진처럼 eslint에서 context를 따로 파일로 분리하여 관리하는 것을 하는 경고 메시지가 떠서 질문 드립니다.그래서 제가 context를 분리하려고 구글링을 해봤는데 잘 되지 않아서 혹시 분리는 어떻게 하면 될지 질문드립니다!

싱글통 강의에서 숙제에 대한 답변도 볼 수있는 곳이 있을까요?

제목이 곧 내용입니다

코드 관련 질문은 아래와 같이 '코드블럭' 기능을 이용해주세요!+ 오류 메세지도 함께 올려주시면 좋아요 🙂npm error code ENOENT npm error syscall open npm error path C:\Users\사용자이름\Desktop\animal_album_Main\animal_album-3\package.json npm error errno -4058 npm error enoent ENOENT: no such file or directory, open 'C:\Users\사용자이름\Desktop\animal_album_Main\animal_album-3\package.json' npm error enoent This is related to npm not being able to find a file. npm error enoent npm error A complete log of this run can be found in: C:\Users\사용자이름\AppData\Local\npm-cache\_logs\2024-12-06T08_26_22_967Z-debug-0.log 안녕하세요 질문드립니다몇일동안 npm init 떄문에 질문드립니다 npm 설치시 해당 프로젝트 파일이 c드라이브 안에만 있어야 되는건가요 ?1번 바탕화면에 프로젝트가 있을떄도 실행이 안됩니다2번 c드라이브 -> User -> (사용자이름) -> github-> 해당 폴더 -> 프로젝트 폴더3번 c드라이브 -> 프로젝트 폴더 3번일때만 되고 1,2번일때는 npm init 설치가 안되는데2번도 가능하게 할려면 어떻게 해야하는지 궁금합니다

3분 40초node -vnpm -v 은 다 되는데 init y 는 안됩니다 ..

class Parents { // 좁은 파라미터 method(name: string, test: string) { // 넓은 반환 타입 return { key: "" }; } } class Child extends Parents { // 넓은 파라미터 override method(name: string) { // 좁은 반환 타입 return { key: "", name: "" }; } } 안녕하세요,리스코프 치환원칙을 보니 반,공변성의 원칙과 같이매개변수는 반공변성을 리턴은 공변성을 가지는 것 같은데, T<child> -> T<parents> 개념이 되는 타입의 정의 원칙을 리스코프 치환 원칙이라 하는 것일까요? 

안녕하세요....강의를 한번 다 듣고 다시 복습을 해보려고 하는데 처음부터 막혀버리네요ㅠㅠnode 를 설치했고, 작업폴더를 만든후 VS CODE 에서 오픈폴더를 했습니다. 터미널창에서 npm init 을 실행해서 엔터를 쳐서 완료했구요,간단하게 문장넣고 확인하는 부분에서부터 나오지를 않아서요 ㅠㅠ아래 질문을 검색해보니 비슷한 질문이 있어서 찾아봤는데요,작업폴더명이 혹시나 한글이면 안되나 싶어서 영문으로도 해봤는데 똑같이 안되구요윈도우계정 이름도 한글이 아니고 영문입니다. 혹시 외장하드에서 하면 안되는걸까요?외장하드에서 한글폴더면이 혹시 안되는건지요....예를들어 외장하드>리액트>1-node 이런식이어서 안되는걸까요?  

{ "files": [], "references": [ { "path": "./tsconfig.app.json" }, { "path": "./tsconfig.node.json" } ], "compilerOptions": { "baseUrl": ".", "paths": { "@components/*": ["src/components/*"] } }, "types": ["node"] }import { Canvas } from "@react-three/fiber"; import { OrbitControls } from "@react-three/drei"; import ShowRoom from "@components/three/ShowRoom"; export default function Home() { return ( <> <Canvas> <axesHelper args={[5]} /> <gridHelper /> <OrbitControls /> <directionalLight position={[3, 3, 3]} /> <ShowRoom /> </Canvas> </> ); }//vite.config.ts import { defineConfig } from "vite"; import react from "@vitejs/plugin-react"; import path from "path"; // https://vite.dev/config/ export default defineConfig({ plugins: [react()], resolve: { alias: [ { find: "@src", replacement: path.resolve(__dirname, "src"), }, { find: "@components", replacement: path.resolve(__dirname, "src/components"), }, ], }, });vite config, tsconfig.json을 바꿨는데 home.tsx에서 import ShowRoom from "@components/three/ShowRoom"; 불러오는데 Cannot find module '@components/three/ShowRoom' or its corresponding type declarations.ts(2307)못찾는다는 에러가 생깁니다뭐를 잘못했는지 모르겠습니다ㅠㅠㅠ

최신버전에서는 ReactDom의 Render가 더 이상 사용되지 않는군요..기존의 ReactDom으로 만든 root를 이용해서 render를 하도록 수업 내용이 변경되어야겠습니다.

현재 투두리스트 렌더링하기 강의에서 List 컴포넌트 부분에서 todos.map을 돌리고 TodoItem 컴포넌트에 {...todo}로 mockData에 있는 객체를 구조분해할당으로 풀어서 키를 props로 전달하는데 전달할때 보통 todo={...todo} 이렇게 보내지 않고 그냥 {...todo} 이렇게 앞에 todo= 이런식으로 작성하지 않은 이유가 뭔지 궁금합니다.

build 할때는 별 문제없이 build 가 되었는데, vercel 에서 배포할때 문제가 발생했습니다. 에러는 import 시 오탈자 문제로, 직접 로그를 분석하여 해결했는데요. 궁금한점은 빌드 시에는 별 문제없었는데, 배포환경에서는 왜 문제가 발생하여 정상적으로 진행이 안되었는지가 궁금합니다.  항상 좋은 강의 감사합니다.

<h2 class="text-2xl">폰트 두께 조절</h2> <p class="font-light">Lorem ipsum dolor sit amet.</p> <p class="font-semibold">Lorem ipsum dolor sit amet.</p> <p class="font-bold">Lorem ipsum dolor sit amet.</p> <p class="font-extrabold">Lorem ipsum dolor sit amet.</p> <p class="font-black">Lorem ipsum dolor sit amet.</p>위와 같이 했는데, 화면 볼때 굵기가 모두 같습니다.  f12눌러서 확인해보면 font-weight이 700, 800 으로 다른데, 보이는건 똑같네요.이유가 뭘까요?

우선 원인은...MeshObject 클래스 속성 중 differenceY 의 값에 OR 연산자를 사용., main.js 에서 ground 변수에 '0' 문자열 값을 할당해서 그런데요.ground 는 y 속성값을 할당하지 않았기 때문에 MeshObject 클래스에서 info.y 는 undefined 이고, this.y 는 "this.height / 2 + this.differenceY" 의 계산이 적용되서 " 0.1 / 2 + '0' " 즉, 문자열 '0.20' 이 출력됩니다.산술 연산자 '+' 가 들어가게되면, 그 계산식의 결과값은 반드시 문자열이 나옵니다.x, y, z, differenceY 는 모두 좌표와 연관된 값으로, 모두 숫자 데이터 타입을 할당받아야 하는 일관성이 필요한데 ground, floor 에서만 differenceY 가 문자열을 받아 발생한 이슈입니다.강의를 들어보던 중 강사님께서 처음에 숫자 0 을 사용하셨고, this.differenceY 속성에 값을 할당할때 OR 연산자를 쓰심으로인해 숫자 0 이 null/undefined 로 인식되는 것 때문에 문자열로 바꾸신거 같더라구요.조금 더 정확하게 하자면, OR 연산자가 아닌 ?? 연산자를 사용해 숫자 0을 값 그대로 사용할 수 있도록 바꾸고 ground 에도 문자열 '0' 이 아닌 숫자 0 을 넣어주면 될것같습니다.x, y, z 에 곱하기 1을 하는 추가코드는 필요없어집니다.