const shallow = {...value}; // 참조 끊어내기 value.pages = [...value.pages] value.pages[pageIndex] = [...value.pages[pageIndex]];참조를 끊어내어 react query의 state를 update 해주는건 이해 했습니다. 하지만 강의에서는 value.pages = {...value.pages} 를 이용하는데, pages를 객체로 덮어씌워 원래 배열을 바꾸는 이유가 따로 있을까요?

조금 혼란스러운 부분이 있습니다. auth.ts를 보면 export const {}=NextAuth를 통해 signIn함수를 외부로 보낼 수 있게 만드셨는데요. 다른 페이지에서 signIn을 사용하실때 LoginModal에서는 next-auth/react에서 호출한 signIn을, _lib의 signup에서는 @/auth의 signIn을 사용하셨는데, 어떤걸 사용해야 하는거고 무슨 차이인지 모르겠습니다.

클라이언트컴포넌트에서는 const {data:session, update} = useSession(); 로 세션값을 가져올때 update 함수도 함께 가져와서 update()하고 next-auth의 callback함수에서 세션값을 업데이트해주면 세션값을 변경할 수 있을것입니다. 문제는 서버용으로 const session = await auth(); 로 값을 가져오면 세션에 값을 변경을 할 수 있을까요?

올해는 강의 업데이트 계획이 없나요?

Error occurred prerendering page "/newpost". Read more: https://nextjs.org/docs/messages/prerender-errorReferenceError: document is not definedat 46593 (/Users/gyeongdeokpark/Documents/01.GitHub/codeblog/.next/server/app/newpost/page.js:2:59980)at __webpack_require__ (/Users/gyeongdeokpark/Documents/01.GitHub/codeblog/.next/server/webpack-runtime.js:1:146)at F (/Users/gyeongdeokpark/Documents/01.GitHub/codeblog/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:36:6049)at /Users/gyeongdeokpark/Documents/01.GitHub/codeblog/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:36:8464at W._fromJSON (/Users/gyeongdeokpark/Documents/01.GitHub/codeblog/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:36:8902)at JSON.parse (<anonymous>)at L (/Users/gyeongdeokpark/Documents/01.GitHub/codeblog/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:36:5770)at t (/Users/gyeongdeokpark/Documents/01.GitHub/codeblog/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:36:12155)✓ Generating static pages (5/5)> Export encountered errors on following paths:/newpost/page: /newpost  npm run build시에 발생하는 에러입니다. 각종 사이트에서는 14버전에서 에러가 발생하고 있다고 하는 글 들만 있고 해결방법을 찾지 못했습니다..gpt에서는 클라이언트 사이드에서 실행되어야 하는 코드가 서버 사이드에서 실행되서 그렇다고 하는데잘해결이 안되고 있습니다. npm run dev시에는 에러없이 잘 실행됩니다."use client"; import React, { ChangeEventHandler, useState } from "react"; import LexicalEditor from "@/app/newpost/LexicalEditor"; function Page({ props }: any) { const [title, setTitle] = useState(""); const [content, setContent] = useState(""); const onChangeTitle: ChangeEventHandler<HTMLInputElement> = (e) => { setTitle(e.target.value); }; const onSubmit = (e: any) => { e.preventDefault(); console.log("제목 : ", title); console.log("내용 : ", content); }; return ( <form className="postForm" onSubmit={onSubmit}> <div className="postForm__titleInputSection"> <input className="postForm__titleInput" type="text" name="title" value={title} onChange={onChangeTitle} placeholder={"제목을 입력하세요."} /> </div> <div className="postForm__editorWrapper"> <LexicalEditor /> </div> <button>작성하기</button> </form> ); } export default Page;  깃허브 링크 입니다. https://github.com/littleduck1219/codeblog/blob/main/src/app/newpost/page.tsx  

