173만명의 커뮤니티!! 함께 토론해봐요.
해결됨
타입스크립트 입문 - 기초부터 실전까지
안녕하세요. vue 사용중에 있어 부득이하게 jquery 를 사용하려고 하는데요. import $ from 'jquery'; import 'jqueryui'; import 'jquery-ui-touch-punch'; 모바일까지 지원을 해야해서 jquery-ui-touch-punch 까지 사용을 해야 하는 상황입니다. 위와 같이 import를 해주면 코드툴에선 에러가 안뜨는데 브라우저 화면에서는 콘솔에러가 나타나고 있습니다. 아래와 같은 오류인데 혹시 해결책이 있을까요? 여러 방법으로 시도해 보고 있으나 해결이 안되서 혹시나 경험이 있으실지 해서 문의드립니다 ㅠㅠ Uncaught ReferenceError: jQuery is not defined
devYo
2024-05-08T05:57:44.430Z
댓글 2
좋아요 1
조회수 738
미해결
마우스가 그림 위에 오버되면 원을 생성하는 인터랙티브 기능을 구현했습니다. 사진 안에서만 원들이 생성 되고 사진 영역을 벗어나면 원이 그려지지 않았으면 좋겠는데 어떻게 해야할까요? <div id="leaf"> </div> <body> <script> let leaf = document.getElementById("leaf"); let jean = document.getElementById("jean"); leaf.addEventListener("mouseover",onmouseover); //window.addEventListener("mouseover",onmouseover); function onmouseover(e){ let circle = document.createElement("div"); let radius = Math.floor(Math.random()* 150+50); let randomBrightColor = () => { let color_r = Math.floor(Math.random() * 127 + 128).toString(16); let color_g = Math.floor(Math.random() * 127 + 128).toString(16); let color_b = Math.floor(Math.random() * 127 + 128).toString(16); return `#${color_r+color_g+color_b}`; } circle.style.position = "absolute", circle.style.opacity = Math.random()*0.9 + 0.1; circle.style.width = radius+"px"; circle.style.height = radius+"px"; circle.style.borderRadius = "50%" circle.style.backgroundColor = randomBrightColor(); circle.style.left= e.pageX -radius * 0.5 + "px"; circle.style.top= e.pageY -radius * 0.5 + "px"; circle.style.transform= "scale(0,0)"; gsap.to(circle, {scale:1 , ease: "back.out(1.7)", duration: 0.3}) document.body.appendChild(circle); circle.style.zIndex = "1"; } </script> </body> css 는 다음과 같습니다 #leaf{ width: 600px; height: 600px; overflow: hidden; background-image: url(https://images.unsplash.com/photo-1714571883639-fe73d73ef8a9?q=80&w=3387&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D); }
ㄴㄹㅇㄹㄴㄹㅇ
2024-05-07T08:40:03.284Z
댓글 1
좋아요 0
조회수 328
해결됨
기초부터 배우는 Next YTMusic 클론 코딩 (with next.js 14, UI 마스터)
8.2에서 보이는 site안에 page파일과 7.6에서 보이는 page파일의 코드가 다른거 같습니다. 깃허브에는 7.7 챕터가 따로 있던데... 혹시 그 브랜치에 site안의 page파일을 그대로 사용하면 될까요??
react 인터랙티브-웹 클론코딩 next.js tailwind-css zustand
임민규
2024-05-07T08:13:31.836Z
댓글 1
좋아요 2
조회수 210
미해결
Next + React Query로 SNS 서비스 만들기
import { http, HttpResponse } from "msw"; const testData = [ { result: "success", userId: 2, nickname: "닉네임", favoriteCount: 223, viewCount: 336, position: "Backend", userFileUrl: "/Users/user/Desktop/pictures/userPicture.jpg", year: "경력없음", techStack: "react, java, ---", softSkill: "소통, 적극성, ---", links: "http://블로그주소", alarmStatus: true, content: "안녕하세요 구인 중입니다", }, ]; export const handlers = [ http.post("/api/post", () => { return HttpResponse.text(JSON.stringify("ok")); }), http.get("/api/get", ({ request }) => { console.log("request", request); return HttpResponse.json(testData); }), ]; export default handlers;"use client"; import { redirect } from "next/navigation"; export default function Home() { const handleClick = () => { fetch(`${process.env.NEXT_PUBLIC_BASE_URL}/api/get`, { method: "get", }) .then((res) => console.log("res", res.json())) // JSON 형식으로 변환된 데이터를 가져옴 .then((data) => console.log("res?", data)); // JSON 데이터를 로그에 출력 }; return ( <> <div> <button onClick={handleClick}>test btn</button> <p>계정을 생성하세요</p> <form> <div> <> <label htmlFor="id">아이디</label> <input type="text" id="id" name="id" required /> </> <> <label htmlFor="name">이름</label> <input type="text" id="name" name="name" required /> </> <button type="submit">가입하기</button> </div> </form> </div> </> ); } browser.ts, handlers.ts, http.ts, MSWComponent.tsx, server.ts 는 제로초님과 다 동일하게 설정하였고 get부분에서 위와같이 하였는데 Unexpected token '<', "<!DOCTYPE "... is not valid JSON 라는 에러가 계속 발생합니다 ㅠㅠ 어떤부분이 문제일까요.. ! console.log("res", res.json())) 이부분에서 res만 콘솔로 확인하면 이렇게 나옵니다..!
react next.js react-query next-auth msw
2024-05-06T12:06:00.908Z
댓글 1
좋아요 0
조회수 897
해결됨
Next + React Query로 SNS 서비스 만들기
안녕하세요 제로초님, api/users/{id} 에서 Followers 데이터는 제가 상대방을 팔로잉 했고 로그인 정보 쿠키가 잘 전달되면 상대방의 팔로워 수와 관계없이 제가 팔로우 했다면 저의 userId만 배열에 담겨서 돌아오기 때문에 api/posts/followings 혹은 api/posts/recommends의 Comments 데이터도 이와 동일할 것이라고 생각했습니다. 추천 포스트는 prefetch를 진행하고( Suspense를 적용하지 않음) 팔로잉 포스트는 SSR을 할 때 서버에서 로그인 여부를 판단하는 쿠키를 함께 보내야 하기 때문에 prefetch에서는 next의 cookies를 사용해서 쿠키를 전달했습니다 . 하지만 Comments 배열에 로그인 유저가 아닌 다른 유저의 id도 함께 날라옵니다. 추천 포스트가 아닌 팔로잉 포스트는 useSuspenseInfiniteQuery를 사용했는데 로그인 유저의 id만 잘 전달받았습니다. 이게 Suspense 내부에 있어서 그런가 싶어서 Suspense를 걷어내고 prefetch만 사용했을 때도 동일하게 로그인 유저가 아닌 다른 유저의 id도 확인할 수 있었습니다. 왜 로그인 쿠키를 보내는데도 다른 유저의 정보도 날라오는지 궁금합니다. 어디가 잘못된 것일까요? useSuspenseInfiniteQuery를 사용한 팔로잉 포스트는 추천 포스트와 어떤점이 달라서 정상 작동한 것일까요? 추가) 이 글 작성하고 추천 포스트에도 useSuspenseInfiniteQuery를 적용했는데 팔로잉 포스트처럼 안 나오고 이전과 동일하게 다른 유저의 id도 함께 날라오는데 왜 그럴까요? 추천 포스트 결과 현재 로그인 한 유저의 id는 'jihwan3' Comments에 'jihwan2'도 함께 날라오는중 팔로잉 포스트 결과 현재 로그인 한 유저의 id는 'jihwan3' Comments에 'jihwan3'만 날라오는 중 Hearts도 jihwan3가 좋아요를 안 눌러서 비어있는 모습 page.tsx import { Suspense } from "react"; import { auth } from "@/auth"; import { Container } from "./_component/styled"; import HomeTab from "./_component/HomeTab"; import HomeTabProvider from "./_component/HomeTabProvider"; import PostForm from "./_component/PostForm"; import SuspenseDecider from "./_component/SuspenseDecider"; import Loading from "../_component/LoadingUI"; export default async function Home() { const session = await auth(); return ( <Container> <HomeTabProvider> <HomeTab></HomeTab> <PostForm me={session} /> <Suspense fallback={<Loading />}> {/* @ts-expect-error Server Component */} <SuspenseDecider /> </Suspense> </HomeTabProvider> </Container> ); } SuspenseDecider.tsx import { QueryClient, HydrationBoundary, dehydrate } from "@tanstack/react-query"; import getRecommendPosts from "../_lib/getRecommendPosts"; import getRecommendPostsServer from "../_lib/getRecommendPostsServer"; import PostDisplay from "./PostDisplay"; export default async function SuspenseDecider() { const queryClient = new QueryClient(); await queryClient.prefetchInfiniteQuery({ queryKey: ["posts", "recommends"], queryFn: getRecommendPostsServer, initialPageParam: 0, getNextPageParam: (lastPage, pages) => lastPage.at(-1)?.postId, pages: 1, }); return ( <HydrationBoundary state={dehydrate(queryClient)}> <PostDisplay /> </HydrationBoundary> ); } getRecommendPostsServer.ts import { QueryFunction } from "@tanstack/query-core"; import { Post as IPost } from "@/model/Post"; import { cookies } from "next/headers"; type Prop = { pageParam: number; }; const getRecommendPostsServer: QueryFunction<IPost[], [_1: string, _2: string], number> = async ({ pageParam }: Prop) => { const response = await fetch(`${process.env.NEXT_PUBLIC_BASE_URL}/api/posts/recommends?cursor=${pageParam}`, { method: "get", headers: { Cookie: cookies().toString(), }, }); if (response.ok) return response.json(); else throw new Error(); }; export default getRecommendPostsServer; postDisplay.tsx "use client"; import { use } from "react"; import { TabContext } from "./HomeTabProvider"; import RecommendPosts from "./RecommendPosts"; import FollowingPosts from "@/app/(afterLogin)/home/_component/FollowingPosts"; export default function PostDisplay() { const { selectedMenu } = use(TabContext); if (selectedMenu === "recommend") { return <RecommendPosts />; } return <FollowingPosts />; } RecommendPosts.tsx "use client"; import { useEffect, Fragment } from "react"; import { InfiniteData, useInfiniteQuery } from "@tanstack/react-query"; import { useInView } from "react-intersection-observer"; import getRecommendPosts from "../_lib/getRecommendPosts"; import Post from "../../_component/Post"; import { Post as IPost } from "@/model/Post"; export default function RecommendPosts() { const { isFetching, fetchNextPage, hasNextPage, data } = useInfiniteQuery<IPost[], Object, InfiniteData<IPost[]>, [_1: string, _2: string], number>({ queryKey: ["posts", "recommends"], queryFn: getRecommendPosts, initialPageParam: 0, getNextPageParam: (lastPage) => lastPage.at(-1)?.postId, }); const { ref, inView } = useInView({ /* Optional options */ threshold: 0, delay: 100, }); useEffect(() => { if (inView) !isFetching && hasNextPage && fetchNextPage(); }, [inView, isFetching, hasNextPage, fetchNextPage]); if (!data) return null; // 이거 에러는...? type error인데.. -> InfiniteData로 해결 return ( <> {data.pages.map((ele: IPost[], idx: number) => ( <Fragment key={idx}> {ele.map((post: IPost) => ( <Post key={post.postId} post={post}></Post> ))} </Fragment> ))} <div ref={ref} style={{ height: "50px" }}></div> </> ); } getRecommendPost.ts import { QueryFunction } from "@tanstack/query-core"; import { Post as IPost } from "@/model/Post"; type Prop = { pageParam: number; }; const getRecommendPosts: QueryFunction<IPost[], [_1: string, _2: string], number> = async ({ pageParam }: Prop) => { const response = await fetch(`${process.env.NEXT_PUBLIC_BASE_URL}/api/posts/recommends?cursor=${pageParam}`, { method: "get", credentials: "include", }); if (response.ok) return response.json(); else throw new Error(); }; export default getRecommendPosts; FollowingPosts.tsx "use client"; import { Fragment, useEffect } from "react"; import { useSuspenseInfiniteQuery, InfiniteData } from "@tanstack/react-query"; import { useInView } from "react-intersection-observer"; import getFollowingPosts from "../_lib/getFollowingPosts"; import Post from "../../_component/Post"; import { Post as IPost } from "@/model/Post"; export default function FollowingPosts() { const { isFetching, fetchNextPage, hasNextPage, data } = useSuspenseInfiniteQuery<IPost[], Object, InfiniteData<IPost[]>, [_1: string, _2: string], number>({ queryKey: ["posts", "followings"], queryFn: getFollowingPosts, initialPageParam: 0, getNextPageParam: (lastPage, allPages, lastPageParam, allPageParams) => lastPage.at(-1)?.postId, }); const { ref, inView } = useInView({ threshold: 0, delay: 100, }); useEffect(() => { if (inView) !isFetching && hasNextPage && fetchNextPage(); }, [inView, fetchNextPage, hasNextPage, isFetching]); if (!data) return null; return ( <> {data.pages.map((ele: IPost[], idx: number) => ( <Fragment key={idx}> {ele.map((ele) => ( <Post key={ele.postId} post={ele}></Post> ))} </Fragment> ))} <div ref={ref} style={{ height: "100px" }}></div> </> ); }
2024-05-04T13:39:39.289Z
댓글 1
좋아요 0
조회수 288
해결됨
실무에 바로 적용하는 프런트엔드 테스트 - 1부. 테스트 기초: 단위・통합 테스트
실무에 적용하려고 하니 msw 에서 많이 막히네요 ㅠ 그래서 올려주신 깃헙 프로젝트를 샅샅히 훑어보고 있는데 mockServiceWorker.js 이 파일과 package.json에 "msw": { "workerDirectory": "public" } 요런 부분이 있더라고요. 요것들의 역할이 뭔지 알수 있을까요? msw 사이트에 가서 Getting started 를 가봐도 안나와 있는것 같아서 궁금합니다!
javascript react 소프트웨어-테스트 vitest
bn.kim
2024-05-03T08:38:07.452Z
댓글 2
좋아요 1
조회수 297
미해결
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
안녕하세요!! 과제 완료해서 피드백 부탁드리고자 올렸습니다! 앞으로 잘 부탁 드립니당~ <html> <!DOCTYPE html> <html lang="ko"> <head> <title>회원가입</title> <link rel="stylesheet" href="./02-signup.css"> </head> <body> <div class="signUpContent"> <h2> 회원 가입을 위해<br> 정보를 입력해주세요 </h2> <label for="email" class="label text">* 이메일</label> <input id="email" class="input_text" type="text"> <label for="name" class="label text">* 이름</label> <input id="name" class="input_text" type="text"> <label for="password" class="label text">* 비밀번호</label> <input id="password" class="input_text" type="password"> <label for="password_chk" class="label text">* 비밀번호 확인</label> <input id="password_chk" class="input_text" type="password"> <div class="signUpChk"> <input id="gender_w" class="input_radio" type="radio" name="gender"> <label for="gender_w" class="label gender">여성</label> <input id="gender_m" class="input_radio" type="radio" name="gender"> <label for="gender_m" class="label gender">남성</label> </div> <div class="agreeChk"> <input type="checkbox" id="input_chk"> <span class="agree_text"> 이용약관 개인정보 수집 및 이용, 마케팅 활용 선택에 모두 동의합니다. </span> </div> <div class="out-line"> <div class="line"></div> </div> <button> <span>가입하기</span> </button> </di> </body> </html> <css> * { box-sizing: border-box; } h2 { font-size: 32px; color: #0068FF; font-weight: 700; line-height: 47px; } .out-line{ padding: 30px 0px; } .line { border-bottom: 1px solid #E6E6E6; } .label{ font-size: 16px; font-weight: 400; line-height: 24px; } .signUpContent{ width: 670px; height: 960px; border: 1px solid #AACDFF; border-radius: 20px; box-shadow: 7px 7px 39px rgba(0, 104, 255, .25) ; display: flex; flex-direction: column; padding: 72px 100px 70px 100px; } .label.text{ padding: 20px 20px 0 0; color: #797979; } .input_text{ border-style: none; border-bottom: 1px solid #CFCFCF; height: 60px; } .signUpChk{ display:flex; justify-content: center; align-items: center; padding: 50px 0; } .input_radio{ margin: 0 5px 0 0; width: 20px; height: 20px; } .label.gender{ padding-right: 30px; } .agreeChk{ display: flex; justify-content: center; align-items: center; } .agree_text{ height: 22px; font-size: 14px; font-weight: 400; line-height: 20px; } button{ width: 470px; height: 75px; background-color: #FFF; border: 1px solid #0068FF; border-radius: 10px; } button > span { font-size: 18px; font-weight: 400; color: #0068FF; }
react node.js seo graphql next.js
개발하는 알파카
2024-05-03T06:52:35.874Z
댓글 2
좋아요 0
조회수 303
해결됨
기초부터 배우는 Next YTMusic 클론 코딩 (with next.js 14, UI 마스터)
HeaderBgChanger라는 컴포넌트는 단순히 서버 컴포넌트에서 react hook을 사용할 수 없기 때문에 만드는 컴포넌트인지 궁금합니다. 또 이렇게 컴포넌트를 만들 경우에 렌더링 될 때 영향을 주는 부분은 없는지 궁금합니다.
react 인터랙티브-웹 클론코딩 next.js tailwind-css zustand
김택수
2024-05-01T17:52:11.576Z
댓글 2
좋아요 1
조회수 294
해결됨
Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex
깃허브 권한이 별도 없다고해주셨는데, 아래와같이 vue-todo 접근이 불가해서 확인부탁드리려합니다.
조예림
2024-05-01T14:58:10.705Z
댓글 2
좋아요 1
조회수 388
미해결
Next + React Query로 SNS 서비스 만들기
Nextjs fetch도 캐시가 지원되고, react-query도 캐시가 지원되는걸로 이해를 했는데요 문득 궁금한 점이 생겨서 질문 드립니다. Nextjs fetch와 react-query에서의 캐시는 같은 개념인가요? 아니면 서로 다른 개념인가요? 왜 Nextjs fetch를 안 쓰고 react-query를 쓰는 걸까요? Nextjs fetch는 어떨 때 쓰고 react-query는 어떨 때 쓰는 건가요? 감사합니다.
react next.js react-query next-auth msw
주니어에요
2024-05-01T13:37:05.205Z
댓글 1
좋아요 0
조회수 455
해결됨
웹 프론트엔드를 위한 자바스크립트 첫걸음
HTML이랑 CSS 아는 게 얼마 없는데 이 상태로 공부하면 하다가 막힐까요? 그리고 출판사에서 전자책 출간 일자 답변은 아직인지요..ㅠㅠ
쿄야마 카즈사
2024-05-01T05:44:48.851Z
댓글 2
좋아요 1
조회수 316
해결됨
기초부터 배우는 Next YTMusic 클론 코딩 (with next.js 14, UI 마스터)
안녕하세요. 강의를 수강중인 수강생입니다. 혹시 컴포넌트들을 만들때엔 타입스크립트 tsx가 아닌 jsx를 사용하시는데, 이러한 이유가 있을까요? 추가적으로 React.FC에 대해 공부하다보니 지양한다는 글들이 많은데, 어떻게 생각하시는지 궁금합니다. 감사합니다.
react 인터랙티브-웹 클론코딩 next.js tailwind-css
minji
2024-04-25T04:14:35.027Z
댓글 1
좋아요 1
조회수 425
미해결
[코드팩토리] [초급] NestJS REST API 백엔드 완전 정복 마스터 클래스 - NestJS Core
항상 좋은 강의 감사합니다. 예전에 프론트 개발 할 때도 궁금했던 부분인데 Bearer 를 굳이 작성하는 이유나 혹은 작성하게 된 관습의 기원이 궁금합니다.
javascript typescript rest-api nestjs backend
info
2024-04-23T13:59:04.765Z
댓글 2
좋아요 0
조회수 392
미해결
안녕하세요. 제가 프로그램을 만들고 있습니다. 네이버 로그인을 puppeteer로 자동화를 하려고 하고있습니다. 하지만 네이버에서 매크로 프로그램으로 로그인을 하는것을 막고 있습니다 ㅠㅠ 로그인을 자동화 시키려하면 캡챠로 넘어가서 다른 방법이 있는지 알아보는 와중 복사 붙여넣기 기능을 하면 된다고 구글링을 통해 봤습니다. 하지만 복사 붙여기능또한 네이버 로그인에서는 안되게 막아놓은것 같습니다.. 혹시 네이버 로그인 자동화를 구현하신 분 있는 멋진분을 찾습니당.
puppeteer javascript 매크로 크롤링 electrone
2024-04-21T02:20:05.772Z
댓글 2
좋아요 0
조회수 373
미해결
[코드팩토리] [초급] NestJS REST API 백엔드 완전 정복 마스터 클래스 - NestJS Core
안녕하세요 선생님~ 위와 같이 세팅해서 user/profile 로 post 요청을 보내면 500 에러가 나야하는걸로 알고 있는데, 이처럼 잘 들어가 버리네요ㅜ `users` 로 get요청을 보내도 profile이 null이 들어간 상태로 조회됩니다. 개발환경 버전도 올려드립니다~
javascript typescript rest-api nestjs backend
노상
2024-04-20T18:25:00.142Z
댓글 3
좋아요 0
조회수 419
미해결
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
강사님이 알려주신 대로 작성했는데 해당 부분에서 Cannot read properties of undefined (reading 'map') 이라는 오류가 발생합니다.ㅠㅠ 오타가 있는것 같지는 않은데..어디가 문제일까요..?
이화영
2024-04-20T14:29:57.455Z
댓글 2
좋아요 0
조회수 428
해결됨
진짜! 자바스크립트(Javascript) - 기초부터 고급까지
function testShadowing() { let x = 5; if (true) { let x = 10; console.log(x); } console.log(x); } testShadowing() 위와 같이 let으로 x 변수를 2번 할당했는데, 실제 메모리에는 어떻게 할당이 되나요? 블록 스코프라고 하더라도 함수 스코프 안에서 블록 스코프가 만들어 질 것으로 생각이 되는데(뇌피셜입니다.), 이미 함수 스코프에서 x라는 변수명을 사용하고 있어서 블록 스코프에서 x는 자바 스크립트 엔진에서 어떻게 받아들이고 실제 메모리에 어떤 식으로 메모리 할당을 하는지 궁금합니다.
산성
2024-04-19T06:12:29.939Z
댓글 2
좋아요 0
조회수 542
해결됨
기초부터 배우는 Next YTMusic 클론 코딩 (with next.js 14, UI 마스터)
안녕하세요 강사님은 코드 수정 후 브라우저에서 바로바로 확인이 되는 것 같은데 저는 코드를 수정할 때 마다 아래의 오류가 발생해서 매번 다시 yarn dev를 해줘야 수정한 내역이 확인이 되다 보니 강의를 따라 진행 하는대 집중이 되질 않네요. 혹시 아래의 에러가 발생 되지 않게 하는 방법이 있는 것인지 문의 드립니다. 감사합니다. 수고하세요. =================================================================== ⨯ [Error: UNKNOWN: unknown error, open 'D:\study\react\workspace\yt-music-clone-next\.next\static\chunks\app\layout.js'] { errno: -4094, code: 'UNKNOWN', syscall: 'open', path: 'D:\\study\\react\\workspace\\yt-music-clone-next\\.next\\static\\chunks\\app\\layout.js' ===================================================================
react 인터랙티브-웹 클론코딩 next.js tailwind-css zustand
itdeveloper
2024-04-19T03:29:49.387Z
댓글 2
좋아요 1
조회수 697
미해결
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
배포 후 링크 공유하는데 오픈 그래프 태그가 나타나지 않습니다.ㅜㅜ
우다슬
2024-04-18T08:05:32.165Z
댓글 5
좋아요 0
조회수 957
해결됨
기초부터 배우는 Next YTMusic 클론 코딩 (with next.js 14, UI 마스터)
2분 50초쯤에서 멀티선택 하는 방법 알려주시면 감사하겠습니다!!
react 인터랙티브-웹 클론코딩 next.js tailwind-css zustand
강민혜
2024-04-15T14:06:19.999Z
댓글 2
좋아요 1
조회수 360
