🚨 아래의 가이드라인을 꼭 읽고 질문을 올려주시기 바랍니다 🚨해당 강의에서 날짜를 해당 월의 1일 0시0분0초부터 말일의 23시 59분 59초 설정해서 범위로 해당되는 값을 찾을 수 있또록 아래와 같이 작성을 하셨는데요beginTime <= item.createdDate && item.createdDate <= endTime궁금한 부분은 날짜를 범위 안에 넣지 않고 같은 연도와 월이 있는 값을 불러오는 방법도 있을 것 같은데 어떤 차이가 있는지 알고 싶습니다.

const TypedNumber = (num : any) => { setNumber((prev) => { if (prev === "0") return num; return prev+ num; }); }; num 타입으로 인해 오류가 나서 any로 지정을 해야만 하는데요.. 강사님 코드에는 any 타입을 지정안해 오류가 아나는데 차이가 뭔가요?

Prettier을 비활성화했음에도 어디서 오류가 나는지 모르겠습니다. 

선생님 안녕하세요 svg를 vscode에서 불러오기를 했는데, vscode에서 이미지로 열립니다 소스로 안열리는데 소스로 열리게 하는법이 있을까요?

useState대신 useEffect를 사용하는 이유는 이벤트핸들러 동작시 useState는 비동기를 제공하지 않아 setCount가 동작을 마치기 전 console.log가 실행되어 setCount이후 적용되는 count를 console에 찍지 못하고 리렌더링되기 이전의 state만 console에 찍히기 때문에 useState대신 useEffect를 사용한다고 하셔서 혹시나 하고 useEffect대신 useState를 사용하고 대신 이벤트 핸들러에 async await를 적용했더니 useEffect에서 제공하는 기능이 실행되는것을 확인했습니다.여기서 궁금한점은 useState+async await와 useEffect간의 차이점을 알고싶습니다. const onClickHandler = async (value) => { await setCount(count+value) console.log(count) }

Button.jsx?t=1739152459356:22 Uncaught TypeError: Cannot read properties of undefined (reading 'to') at Button (Button.jsx?t=1739152459356:22:17)An error occurred in the <Button> component. Consider adding an error boundary to your tree to customize error handling behavior. Visit https://react.dev/link/error-boundaries to learn more about error boundaries. Error Component Stack at Button (Button.jsx?t=1739152290133:19:112) at App (<anonymous>) 

안녕하세요.오픈 채팅방에 참여하려 하는데 인원수가 꽉 찬 거 같습니다ㅜㅜ

안녕하세요 코드 궁금증은 아니구요 이렇게 request로 이미지 불러오기를 했을 때 이미지를 불러오긴 하는거 같은데GET http://127.0.0.1:5500/undefined 404 (Not Found)와 같은 오류가 발생하면서 엑박이 뜨거든요... 도저히 제가 어디서 잘못했는지 발견을 못하겠어서 혹시 해결 방법을 아신다면 알려주시면 감사드리겠습니다...

routes.js에서 export된 getInitialHTML을 server.js에서 import 해오면 될 것같은데, dist에서 import해 오시는 이유가 궁금합니다.빌드 이후 운영시점에는 server.js에서 개발디렉토리인 src가 아닌 dist를 참조하게 하려는 이유같은데 그것이 맞을까요?

