module를 지웠다가 깔아봐도 계속 이 오류가 뜨네요.,..

이전 메인페이지가 뜨지 않는다는 질문과 답변들을 통해 App.js파일과 index.js 파일 상단에 import React from 'react'; 를 넣기도 해보고 node와 npm 삭제 > 재설치 후 진행해 보아도 메인페이지에 글자가 뜨지 않아 질문드립니다ㅜㅜ또한 각 파일의 vscode내 터미널 로그를 보아도 딱히 에러가 보이지 않아 문의드립니다..! 

이전 모바일 웹 퍼블리싱 figma를 수강했는데,이번 강의에서는 알면 넘어가도 된다는 내용이 없어서요 이번 강의 figma에서 새로 쓰는 기능이 있는지, 아니면 html 프레임 잡는거부터 바로 시작해도 충분할까요?

fly.io에 server 프로젝트를 deploy 단계까지 마쳤다.web 프로젝트까지 배포가 완료 되어 모든 동작이 잘 이뤄지고 있다.하지만, 일정 시간이 지나면 자동으로 fly.io에 배포된 DB가 초기화가 된다.초기화가 된 것인지, local의 데이터가 자동 업로드 되면서 덮어씌여진 것인지는 잘 모르겠다.이전 질문의 답변을 보면, Commit을 하면서 fly.io가 자동으로 덮어씌여진다는 것을 보았다.-> 하지만, 실험 결과 Commit을 따로 하지 않아도 초기화가 된다.만약 git과 연관이 있다면6-1. 배포 이후 별다른 작업을 하지 않았지만, 일정시간이 지나면, vercel와 같이 자동으로 git의 repository 최신 내용 바탕으로 업데이트 되어, git에 이미 올라가 있던 DB가 fly.io에 반영이 되는것인가가 궁금합니다.6-2. 또한, 그렇다면 애초에 vercel은 레포지토리 주소를 참고하여 배포하였다면, fly.io는 그저 플랫폼 로그인 수단으로만 git을 연동하였는데, 최신 커밋을 참고하는 기능이 있는지도 궁금합니다.결론적으로 현재 반복적으로 DB가 초기화 되는 현상을 고치고 싶습니다. 추가적인 실험 결과, 로컬의 nodemon server.js가 돌고 있는 server 프로젝트를 종료를 하여도, 일정 시간이 지나면 fly.io의 DB가 초기화 되는 것으로 보아, server의 내용이 바뀌면서 자동으로 로컬 내용이 fly.io로 넘어가는 것도 아닌 것 같습니다. 

<img src="images/icons/logo.png" /> 만으로 사진이 불러와 지는데요 엄밀히 따지면 images 파일은 public 폴더 아래 있으니<img src="../public/images/icons/logo.png" /> 처럼 상위 폴더로 이동 후 public에서 images에 접근할 수 있는 것 아닌가요?

