뭐가 문제일까요? ㅠㅠ

오류 내용입니다.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;

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

안녕하세요 typeORM 관계설정 중에 궁금한게 생겨서 질문드립니다.공식문서에 나온 코드를 보면 ManyToOne 데코레이터 안에 두 가지 인자가 있는데 앞에 있는건 강의에서도 작성하지만 두번 째인자는 생략이 가능한 것 같네요.. 혹시 두번 째 인자는 OneToMany를 작성할 때도 생략이 가능한가요?그리고 혹시 OneToMany로 받아오는 배열을 배열말고 count해서 숫자로 칼럼에 넣을 수 있는 방법이 있을까요..? 힌트라도 알려주시면 감사하겠습니다!!@Entity() export class Photo { @PrimaryGeneratedColumn() id: number @Column() url: string @ManyToOne(() => User, (user) => user.photos) user: User }

안녕하세요 강의를 듣고 직접 작성하면서 적용을 해보려고 하다가 강의에서 사용하는 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도 아직 공부할 예정이라 자세히 몰라서 질문드립니다ㅎ

안녕하세요. 깃허브에 같은내용으로 comment를 남겼지만 빠른 강의진행을 위해서 게시판에도 남깁니다. 감사합니다인프런 아이디 : anytime0105@naver.com인프런 이메일 : anytime0105@naver.com깃헙 아이디 : anytime877@gmail.com깃헙 Username : nameisjhC

- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.안녕하세요developer tool 클릭했는데 안떠요 아무 반응이 없는데 왜 그런걸가요 ㅠㅠ