176만명의 커뮤니티!! 함께 토론해봐요.
해결됨
한 입 크기로 잘라먹는 Next.js
이전의 사전 렌더링에서 이런식으로 동작한다고 이해하고 초기접속시 JS 번들러에 남은 컴포넌트를 담아서 준다고 이해했는데 여기서는 페이지 이동 요청시 JS 번들러가 오는데 헷갈립니다.
해결됨
한 입 크기로 잘라먹는 Next.js
2.8) 페이지별 레이아웃 설정하기 안녕하세요 한입 nextjs 강의 잘 보고 있는데요! 하나 궁금한 게 생겨서 질문 남겨요! 20분쯤에 나오는 onKeyDown 으로 키보드 이벤트를 감지하여 처리하는 이유가 있을까요? 해당 부분만 form 으로 감싸면 자동으로 enter 클릭시 감지해서 요청을 보내게 되는데 onKeyDown으로 함수를 빼서 input 이벤트를 핸들링 하는 이유는 무엇인가요! submit 직전 다른 데이터를 핸들링 할 때 form은 바로 submit이 일어나기 때문에 그런 부분에 있어서 확장성? 을 위한건가용?
미해결
따라하며 배우는 리액트 A-Z[19버전 반영]
강의대로 따라갔는데 강의처럼 렌더링이 되고 있지 않습니다 ㅠㅠ 어디가 문제일까요 chatgpt는 서버가 없다 뭐 이렇다는데 ㅠㅠ 출력 화면 Nav.js import React, { useEffect, useState } from 'react' import"./Nav.css" export default function Nav() { const [show, setShow] = useState(false); useEffect(() => { window.addEventListener("scroll", ()=> { console.log('window.scrollY', window.scrollY); if(window.scrollY > 50) { setShow(true); } else { setShow(false); } }) return () => { window.removeEventListener("scroll", ()=> {}); }; }, []); return ( <nav className={`nav ${show && "nav__black"}`}> <img alt = 'Netflix logo' src = "https://upload.wikimedia.org/wikipedia/commons/thumb/0/08/Netflix_2015_logo.svg/960px-Netflix_2015_logo.svg.png" decoding="async" width="799" height="216" srcset="//upload.wikimedia.org/wikipedia/commons/thumb/0/08/Netflix_2015_logo.svg/1198px-Netflix_2015_logo.svg.png 1.5x, //upload.wikimedia.org/wikipedia/commons/thumb/0/08/Netflix_2015_logo.svg/1597px-Netflix_2015_logo.svg.png" className='nav__logo' onClick={() => window.location.reload()} /> <img alt = "User logged" src = "https://occ-0-3077-988.1.nflxso.net/dnm/api/v6/vN7bi_My87NPKvsBoib006Llxzg/AAAABTZ2zlLdBVC05fsd2YQAR43J6vB1NAUBOOrxt7oaFATxMhtdzlNZ846H3D8TZzooe2-FT853YVYs8p001KVFYopWi4D4NXM.png?r=229" className="nav__avatar" /> </nav> ); } Nav.css .nav{ position: fixed; top: 0; width: 100%; height: 30px; z-index: 1; padding: 20px; display: flex; justify-content: space-between; align-items: center; transition-timing-function: ease-in; transition: all 0.5s; } .nav__black { background-color: #111; } .nav__logo{ position: fixed; left: 40px; width: 80px; object-fit: contain; } .nav__avatar { position: fixed; right: 40px; width: 30px; object-fit: contain; } Banner.js import axios from "../api/axios"; import React, { useEffect, useState } from 'react' import requests from '../api/requests'; import "./Banner.css" export default function Banner() { const [movie, setMovie] = useState([]); useEffect(() => { fetchData(); }, []); const fetchData = async() => { //현재 상영중인 영화 정보를 가져오기 (여러 영화) const request = await axios.get(requests.fetchNowPlaying); //여러 영화 중 영화 하나의 ID를 가져오기 const movieId = request.data.results[ Math.floor(Math.random() * request.data.results.length) ].id; //특정 영화의 더 상세한 정보를 가져오기 (비디오 정보도 포함) const {data: movieDetail} = await axios.get(`movie/${movieId}`, { params: {append_to_reponse: "videos"} }); setMovie(movieDetail); } const truncate = (str, n) => { return str?. length > n ? str.substr(0, n - 1) + "..." : str; } return ( <header className="banner" style={{ backgroundImage: `url("https://image.tmdb.org/t/p/original/${movie.backdrop_path}")`, backgroundPosition: "top center", backgroundSize: "cover" }}> <div className="banner__contents"> <h1 className="banner__title"> {movie.title || movie.name || movie.original_name} </h1> <div className="banner__buttons"> <button className="banner__button play">Play</button> <button className="banner__button info">More Information</button> </div> <h1 className="banner_description"> {truncate(movie.overview, 100)} </h1> </div> <div className="banner--fadeBottom"></div> </header> ) } Banner.css .banner{ color: white; object-fit: contain; height: 448px; } @media (min-width : 1500px) { .banner{ position: relative; height: 600px; } .banner--fadeBottom{ position: absolute; bottom: 0; width: 100%; height: 40rem; } } @media (max-width : 768px) { .banner__contents{ width: min-content !important; padding-left: 2.3rem; margin-left: 0px !important; } .banner--description{ font-size: 0.8rem !important; width: auto !important; } .info{ text-align: start; padding-right: 1.2rem; } .space{ margin-left: 6px; } } axios.js import axios from "axios"; const instance = axios.create({ baseURL: "https://api.themoviedb.org", params: { api_key: "eea00451962aefe6185011d467944242", language: "ko-KR", }, }); export default instance; requests.js const requests = { fetchNowPlaying: "movie/now_playing", fetchNetFlixOriginals: "/discover/tv?with_networks=213", fetchTrending: "/trending/all/week", fetchTopRated: "/movie/top_rated", fetchActionMovies: "/discover/movie?with_genres=28", fetchComedyMovies: "/discover/movie?with_genres=35", fetchHorrorMovies: "/discover/movie?with_genres=27", fetchRomanceMovies: "/discover/movie?with_genres=10749", fetchDocumentaries: "/discover/movie?with_genres=99", } export default requests;
미해결
Next + React Query로 SNS 서비스 만들기
안녕하세요 Next app router 관련해서 질문드립니다. 현재 사이드프로젝트에서 route handler를 적극활용하고 있는데요. 제가 인프라나 백엔드 관련 지식이 없다보니 좀 헷갈리는게 있습니다. 현재 저희 서비스에서 특정 API는 클라이언트 컴포넌트에서 route handler로 API 호출 -> route handler에서 외부 백엔드 API 호출 이런 형태로 사용되고 있는데요, 이때 실제로 route handler 서버가 아래의 사진 중 어느 형태로 운용되는 것인가요? 즉, Next 프로젝트를 배포했을 때 각 유저마다 route handler 서버가 할당되는 것인가요? 아니면 모든 유저의 요청을 오직 하나의 route handler서버에서 대응하는 것인가요? 아니면 이게 배포 환경에 따라 달라지는것인가요?
해결됨
Next.js 완벽 마스터: 노션 기반 개발자 블로그 만들기 (with 커서AI)
안녕하세요! 강의 잘 듣고 있습니다. 제가 혼자 실습하다가 createPostAction 의 반환값에 success 필드를 넣은 후에 useActionState 의 initialState 에도 이 필드를 아래와 같이 추가했었는데요, const [state, formAction, isPending] = useActionState(createPostAction, { message: '', errors: {}, formData: { title: '', tag: '', content: '', }, success: false, }); useActionState 훅을 사용할 때 initialState 에 포함된 필드 중 일부를 이후 action 함수의 반환값에서 생략하면 어떤 경우에는 에러가 발생하고, 어떤 경우에는 아무 문제 없이 동작하는 게 잘 이해가 되지 않아서요. 예를 들어 initialState 에는 success 필드가 있지만, 유효성 검사 실패 시 반환 객체에서 success 를 생략하면 에러가 발생합니다. if (!validatedFields.success) { return { errors: validatedFields.error.flatten().fieldErrors, message: 'Validation failed', formData: rawFormData, success: false, // 없으면 useActionState 에서 에러 발생 }; } 그런데 try...catch 문에서는 success 없이 반환하면 에러가 발생하지 않는 걸 확인할 수 있었습니다. try { const { title, tag, content } = validatedFields.data; await createPost({ title, tag, content }); revalidateTag('posts'); return { success: true, // 없어도 에러 안남 message: 'Post created successfully', }; } catch (e) { return { message: 'Failed to create post : ' + e, formData: rawFormData, }; } formData 필드도 비슷하게 행동하는데 이 차이가 왜 발생하는지, 어떤 기준으로 반환 객체의 필드 구조를 검사하고 에러를 발생시키는지 궁금합니다. useActionState 에서 반환 객체의 필드가 initialState 와 구조적으로 정확히 일치해야 하는 조건이 언제 적용되는 건가요?
미해결
Next.js 완벽 마스터: 노션 기반 개발자 블로그 만들기 (with 커서AI)
루트 page.tsx에서 사용하는 컴포넌트는 pages/_components/ 여기에 바로 넣으셨는데 그럼 about 페이지에서만 사용하는 컴포넌트는 pages/_components/about/ 이 경로에 배치하면될까요?
해결됨
인프런 클론코딩 Part 1: Next.js와 NestJS로 시작하는 실전 프로젝트
[auth][error] JWTSessionError: Read more at https://errors.authjs.dev#jwtsessionerror [auth][cause]: Error: The edge runtime does not support Node.js 'crypto' module. Learn More: https://nextjs.org/docs/messages/node-module-in-edge-runtime at Object.get (C:\project\whatsForLunch\basic-app\frontend\.next\server\edge\chunks\_b7b28d92._.js:62:41) at C:\project\whatsForLunch\basic-app\frontend\.next\server\edge\chunks\node_modules__pnpm_e56295b8._.js:8637:62 at getSecret (C:\project\whatsForLunch\basic-app\frontend\.next\server\edge\chunks\node_modules__pnpm_e56295b8._.js:8620:20) at push.[project]/node_modules/.pnpm/jsonwebtoken@9.0.2/node_modules/jsonwebtoken/verify.js [middleware-edge] (ecmascript).module.exports (C:\project\whatsForLunch\basic-app\frontend\.next\server\edge\chunks\node_modules__pnpm_e56295b8._.js:8623:12) at Object.decode (C:\project\whatsForLunch\basic-app\frontend\.next\server\edge\chunks\[root-of-the-server]__273b5c62._.js:135:233) at session (C:\project\whatsForLunch\basic-app\frontend\.next\server\edge\chunks\0253f_@auth_core_77718842._.js:4516:39) at AuthInternal (C:\project\whatsForLunch\basic-app\frontend\.next\server\edge\chunks\0253f_@auth_core_77718842._.js:5123:269) at async Auth (C:\project\whatsForLunch\basic-app\frontend\.next\server\edge\chunks\0253f_@auth_core_77718842._.js:5379:34) at async handleAuth (C:\project\whatsForLunch\basic-app\frontend\.next\server\edge\chunks\node_modules__pnpm_e56295b8._.js:3885:29) at async C:\project\whatsForLunch\basic-app\frontend\.next\server\edge\chunks\_b7b28d92._.js:12505:20 [auth][details]: {} GET / 200 in 137ms auth.ts에 jwt: { encode: async ({ token, secret }) => { return jwt.sign(token as jwt.JwtPayload, secret as string); }, decode: async ({ token, secret }) => { return jwt.verify(token as string, secret as string) as JWT; }, }, 이 부분을 추가한 이후부터 The edge runtime does not support Node.js 'crypto' module. 이 에러가 발생하는데 해결이 어렵네요.. 코드는 노션이랑 강의 보고 다 비교해 봤는데 드른 부분은 없었스빈다..
해결됨
Next.js 15로 완성하는 실전 YouTube 클론 개발
ErrorBoundary component ( react-error-boundary ) 는 client component 인데 수업에서는 server component 에서 사용하고 있는걸로 확인됩니다. 괜찮을까요?
해결됨
인프런 클론코딩 Part 1: Next.js와 NestJS로 시작하는 실전 프로젝트
안녕하세요 강의 잘 보고 있습니다. 현재 섹션4까지 전부 수강한 상태이고 슬랙에는 해당 강의에 대한 질문 채널은 따로 없는 거 같아서 여기에 질문 남깁니다 로그인할 때 authjs.session-token 라는 쿠키가 생기지 않는데 로그인 후 메인 페이지로 돌아오면 로그인된 이메일 정보가 나옵니다 그리고 새로고침하면 다시 없어집니다 혹시 쿠키가 제대로 저장되지 않는지 이유를 알 수 있을까요? 아래는 섹션4까지 수강한 코드입니다 https://github.com/account-0021/inflearn-clone
미해결
Next.js 까보기: "쓸 줄 아는 개발자"에서 "알고 쓰는 개발자"로
<리스트> <레코드1/> <레코드2/> </리스트> 일 경우… 리스트단에서 use client로 한 후 zustand에서 리스트 자체를 통으로 관리해야하는가? 각각의 레코드에 use client를 한 후 데이터를 받으면 zustand에 리스트를 만들어 레코드별로 hash(Map)으로 등록해 관리해야하는가? 레코드에는 좋아요, 조회수 등이 표시됨. 제 생각은 1번은 SEO가 중요한건 각각 레코드 (상세페이지) 이므로 zustand에서 통으로 넣어 관리하면 되니 구현 및 데이터 신뢰도에서는 나아보이는데 하나바뀌면 전부 렌더링되니까 애매한거같고 2번은 서버에서 모두 다 가져와서 초기속도는 빠르고 seo에 좋으나 zustand에 통으로 못넣고 데이터 자체를 내가 직접관리하는 구조라 구현 및 데이터 신뢰 측면에서는 골치아플거같은데… 무엇이 일반적인 구현방식인지 모르겠습니다. 도와주세요 ㅠㅠ
미해결
Next + React Query로 SNS 서비스 만들기
<리스트> <레코드1/> <레코드2/> </리스트> 일 경우… 리스트단에서 use client로 한 후 zustand에서 리스트 자체를 통으로 관리해야하는가? 각각의 레코드에 use client를 한 후 데이터를 받으면 zustand에 리스트를 만들어 레코드별로 hash(Map)으로 등록해 관리해야하는가? 레코드에는 좋아요, 조회수 등이 표시됨. 제 생각은 1번은 SEO가 중요한건 각각 레코드 (상세페이지) 이므로 zustand에서 통으로 넣어 관리하면 되니 구현 및 데이터 신뢰도에서는 나아보이는데 하나바뀌면 전부 렌더링되니까 애매한거같고 2번은 서버에서 모두 다 가져와서 초기속도는 빠르고 seo에 좋으나 zustand에 통으로 못넣고 데이터 자체를 내가 직접관리하는 구조라 구현 및 데이터 신뢰 측면에서는 골치아플거같은데… 무엇이 일반적인 구현방식인지 모르겠습니다. 도와주세요 ㅠㅠ
해결됨
한 입 크기로 잘라먹는 Next.js
<리스트> <레코드1/> <레코드2/> </리스트> 일 경우… 리스트단에서 use client로 한 후 zustand에서 리스트 자체를 통으로 관리해야하는가? 각각의 레코드에 use client를 한 후 데이터를 받으면 zustand에 리스트를 만들어 레코드별로 hash(Map)으로 등록해 관리해야하는가? 레코드에는 좋아요, 조회수 등이 표시됨. 제 생각은 1번은 SEO가 중요한건 각각 레코드 (상세페이지) 이므로 zustand에서 통으로 넣어 관리하면 되니 구현 및 데이터 신뢰도에서는 나아보이는데 하나바뀌면 전부 렌더링되니까 애매한거같고 2번은 서버에서 모두 다 가져와서 초기속도는 빠르고 seo에 좋으나 zustand에 통으로 못넣고 데이터 자체를 내가 직접관리하는 구조라 구현 및 데이터 신뢰 측면에서는 골치아플거같은데… 무엇이 일반적인 구현방식인지 모르겠습니다. 도와주세요 ㅠㅠ
미해결
제로베이스부터 배우는 웹개발의 개념과 바이브 코딩
help 에서도 영어만 선택할 수 있게 나오고, 한국어 설정이 안보이네요. 어떻게 해결해야할까요
해결됨
Next.js 완벽 마스터: 노션 기반 개발자 블로그 만들기 (with 커서AI)
안녕하세요. 강의 내용과 다르게 author 데이터가 안나와서 콘솔로그 찍어서 확인해보니, properties.Author.people 항목에 name이 없네요. 다른 데이터는 조회되고 있는데 왜 안나오는지 도저히 답을 찾을 수 없네요. 공식문서 봐도 응답형식 같은게 바뀐건 아닌것 같아보입니다. AI Assistant에 여러번 질문해봐도 명확한 해결책을 찾지 못했습니다. 이 부분때문에 진도를 나가기 쉽지 않은 상황인데 빠른 답변 부탁드립니다.
미해결
Next + React Query로 SNS 서비스 만들기
프라이빗 컴포넌트로 잡은 것과 그냥 컴포넌트로 잡은 것의 차이가 없지 않나요? 컴포넌트를 예로 강의를 찍어 주셨는데 폴더만 더 늘어나고 좋은 예는 아닌듯합니다. 프라이빗 폴더가 어떨 때 왜 필요한지를 알려주는게 더 교육적일 것 같아 글 남깁니다. 컴포넌트 자체가 재사용성을 갖는 것이기에 내부 구성요소만 표기하는 프라이빗은 큰 의미가 없을 것 가은데요. 컴포넌트 외 폴더라고 해도 와닿지는 않습니다. 어차피 컴포넌트로 사용하면 uri 에도 잡히지 않고 말이죠. 전체적으로 폴더 구조만 더 복잡해지는 것 같아요
미해결
Next + React Query로 SNS 서비스 만들기
안녕하세요~ 강의 잘 보고 있습니다! vanilla-extract 적용해보려고 하는데 패키지 설치하고 config설정까지 했는데 해당 에러가 나서 질문드립니다. next.config.ts파일과 globalTheme.css.ts, layout.ts중에 문제가 있을까요?? 파일 이름도 문제가 없고 코드 그대로 사용했는데도 해당 에러가 나서 next15에서 vanilla-extract 적용을 할 수 없는건지 궁금해서 여쭤봅니다.. 감사합니다 // package.json // next.config.ts import type { NextConfig } from "next"; const { createVanillaExtractPlugin // eslint-disable-next-line @typescript-eslint/no-require-imports } = require('@vanilla-extract/next-plugin'); const withVanillaExtract = createVanillaExtractPlugin(); const nextConfig: NextConfig = { /* config options here */ experimental: { serverActions: { bodySizeLimit: '10mb', // Set the body size limit for server actions } }, async rewrites() { return [ { source: '/upload/:slug', destination: `${process.env.NEXT_PUBLIC_BASE_URL}/upload/:slug`, // Matched parameters can be used in the destination }, ] }, }; module.exports = withVanillaExtract(nextConfig); // globalTheme.css.ts import {assignVars, createGlobalTheme, createGlobalThemeContract, globalStyle} from "@vanilla-extract/css"; export const global = createGlobalThemeContract({ background: { color: 'bg-color' }, foreground: { color: 'fg-color' }, }) const whiteGlobalTheme = { background: { color: 'rgb(255, 255, 255)' }, foreground: { color: 'rgb(0, 0, 0)' }, } const darkGlobalTheme = { background: { color: 'rgb(0, 0, 0)' }, foreground: { color: 'rgb(255, 255, 255)' }, } createGlobalTheme(':root', global, whiteGlobalTheme); // 실제 적용 globalStyle(':root', { '@media': { '(prefers-color-scheme: dark)': { vars: assignVars(global, darkGlobalTheme), } } }) globalStyle('*', { boxSizing: 'border-box', padding: 0, margin: 0, }) globalStyle('html', { '@media': { '(prefers-color-scheme: dark)': { colorScheme: 'dark', } } }); globalStyle('html, body', { maxWidth: '100dvw', overflowX: 'hidden', }) globalStyle('body', { color: global.foreground.color }) globalStyle('a', { color: 'inherit', textDecoration: 'none', }) // layout.tsx import type {Metadata} from 'next' import {Inter} from 'next/font/google' import './globalTheme.css'; import {MSWProvider} from "@/app/_component/MSWComponent"; import AuthSession from "@/app/_component/AuthSession"; if (process.env.NEXT_RUNTIME === 'nodejs' && process.env.NODE_ENV !== 'production' && process.env.MSW_ENABLED !== 'false') { const {server} = require('@/mocks/http') server.listen() } const inter = Inter({subsets: ['latin']}) export const metadata: Metadata = { title: 'Create Next App', description: 'Generated by create next app', } type Props = { children: React.ReactNode, }; export default function RootLayout({children}: Props) { return ( <html lang="en"> <body className={inter.className}> <MSWProvider> <AuthSession> {children} </AuthSession> </MSWProvider> </body> </html> ) }
미해결
제로베이스부터 배우는 웹개발의 개념과 바이브 코딩
커밋을 하고 나서 sure all&commit changes를 누르면 저렇게 화면이 분활되고 아무것도 작성이 안되는 상태가 되는데 어떤 이유인지 잘 모르겠습니다...
미해결
Next.js 완벽 마스터: 노션 기반 개발자 블로그 만들기 (with 커서AI)
강의 영상에서 getPostMetadata 메서드 내부에서 getCoverImage 메서드를 선언하여 커버 이미지를 다루고 있는데, 저는 이 함수가 내부에 선언된 이유를 두 가지로 이해했습니다. 캡슐화 및 스코프 제한 : 외부에서 사용할 필요가 없는 함수이므로 내부에 선언해 함수의 범위를 명확히 제한 가독성 향상 : 커버 처리 로직을 분리하여 주 함수의 가독성을 개선 그런데 영상을 보면서 든 궁금증이 한 가지 있습니다. 현재 코드에서는 getCoverImage 에 page.cover 를 매개변수로 전달하고 있는데, getPostMetadata 내부에서만 사용되는 함수라면, 클로저를 이용해 page 에 직접 접근하는 방식이 더 자연스럽지 않나요? function getPostMetadata(page: PageObjectResponse): Post { const getCoverImage = () => { if (!page.cover) return ''; switch (page.cover.type) { case 'external': return page.cover.external.url; case 'file': return page.cover.file.url; default: return ''; } }; return { coverImage: getCoverImage(), // ... }; } 이렇게 하면 page.cover 를 매개변수로 전달하지 않아도 되어 더 간결하고, 함수 내부에서도 page 에 자유롭게 접근하여 처리할 수 있다고 생각합니다. 물론 정답은 없겠지만 클로저를 활용하여 외부 스코프에 직접 접근하는 방식 명확하게 매개변수를 전달하여 의도를 분리하는 방식 이 두 가지 방식 중 위 상황에서는 어떤 방식이 더 바람직한지, 혹은 상황에 따라 어떤 기준으로 선택해야 하는지 궁금합니다!
미해결
Next.js 15로 완성하는 실전 YouTube 클론 개발
아래와 같은 에러 발생한다면 drizzle-orm 를 최신버전으로 업데이트 하시면 해결됩니다.
해결됨
Next.js 15로 완성하는 실전 YouTube 클론 개발
프로젝트 하나 남기고 싶어서 강의는 구매했는데 React를 잘 몰라서 공부를 하고 난 뒤 강의를 수강하려고 합니다. 강의 설명에 언급된 React, javascript 외 추가적으로 더 알아야하는 사전 지식이 있을까요?