안녕하세요 선생님 front, back nginx 한 뒤로둘다 https라고 바뀌고 인증서도 있긴한데,Front(502 Bad Gateway)라고 나오고back(welcome to nginx) 라고만 나오는 상태입니다.(설치는 Nginx Ubuntu20보고 했습니다https://certbot.eff.org/instructions?ws=nginx&os=ubuntufocal&tab=standard)문제1)그래서 첫번째 문제로 back에서 sudo npx pm2 logs --err --lines 200를 해보았을 땐 아래와 같은 경고가 나왔습니다.0|app | Warning: connect.session() MemoryStore is not 0|app | designed for a production environment, as it will leak 0|app | memory, and will not scale past a single process.질문1)찾아보니까 express-session 미들웨어의 기본 메모리 저장소(MemoryStore)를 사용할 때 MemoryStore가 개발 환경에서는 적합하지만, 실제 프로덕션 환경에서는 메모리 누수 문제와 단일 프로세스 제한으로 인해 적합하지 않아 프로덕션 환경에서는 Redis, MongoDB 등의 세션 저장소를 사용하라는데, 그럼 front 화면이 나오는건지 궁금합니다,, 문제2)그리고 두번째 문제로 back에서 tail /var/log/nginx/error.log를 했을 땐 아래와 같은 에러가 나왔습니다. ubuntu@ip-172-31-12-59:~/react_nodebird/back$ tail /var/log/nginx/error.log 2024/01/24 12:19:54 [warn] 420260#420260: conflicting server name "api.luckyhaejin.com" on 0.0.0.0:80, ignored 2024/01/24 12:19:54 [notice] 420260#420260: signal process started질문2)찾아보니 Nginx 설정 파일 내에서 api.luckyhaejin.com이라는 서버 이름(server name)이 80 포트에서 두 번 이상 선언되었음을 나타내는 에러라는데 어떤 부분이 잘못되었는지 잘 모르겠어서 어딜 확인하면 좋을지 문의 드립니다. 질문3)강의에서 Ubuntu서버만 바꿔주고 로컬은 바뀌는 부분 이없는거같아서 Ubuntu서버에서만 바꿔줬는데, 그럼 로컬에도 Ubuntu에 설치한 것 다 포함해서 코드까지 다 바꿔준 뒤 Ubuntu에서 git pull 다시 해줘야할까요,,? 현재 설정된 내용)front=> /etc/nginx/nginx.conf => server관련(글을 옮겨적으니까 들여쓰기 해서 정리 한게 코드가 전부 합쳐져서 사진으로 올립니닷,,)front/pacakage.json에서 start부분에 3060 잘 되어있음front => /etc/nginx/nginx.conf front/config/config.js에서 backUrl설정 잘 되어있음back => /etc/nginx/nginx.confback => app.js(사진이 보기 편하실거같아서 코드랑 둘다올려욧)const express = require('express'); const cors = require('cors'); const session = require('express-session'); const cookieParser = require('cookie-parser'); const passport = require('passport'); const dotenv = require('dotenv'); const morgan = require('morgan'); const postRouter = require('./routes/post'); const postsRouter = require('./routes/posts'); const userRouter = require('./routes/user'); const hashtagRouter = require('./routes/hashtag'); const db = require('./models'); const passportConfig = require('./passport'); const path = require('path'); const hpp = require('hpp'); const helmet = require('helmet'); dotenv.config(); const app = express(); db.sequelize.sync() .then(() => { console.log('DB 연결 성공'); }).catch(console.error); passportConfig(); if(process.env.NODE_ENV === 'production'){ app.use(morgan('combined')); app.use(hpp()); app.use(helmet()); app.use(cors({ origin: 'https://luckyhaejin.com', credentials: true })); } else { app.use(morgan('dev')); } app.use('/', express.static(path.join(__dirname, 'uploads'))); app.use(express.json()); app.use(express.urlencoded({extended:true})); app.use(cookieParser(process.env.COOKIE_SECRET)); app.use(session({ saveUninitialized: false, resave: false, secret: process.env.COOKIE_SECRET, cookie: { httpOnly: true, //자바스크립트로 접근하지못하게 secure: true, //일단 false로 하고 https적용할 땐 ture domain: process.env.NODE_ENV = 'production' && '.luckyhaejin.com' //도메인 사용할 경우 }, })); app.use(passport.initialize()); app.use(passport.session()); app.get('/', (req, res) =>{ res.send('hello express'); }); app.use('/posts', postsRouter); app.use('/post', postRouter); app.use('/user', userRouter); app.use('/hashtag', hashtagRouter); app.listen(3065, () => { console.log('서버 실행 중'); }); back => /etc/nginx/nginx.conf사용중인 Os) macOS

 리액트 설치 후 강의 수강 중인데 저렇게 자꾸 "antd"를 찾을 수 없다고 오류가 생겨서, 문제점과 해결법을 알고 싶습니다ㅜ

이 강의를 들을때 미리 만들어보고 정답지 비교해보라는 느낌으로 강의룰 수강하라고 하셨잖아요, 근데 수강전이나 챕터별 코드를 실행해보기 전까지는 뭐를 만들어야할지 감이 안잡혀서요. 1) 한 챕터까지 코드 실행해본다.2) 코드 구성을 봐본다.3) 따라 만들어 본다.4) 해당 챕터까지 강의를 들으며 비교해본다. 요렇게 해보면 될까요?좋은 방향 있으시면 제시해주시면 감사하겠습니다. 

