안녕하세요 제로초님, 로그인 관련해서 어려움이 있어서 질문드립니다. 현재 사용하고 있는 기술 스택은 다음과 같습니다. 프론트 : 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> ); }
안녕하세요. 저는 현재 고농축 프론트엔드와 백엔드 강의를 모두 수강 중 인데요, 최근에 ‘완벽한 프론트엔드’ 강의가 새로 생긴 걸 알게 됐습니다. 이미 고농축 강의를 수강 중인데도, 완벽한 프론트엔드 강의도 수강하는 게 도움이 될까요? 그리고 ‘고농축 프론트엔드’와 ‘완벽한 프론트엔드’의 가장 큰 차이점 이 궁금합니다. 혹시 고농축 강의를 수강한 사람 입장에서 완벽한 프론트에서 꼭 들어야 하는 파트가 있다면 추천도 부탁드립니다! 그리고 혹시 ‘완벽한 프론트엔드’ 강의에 대해 쿠폰을 받을 수 있는지도 문의드립니다.
안녕하세요. 지금 Next.js강의중 글로벌 레이아웃강의를 듣고있는데 css를 자동완성해주는 styledcomponent가 적용이 안되서 문의드립니다. 구글링을 통해 vscode-styled component의 버전을 낮춰보기도하고 typescripts에 버전을 낮추니 next.js가 적용이 안되어서 다시 돌려놓긴했는데 여전히 적용이 안돼서 뭐가 문제인지 몰라서 질문드립니다. 혹시몰라 제가 설치한 모든 확장프로그램들을 보내드립니다.
왜 39강까지지만 push하구 그 이후 회차들은 push안했나요? 강의 수강회차별로 소스 싱크맞추어서 학습하면 도움이 많이 될텐데 강의별로 확인해셔서 소스 동기화 요청드립니다. 80강이면 80강 까자끝난 소스가 올라오면 되겠죠 ? 79강에서 80강 갔는데 ui가 바뀌어서 어떻게 환경을 잡아야할지 당황스럽습니다.
"Create-투두 추가하기" 강의 11분쯤에 나오는 엔터로도 버튼 실행하기에 관해 질문이 있습니다. onKeyDown 함수를 추가하기전엔 input박스에서 한버튼을 꾹 누르고있으면 연속해서 값이 입력 되었었는데, 강의와 같이 onKeyDown 함수를 추가하고 나면 한가지 키를 꾹 누르고 있어도 하나만 입력 됩니다. (ex. E버튼을 꾹 누르는 경우, "EEEEEEEEEEEEE" 이렇게 입력 되었었는데, onKeyDown을 추가하면 "E" 이렇게 하나만 입력됩니다.) 엔터로 버튼을 실행하면서 한가지 키를 꾹 눌러서 연속적으로 값도 입력할 수 있는 방법이 있는지 궁금합니다. 감사합니다.
