안녕하세요! 언제나 멋진 강의 감사드립니다.다름이 아니라, 프로젝트를 Vercel에 배포하는 과정에서 아래와 같은 컴파일 실패 에러가 빌드 로그에서 검출되어서 이에 대해 여쭤보고 싶습니다.화면 상에서는 src/app/(with-searchbar)/search/page.tsx에 선언한 generateMetaData 함수가 Next.js 페이지의 요구조건을 충족시키지 못한다라는 내용으로 보여지는데요, 이런 경우에는 해당 요소에서 어떤 부분을 확인해볼 수 있을까요?해당 페이지에 대한 코드도 함께 첨부해 드리겠습니다. \app\(with-searchbar)\search\page.tsx import BookItem from "@/components/book-item"; import BookListSkeleton from "@/components/skeleton/book-list-skeleton"; import { BookData } from "@/types"; import { delay } from "@/util/delay"; import { Metadata } from "next"; import { Suspense } from "react"; //index 페이지와 다르게 search 페이지는 QueryString과 같은 동적인 값에 의존하고 있기 때문에 static 페이지로는 설정할 수 없지만, 데이터 캐시를 최대한 이용하는 것으로 최적화 async function SearchResult({q}:{q:string}) { await delay(2000); const response = await fetch( `${process.env.NEXT_PUBLIC_API_SERVER_URL}/book/search?q=${q}`, {cache: "force-cache"} ); if(!response.ok){ return <div>오류가 발생했습니다 ...</div> } const books: BookData[] = await response.json(); return ( <div> {books.map((book) => ( <BookItem key={book.id} {...book} /> ))} </div> ); } //현재 페이지의 메타데이터를 동적으로 생성하는 함수 export async function generateMetaData({ searchParams, }: { searchParams: Promise<{q?: string}>; }): Promise<Metadata> { const {q} = await searchParams; return { title: `${q} : 검색 결과`, description : `검색어 ${q}의 검색 결과입니다`, openGraph: { title: `${q} : 검색 결과`, description : `검색어 ${q}의 검색 결과입니다`, images: ["/thumbnail.png"], } } } export default async function Page({ searchParams, }: { searchParams: Promise<{ q: string }>; }) { const {q} = await searchParams; return ( <Suspense key={q || ""} fallback={<BookListSkeleton count={3} />}> <SearchResult q={q ||""} /> </Suspense>); }

서버컴포넌트가 아닌 클라이언트 컴포넌트에서 params나 searchParams를 사용할때도 아래처럼{ params, }: { params: Promise<{ id: string }> }Promise를 붙여야하나요?? 아니면 hook을 사용해서 값을 받아오나요?

안녕하세요 혹시 해당 강의에 GitHub 주소나 자료가 따로 없을까요..?

안녕하세요,강사님 리엑트 코드와 똑같이 만들었지만페이지가 이상하게 나옵니다. 요런 식으로 나오는데 추가적으로 만져야 할 게 있을까요?제 패키지 파일 공유드립니다.{ "name": "login_react", "private": true, "version": "0.0.0", "type": "module", "scripts": { "dev": "vite", "build": "vite build", "lint": "eslint .", "preview": "vite preview" }, "dependencies": { "@emotion/react": "^11.14.0", "@emotion/styled": "^11.14.0", "@mui/icons-material": "^7.1.1", "@mui/material": "^7.1.1", "react": "^19.1.0", "react-dom": "^19.1.0", "react-router-dom": "^7.6.2" }, "devDependencies": { "@eslint/js": "^9.25.0", "@types/react": "^19.1.2", "@types/react-dom": "^19.1.2", "@vitejs/plugin-react": "^4.4.1", "eslint": "^9.25.0", "eslint-plugin-react-hooks": "^5.2.0", "eslint-plugin-react-refresh": "^0.4.19", "globals": "^16.0.0", "vite": "^6.3.5" } }

안녕하세요, 강의 너무 잘 수강하고 있습니다.강의 수강 중 질문이 생겨서요refresh Token을 사용하지 않는 이유가 있을까요?access 토큰 하나를 하루의 유효기간을 부여해서 사용하는 이유가 궁금합니다.jwt 버전이 0.11.5로 진행해주셨는데0.12.x 버전도 있는 걸로 알고 있어요버전의 올라감과 동시에 로직의 변화도 있는 거로 알고 있습니다.요것도 0.11.x로 진행하신 이유가 궁금합니다. 