a:link, a:visited, a:active { text-decoration: none; color: #3f464d; } [모던HTML/CSS로 상용화도 가능한 반응형 모던 웹페이지 만들기4] 6:00 부분에서 text-decoration 등 중복되는 설정값이 여러 가상클래스에 적용이 되는데 이런식으로 한번에 써도 되나요 ?

독학으로 웹디기능사실기 유튜브보고 공부하고 덜공부한상태로보러갔다가 왔는데 요새는 비주얼스튜디오코드로 시험많이보고 브라켓이 잘안깔려있다는 시험장도있다고 해서 그러는데 이강의도 브라켓으로 하는데 비주얼스튜디오로 연습해도 문제없을까요 ?

destructuring을 사용하지 않고 const로 time과 setTime을 정의해서 해봤는데요, 이때는 브라우저에서 클릭을 해도 0초에서 1초로 바뀌지 않습니다. 어떤 부분이 문제인가요?React.useState(0) 뒤에 인덱스 값을 잘못 붙인 건가요?

소괄호를 붙여 해결은 했습니다만, return 뒤에 소괄호를 붙이지 않았을 때 unreachable-code라며 코드가 투명하게 보이고 react app 사이트에도 반영되지 않았는데요 소괄호가 필수인지 궁금합니다참고로 return직후 세미콜론은 저장했더니 자동으로 붙었습니다.

버튼을 한 번씩 누를 때마다 콘솔창에 콘솔로그가 2번씩 찍히는데 왜 이런 건가요?

E-2 역사 박물관로고 만들기에서 심벌과 로고명이 포함된 완전한 형태로 디자인한다. 라고 있습니다.그냥 텍스트로 역사박물관이라고 제작하면 감점이 많이 되나요? 

혹시 강의내용과 같은 페이지를 쉽게 만드는 라이브러리 같은게 있을까요? 저런 스크롤 애니메이션 페이지를 만들 때 바닐라 자바스크립트가 아닌 더 쉽게 만들 수 있게 해주는게 혹시 있나 궁금합니다

코드로보시면 간단합니다.왠만한건 다돌아가기 때문에 해석할 필요는 없으실겁니다.테일윈드backgroundImage 를 단축어로설정하여 bg-sky2 를사용하면 사진이 불러와집니다. 모든것이 정상 작동잘됍니다. 아래는 제가 작성한 코드중 일부분입니다. <div className={`${ scrollPercent >= 25 && scrollPercent < 50 ? "opacity-100 " : "opacity-0 " } block absolute h-full bg-sky2 transition-opacity duration-500`} ></div>이때 absolute 를 사용하였을떄 bg-sky2 이미지가 안보이게됍니다.일부분 버그인줄 알았습니다. 그래서 다른 백그라운드 색상을 바꾸어보았습니다.bg-sky2 ==>(교체) bg-red-400 동일하게 안보입니다.하지만absolute 를 사용하지 않으면 4개가 스택처럼 쌓이지만 정상적이게 원하는퍼 센테이지에 올떄 없어지고 생성됍니다.고민중이미지로 만들었는데 정상작동 하였습니다.하지만 저는backgroundImage 로넣는것이 필터다 backgroundFixed 등 여러가지 활용이 된다고 생각하여 질문드립니다.  <img className={`${ scrollPercent >= 75 && scrollPercent < 102 ? "opacity-100 " : "opacity-0 " }block absolute h-full transition-opacity duration-500`} src="/images2/motion_sky4.gif" alt="motion_moon" /> 요약absolute을 사용하면 다돌아가던것이 왜인지 안돌아갑니다.개발환경은 next.js tailwind 입니다.(취업못하고 공부용입니다.) 전체코드는 다음과같습니다"use client"; import React, { useRef, useEffect, useState } from "react"; import motion_sky1 from "@/../../public/images2/motion_sky1.gif"; function Page() { const [scrollPercent, setScrollPercent] = useState(0); const scrollBody = useRef(null); console.log(scrollPercent); useEffect(() => { const handleScroll = () => { const scrollRealHeight = document.documentElement.scrollHeight - window.innerHeight; const scrollTop = window.scrollY; const percentScroll = Math.round((scrollTop / scrollRealHeight) * 100); setScrollPercent(percentScroll); }; window.addEventListener("scroll", handleScroll); return () => { window.removeEventListener("scroll", handleScroll); }; }, []); return ( <div ref={scrollBody} className="relative left-0 top-0 h-6000 w-full "> <div>내용</div> {/* <img className={`${ scrollPercent < 25 ? "opacity-100 " : "opacity-0 " }block absolute h-full bg-black transition-opacity duration-500 `} src="/images2/motion_sky1.gif" alt="motion_moon" /> <img className={`${ scrollPercent >= 25 && scrollPercent < 50 ? "opacity-100 " : "opacity-0 " } block absolute h-full bg-teal-500 transition-opacity duration-500`} src="/images2/motion_sky2.gif" alt="motion_moon" /> <img className={`${ scrollPercent >= 50 && scrollPercent < 75 ? "opacity-100 " : "opacity-0 " }block absolute h-full bg-red-400 transition-opacity duration-500`} src="/images2/motion_sky3.gif" alt="motion_moon" /> <img className={`${ scrollPercent >= 75 && scrollPercent < 102 ? "opacity-100 " : "opacity-0 " }block absolute h-full bg-blue-500 transition-opacity duration-500`} src="/images2/motion_sky4.gif" alt="motion_moon" /> */} <div className={`${ scrollPercent < 25 ? "opacity-100 " : "opacity-0 " }block absolute Fixed z-50 h-full bg-sky1 transition-opacity duration-500 `} ></div> <div className={`${ scrollPercent >= 25 && scrollPercent < 50 ? "opacity-100 " : "opacity-0 " } block absolute h-full bg-sky2 transition-opacity duration-500`} ></div> <div className={`${ scrollPercent >= 50 && scrollPercent < 75 ? "opacity-100 " : "opacity-0 " }block absolute h-full bg-red-400 transition-opacity duration-500`} ></div> <div className={`${ scrollPercent >= 75 && scrollPercent < 102 ? "opacity-100 " : "opacity-0 " }block absolute h-full bg-blue-500 transition-opacity duration-500`} ></div> <div className="motion_ggang"> <figure className="ch_body"> {/* 몸 */} <img className="fixed h-40 w-32 top-12 left-7" src="/images2/motion_body2.png" alt="motion_body2" /> </figure> {/* 손 */} <figure className="ch_hand_right"> <img className="fixed h-40 w-32 top-12 left-7" src="/images2/motion_hand_right.png" alt="motion_hand_right" /> </figure> </div> {/* 달 */} <figure className="motion_moon"> <img className="fixed h-40 w-32 top-12 right-3" src="/images2/motion_moon.png" alt="motion_moon" /> </figure> </div> ); } export default Page;  

■ 질문 남기실 때 꼭! 참고해주세요.- 먼저 유사한 질문이 있었는지 검색해주세요.- 궁금한 부분이 있으시면 해당 강의의 타임라인 부분을 표시해주시면 좋습니다.- HTML, CSS, JQUERY 코드 소스를 텍스트 형태로 첨부해주시고 스크린샷도 첨부해주세요.- 다운로드가 필요한 파일은 해당 강의의 마지막 섹션에 모두 있습니다.질문 하실 때 어떤 유형인지 말씀해주세요. ex) A1 작업하는데 ???이 안됩니다.안녕하세요 강사님~제공해준 수험자 이미지에서 슬라이드 이미지 포토샵 연습하고있는데요..! 새 파일을 만들어서 그 위에 덮어씌워서 크기를 맞추는걸로 아는데 이미지가 짤려도 상관없는건가요 ?? 안짤리게 맞추려다보니까 찌그러져서요...아래 이미지 처럼 짤려도되는걸까요 ?? 아니면 이런식으로 해야하나요 ??

 이런식으로 코드가 보이지 않습니다. 혹시 뭔가 잘못 가입을 했거나 잘못 들어간걸까요?

