const puppeteer = require('puppeteer'); const dotenv = require('dotenv'); dotenv.config(); const crawler = async () => { try { const browser = await puppeteer.launch({ headless: false, args: ['--window-size=1920,1080', '--disable-notifications'] }); const page = await browser.newPage(); await page.setViewport({ width: 1080, height: 1080, }); await page.goto('https://search.naver.com/search.naver?where=nexearch&sm=top_hty&fbm=0&ie=utf8&query=서울+지게차'); await page.waitFor(3000); await page.evaluate(() => { window.scrollBy(0, 1500); document.querySelector('#loc-main-section-root > section > div > div.api_more_wrap > a').click(); }); await page.waitFor(3000); await page.waitFor(3000); await page.evaluate(() => { document.querySelector('#_pcmap_list_scroll_container > ul > li:nth-child(1) > div.qbGlu > div.ouxiq.icT4K > div > div > span > a > span.hClKF').click(); }); await page.waitFor(3000); await page.evaluate(() => { document.querySelector('#_pcmap_list_scroll_container > ul > li:nth-child(1) > div.qbGlu > div.ouxiq.icT4K > div > div > div > div:nth-child(1) > span.RUjqr > a').click(); }); } catch (e) { console.error(e); } }; crawler();  Error: Evaluation failed: TypeError: Cannot read properties of null (reading 'click') at __puppeteer_evaluation_script__:2:151 at ExecutionContext._evaluateInternal (/Users/youssi/Downloads/nodejs-crawler-master/lecture/node_modules/puppeteer/lib/ExecutionContext.js:122:13) at processTicksAndRejections (node:internal/process/task_queues:96:5) at async ExecutionContext.evaluate (/Users/youssi/Downloads/nodejs-crawler-master/lecture/node_modules/puppeteer/lib/ExecutionContext.js:48:12) at async crawler (/Users/youssi/Downloads/nodejs-crawler-master/lecture/index.js:53:5) -- ASYNC -- at ExecutionContext.<anonymous> (/Users/youssi/Downloads/nodejs-crawler-master/lecture/node_modules/puppeteer/lib/helper.js:111:15) at DOMWorld.evaluate (/Users/youssi/Downloads/nodejs-crawler-master/lecture/node_modules/puppeteer/lib/DOMWorld.js:112:20) -- ASYNC -- at Frame.<anonymous> (/Users/youssi/Downloads/nodejs-crawler-master/lecture/node_modules/puppeteer/lib/helper.js:111:15) at Page.evaluate (/Users/youssi/Downloads/nodejs-crawler-master/lecture/node_modules/puppeteer/lib/Page.js:833:43) at Page.<anonymous> (/Users/youssi/Downloads/nodejs-crawler-master/lecture/node_modules/puppeteer/lib/helper.js:112:23) at crawler (/Users/youssi/Downloads/nodejs-crawler-master/lecture/index.js:53:16) 에러가 납니다. 구글 개발자도구에서 select an element~~~ 누르고 나서야 document.querySelector('#_pcmap_list_scroll_container > ul > li:nth-child(1) > div.qbGlu > div.ouxiq.icT4K > div > div > span > a > span.hClKF').click(); });위 소스가 정상적으로 작동을 합니다. 찾아보니 Javascript를 사용하여 브라우저에서 렌더링하는 웹 페이지를 가져오려고 합니다. 즉, Http Request Node를 사용하여 수신하는 초기 응답에 현재 검색 중인 데이터가 포함되지 않습니다. 당신의 데이터는 자바스크립트 안에 로드되어 브라우저에 의해 html에 삽입될 것입니다.이것과 비슷한 거 같습니다. 크롤링이 안되는 것일까요??

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

인프런 아이디 : enoch.ha915@gmail.com인프런 이메일 : enoch.ha915@gmail.com깃헙 아이디 : enoch.ha915@gmail.com깃헙 Username : enochsori 

인프런 아이디 : zzyoungjin@naver.com인프런 이메일 : zzyoungjin@naver.com깃헙 아이디: zzyoungjin@naver.com깃헙 Username : youngjin-yu

 "Docker Compose Volumes" 강의를 통해 local의 코드를 수정하면 docker 내 image가 nodemon으로인해 refresh되는 것을 cat 명령어로 파일을 열어 확인했습니다.그런데 코드를 변경 후 13:54에 나온것처럼 local의 콘솔창에 refresh에 대한 로그가 나타나지를 않으며,local에서 postman으로 확인할 때도 코드가 변경되지 않은 것처럼 작동합니다. 뭐가 문제일까요?

인프런 아이디 : huandag4545@naver.com인프런 이메일 : huandag4545@naver.com깃헙 아이디: huandag4545@daum.net깃헙 Username : 전현덕

2달 전에 수업을 듣고 이제 네이버 지도를 크롤링을 하려고 하는데 noscript때문인지크롤링이 안되네요?혹시 noscript는 크롤링을 할 수 있는 방법이 있나요?

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

아직 프리캠프부분 수강중인데혹시 완전히 운영체제를 지우지 않고 위와 같은 방식을 사용하면 이후 진도를 나가는데 있어 문제가 생기나요?

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

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

뭐가 문제일까요? ㅠㅠ