const getStringedDate = (targetDate) => { let year = targetDate.getFullYear(); let month = targetDate.getMonth() + 1; let date = targetDate.getDate(); if (month < 10) { month = `0${month}`; } if (date < 10) { date = `0${date}`; } return `${year}-${month}-${date}`; };초기값 설정 할 때 input 태그가 date 객체를 해석하지 못해서 위의 getStringedDate() 함수로 문자열로 변환하여 value 속성으로 넣어줘야 한다고 하셨는데요,사용자 입력값을 넣을 때는 input을 수정하면 문자열로 들어가기 때문에 다시 date 객체로 바꿔주는 함수를 새로 사용해야 하던데<input name="createdDate" onChange={onChangeInput} value={getStringedDate(input.createdDate)} type="date" />이미 여기서 getStringedDate()로 객체에서 문자열 변환하는 함수를 사용해서 값을 나타내야하기 때문에 onChangeInput() 함수를 사용해야 하는건가요?이 흐름이 맞는 거 같긴한데 왠지 좀 번거로운거 같아서 제가 이해한게 맞는지 궁금해서요 참고로 섹션13 12.14)강의의10:22 부분을 듣고 생긴 질문입니다!

 위 이미지는 교재 376페이지의 상단 부분입니다.testUpload()를 실행시켰더니 "Tests Passed:"라는 메시지와 함께 실행성공되었습니다.그런데, 위 이미지에 나와있는, "S3의 버킷"을 AWS 어디에서 찾을 수 있는 지 모르겠습니다.아래 이미지는 나의 AWS S3 버킷 부분입니다. 

안녕하세요!Portfolio 제작 강의를 따라하던 중,지속적으로 CSS가 적용되지 않는 문제가 발생하여 문의드립니다. 화면 속 글자가 움직이는 걸로 보아 JS는 연동이 된 것 같은데 CSS가 문제가 있는 것 같아요. agent가 계속 해결을 못해서 문의 남깁니다.

안녕하세요. 지금까지 알려주신 내용에서 Notion 통해 글을 추가/삭제했을 때, 그에 대한 반영이 이루어지기 위해 unstable_cache 적용 시 revalidate 옵션(단위: s(초))을 줘야 하는 것을 확인했습니다.(getPublishedPosts 구현부분에서 언급되지 않은부분이라 강의내용과 공식문서 토대로 동작 확인했습니다.)Notion이 아닌 실제 페이지에서 글쓰기를 했을 때는 revalidateTag 함수를 호출하여 캐시를 무효화시켰었습니다. 문제는 목록 가져올때도 매번 revalidateTag 함수를 사용하게 된다면 캐시 사용하는게 무의미해질거라 생각합니다.즉시 반영을 위해서는 Webhook 연동이 필요해보이나, 생각보다 구현 난이도가 복잡해서 revalidate를 적절하게 주는게 좋을거라 생각했습니다. 그렇다면 효율적인 revalidate 값은 어느정도로 지정하는게 좋을까요?? TanStack Query ClientProvider에서 지정한 것처럼 1분 정도가 적절하려나요?? 그리고 실제 구현 이루어지는 프로그램(ex. 쇼핑몰)에 따라 기준이 달라질 것 같은데요. 이에 대한 강사님 의견 듣고싶습니다.

expo go에서 만들고있는데 구글 승인 오류문구가 계속 나오네요 400에러인데 해결하기 어렵습니다 ㅠ.ㅠ

20.update-object받으니 컴포넌트의 기억저장서 부터이고 21조건부 랜터링부터 ~ 24이벤트전파까지의 소스  브랜치가 없네요

부록 AWS Elastic Beanstalk 공부 중입니다.교재 571페이지 ACL 편집부분에서....AWS 버킷에서 ACL을 편집할 수 있는 창을 찾을 수가 없네요. 답변 좀 부탁드리겠습니다.

useEffect와 useMemo 둘 다 의존성 배열이 바뀔때만 실행되도록 하는 훅으로 알고 있는데, 정확한 차이가 와닿지 않습니다..!

