위와 같이 노드와 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크리에이트 하게되면 위와같은 에러가 뜨네요 ... 어떻게 처리해야 할까요 ?

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

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를 가리키는 문제가 생겨서 변수를 그냥 넣어줘서 작동은 하는데 이렇게 하는게 맞는지 궁금합니다.

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

<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 으로 다른데, 보이는건 똑같네요.이유가 뭘까요?

스크롤이 처음과 끝이 아닌 중간 위치에 있을 때 창의 크기를 변환하면 스크롤 비율이 달라져서 그런지 화면이 z축을 기점으로 순간이동을 합니다. 이것을 부드럽게 하기 위해서는 어떠한 방법이 있을까요?

질문은 자세하게 적어주실 수록 좋습니다. 어느 부분을 수강중이신지 -> bmi 계산기 프로그램 완성하기 내가 어떻게 했는데, 어떤 결과가 나오기를 기대했는데, 다른 결과가 나왔는지 -> 노션의 코드들을 다 복사해서 붙여넣기 했는데 homepage 영역이 안나옵니다작성하신 코드 및 오류 스크린샷 을 함께 첨부해주시면 좋아요!

 Vue CLI v5.0.8✨ Creating project in /Users/yeji/Desktop/2-17__/myfirestvuewapp.⚙ Installing CLI plugins. This might take a while...npm error code EACCESnpm error syscall opennpm error path /Users/yeji/.npm/_cacache/tmp/e7f990dfnpm error errno EACCESnpm errornpm error Your cache folder contains root-owned files, due to a bug innpm error previous versions of npm which has since been addressed.npm errornpm error To permanently fix this problem, please run:npm error sudo chown -R 501:20 "/Users/yeji/.npm"npm error Log files were not written due to an error writing to the directory: /Users/yeji/.npm/_logsnpm error You can rerun the command with --loglevel=verbose to see the logs in your terminalERROR Error: command failed: npm install --loglevel error --legacy-peer-depsError: command failed: npm install --loglevel error --legacy-peer-depsat ChildProcess.<anonymous> (/usr/local/lib/node_modules/@vue/cli/lib/util/executeCommand.js:138:16)at ChildProcess.emit (node:events:518:28)at maybeClose (node:internal/child_process:1104:16)at ChildProcess._handle.onexit (node:internal/child_process:304:5)yeji@gim-yejiui-MacBookPro 2-17__ % sudo npm i -g @vue/cli;2A

선생님 처럼 영상을 보고 css full reload 를 설정 했는데 체크를 해제하면 css 수정 시 안올라가고 체크를 하면 올라 갑니다 또한 html 수정시 마다 매번 위(무한스크롤링)로 올라 갑니다. 해결방법이 있나요?

영상 싱크가 맞지 않습니다 ㅠㅠ 헤더영역에 특히 그렇습니다 ㅠ 

// main변수= 문서 내 #main을 찾아서 가지고 와라 const main= document.querySelector("#main"); const qna= document.querySelector("#qna"); // statusbar 위한 엔드포인트 정의 const endPoint =12; // 결과값 const result=document.querySelector("#result"); // 사용자 입력값에 대한 배열 // const select = []; // 사용자 입력값에 대한 배열 new.직접 12개의 배열에 value 0넣기 const select = [0,0,0,0,0,0,0,0,0,0,0,0,0]; // 질문에 따른 답변 계산 // function calresult(){ // var pointArray = [ // 이 부분 data는 data.js로 옮겨서 동물 당 번호로 바꿔줌. // ] // for(let i = 0; i<endPoint; i++){ // // qnalist로 들어가서 a로 들어가고 거기서 select한 값 // var target =qnaList[i].a[select[i]]; // for(let j=0; j< target.type.length; j++){ // for(let k=0; k<pointArray.length; k++){ // if(target.type[j]=== pointArray[k].name){ // pointArray[k].value += 1; // } // } // } // } function calresult(){ // select라는 배열에 index를 반환할건데 최대값을 console.log(select); var result =select.indexOf(Math.max(...select)); return result; } // // value기준으로 정렬 sort // var resultArray = pointArray.sort(function(a,b){ // if(a.value > b.value){ // return -1; // } // if(a.value < b.value){ // return 1; // } // return 0; // }); // console.log(resultArray) // // key값을 도출, 동물의 이름 // let resultword = resultArray[0].key; // return resultworld; function setresult(){ let point = calresult(); const resultName = document.querySelector('.resultname'); resultName.innerHTML = infoList[point].name; var resultImg = document.createElement('img'); const imgDiv = document.querySelector('#resultImg'); var imgURL = 'img/image-'+ point + '.png'; resultImg.src=imgURL; resultImg.alt=point; resultImg.classList.add('img-fluid'); imgDiv.appendChild(resultImg); const resultDesc = document.querySelector('.resultDesc'); resultDesc.innerHTML=infoList[point].desc; } function goresult(){ qna.style.WebkitAnimation = "fadeOut 1s"; qna.style.Animation = "fadeOut 1s"; setTimeout(() => { result.style.WebkitAnimation = "fadeIn 1s"; result.style.Animation = "fadeIn 1s"; setTimeout(() => { qna.style.display = "none"; result.style.display = "block" }, 450)}) setresult(); calresult(); } function addAnswer(answerText, qIdx,idx){ var a = document.querySelector('.answerbox'); var answer = document.createElement('button'); // answer는 클래스나 id값이 없어서 querySelector이용 불가하므로 클래스 만들어주기 answer.classList.add('answerlist'); // qbox, answerlist에 애니메이션 넣기 위해 클래스 만들어주기 answer.classList.add('fadeIn'); // 버튼 간 간격 answer.classList.add('my-3'); answer.classList.add('py-3'); answer.classList.add('mx-auto'); // 답변 클릭할 수 있게 버튼 만들기 그것을 html에서 코드 짜지 않고 // innerhtml을 통해서 넣기 a.appendChild(answer); answer.innerHTML = answerText; // html의 onclick 역할의 addEventListener answer.addEventListener("click", function(){ // 버튼 하나만 클릭해도 모든 버튼이 사라지도록 함 var children = document.querySelectorAll('.answerlist'); for(let i=0; i< children.length; i++){ children[i].disabled =true; children[i].style.WebkitAnimation = "fadeOut 1s"; children[i].style.Animation = "fadeOut 1s"; } setTimeout(() => { // 소,닭 등 각 부여된 select 리스트의 순서를 찾아 value값 1씩 늘려주기 var target =qnaList[qIdx].a[idx].type; for(let i=0; i< target.length; i++){ select[target[i]] +=1; } //// 사용자 입력이 몇 번째인지 인덱스로 넣어주고 idx로 받아주기 -> 몇 번째 질문에서 몇 번째 답변 눌렀는지 select[qIdx] = idx; for(let i=0; i< children.length; i++){ children[i].style.display = 'none'; } goNext(++qIdx); // 버튼이 사라지고 950초쯤 이후 버튼 없어지게 }, 950) }, false); } function goNext(qIdx){ // 결과값 호출하는 함수 if(qIdx === endPoint){ goresult(); return; } // html파일에서 qna 안 qbox가져와라 var q= document.querySelector('.qbox'); q.innerHTML = qnaList[qIdx].q; // 원래는 q.innerHTML =qnalist[0].q; 였는데 0~11번째 질문을 // 하나씩 입력하면 귀찮으니까 let Idx라는 변수 만들어서, for 함수 사용 for(let i in qnaList[qIdx].a){ // answerlist를 하나씩 입력하지 않고 파라미터로 addAnswer(qnaList[qIdx].a[i].answer,qIdx,i); } // status에 따라서 바로 나타내려고 var status = document.querySelector('.statusbar'); status.style.width=(100/endPoint)*(qIdx+1) + '%'; } // 장면 넘어가는 animation function begin(){ main.style.WebkitAnimation = "fadeOut 1s"; main.style.Animation = "fadeOut 1s"; setTimeout(() => { qna.style.WebkitAnimation = "fadeIn 1s"; qna.style.Animation = "fadeIn 1s"; setTimeout(() => { main.style.display = "none"; qna.style.display = "block" }, 450); // 위에서 세운 고넥스트 함수 호출 let qIdx = 0; goNext(qIdx); }, 450); }

- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 강사님과 동일하게 index.js를 수정하고 terminal - new terminal을 하면 저는 경로가 계속 my-app의 상위 경로로 되어있어서 cd my-app을 해주고 npm start를 하는데 (이부분도 저는 왜 계속 이렇게 뜨는지 궁금합니다..my-app을 우클릭 후 터미널을 열면 되긴합니다만..) 이렇게 떠서 계속 새로운 포트를 추가해서 사용하게 됩니다..저도 강사님처럼 실습하고 싶은데 어떻게 하면 될까요..?

안녕하세요css 기초이론을 따라하여 (아이콘)cdn 주소 링크에 넣고 i 태그도 위에 맞게 넣었습니다. 근데 항상 저는 네모에 엑스박스친 오류 상자만 뜹니다.인강 당시와 cdn 주소가 변경된건지.. 알 수 있을까요?

- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.왼쪽의 화면처럼만 뜹니다.그리고 강사처럼 npm start만 하면 이런 오류가 떠서cd my-app , npm start하면 그나마 실행되는데 위의 사진처럼 결과 리액트가 아니라 로딩화면같이 뜹니다. 어떻게 해결해야하나요?

- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.어떻게 해결해야할까요?

안녕하세요 선생님SCSS(SASS)+FLEX 실전 반응형 웹 프로젝트 with Figma 강의를구매하고 섹션1all 과 섹션2 몇개 강의 듣고 수강평 남기려고 하는데 작성하는 곳이 없어서 글올립니다..ㄴ 수강평 버튼이 없습니다.. 

1강 소개 자료 zip 파일이 압축 해제가 안 됩니다!

안녕하세요? 그랩선생님, 수고가 많으십니다.다름이 아니라 강의 [컴포넌트 사용하기] 강의를 진행하던 중 2가지 에러가 발생하여 질문을 하게 되었습니다.첫번째 에러는 아래 사진으로 첨부합니다.첫번째 에러 사진의 크롬 브라우저 제목은 listing directory / 라고 뜹니다.  그다음에 src디렉토리에 가서 App.js를 열면 첨부사진 처럼 입력된 소스화일 내용이 아래와 같이 뜨는데어떻게 해야 크롬 브라우저로 로고까지 뜨게 되나요?그리고 두번째 에러는 실제 소스 파일 폴더에 가서 App.js 파일을 선택 후 엔터(실행)하니 아래 사진과 같은 에러가 발생하였습니다.--> 이 두가지 에러를 어떻게 하면 해결 할 수 있는지 상세한 설명과 자세한 답변 부탁드립니다.감사합니다.

3차 y축으로 올라오는 갤러리제작에 관한 질문입니다이미지와 왼쪽에 있는 클론코딩 제목이 같이 올라오게 하고 싶거든요Concierge 글자가 올라오면서 이미지가 올라오고두번째 Hanwha Solutins가 올라오면서 이미자가 올라오는이런건 안될까요?

- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 제목과 같이 putty 터미널에서 vi로 vi /etc/nginx/sites-.../에서 수정하는데 저는 다음과 같은 화면이 나옵니다. ㅠㅠ 이거 왜 이런건가요