결과가 이렇게 나오는데 뭐가 잘못된걸까요?

안녕하세요 강의를 듣고 직접 작성하면서 적용을 해보려고 하다가 강의에서 사용하는 scroll-timeline polyfill repo 에서 찾아보니 강의에서 사용했던 scrollOfsets을 앞으로는 사용하지 않는 것 같았습니다. 이러한 부분에 대해서 다른 해결법이 또 있을까요? 아래의 링크에 방법이 있긴 합니다만 조금 더 효율적인 방법이 있는지 궁금했습니다! 추가로 react에서도 사용하려고 했지만 Npm에서는 관련한 패키지가 없는 것 같아서 혹시 react에서 적용해보신 적이 있으실까요?!https://github.com/flackr/scroll-timeline/issues/64

이번에 강의에 추가된 closest를 사용하면 다음과 같이 사용하면 될까요? 동작은 정상적으로 작동합니다 const stage = document.querySelector(".stage"); stage.addEventListener("click", e => { e.target.closest(".door").classList.toggle("door-open"); });

1년동안 쇼핑몰 인하우스 간단한 퍼블 업무하다가 이직 준비하면서 공부중인데 궁금한점이있어서요 스크롤 애니메이션할때 간단한 효과는 aos, 디테일한건 gsap을 많이 쓴다고 들었거든요 이 강의의 web api 애니메이션을 습득하면 실무에서 gsap 으로 할수있는건 대부분 할 수 있는건가요? 물론 완전히 대체는 안되겠지만 왠만한건 가능한건가요 제가 gsap도 아직 공부할 예정이라 자세히 몰라서 질문드립니다ㅎ

안녕하세요 이수업을 듣고 만든 사이트를 도메인 구매하여 개인포트폴리오 홈페이지에 올렸는데이렇게 주요 메인부분 내용이 전혀 담기지 않아서 질문 올립니다그외에 따로 만든 것은 모두 잘 실행되는데 저것만 저렇게 실행되네요 혹시 파일 손상인가 싶어서 파일 그대로 다시 옮겨봤는데 똑같은 증상이네요 이유를 모르겠습니다..도메인주소로 접속이 아닌 go live로 실행하면 잘켜지는데 도메인경우로 접속하면 저렇게 나옵니다...