import { IoPlaySkipBackSharp, IoPlaySkipForwardSharp } from "react-icons/io5"; import { PlayerSlider } from "../ui/PlayerSlider"; import { useAudio } from "react-use"; import { AiOutlinePause } from "react-icons/ai"; import { usePlayerState } from "@/hooks/usePlayerState"; import { ClipLoader } from "react-spinners"; import { RiPlayFill } from "react-icons/ri"; export default function PlayerContent() { const { activeSong } = usePlayerState(); const [audio, state, controls, ref] = useAudio({ src: activeSong?.src ?? "", autoPlay: true, }); const isLoading = activeSong?.src && state.buffered?.length === 0; console.log("로딩상태:", isLoading); const onClickPreBtn = () => {}; const onClickStartBtn = () => { controls.play(); console.log("start일때 로딩상태:", isLoading); }; const onClickPauseBtn = () => { controls.pause(); console.log("pause일때 로딩상태:", isLoading); }; const onClickNextBtn = () => {}; return ( <div className="w-full h-full relative"> <div className="absolute top-[-16px] w-full"> <PlayerSlider className="w-full" defaultValue={[0]} value={[state.time]} onValueChange={(value) => { controls.seek(value); }} /> </div> {audio} <section className="flex flex-row justify-between items-center w-full h-full px-2 lg:px-6"> <div className="flex flex-row items-center h-full gap-1 lg:gap-8"> <IoPlaySkipBackSharp size={40} className="cursor-pointer" onClick={onClickPreBtn} /> {isLoading ? ( <ClipLoader color="#FFF" /> ) : state.playing ? ( <AiOutlinePause size={40} className="cursor-pointer" onClick={onClickPauseBtn} /> ) : ( <RiPlayFill size={40} className="cursor-pointer" onClick={onClickStartBtn} /> )} <IoPlaySkipForwardSharp size={40} className="cursor-pointer" onClick={onClickNextBtn} /> </div> <article></article> <div></div> </section> </div> ); } playerContent.tsx 파일인데무한로딩이 계속 생겨서 UI만 뱅글뱅글 돌아가네요.. 그리고 thumb도 조절이 안되요.. 어디가 잘못된지 모르겠네요 1시간째 찾고있는데 ㅠㅠ 저는 모든 파일을 jsx가 아닌 tsx로 해서 어딘가에 문제가 있는것 같은데 못찾겠습니다.  

안녕하세요, next-auth 5 베타를 사용하다가 "r is not a function"이라는 에러 메시지 때문에 next-auth 버전을 "^4.24.5"로 낮추었더니 해결되었습니다. 그런데 vercel에 배포하려하니 자꾸 아래의 사진과 같은 에러 때문에 어려움을 겪고 있습니다...ㅜ 해당 에러 구글에 찾아봐도 해결방법을 모르겠던데 도와주실 수 있으실까요ㅠㅠㅠ 

 플레이 그라운드에 정보를 넣는데 이게 왜 오류가 뜨는지 모르겠어요. 분명 몇 주전에는 된 내용을 복사 붙이기로 몇십번 시도해도 안됩니다. 그리고 '섹션 04'부터 api 요청하는 부분 다 안돼요. 뭘 잘못했는지 모르겠습니다.코드만 몇십번 확인하고, 다시 강의 재생해서 봤는데도 Api 요청에만 문제가 있습니다.다른 섹션들도 'api 요청 부분'만 아무리 클릭해도 맨 마지막 이미지와 같이 아무것도 안떠요.구글에서 하라는대로 캐시도 다 지웠고, 확장프로그램도 지우고를 여러 번 했음에도 안됩니다.apollo/client 버전은 3.11.1입니다.api 요청만 다 실패해서 몇주째 잡고 있는데...너무 답답해요.

각 페이지마다 loading과 error.tsx를 각각 주고 있는데 그냥root에 loading.tsx error.tsx를 하나만 둬서 공유하는 방식은 안되나요? 각 페이지마다 따로 둔 이유가 뭔가요? 현업에서도 layout은 보통 page마다 다르게 두나요?이전에는 프로젝트에서 그냥 root에 위치한 하나의 layout만 써와서.. 강의 잘 보고있습니다. 선생님!