react 개발하다보면 대부분의 파일에서 export default 하나만을 하게 되는데요. 아래 2가지 패턴 중 2번을 주로 사용하시는 것 같아서 이유가 있으신지 궁금합니다export default function ABC()const ABC = () => {}export default ABC; 저는 1번을 강하게 선호하고 왜 굳이 하나의 함수에 대한 정의를 둘로 나눠 거리를 벌리는지 이해가 안 가는데요, 코딩 고수(?)들이 주로 2번 패턴을 사용하셔서 이유가 궁금합니다

eas build --platform android --profile preview --local--local 플래그로 로컬에서 빌드해서 테스트 해보고 있습니다. EXPO_PUBLIC_FRONT_URLEXPO_PUBLIC 접두사를 붙여서 환경변수 넣어두었고  Alert.alert("uri", process.env.EXPO_PUBLIC_FRONT_URL);위처럼 Alert 로 체크해보니 비어있었습니다 로컬로 빌드할시에 더 셋팅해줘야 하는 부분이 있을까요?

- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.import axios from "../api/axios"; import React, { useEffect, useState } from 'react' import requests from '../api/requests'; import "./Banner.css" import styled from "styled-components"; export default function Banner() { const [movie, setMovie] = useState([]); const [isClicked, setIsClicked] = useState(false); 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_response: "videos"}, }); setMovie(movieDetail); } const truncate = (str, n) => { return str?.length > n ? str.substr(0, n - 1) + "..." : str; } console.log('movie', movie); if(!isClicked) { 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" onClick={() => setIsClicked(true)} > 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> ); } else{ return ( <Container> <HomeContainer> <Iframe width="640" height="360" src={`https://www.youtube.com/embed/${movie.videos.results[0].key}?controls=0&autoplay=1&loop=1&mute=1&playlist=${movie.videos.results[0].key}`} title="YouTube video player" allow="autoplay; fullscreen" ></Iframe> </HomeContainer> </Container> ); } } const Iframe = styled.iframe` width: 100%; height: 100%; opacity: 0.65; border: none; &::after { content:""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; }` const Container = styled.div` display: flex; justify-content: center; align-items: center; flex-direction: column; width: 100%; height: 100vh; ` const HomeContainer = styled.div` width: 100vw; height: 100vh;`  

이전의 사전 렌더링에서 이런식으로 동작한다고 이해하고 초기접속시JS 번들러에 남은 컴포넌트를 담아서 준다고 이해했는데 여기서는 페이지 이동 요청시 JS 번들러가 오는데 헷갈립니다.

안녕하세요. 오늘도 좋은강의 정말 감사히 듣고 있습니다.제가 웹개발자가 아니라서 정확하게는 잘 모르긴 합니다.6-3에서 문의글 상태변경, 삭제할때 PUT, DELETE 인 http메소드를 사용하시던데제가 알기로는 PUT, DELETE는 보안에 취약한것으로 알고 있는데 사용해도 상관은 없는지 궁금합니다.만약 사용하지 않는다면 상태변경, 삭제할때 GET과 POST방식만으로 어떤식으로 사용해야할지 로직정도만 알려주시면 감사하겠습니다.

2.8) 페이지별 레이아웃 설정하기 안녕하세요 한입 nextjs 강의 잘 보고 있는데요!하나 궁금한 게 생겨서 질문 남겨요!20분쯤에 나오는 onKeyDown 으로 키보드 이벤트를 감지하여 처리하는 이유가 있을까요?해당 부분만 form 으로 감싸면 자동으로 enter 클릭시 감지해서 요청을 보내게 되는데 onKeyDown으로 함수를 빼서 input 이벤트를 핸들링 하는 이유는 무엇인가요!submit 직전 다른 데이터를 핸들링 할 때 form은 바로 submit이 일어나기 때문에 그런 부분에 있어서 확장성? 을 위한건가용?

강의대로 따라갔는데 강의처럼 렌더링이 되고 있지 않습니다 ㅠㅠ 어디가 문제일까요chatgpt는 서버가 없다 뭐 이렇다는데 ㅠㅠ 출력 화면  Nav.jsimport 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.jsimport 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.jsimport axios from "axios"; const instance = axios.create({ baseURL: "https://api.themoviedb.org", params: { api_key: "eea00451962aefe6185011d467944242", language: "ko-KR", }, }); export default instance;requests.jsconst 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;