현재 서버 세팅을 마친 후, 백엔드 서버는 잘 돌아가는데 npm start 로 프론트 코드 실행 시 에러가 발생하고 있습니다.이전 강의를 볼 때 까지만 해도, 프론트 코드 실행이 잘 되었는데 갑자기 에러가 발생하여 의문이 듭니다ㅠㅠ현재 노드 버전은 v18.17.0이며 해본 시도로는 다음과 같습니다.백엔드 서버 중지 및 memurai 실행 중지.next 파일 삭제 및 .node_modules 파일 삭제 후 재설치npm run build 실행 후 npm starthttps://github.com/vercel/next.js/discussions/57066#discussioncomment-7609639

안녕하세요 선생님~!일단 먼저 ㅠㅠ... 질문이 너무 많아서 죄송합니다 ㅠㅠㅠ...! 제가 아직 주니어여서 메인 프엔 개발자 선배님을 보조하여,만들어진 다양한 모듈이나 비즈니스 로직 등을 이용하여 데이터 패칭/포스트/뮤테이션 정도만 하면서 자잘한 기능 구현 정도만 하고 있고 백엔드 지식이 전혀 없어서 그런지 next를 공부하면서 아직도 가장 아리송한 것이프론트엔드 개발자가 API를 만드는 것이 어떤 의미(?)인지 잘 모르겠습니다...! Next를 이용하여 프론트엔드 개발자가 serverless로 API를 개발하는 것이 어떤 경우에서 쓰이는 것인지, 이것이 얼마나 중요하고 대단한 기술인지 잘 와 닿지 않습니다. 저는 백엔드 개발자가 API를 개발 완료하면 프론트엔드 개발자는 swagger와 같은 API 문서를 참고하여 프론트 개발을 진행하는 것이 각자의 역할로 이해하고 있었는데 Next로 넘어오면서 프론트엔드 개발자가 API를 개발한다는 것에서 백엔드 개발자의 역할이 축소가 된 것인지 의문점이 들고 주니어로서는 러닝커브가 확 올라간 느낌이 듭니다 ㅠㅠ! 선생님께서는 현업에서 직업 모든 API를 개발하여 사용하시는 걸까요? 아님 이번 revalidate와 같은 몇가지 경우에서만 API를 개발하여 사용하시고 나머지 롤은 백엔드가 담당하는 것인가요?    바쁘실텐데 질문이 많아서 정말 죄송합니다 ㅠㅠ질 좋은 강의와 정성스러운 답변 덕분에 많은 배움을 얻어감에 정말 감사한 마음뿐입니다!건강하세요!

export const TabContext = createContext({ tab: "recommend", setTab: (value: "recommend" | "following") => {}, }); {tab: "recommend", setTab:(value: "recommend" | "following") => {}} 부분을 제거하고 빈 createContext()만 생성해도 잘 동작하는거 같은데, 매개변수값은 무엇을하는건지 궁금합니다. 그냥 타입정의 한거라고 봐도될까요?

안녕하세요. 좋은 강의 잘 듣고 있습니다.초반에 css 쪽 선택 하실때 emotion을 쓰면 nextjs와 문제가 있다고 말씀하셨는데요.상세한 원인을 알고 싶습니다. 감사합니다. 

이렇게 초기값을 설정 해주지 않았을 때, 하나의 항목만 수정하고 수정하기 버튼을 누르면 다른 항목들은 그 전 내용 그대로 띄워졌는데 그 이유가 궁금해요 !굳이 boards 수정 2편에서 한 방법이 아니더라도 이렇게 하면 문제가 되는 걸까요 ? 초기값을 설정 안해주면 안되는 이유가 있나요 ㅜㅜ강사님께서 그냥 여기 초기값을 "" 빈문자열로 바꾸고 다시 실행하시기만 하셔서 왜 이 방법을 쓰면 안되는지, boards 수정 2편의 방법과는 무슨 차이가 있는지 잘 모르겠습니다 ..!