아래와 같은 에러가 발생하는 이유가 제가 처음부터 파일구조를 강사님과 다르게 해서 그런가 싶어서 이미 코드는 짜놓은 상태이지만 src폴더를 만들고 그 안에 app 폴더를 넣어 구조를 똑같이 하니 레이아웃이 깨져서(원인은 아직 못 찾았습니다만 단순 import 위치 문제는 아님은 확실합니다.) 다시 src가 없는 상태로 회귀했습니다.auth.ts 파일을 app 폴더와 같은 위치에 두라고 강의에서 말씀하셔서 그대로 두기도 해보았고 혹시나해서 app 폴더 안에 위치시켰으나 handler를 못찾는 에러는 동일했습니다. 혹시 create next 이후에 다시 src를 만들어서 넣는것이 불가능한가요?불가능하다면 auth.ts와 middleware.ts의 위치를 현재 제 파일 구조상태에서 어느 위치에 두는 것이 맞나요?

/home 페이지에서 prefetch를 해주지 않고 PostRecommends & followingPosts에서 useQuery로만 데이터를 불러와도 상관없나요 ??1번이 맞다고 하면 prefetch를 통해서 dehydrated를 해주는 이유가 궁금합니다.아니면 서버 컴포넌트에서 react-query를 이렇게도 사용할 수 있다를 보여주신건지 궁금합니다:)

질문 1. next/image는 (Image컴포넌트) 웹사이트의 로딩 성능에 많은 영향을 미치는 이미지를 사용하는 것만으로도 큰 개선을 볼 수 있도록 해주는 컴포넌트이라서 비용이 비싸다고 하는데 그렇다면 AWS로 배포했을 때 next/image 때문에 비용이 더 올라가나요?질문 2. next/image가 비용이 비싸다면 어떤 경우에 사용하는지 궁금합니다.

뭔가요?

강의에서 데이터를 재검증하는 방법으로 route handler를 생성하고 그 안에서 revalidateTag 함수를 호출해서 캐시를 지우는 방법을 소개해주셨는데요! 그와 관련해서 궁금한게 세가지 있어서 질문 드립니다.버튼과 같은 클라이언트 컴포넌트에서 어떠한 동작을 수행한 후 데이터를 재검증 하려면 route handler로 요청을 보내고 route handler 내에서 revalidateTag 등을 사용하는 방법밖엔 없는걸까요?위의 방법으로 캐시를 지운 후 브라우저를 직접 새로고침해야 새로운 데이터를 가져와서 화면상에서 갱신이 되던데 직접 새로고침하지 않고 캐시를 지움과 동시에 바로 화면상의 모습도 갱신하려면 어떻게 해야 하나요?next.js에서도 react처럼 axios를 많이 사용하나요? 제가 지금까지 이해한 바로는 next.js는 여러가지 캐싱 기능을 fetch를 이용한 요청으로 제공하는 거 같더라구요. 그리고 공식문서나 다른 블로그 글들 혹은 강의를 봐도 데이터 패칭 및 캐시 부분에서는 fetch를 사용하는 예시만 나와서 next.js의 캐싱 기능을 활용하려면 fetch를 사용해야 하는건가 싶습니다. react를 이용할 때에는 보통 실무에서는 axios를 많이 사용한다고 들었었는데 next.js는 어떤지 궁금합니다

playground에서 입력한 곳에 이상한 하얀색 코드를 없애는 법 좀 알려주세요 