오류 내용입니다.export 'default' (imported as 'VueRouter') was not found in 'vue-router' (possible exports: NavigationFailureType, RouterLink, RouterView, START_LOCATION, createMemoryHistory, createRouter, createRouterMatcher, createWebHashHistory, createWebHistory, isNavigationFailure, matchedRouteKey, onBeforeRouteLeave, onBeforeRouteUpdate, parseQuery, routeLocationKey, routerKey, routerViewLocationKey, stringifyQuery, useLink, useRoute, useRouter, viewDepthKey)   package.json입니다.{ "name": "frontend", "version": "0.1.0", "private": true, "scripts": { "serve": "vue-cli-service serve", "build": "vue-cli-service build", "lint": "vue-cli-service lint" }, "dependencies": { "core-js": "^3.8.3", "vue": "^3.2.36", "vue-router": "^4.0.13" }, "devDependencies": { "@babel/core": "^7.12.16", "@babel/eslint-parser": "^7.12.16", "@vue/cli-plugin-babel": "~5.0.0", "@vue/cli-plugin-eslint": "~5.0.0", "@vue/cli-service": "~5.0.0", "eslint": "^7.32.0", "eslint-plugin-vue": "^8.0.3" }, "eslintConfig": { "root": true, "env": { "node": true }, "extends": [ "plugin:vue/vue3-essential", "eslint:recommended" ], "parserOptions": { "parser": "@babel/eslint-parser" }, "rules": {} }, "browserslist": [ "> 1%", "last 2 versions", "not dead", "not ie 11" ] }  감사합니다.

안녕하세요. 저는 현재 "페이지구현-홈(/)" 강의 18분 쯔음 까지 들었습니다.Home 컴포넌트에서 filter 를 사용하여 현재 날짜에만 dummyList 로 작성해둔 일기가 떠야하는데 뜨질 않습니다.import { DiaryStateContext } from "./App"; import MyButton from "./components/MyButton"; import MyHeader from "./components/MyHeader"; import { useContext, useEffect, useState } from "react"; import DiaryList from "./components/DiaryList"; const Home = () => { const diaryList = useContext(DiaryStateContext); //dummyList 를 받음 const [data,setData] = useState(); const [curDate , setCurDate] = useState(new Date()); const headText= `${curDate.getFullYear()}년 ${curDate.getMonth() + 1}월`; useEffect(()=> { if (diaryList.length >= 1) { const firstDay = new Date( curDate.getFullYear(), curDate.getMonth(), 1 ).getTime(); //현재 년, 월의 1일의 시간을 구함 const lastDay = new Date( curDate.getFullYear(), curDate.getMonth() +1, 0, ).getTime(); setData(diaryList.filter((it) => firstDay <= it.date && it.date <= lastDay)); } },[diaryList, curDate]); useEffect(() => { console.log(data) console.log(diaryList) },[data]) const increaseMonth = () => { setCurDate(new Date( curDate.getFullYear() , curDate.getMonth() + 1, curDate.getDate() )) } const decreaseMonth = () => { setCurDate( new Date(curDate.getFullYear(), curDate.getMonth() - 1, curDate.getDate()) ); }; return ( <div> <MyHeader leftChild={<MyButton text={"<"} onClick={decreaseMonth} />} headText={headText} rightChild={<MyButton text={">"} onClick={increaseMonth} />} /> <DiaryList diaryList={data}/> </div> ); } export default Home;이게 제 Home 컴포넌트이고, 중간에 보면 useEffect 로 data 와 diaryList 를 출력했을때 data 는 빈 배열로 출력되고 diaryList 는 제가 App.js 에서 dummyList 로 작성한 데이터가 잘 출력됩니다. 아무리 봐도 어디가 잘못된건지 모르겠습니다. ㅜㅜ날짜가 잘못된건가 싶어 new Date() 로 다시 확인해봐도 현재 날짜로 잘 나옵니다이건 useEffect 로 출력한 콘솔창 입니다.

안녕하세요. 항상 알기쉽게 설명해주셔서 많은 도움이되고 있습니다. (myERD프로젝트하는데 거의 일주일 걸린것 같습니다 ㅎㅎ)섹션29 10-8 다대다 api설계에서 productTags에 대한 질문드립니다.아래와 같이 tags을 productTags에 넣어서 리턴을 해주는 상황입니다.그런데 여기서 ...prevTags와 ...newTags.identifiers의 타입이 서로 다른것 같아서 다음과같이 콘솔로 찍어 보았습니다. 배열요소의 3번째까지가 ...prevTags에 담긴 값인데 저렇게 리턴하면 타입관련에러나 DB에 저장이나 서로 연결이 안될줄 알았는데 강의와 같이 잘 작동하였습니다.그래서 아래와 같이 productTags의 타입인 ProductTag[]도 확인해보았는데도 잘 이해가 안갑니다제생각에는 prevTags에서 id만 뽑아낸 객체배열을 새로 정의한 다음에 스프레드시켜서 넣어주어야 할것같은데, 해보니 둘 다 결과는 같네요... 제가 어떤 걸 놓치고 있는 걸까요?사족 : 그런데 이 문제를 생각하는 도중에 힌트를 얻어서 update에서 에러나는 숙제를 해결했습니다^^ 

인프런 아이디 : 1996pp@naver.com인프런 이메일 : 1996pp@naver.com깃헙 아이디: zvvz33@daum.net깃헙 Username : zvvz33

인프런 아이디 : 1996pp@naver.com인프런 이메일 : 1996pp@naver.com깃헙 아이디: zvvz33@daum.net깃헙 Username : zvvz33

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

코드로보시면 간단합니다.왠만한건 다돌아가기 때문에 해석할 필요는 없으실겁니다.테일윈드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;  

 http 과제 연습 graphql-API 문제에 https://practice.codebootcamp.co.kr/graphql 이 안들어가지는데 어디서 해야하나요?