function setCanvasImages() { let imgElem; for(let i = 0; i < sceneInfo.values.videoImageCount; i++) { imgElem = new Image(); imgElem.src = `./images/picdiet 1/${1 + i}.jpg`; sceneInfo[0].objs.videoImages.push(imgElem); } // /home/ibmuser01/src/images/picdiet 1/1.jpg } setCanvasImages(); function setLayout() { // 각 스크롤 섹션의 높이 세팅 for (let i = 0; i < sceneInfo.length; i++) { if (sceneInfo[i].type === 'sticky') { sceneInfo[i].scrollHeight = sceneInfo[i].heightNum * window.innerHeight; } else if (sceneInfo[i].type === 'normal') { sceneInfo[i].scrollHeight = sceneInfo[i].objs.content.offsetHeight + window.innerHeight * 0.5; } sceneInfo[i].objs.container.style.height = `${sceneInfo[i].scrollHeight}px`; } yOffset = window.pageYOffset; let totalScrollHeight = 0; for (let i = 0; i < sceneInfo.length; i++) { totalScrollHeight += sceneInfo[i].scrollHeight; if (totalScrollHeight >= yOffset) { currentScene = i; break; } } document.body.setAttribute('id', `show-scene-${currentScene}`); } function calcValues(values, currentYOffset) { let rv; // 현재 씬(스크롤섹션)에서 스크롤된 범위를 비율로 구하기 const scrollHeight = sceneInfo[currentScene].scrollHeight; const scrollRatio = currentYOffset / scrollHeight; if (values.length === 3) { // start ~ end 사이에 애니메이션 실행 const partScrollStart = values[2].start * scrollHeight; const partScrollEnd = values[2].end * scrollHeight; const partScrollHeight = partScrollEnd - partScrollStart; if (currentYOffset >= partScrollStart && currentYOffset <= partScrollEnd) { rv = (currentYOffset - partScrollStart) / partScrollHeight * (values[1] - values[0]) + values[0]; } else if (currentYOffset < partScrollStart) { rv = values[0]; } else if (currentYOffset > partScrollEnd) { rv = values[1]; } } else { rv = scrollRatio * (values[1] - values[0]) + values[0]; } return rv; } function playAnimation() { const objs = sceneInfo[currentScene].objs; const values = sceneInfo[currentScene].values; const currentYOffset = yOffset - prevScrollHeight; const scrollHeight = sceneInfo[currentScene].scrollHeight; const scrollRatio = currentYOffset / scrollHeight; switch (currentScene) { case 0: let sequence = Math.round(calcValues(values.imageSequence, currentYOffset)); objs.context.drawImage(objs.videoImages[sequence], 0, 0); if (scrollRatio <= 0.22) { // in objs.messageA.style.opacity = calcValues(values.messageA_opacity_in, currentYOffset); objs.messageA.style.transform = `translate3d(0, ${calcValues(values.messageA_translateY_in, currentYOffset)}%, 0)`; } else { // out objs.messageA.style.opacity = calcValues(values.messageA_opacity_out, currentYOffset); objs.messageA.style.transform = `translate3d(0, ${calcValues(values.messageA_translateY_out, currentYOffset)}%, 0)`; } if (scrollRatio <= 0.42) { // in objs.messageB.style.opacity = calcValues(values.messageB_opacity_in, currentYOffset); objs.messageB.style.transform = `translate3d(0, ${calcValues(values.messageB_translateY_in, currentYOffset)}%, 0)`; } else { // out objs.messageB.style.opacity = calcValues(values.messageB_opacity_out, currentYOffset); objs.messageB.style.transform = `translate3d(0, ${calcValues(values.messageB_translateY_out, currentYOffset)}%, 0)`; } if (scrollRatio <= 0.62) { // in objs.messageC.style.opacity = calcValues(values.messageC_opacity_in, currentYOffset); objs.messageC.style.transform = `translate3d(0, ${calcValues(values.messageC_translateY_in, currentYOffset)}%, 0)`; } else { // out objs.messageC.style.opacity = calcValues(values.messageC_opacity_out, currentYOffset); objs.messageC.style.transform = `translate3d(0, ${calcValues(values.messageC_translateY_out, currentYOffset)}%, 0)`; } if (scrollRatio <= 0.82) { // in objs.messageD.style.opacity = calcValues(values.messageD_opacity_in, currentYOffset); objs.messageD.style.transform = `translate3d(0, ${calcValues(values.messageD_translateY_in, currentYOffset)}%, 0)`; } else { // out objs.messageD.style.opacity = calcValues(values.messageD_opacity_out, currentYOffset); objs.messageD.style.transform = `translate3d(0, ${calcValues(values.messageD_translateY_out, currentYOffset)}%, 0)`; } break; case 2: // console.log('2 play'); if (scrollRatio <= 0.25) { // in objs.messageA.style.opacity = calcValues(values.messageA_opacity_in, currentYOffset); objs.messageA.style.transform = `translate3d(0, ${calcValues(values.messageA_translateY_in, currentYOffset)}%, 0)`; } else { // out objs.messageA.style.opacity = calcValues(values.messageA_opacity_out, currentYOffset); objs.messageA.style.transform = `translate3d(0, ${calcValues(values.messageA_translateY_out, currentYOffset)}%, 0)`; } if (scrollRatio <= 0.57) { // in objs.messageB.style.transform = `translate3d(0, ${calcValues(values.messageB_translateY_in, currentYOffset)}%, 0)`; objs.messageB.style.opacity = calcValues(values.messageB_opacity_in, currentYOffset); objs.pinB.style.transform = `scaleY(${calcValues(values.pinB_scaleY, currentYOffset)})`; } else { // out objs.messageB.style.transform = `translate3d(0, ${calcValues(values.messageB_translateY_out, currentYOffset)}%, 0)`; objs.messageB.style.opacity = calcValues(values.messageB_opacity_out, currentYOffset); objs.pinB.style.transform = `scaleY(${calcValues(values.pinB_scaleY, currentYOffset)})`; } if (scrollRatio <= 0.83) { // in objs.messageC.style.transform = `translate3d(0, ${calcValues(values.messageC_translateY_in, currentYOffset)}%, 0)`; objs.messageC.style.opacity = calcValues(values.messageC_opacity_in, currentYOffset); objs.pinC.style.transform = `scaleY(${calcValues(values.pinC_scaleY, currentYOffset)})`; } else { // out objs.messageC.style.transform = `translate3d(0, ${calcValues(values.messageC_translateY_out, currentYOffset)}%, 0)`; objs.messageC.style.opacity = calcValues(values.messageC_opacity_out, currentYOffset); objs.pinC.style.transform = `scaleY(${calcValues(values.pinC_scaleY, currentYOffset)})`; } break; case 3: // console.log('3 play'); break; } } function scrollLoop() { enterNewScene = false; prevScrollHeight = 0; for (let i = 0; i < currentScene; i++) { prevScrollHeight += sceneInfo[i].scrollHeight; } if (yOffset > prevScrollHeight + sceneInfo[currentScene].scrollHeight){ enterNewScene = true; currentScene++; document.body.setAttribute('id', `show-scene-${currentScene}`); } if(yOffset < prevScrollHeight){ enterNewScene = true; if(currentScene === 0) return; currentScene--; document.body.setAttribute('id', `show-scene-${currentScene}`); } if(enterNewScene) return; playAnimation(); } window.addEventListener('scroll', () => { yOffset = window.pageYOffset; scrollLoop(); }); window.addEventListener('load', setLayout); window.addEventListener('resize', setLayout); })(); main.js:181 Uncaught TypeError: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The provided value is not of type '(CSSImageValue or HTMLCanvasElement or HTMLImageElement or HTMLVideoElement or ImageBitmap or OffscreenCanvas or SVGImageElement or VideoFrame)'. at playAnimation (main.js:181:30) at scrollLoop (main.js:292:9) at main.js:297:9이러한 에러가 나요.이미지 파일은 여기에 저장되어있슴돠.

function handleTodoItemClick(clickedId){ todoArr = todoArr.map(function(aTodo){ return aTodo.todoId !== clickedId ? aTodo : { ...aTodo, todoDone: !aTodo.todoDone } }) displayTodos() saveTodos() } 여기서 클릭하지 않은 할일은 그냥 그대로 반환한다는 것까진 이해했습니다만, !연산자를 통해 클릭한 할일의 경우 어떻게 되는건지, 삼항연산 중 '거짓일 경우의 결과' 부분이 이해가 안갑니다.ㅠ

이렇게 나오고 안보여요...ㅜㅜ이런 질문이 없는데..저만 그런걸까요?

아래글은 너무 감사해서 남기는 글입니다.정말 취업도 힘들고 프로젝트 하면서 제가 p2p 통신은 어떡해 하는지 노드중심 통심 등등 rtc 등등 어디서 배우는지 정말 궁금했습니다.치지직 통신을 보고 저는 와 이분이 알려주는구나 싶어서 정말 감사한 마음으로 보았지만 생각하는 로직이랑 정말 달라서 조금은 실망 하였지만, 이번 강의는 제가 원하는걸 그대로 볼 수 있는 기회를 얻었던것 같습니다. 정말 감사합니다.전이거 하고싶어서 개발 공부를 했습니다.니콜x스 님의 rtc 따라만들기 나 해외꺼를 봐도 너무 클론코딩 위주라서 젼혀 이해가 안돼었고 브라우저에 따라서 보안적인문제등등 에의해서 화면공유또한 만은 에러가 발생하여 힘들었는데드디어 4년제 + 취업준비기간 2년이상의 원한이풀립니다. ㅜㅜ

안녕하세요 선생님 강의 잘 보고있습니다!제목에 작성한 강의의 7:56초에 "obj에 프리미티브 값으로 설정된 값을 반환"한다는 부분인데요.이전 강의에서도 오브젝트는 [[primitiveValue]] 가지지 않는다고 하셨는데, valueOf()를 쓰면 프리미티브 값을 반환한다는 표현이 잘 이해가 가지 않아서 질문드렸습니다. 저는 저 상황에서 참조값을 반환하는 것으로 알고있는데 혹시 JS 내부적인 처리 이후 평가된 값으로 생각해서 프리미티브 값이라고 표현을 하신걸까요...?

안녕하세요, 3칸씩 건너뛸 수 있을 경우도 설명을 해주셨는데,이때 d[0]이 1이라는 게 잘 이해가 되지 않습니다.d[1] = 1, d[2] = 2, d[3] = 4 로 초기 셋팅을 해두고 4부터 루프를 돌아야 하는 게 아닌가요?감사합니다:)