안녕하세요 디자인 전공생입니다! 웹디자인 배우면서 html은 맛보기로 공부했었는데, 강의 듣고 깔끔하게 다시 한번 정리할 수 있어 좋았습니다. 혹시라도 코드에 보완할점이 있을까 싶어 올립니다!!그리고 checkbox와 radio button에서 색이랑 테두리 등의 속성을 변경하고 싶을땐 어떻게 해야하는지 궁금합니다!<!DOCTYPE html> <html lang="ko"> <head> <title>과제</title> <style> .page{ width: 1920px; height: 1080px; display: flex; align-items: center; padding: 60px 625px 60px 625px; } .pb{ width: 670px; height: 960px; border-radius: 20px; border: 1px solid #AACDFF; background-color: #FFF; box-shadow: 7px 7px 39px 0px rgba(0, 104, 255, 0.25); display: flex; flex-direction: column; justify-content: space-evenly; padding: 72px 100px 70px 100px; } h1{ color: #0068FF; font-size: 32px; font-style: normal; font-weight: 700; line-height: normal; } .name{ color: #797979; font-family: "Noto Sans CJK KR"; font-size: 16px; font-style: normal; font-weight: 400; line-height: normal; } .gender{ text-align: center; } .agree{ text-align: center; font-size: 14px; border: 0; border-bottom: 1px solid #E6E6E6; padding: 0 0 24px 0; } button{ color: #0068FF; text-align: center; font-size: 18px; height: 75px; border-radius: 10px; border: 1px solid #0068FF; background: #FFF; } input{ border: 0; font-size: 30px; padding: 0 0 12px 0; border-bottom: 1px solid #CFCFCF; } </style> </head> <body> <div class="page"> <div class="pb"> <h1>회원 가입을 위해<br> 정보를 입력해주세요</h1> <br><br> <div class="name">* 이메일</div><br> <input type="text"><br> <div class="name">* 이름</div><br> <input type="text"><br> <div class="name">* 비밀번호</div><br> <input type="password"><br> <div class="name">* 비밀번호 확인</div><br> <input type="password"><br> <div class="gender"> <input type="radio" name="gender">여성 <input type="radio" name="gender">남성 </div> <br><br> <div class="agree"> <input type="checkbox"> 이용약관 개인정보 수집 및 이용, 마케팅 활용 선택에 모두 동의합니다.<br> </div> <button>가입하기</button> </div> </div> </div> </body> </html>

https://join.slack.com/t/lopun-lecture/shared_invite/zt-2mkxcgt5h-7Bq~fMnMJ8Scle17fzFYCQ Supabase로 노트앱 완성하기 15:00 즈음에 검색 기능을 만드는 과정에서 search state에 따른 검색 결과 업데이트에 질문이 있습니다. useEffect를 하나 더 추가해서 의존성 배열에 search 넣은 코드가 추가되었는데요. 기존 의존성 배열이 빈값인 녀석에 search만 추가해줘도 동일한 기능이 아닌가요?첫 렌더링, search state 변화 될 때만 실행이 되니까요.한번 더 동일한 코드에 의존성 배열만 다르게 해주신 점이 궁금합니다.

안녕하세요 강의 수강 후에 자체 프로젝트를 진행하고 있는데 소셜 로그인 처리 중 궁금한 점이 있어 질문 드립니다.기존에는 Google, Naver, Kakao, Facebook 등 5가지 소셜 로그인을 각각 OAuth 리디렉션 방식으로 구현했으나, 이번에는 NextAuth를 활용하여 간편하게 통합적으로 구현하려고 합니다.소셜 로그인은 authorization code 발급용으로만 사용하고 실제 access, refresh token 발급은 자체 서버에서 처리를 하려고 합니다. 따라서 인가 과정만 next auth를 활용하고 callbacks 내부에서 인가 코드를 전달하여 access token 발급 과정을 진행하려 했습니다./api/auth/[...nextauth]/route.ts const authOptions = { // Configure one or more authentication providers providers: [ GoogleProvider({ clientId: process.env.GOOGLE_ID ?? "", clientSecret: process.env.GOOGLE_SECRET ?? "", }), ], callbacks: { async signIn({ account, profile }: any) { if (account.provider === "google") { const response = await fetch( `${process.env.GATEWAY_SERVER_URL}/auth/v1`, { method: "POST", headers: { "Content-Type": "application/json", devicetype: "1", }, body: JSON.stringify({ sns_type: "GOOGLE", key: 인가코드, }), } ); } return true; // Do different verification for other providers that don't have `email_verified` }, }, }; const handler = NextAuth(authOptions); export { handler as GET, handler as POST };하지만 알아본 결과 NextAuth의 callbacks에서는 access token이 발급되고 authorization code는 받을 수 없게 되어있는 것 같은데 authorization code 발급용으로만 사용하기에는 next auth를 사용하는것이 적합하지 않은 것인지 궁금합니다.또한 authorization code를 받을 수 있는 방법이 있다면 알려주시면 감사하겠습니다! 

인강듣기전에 학습자료를 보고 먼저 따라했는데요.인강에선 <main> 이부분을 삭제를 안했는데,학습자료에선 main을 다 삭제 했더라구요.이부분에서 학습자료를 참고해도 될까요?아님 다시 복구 해야하나요?이 부분 뿐만아니라 인강에서는 삭제를 안했는데, 학습자료에선 삭제된 부분이 꽤 있어서 걱정이 되어 문의를 드립니다.

강의 내용 진행중 update 할때만 아래와 같은 에러가 나는데, 혹시 수정할 부분이 있을까요? insert/delete는 이상없이 진행 됩니다. 코드는 tailwind 일부만 제외하고는 전체 동일합니다.nextjs : 14.2.5 @supabase/supabase-js: "^2.45.0"'''localhost/:1 Access to fetch at 'https://********.supabase.co/rest/v1/note?id=eq.8' from origin 'http://localhost:3000' has been blocked by CORS policy: Method PATCH is not allowed by Access-Control-Allow-Methods in preflight response.'''const onEdit = async () => { if(!title || !content){ alert("제목과 내용을 입력하세요"); return; } const { data, error} = await supabase .from('note') .update({ title, content }) .eq('id',note.id); if(error){ alert(error.message); return; } setIsEditing(false); fetchNotes(); }  

안녕하세요..!! 제가 백엔드나 db관련해서 지식이 없어서 잘 이해가 안되네요 ㅠdb관리를 supabase 사이트로 들어가서 확인하면 되는데, 왜 클라이언트 툴인 DBeaver를 쓰는건가요?supabase 서버에 접근하지 못하는 클라이언트들이 테스트를 할때 쓰는것일까요?답변 부탁드립니다..  

FetchBoardsCount는 search를 입력 받아 검색 결과에 대한 개수를 가져오는데FetchUsedItemsISold는 내가 등록한 상품에 대한 전체 개수만 반환하고 있어 검색 결과에 대한 page 개수를 가져오지 못해 pagination에 검색 결과가 1개여도 내가 등록한 상품의 전체 개수를 한 page가 표시 됩니다. 검색 결과에 대한 refetch를 게시글이 없을 때까지 해주고 그걸 토대로 page 구성하기는 아닌 것 같아서API의 search의 Count에 의존 하지 않고 page를 해결할 수 있는 방법이 있을까요?

23-03-login-check / login-check-success 강의 플레이가 안됩니다. 23-02, 23-04 는 잘나오는데 왜 그럴까요

next.js를 도입하면 react query가 필요없어서 더 이상 안쓰시는건가요?? fetch를 쓰던 axios를 쓰던 next.js에서 알아서 캐시를 남겨주는건가요?? 아니면 fetch를 써야만 알아서 해주나요??

1. 강사님께서 올려주신 답변들을 봤습니다. "공식 문서에서 클라이언트 컴포넌트를 트리의 끝에 보내라고 권한다. 서버 컴포넌트를 최대한 활용하기 위한 권장 사항이라고 이해하시면 좋다."이라고 봤는데 프로젝트를 서버 컴포넌트의 비중을 늘린다면 이점은 무엇인가요? 2. 서버 컴포넌트의 비중을 늘리면 번들 크기의 감소로 사용자 경험을 최적화 하는 것이라서 next.js를 사용하는 것인가요?