package.json "dependencies": { "@ant-design/icons": "^5.0.1",위와 같이 수정 후 yarn.lock, node_modules 삭제 - yarn install 하여 재 설치 하여도 아래와 같이 err 문구는 사라지지 않았으며 yarn dev를 통해 웹페이지 확인 하면 정상적으로 icon은 출력됩니다.icon = 정상 출력 되나 코드상 error 문구는 삭제되지 않습니다.VS code 를 재시작 하여도code_modules 등 삭제 후 재설치 3~4번 하여도 동일합니다. yarn.lock 첨부합니다."@ant-design/icons-svg@^4.3.0": version "4.3.2" resolved "https://registry.yarnpkg.com/@ant-design/icons-svg/-/icons-svg-4.3.2.tgz#ab2e082991877fdc85b2b32f0b68628b716bad23" integrity sha512-s9WV19cXTC/Tux/XpDru/rCfPZQhGaho36B+9RrN1v5YsaKmE6dJ+fq6LQnXVBVYjzkqykEEK+1XG+SYiottTQ== "@ant-design/icons@^4.8.1": version "4.8.1" resolved "https://registry.yarnpkg.com/@ant-design/icons/-/icons-4.8.1.tgz#44f6c81f609811d68d48a123eb5dcc477f8fbcb7" integrity sha512-JRAuiqllnMsiZIO8OvBOeFconprC3cnMpJ9MvXrHh+H5co9rlg8/aSHQfLf5jKKe18lUgRaIwC2pz8YxH9VuCA== dependencies: "@ant-design/colors" "^6.0.0" "@ant-design/icons-svg" "^4.3.0" "@babel/runtime" "^7.11.2" classnames "^2.2.6" lodash "^4.17.15" rc-util "^5.9.4" "@ant-design/icons@^5.0.1": version "5.2.6" resolved "https://registry.yarnpkg.com/@ant-design/icons/-/icons-5.2.6.tgz#2d4a9a37f531eb2a20cebec01d6fb69cf593900d" integrity sha512-4wn0WShF43TrggskBJPRqCD0fcHbzTYjnaoskdiJrVHg86yxoZ8ZUqsXvyn4WUqehRiFKnaclOhqk9w4Ui2KVw== dependencies: "@ant-design/colors" "^7.0.0" "@ant-design/icons-svg" "^4.3.0" "@babel/runtime" "^7.11.2" classnames "^2.2.6" rc-util "^5.31.1"

SyntaxError: Cannot use import statement outside a module 오류가 발생하는데 boards에서 수정하기, 상세페이지를 들어갈 때는 문제가 없다가 수정하기, 상세페이지 안에서 f5를 누르면 위와 같은 오류가 발생했습니다. 어떤게 문제인지 알려주시면 감사하겠습니다.

children 에 해당하는 page.tsx에서 버튼을 클릭해서 i/flow/login 으로 이돌할 때children => (beforeLogin)/i/flow/login/page.tsx modal => @modal/i/flow/login/page.tsx 이렇게 같이 바뀌어야 하는데@modal/(.)i 에게 인터셉트! 당해서 children은 주소가 변경되지 않고 @modal(패러랠 라우트)만 이동하게 되는걸로 이해하면 될까요?(.)i 가 children 에게 일어날 라우팅을 가로챘다 라고 생각하는게 맞는걸까요?

1:16 에서 not found.tsx가 보이는 이유는@폴더명으로 만든 슬롯이 layout 에서 props로 값이 들어와야 하는데@modal/i/flow/login 으로 page.tsx가 이동해버려서layout에서 props로 가져올 modal 값이 없어져 404가 뜨는것이고, 메인 페이지에서는 모달이 필요 없기에 default.tsx를 만들어서 해결하는 것으로 이해하면 될까요?

안녕하세요 선생님 좋은 강의 정말 감사합니다. 다름이 아니라, 강의 중에선 generateStaticParams에 관하여 다루진 않는 것 같아서혼자서 공부중인데 그럼에도 여전히 궁금하고 확실하게 이해되지 않는 몇가지가 있어서 질문드립니다~! 기존 Next12에서 SSG(정적페이지 Pre-Rendering)을 Next13에서는 generateStaticParams로 대체 된 것이 맞을까요? (동적라우팅페이지 포함) generateStaticParams 를 이용하여 증분정적생성(ISR) 형식으로 배포하려면 기존 fetch 옵션에 동일하게 { next: { revalidate: 60 } }를 추가해주면 되는게 맞을까요?Next12에서는 데이터를 패칭한 정적페이지를 미리 생성해놓음으로서, 유저에게 빠른 속도로 페이지를 제공한다는 장점이 있다는 것을 공부했던 기억이 있습니다. 그런데, Next13 이후부터는 서버 '컴포넌트' 단위의 개발을 지향하는 듯 한데 generateStaticParams을 이용하여 개발하는 것이 어떤 의미인지 잘 이해가 되지 않습니다~! 단지 Next13에서 정적페이지 생성을 위한 함수를 남겨둔 것이라고만 이해하면 좀 쉬울까요? 서버 컴포넌트는 generateStaticParams로 build하는 페이지에선 사용할 수 없는 것일까요?저는 아직 대규모 프로젝트를 진행해본 적이 없는 주니어 개발자입니다. 보통 현업에서 동적라우팅 SSG 페이지를 대량으로 생성하여 배포하는 경우가 많을까요? 보통 어떤 경우에 많이 사용하실까요?  바쁘실텐데 질문이 많아 정말 죄송합니다 ㅠㅠ!날이 많이 추워졌는데 건강에 유의하셨으면 좋겠습니다.감사합니다~!

AntDesign만 사용하면 SyntaxError: Cannot use import statement outside a module 에러가 나옵니다.구글링 해서 package.json에 "type":"module"을 작성하면 된다고 하는데 작성하면 ReferenceError: module is not defined in ES module scope 에러가 나옵니다어떻게 해결하면 좋을까요?

강의 수강중에, 배운 무한스크롤을 바탕으로 개인 프로젝트를 진행중입니다. 위의, 데이터를 받아오는 것을 보면, 처음에는 2개를 불러오고, 그 이후에는 계속 5개를 불러오는데, 제가 원하는 방식은 처음부터 끝까지 5개씩 계속 일정하게 불러오는 것을 원합니다. 이유를 찾을려고 여러가지 검색을 해보며 해봤는데도, 해결되지않아서 질문드립니다. 이 경우 의심해볼 수 있는 부분은 어떤 부분이 있을까요?최상위 페이지에서 아래와 같이 prefetch를 해오고type HomeProps = { params: { category: string; }; }; const CategoryDetailPage: React.FC<HomeProps> = async ({ params }) => { const { category } = params; const queryClient = new QueryClient(); const college = category; // 서버에서 불러온 데이터를 클라이언트의 리액트 쿼리가 물려받음.(하이드레이트) await queryClient.prefetchInfiniteQuery({ queryKey: ['posts', college], queryFn: ({ pageParam = 1 }) => getFilteredPosts(college, { pageParam }), // searchParams 전달 // 커서 값 initialPageParam: 0 }); // hydrate라는 것은 서버에서 온 데이터를 클라이언트에서 그대로, 물려받는 것 이다. const dehydratedState = dehydrate(queryClient); return ( <HydrationBoundary state={dehydratedState}> <Container> <ListingContainerTest /> </Container> </HydrationBoundary> ); }; export default CategoryDetailPage; 실제 무한스크롤을 사용하는 곳은 아래와 같이 사용하고 있습니다.'use client'; import { getFilteredPosts } from '@/app/lib/getFilteredPosts'; import { useInfiniteQuery } from '@tanstack/react-query'; import { usePathname } from 'next/navigation'; import { Fragment, useEffect } from 'react'; import { useInView } from 'react-intersection-observer'; import ClimbingBoxLoader from 'react-spinners/ClimbingBoxLoader'; import EmptyState from '../EmptyState'; import ListingGrid from './ListingGrid'; const ListingCard = () => { const path = usePathname(); // ['', chss] const college = path.split('/')[1]; const { data: listings, fetchNextPage, hasNextPage, isFetching, isError } = useInfiniteQuery({ queryKey: ['posts', college], queryFn: ({ pageParam = 1 }) => getFilteredPosts(college, { pageParam }), initialPageParam: 0, // 가장 최근에 불러왔던 게시글 getNextPageParam: (lastPage) => lastPage.studyList.at(-1)?.id, staleTime: 60 * 1000, gcTime: 300 * 1000 }); // lastPage.jobList.at(-1)?.id, const { ref, inView } = useInView({ // div가 보이고나서 몇픽셀 정도의 이벤트가 호출될 것 인가? 보이자마자 바로 호출.그래서0 threshold: 0, // 몇초후에 딜레이 보일것인지. delay: 0 }); console.log(listings); useEffect(() => { if (inView) { !isFetching && hasNextPage && fetchNextPage(); } }, [inView, isFetching, hasNextPage, fetchNextPage]); if (isError || listings?.pages?.length === 0) { return <EmptyState />; } return ( <> <div className="pt-24 grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 2xl:grid-cols-6 gap-8"> {listings?.pages.map((page) => // Assuming each page has a 'studyList' property page.studyList.map((listing: any) => ( <Fragment key={listing.id}> <ListingGrid data={listing} /> </Fragment> )) )} <div ref={ref} style={{ height: 50 }}></div> </div> {isFetching && ( <div className="flex items-center justify-center"> <ClimbingBoxLoader color="#36d7b7" size={20} /> </div> )} </> ); }; export default ListingCard;