인프런 아이디 : 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 이 안들어가지는데 어디서 해야하나요?

더미데이터가 id 1부터 id 5까지 총 5개의 게시물이 존재하는데, 새글을 한번 추가하면 그 새글이 id 0으로 추가가 되고, 다시 한번 더 추가시 새글이 id 1로 추가가 됩니다 ㅠㅠ 그래서 새글 추가시 게시글정렬도 꼬이게 보여요ㅠㅠ 왜 이런 오류가 난거지 궁금합니다. 코드샌드박스 주소 첨부합니다!https://codesandbox.io/s/hungry-bogdan-59h25q

function solution(arr) { let answer = 0; let max = arr[0]; for (let i = 0; i <= arr.length; i++) { if (max < arr[i + 1]) answer++; max = arr[i + 1]; } return answer; }

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

App.js에서 onCreate함수를 가지고 오지 못하고 있는데 어디서 오류가 났는지 찾지못하고있어요ㅠㅠ! 도와주세요!코드보여드릴게여 ㅠㅠ오류상황Cannot destructure property 'onCreate' of '(0 , react__WEBPACK_IMPORTED_MODULE_0__.useContext)(...)' as it is undefined. TypeError: Cannot destructure property 'onCreate' of '(0 , react__WEBPACK_IMPORTED_MODULE_0__.useContext)(...)' as it is undefined. at DiaryEdit (http://localhost:3000/static/js/bundle.js:344:5) at renderWithHooks (http://localhost:3000/static/js/bundle.js:26416:22) at mountIndeterminateComponent (http://localhost:3000/static/js/bundle.js:29702:17) at beginWork (http://localhost:3000/static/js/bundle.js:30998:20) at HTMLUnknownElement.callCallback (http://localhost:3000/static/js/bundle.js:16008:18) at Object.invokeGuardedCallbackDev (http://localhost:3000/static/js/bundle.js:16052:20) at invokeGuardedCallback (http://localhost:3000/static/js/bundle.js:16109:35) at beginWork$1 (http://localhost:3000/static/js/bundle.js:35983:11) at performUnitOfWork (http://localhost:3000/static/js/bundle.js:35230:16) at workLoopSync (http://localhost:3000/static/js/bundle.js:35153:9)App.jsimport React, { useReducer, useRef } from "react"; import "./App.css"; import { BrowserRouter, Routes, Route } from "react-router-dom"; import Home from "./pages/Home"; import New from "./pages/New"; import Edit from "./pages/Edit"; import Diary from "./pages/Diary"; const reducer = (state, action) => { // return state; let newState = []; switch (action.type) { case "INIT": { return action.data; } case "CREATE": { newState = [...action.data, ...state]; break; } case "REMOVE": { newState = state.filter((it) => it.id !== action.targetId); break; } // 모든 부분을 수정해야해서 다 받아옴 case "EDIT": { newState = state.map((it) => it.id === action.targetId ? { ...action.data } : it ); break; } default: return state; } return newState; }; export const DiaryStateContext = React.createContext(); export const DiaryDispatchContext = React.createContext(); const dummyData = [ { id: 1, emotion: 1, content: "일기 1번", date: 1687326683094, }, { id: 2, emotion: 2, content: "일기 2번", date: 1687326683096, }, { id: 3, emotion: 3, content: "일기 3번", date: 1687326683097, }, { id: 4, emotion: 4, content: "일기 4번", date: 1687326683098, }, { id: 5, emotion: 5, content: "일기 5번", date: 1687326683099, }, { id: 6, emotion: 3, content: "일기 6번", date: 1787321680269, }, ]; function App() { const [data, dispatch] = useReducer(reducer, dummyData); // console.log(new Date().getTime()); const dataId = useRef(0); const onCreate = (date, content, emotion) => { dispatch({ type: "CREATE", data: { id: dataId.current, date: new Date(date).getTime(), content, emotion, }, }); dataId.current += 1; }; const onRemove = (targetId) => { dispatch({ type: "REMOVE", targetId }); }; const onEdit = (targetId, date, content, emotion) => { dispatch({ type: "EDIT", data: { id: targetId, date: new Date(date).getTime(), content, emotion, }, }); }; return ( <DiaryStateContext.Provider value={data}> <DiaryDispatchContext.Provider value={{ onCreate, onEdit, onRemove }}> <BrowserRouter> <div className="App"> <Routes> <Route path="/" element={<Home />} /> <Route path="/new" element={<New />} /> <Route path="/edit" element={<Edit />} /> <Route path="/diary/:id" element={<Diary />} /> {/* <Route path="/diary" element={<Diary />} /> */} </Routes> </div> </BrowserRouter> </DiaryDispatchContext.Provider> </DiaryStateContext.Provider> ); } export default App; DiaryEdit.jsimport { useNavigate } from "react-router-dom"; import React, { useState, useRef, useContext } from "react"; import MyHeader from "./MyHeader"; import MyButton from "./MyButton"; import EmotionItem from "./EmotionItem"; import DiaryDispatchContext from "./../App"; // 감정에 대한 데이터 const emotionList = [ { emotion_id: 1, emotion_img: process.env.PUBLIC_URL + `assets/emotion1.png`, emotion_descript: "완전 좋음", }, { emotion_id: 2, emotion_img: process.env.PUBLIC_URL + `assets/emotion2.png`, emotion_descript: "좋음", }, { emotion_id: 3, emotion_img: process.env.PUBLIC_URL + `assets/emotion3.png`, emotion_descript: "보통", }, { emotion_id: 4, emotion_img: process.env.PUBLIC_URL + `assets/emotion4.png`, emotion_descript: "나쁨", }, { emotion_id: 5, emotion_img: process.env.PUBLIC_URL + `assets/emotion5.png`, emotion_descript: "완전 나쁨", }, ]; // 달력에 오늘의 날짜를 기본 날짜로 구현하기 export const getStringDate = (date) => { let year = date.getFullYear(); let month = date.getMonth() + 1; let day = date.getDate(); if (month < 10) { month = `0${month}`; } if (day < 10) { day = `0${day}`; } return `${year}-${month}-${day}`; }; const DiaryEdit = () => { const contentRef = useRef(); const navigator = useNavigate(); const [date, setDate] = useState(getStringDate(new Date())); // 어떤 감정을 선택했는지 state에 저장 const [emotion, setEmotion] = useState(3); const [content, setContent] = useState(""); const { onCreate } = useContext(DiaryDispatchContext); const handleClickEmotion = (emotion) => { setEmotion(emotion); }; const handleSubmit = () => { if (content.length < 1) { contentRef.current.focus(); return; } onCreate(date, content, emotion); }; return ( <div className="DiaryEdit"> <MyHeader headText={"새로운 일기 쓰기"} leftChild={ <MyButton text={"< 뒤로가기"} onClick={() => navigator(-1)} /> } /> <div> <section> <h4>오늘은 언제인가요?</h4> <div className="input_box"> <input className="input_date" value={date} onChange={(e) => setDate(e.target.value)} type="date" /> </div> </section> <section> <h4>오늘의 감정</h4> <div className="input_box emotion_list_wrapper"> {emotionList.map((it) => ( <EmotionItem key={it.emotion_id} {...it} onClick={handleClickEmotion} isSelected={it.emotion_id === emotion} /> ))} </div> </section> <section> <h4>오늘의 일기</h4> <div className="input_box text_wrapper"> <textarea placeholder="오늘은 어땠나요?" ref={contentRef} vlaue={content} onChange={(e) => setContent(e.target.value)} /> </div> </section> <section> <div className="control-box"> <MyButton text={"취소하기"} onClick={() => navigator(-1)} /> <MyButton text={"작성완료"} type={"positive"} onClick={handleSubmit} /> </div> </section> </div> </div> ); }; export default DiaryEdit;

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