안녕하세요. Loading UI & Streaming 강의를 따라 하는데, 캐시 비우기 및 강력 새로고침으로 해도 page loading... 이 안보이네요. 개발자도구 띄우고 '캐시 비우기 및 강력 새로고침'으로 하면, 개발자도구 > 네트워크 에서 dashboard페이지가 '대기중' 상태이고, 미리보기에서 보이는 내용은 없습니다. route.ts에서 랜덤 지연시간이 지난 후 VSCode 에서 data { data: '4057만에 응답완료!' } 라고 뜬 후에 브라우저 개발자도구 > 네트워크에서 dashboard페이지 미리보기를 보면 " 루트 레이아웃대시보드 레이아웃 page loading..." 이라고 보이는데, 지연시간이 지난 후이라서 그런지 브라우저 상에서는 "루트 레이아웃대시보드 레이아웃 대시 보드 페이지" 으로만 보입니다. datashboard 페이지의 응답이 지연 시간이 지난 후에 하는거 같은데 왜 이럴까 궁금해지네요.
안녕하세요! 강의 잘 듣고 있습니다ㅎㅎ 이번 강의에서 React dev tools의 ' Highlight updates when components render' 옵션을 통해서 컴포넌트가 언제 리렌더링 되는지 감지하는 방법을 알려주셔서 해당 내용 학습 중에 궁금한게 생겨 질문 드립니다. 해당 옵션을 켜고, 이번 강의의 실습 내용 중에서 input 영역을 input component로 분리하면 다른 component와 어떠한 영향도 주고 받지 않으니까 input을 작성할 때 input 영역만 highlight가 될 거라 예상 했는데요, 실제로는 형제 컴포넌트도 다 같이 리렌더링 되는 것 처럼 보이더라구요. 이 현상이 제 코드의 문제인건지, 다른 이유가 있는건지 궁금합니다. input component를 분리한 App.jsx와 Input.jsx를 아래에 코드로 첨부했습니다. [App.jsx] import { useState, useEffect, useRef } from 'react' import "./App.css" import Viewer from './components/Viewer' import Controller from './components/Controller' import Even from './components/Even' import Input from './components/Input' function App() { const [count ,setCount] = useState(0); const handleClickCount = (addValue) => { setCount(count + addValue) } return ( <div className="App"> <h1>Simple Counter</h1> <section> <Input /> </section> <section> <Viewer count={count} /> {count % 2 === 0 ? <Even /> : null} </section> <section> <Controller onCount={handleClickCount}/> </section> </div> ) } export default App [Input.jsx] import { useState } from "react"; const Input = () => { const [input, setInput] = useState(""); return ( <input value={input} onChange={(e) => { setInput(e.target.value) }} /> ) } export default Input;
저는 vercel과 cloudtype 을 이용해 배포를 했습니다. gitlink front-link backend-link 업무게시판등 backend연동이 잘 되지만, admin에서 문제가 있습니다. 수업에 진행한 아이디와 패스워드로, 진행했고, 오류가 나는 부분들을 계속 수정해 보았으나, 로그인연동이 안되서 문의 드립니다. 데이터는 git에 업로드된 내용으로 확인해 주시면 좋겠습니다.
안녕하세요 제로초님, 로그인 관련해서 어려움이 있어서 질문드립니다. 현재 사용하고 있는 기술 스택은 다음과 같습니다. 프론트 : next.js/백엔드 : express 로그인을 구현했고 백엔드에서 토큰을 만들어서 refreshToken 은 httpOnly cookie 에, accessToken 은 응답 바디에 넣어서 보내주도록 만들었습니다. 라이브러리 사용하지 않고, next.js 에서 로그인 api 호출하고 token 은 전역으로 관리하고, 토큰 만료시 토큰 재발급하고, 새로고침 시에도 로그인이 유지되도록(httponly 쿠키로) fetchWrapper 을 따로 만들었습니다. -> fetch 은 axios 와 달리 interceptor 같은거 못사용하니까요 하지만 이는 클라이언트 컴포넌트에서만 가능하고, 서버에서는 토큰 만료시 재시도 로직이 불가능하다는 것을 알게되었습니다. 코드도 지저분해지는 것같고.. 그래서 다른 해결책이 있나해서 이 강의의 로그인 부분을 보고있습니다. 근데 auth,js 는 env 에 jwt secret 키를 넣어야하는걸 보니 클라이언트에서 토큰을 관리하는 것 같더라구요 제 생각은 auth.js 는 백엔드 서버에서 쿠키를 관리하는 방식과 함께 사용하기에는 맞지 않다는 느낌을 들었습니다. 그래서 next.js 에서 로그인 및 권한 관리를 쉽게 사용하려면 결국 auth.js 를 사용해야만 하는 것인지.... 궁금합니다. 그렇게된다면 백엔드에서 토큰 만드는 로직을 없애는 것이 맞는지 궁금합니다. 감사합니다.
ㅎㅎ 완강했어용~ 이전에 유튜브 통해 커서 AI로 프론트앤드 쪽이나 단위 기능 구현은 실습을 몇번 해봐서 강사님 강의 듣는데 수월했습니다. 백앤드쪽 연계가 무척 궁금해서 강의를 봤는데 궁금했던게 많이 해소되었습니다. 감사드리고요~ 그런데 강사님! 배포할 때 Vercel 대신 Cloudflare Workers도 괜찮을까요?
강의에서 Typescript를 사용하고 있는데, 정작 타입은 제대로 안 잡고 넘어가는 경우가 많네요 수강생 타겟이 초보라고 되어 있지만, 타입 에러가 방치돼 있어서 따라가기가 더 어려운 느낌이에요 오히려 타입을 명확히 잡고 넘어갔으면 더 수월하게 진행됐을 것 같다는 생각이 드네요
안녕하세요 ! 섹션 6. 페이지 캐싱 강의를 듣고 루트(/) 페이지를 static page 로 만들어 보기 위한 실습 과정에서 app/layout.tsx 파일 내부의 모든 도서를 패칭하는 fetch 함수의 option에는 아무 옵션도 설정하지 않고 (Next15 버전 기본값은 no-store ), 루트 페이지 내부의 동일한 데이터 패칭만 cache 옵션( force-cache )을 추가하여 데이터가 캐싱되도록 설정했습니다. 이러한 과정 후 npm run build 를 통해 빌드 하니 루트 페이지가 정적 페이지(static page)로 빌드 되었습니다. 정적 페이지가 되기 위해서는 동적 함수를 사용하지 않아야 하며, 데이터를 반드시 캐싱해야 되는데 동일한 url 로 데이터 패칭을 보냈을 때 서로 다른 옵션 을 사용하게 되면 request memoization으로 캐싱된 데이터 force-cache 로 설정된 데이터)를 우선적으로 사용해서 정적 페이지로 동작하는 건가요? 1번 과정에서 궁금한 점이 발생하여 이번에는 layout.tsx 페이지의 데이터 패칭 옵션을 강제로 cache : "no-store" 를 추가하여 빌드 를 진행했더니 빌드 가 정상적으로 완료되지 않고 오류가 발생하여 빌드가 완료되지 않는 문제가 발생했습니다. 동일한 url로 데이터 패치를 보낼 때 기본 값을 사용한 패치와 옵션을 추가한 패치가 있다면 옵션을 추가한 패치를 우선적으로 사용하고, 서로 다른 옵션은 추가할 수 없는건가요? (기존 build 파일인 .next 폴더를 제거하고 빌드하니 빌드가 성공적으로 동작했으며, 루트 페이지가 Dynamic page로 빌드되었네요.. 기존 빌드된 .next 폴더가 있을 때 2번 상황 처럼 동일한 fetch url에 옵션만 다르게 설정하여 빌드하니 오류가 발생한 이유를 모르겠네요..ㅎㅎ) dynamic page 에서 dynamic params 에 generateStaticParams 함수를 통해 params 값을 미리 전달하여 페이지를 만드는 경우, return 값으로 전달하지 않은 params 의 페이지를 사전 렌더링 할 때 page router의 getStaticPaths의 fallback 옵션 blocking 처럼 동작하는 건가요? 테스트 과정에서 발생한 문제들을 이해하고 싶은데 이해가 가지 않아서 질문 드립니다 ! app/layout.tsx import "./globals.css"; import Link from "next/link"; import style from "./layout.module.css"; import { BookData } from "@/types"; async function Footer() { const response = await fetch( `${process.env.NEXT_PUBLIC_API_SERVER_URL}/book`, { cache: "no-store", } ); if (!response.ok) { return <footer>제작 @rekoding</footer>; } const books: BookData[] = await response.json(); return ( <footer> <div>제작 @rekoding</div> <div>총{books.length}권</div> </footer> ); } export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode; }>) { return ( <html lang="en"> <body> <div className={style.container}> <header> <Link href={"/"}>📚 ONEBITE BOOKS</Link> </header> <main>{children}</main> <Footer /> </div> </body> </html> ); } (with-searchbar)/page.tsx import BookItem from "@/components/book-item"; import style from "./page.module.css"; import { BookData } from "@/types"; const AllBooks = async () => { try { const response = await fetch( `${process.env.NEXT_PUBLIC_API_SERVER_URL}/book`, { cache: "force-cache", } ); if (!response.ok) { throw new Error(); } const allBooks: BookData[] = await response.json(); return allBooks.map((book) => <BookItem key={book.id} {...book} />); } catch (error) { console.error(error); return <div>예상치 않은 문제가 발생했습니다.</div>; } }; const RandomBooks = async () => { try { const response = await fetch( `${process.env.NEXT_PUBLIC_API_SERVER_URL}/book/random`, { next: { revalidate: 3 }, } ); if (!response.ok) { throw new Error(); } const randomBooks: BookData[] = await response.json(); return randomBooks.map((book) => <BookItem key={book.id} {...book} />); } catch (error) { console.error(error); return <div>예상치 않은 문제가 발생했습니다.</div>; } }; export default async function Home() { return ( <div className={style.container}> <section> <h3>지금 추천하는 도서</h3> <RandomBooks /> </section> <section> <h3>등록된 모든 도서</h3> <AllBooks /> </section> </div> ); }
안녕하세요 ScrollSmoother에 대해 질문드릴게요! 이번 강의 너무 잘보고 있는데 , 다른분의 질문을 보고 ScrollSmoother가 무료가 되었다라고 말씀하셔서 활용해보려고 합니다. 사용법이 ID를 레퍼하여 자식 div를 tramsform으로 따라오는식으로 스무디 효과를 주는건 확인했습니다 근데 만약에 페러렉스 효과를 백그라운드 이미지에 반영해보려니 tramsform의 크기를 따라가는지 background fixed같은건 전혀먹히지가 않는거같네요 .. 스크롤링하면 부드럽게 스무스 하게 되면서 bg의 포지션도 살짝움직이는 식으로 구현해보려 했는데 혹시 방법이 없을지 질문드립니다. ㅜ
- 강의 영상에 대한 질문이 있으시면, 상세히 문의를 작성해주시면, 주말/휴일 제외, 2~3일 내에 답변드립니다 (이외의 문의는 평생 강의이므로 양해를 부탁드립니다.) - 강의 답변이 도움이 안되셨다면, dream@fun-coding.org 로 메일 주시면 재검토하겠습니다. - 괜찮으시면 질문전에 챗GPT 와 구글 검색을 꼭 활용해보세요~ - 잠깐! 인프런 서비스 운영(다운로드 방법포함) 관련 문의는 1:1 문의하기를 이용해주세요. 안녕하세요 14강 72, 73번 강의 영상이 동일한거 같습니다. 72강 23초 화면 73강 23초 화면 확인 요청드립니다..ㅠㅠ
안녕하세요. 저는 현재 고농축 프론트엔드와 백엔드 강의를 모두 수강 중 인데요, 최근에 ‘완벽한 프론트엔드’ 강의가 새로 생긴 걸 알게 됐습니다. 이미 고농축 강의를 수강 중인데도, 완벽한 프론트엔드 강의도 수강하는 게 도움이 될까요? 그리고 ‘고농축 프론트엔드’와 ‘완벽한 프론트엔드’의 가장 큰 차이점 이 궁금합니다. 혹시 고농축 강의를 수강한 사람 입장에서 완벽한 프론트에서 꼭 들어야 하는 파트가 있다면 추천도 부탁드립니다! 그리고 혹시 ‘완벽한 프론트엔드’ 강의에 대해 쿠폰을 받을 수 있는지도 문의드립니다.
안녕하세요, 파트1부터 3까지 완강한 1인입니다. 파트3을 듣던 당시에는 GSAP ScrollSmoother 플러그인이 유료였는데, 얼마전에 모든 플러그인이 무료로 전환되었더라고요~ 그래서 강의 당시에 일부 플러그인들을 대체해서 강의해주신 부분이 있었는데, 혹시 해당 부분에 대해서 추후 내용이 업데이트될 예정이 있을지 문의드립니다. ps. 모든 플러그인이 무료로 전환되면서 좀더 다양한 애니메이션이 가능해지니, 추후 파트4도 매우 기대가 되는 중입니다.