안녕하세요 Edit페이지 구현하기 강의 부분에서 16:52 부분에 아직 Edit 컴포넌트가 return하기 전인 상태이다. 그래서 마운트 되기 전이기 때문에 nav("/", {replace: true}) 동작할 수 가없다 라는 게 무슨 말인가요?  이 Edit 즉 이 수정페이지로 처음에 화면이 나타난다(마운트)는 이해가 가는데 왜 nav가 실행을 할 수 가없나요?  조금 쉽게 설명을 부탁드리겠습니다 ㅜㅜ

커서를 따라다니는 나비 화면에서 mousemove 이벤트에만 커서가 움직이고,마우스휠(wheel 이벤트)을 할 경우에는 나비 이미지가 움지이지 않아대략 아래와 같이 패턴으로 마우스 휠의 경우에도 움직임을 추가해 봤습니다.그런데 wheel 이벤트의 경우에는 나비가 커서 위치에 제대로 붙지 않고, 마우스를 조금이라도 움직여야 제대로 위치를 잡더라고요.마우스 휠 이벤트일 때 어떻게 보완하면 좋은지 조언 부탁드립니다. const cursor = document.querySelector('.box'); let x = 0; let y = 0; window.addEventListener('mousemove', function(e){ x = e.pageX; y = e.pageY; cursorMove(); }); window.addEventListener('wheel', function(e){ x = e.pageX; y = e.pageY; cursorMove(); }); function cursorMove() { cursor.style.transform = `translate(${x}px , ${y}px)`; }

Home.jsx 에서import { useSearchParams } from "react-router-dom"; const Home=()=>{ const [params, setParams]=useSearchParams(); console.log(params.get("value")); return <div>Home</div>; }; export default Home;이렇게 작성했는데 사진과 같이 빨간색 글씨가 뜨는데 어디가 틀린걸까요?? 출력에는 문제가 없습니다

안녕하세요! 해당 강의는 react-rounter-dom v6.22 이던데 혹시 v7로 강의 업데이트 예정이실까요?정환님이 말아주시는 리라돔 v7 강의는 어떨지 하여 기대감에 여쭤봅니다!

  수정페이지, 새일기작성페이지, 등새로고침하면 404 에러가 뜹니다 ㅠㅠ vercel : https://emotion-diary-ochre-six.vercel.app/  확인 부탁드립니다 ㅠㅠ