vite 로 작성한 경우를 마이그레이션 하는데요.강의에 따라서 진행하였는데 최종 아래처럼 에러가 발생합니다.Require stack:\node_modules\next\dist\server\dev\next-dev-server.jsvite\node_modules\next\dist\server\dev\next-dev-server.jsvite\node_modules\next\dist\server\next.jsvite\node_modules\next\dist\server\lib\start-server.jspackage.json 은 아래와 같아요.{ "name": "next-migration-02-vite", "private": true, "version": "0.0.0", "type": "module", "scripts": { "dev": "next dev", "build": "next build", "lint": "next lint", "start": "next start" }, "dependencies": { "next": "^14.1.1", "react": "^18.2.0", "react-dom": "^18.2.0" }, "devDependencies": { "@types/node": "20.11.24", "@types/react": "^18.2.56", "@types/react-dom": "^18.2.19", "@typescript-eslint/eslint-plugin": "^7.0.2", "@typescript-eslint/parser": "^7.0.2", "@vitejs/plugin-react": "^4.2.1", "eslint": "^8.56.0", "eslint-plugin-react-hooks": "^4.6.0", "eslint-plugin-react-refresh": "^0.4.5", "typescript": "^5.2.2", "vite": "^5.1.4" } } 관련해서 안내좀 부탁드립니다.좋은 주말 되세요~

기본적으로 캐싱된 데이터가 있으면, 그 데이터를 가지고 오는 것으로 알고 있는데,  const { data} = useQuery({ queryKey: ['posts', 'recommends'], queryFn: getPostRecommends});const data = queryClient.getQueryData(['posts', 'recommends']); 두 가지 차이점이 있는지 궁금합니다.

안녕하세요 제로초님 강의 잘 보고 있습니다.다름아니라 무한스크롤 부분 구현중(개인 프로젝트에 해당 부분만 먼저 적용중이라 jsonplaceholder API로 호출하고 있습니다) fetchNextPage가 2번씩호출이 되어서 delay도 조정해보았는데 계속 2번씩호출이 되서 로직에 혹시 문제가 있는지 봐주실수 있을지부탁드립니다.0. 콘솔에 확인한 결과처음 화면에 ref가 렌더되고 그 이후 data fetching이 완료되어 isFetcing이 false가 되었는데, data를 map으로 div로 뿌리는 렌더링 과정에 시간이 소모되어 inView는 true && isFetching도 false가 되어서 div가 화면에 나타나고 ref div를 가리기 전에 data fetching을 한번씩 더 하고 있는 상황입니다.감사합니다

안녕하세요. 디렉토리 구조를 afterlogin과 beforelogin구조로 나누어서 로그인을 분기치고 있고 auth.ts에서 서버로 부터 전달받은 토근값을 넣고 미들웨어에서 세션을 유무를 확인하여 login페이지로 리다이렉트 시키고 있습니다.  afterlogin과 beforelogin으로 디렉토리가 어떤방식으로 나뉘는지 로직이 궁금합니다. 관련된 훅이 있는것인지??2. 실제 상용화된 서비스라고하면 로그인이 풀리는것을 방지하기 위해 BE로 토근값을 요청할텐데, 관련 로직은 어떤방식으로 구현하는게 좋은방법인지 요청드립니다.

비번 확실히 틀리지 않았는데 계속 오류 뜨길래, 완전 삭제후 다시 설치해서 비번 쉬운걸로 다시 설정하고 입력해도 계속 비번오류 뜹니다.

안녕하세요 제로초님.인터넷창에 직접 주소를 입력하거나 새로고침 시 뒤에 배경화면이 사라지는 것에 대하여 질문있습니다. 먼저<Link href='/i/flow/signup' className={styles.signup}>를 클릭 시에는 인터셉터 라우팅이 트리거 되어 src/app/(beforeLogin)/layout.tsx에 있는 children으로 인해 배경화면에 main컴포넌트가 보여지며 인터셉터된 @modal 은 modal부분에 보여집니다. 그런데 직접 주소창에/i/flow/signup' 를 입력하여 접근하거나 새로고침하면 배경화면에 main컴포넌트가 사라지게 되는데 이것의 이유는 직접 접근할 때 인터셉에 걸리지 않게되고, childrend에는 i/flow에 있는 폴더들이 보여지며 defalut.tsx가 배경화면으로 보여지기 때문인가요?     

안녕하세요 강사님수업 잘듣고 있습니다 .. !msw 쪽 수업을 듣다가 궁금한 점이 있어서 질문 남기게 되었습니다 msw 공식 홈페이지 (https://mswjs.io/docs/integrations/node)에서 node 관련 server 를 지원해주는데 express로 따로 https 파일을 구성하신 이유가 있으신지 궁금합니다.. ! 공식홈페이지를 따라 갈지, express로 서버를 구성해야하는지 선택이 어려워서요..! 조언을 듣고 싶습니다

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

강의에서 알려주신 router.replace() 를 사용하지 않고// @/app/(beforeLogin)/@modal/(.)login/page.tsx import { redirect } from "next/navigation"; export default function Login() { redirect("/i/flow/login"); }기존의 이 코드를 인터셉트 라우팅으로 줘서홈페이지 -> 인터셉트 라우팅된 /login -> 인터셉트 라우팅된 /i/flow/login 으로 이동하도록 폴더를 구성해서 구현해 봤습니다. 이 방식으로 구현해도 문제 없을까요?

안녕하세요 선생님!좋은 강의 정말 감사하게 듣고 있습니다.선생님의 강의를 듣다보니, Next.js 13의 Data Fetching 방법이 React Query과 유사함을 느꼈습니다.(주니어라 부족함이 있어 실제론 유사하지 않을 수도 있지만..!) Next 13의 데이터 패칭 방법이 react 에서 React Query를 사용하여 서버 API의 데이터를 일정 시간동안 fresh 상태로 갖고 있는것 stale한지 chach로 체크하는 것 모두 흡사 하다고 느꼈습니다. React Query의 가장 큰 강점은 클라이언트-서버간의 데이터 동기화가 가장 큰 장점이라고 생각하는데 만약 Next 13의 데이터 패칭 방법을 사용한다면번거로운 React Query의 보일러코드들을 사용하지 않아도 React Query의 장점을 그대로 살려 쉽게 사용할 수 있을 것 같아보입니다! 따라서, Next 13에선 React Query가 무한스크롤 외에 사용할 일이 거의 없을 것만 같아보이는데...! 어떻게 생각하실지 의견이 궁금합니다...!next 13과 react query 조합은 앞으로 거의 사용하지 않게 되는 걸까요? 선생님의 고견을 나눠주시면 감사하겠습니다~!바쁘실텐데 번거롭게 해드려서 죄송합니다!감사합니다!

fetch 함수가 그냥 web API 같은데fetch 함수에 next 라는 속성이 들어간건데 따로 임포트해온것도 아닌데 어떻게 작동되는건가요?next 가 내부적으로 fetch 를 새로 만든건가요?

서버 컴포넌트가 프론트 서버에서 미리 렌더링되는 것으로 알고 있었습니다. 이것이 맞을까요??클라이언트 컴포넌트랑 서버 컴포넌트의 렌더링 방식을 찾아봤음에도 여전히 헷갈리는데 시간적 여유가 되신다면 쉽게 알려주실 수 있을까요??클라이언트 컴포넌트 사이에 서버 컴포넌트를 넣으면 렌더링 동작이 어떻게 수행되는지 궁금합니다.강좌에서는 PostArticle이라는 클라이언트 컴포넌트의 자식으로 서버컴포넌트를 넣는데, 공식문서에서는 클라이언트 컴포넌트가 DOM Tree의 끝에 오도록 하는 것을 권장하는 것으로 알고 있었는데 제가 잘못 알고 있던 것이었을까요??

x.com 을 보면 로그인도 그렇고 게시글 올릴때도 그렇고 모달창이 뜰때마다 그냥 화면에 띄우는 방식이 아니라 저렇게 모달창을 띄울수 있는 url 따로 만든 이유가 뭘까요? 관리가 더 편해서일까요?

해당 강의에서 postgresql 설치와 노드버전 18.17.0 환경에서nest-prisma의 폴더를 다운 받은 후 npm i -> npx prisma migrate dev 까지는 순조롭게 진행되었으나 npm run start:dev에서 Error: connect ECONNREFUSED ::1:6379 at TCPConnectWrap.afterConnect [as oncomplete] (node:net:1495:16) { errno: -61, code: 'ECONNREFUSED', syscall: 'connect', address: '::1', port: 6379 }에러가 발생했습니다 구글링을 해보니 레디스 서버가 구동이 안된 것 같다고 나오기도하고 서버쪽을 잘 몰라 질문 드립니다.env 파일 입니다DATABASE_URL="postgresql://postgres:비번@localhost:5432/zcom?schema=public" REDIS_URL=redis://localhost:6379 COOKIE_SECRET=cookienyamnyam 

콘솔로그 결과 안녕하세요 선생님, 강의를보고 간단하게 따라해보았는데요NextRequest 타입의 req를 매개변수로 받아와서req를 console.log 에 찍어보면 undefined가 뜹니다.혹시 NextRequest 사용에 조건이 따로 있을까요? req.nextUrl.pathname 으로 url 도 가져와보고 싶고한데생각처럼 잘 안되네요..

windows 에서 vanila-extract 의 문제점은 구체적으로 어떤 것일까요? https://github.com/vanilla-extract-css/vanilla-extract/issues/1086해당 이슈가 맞는지 궁금합니다!

선생님, 안녕하세요. 너무 기초적인 질문일 수 있지만, 갑자기 궁금해져서 질문드립니다. 서버사이드 렌더링의 경우, 서버에서 pre-render된 코드를 만들어서 보내주고, 클라이언트에서 hydrate를 해서 페이지를 만든다고 알고 있습니다. 클라이언트 사이드 렌더링의 경우는 html코드와 js코드를 함께 보내서, 클라이언트에서 페이지를 만들구요. 서버사이드 렌더링을 할 때, pre-render된 코드를 만드는 서버는 각 클라이언트들의 컴퓨팅 자원을 사용하는 건지(클라이언트의 컴퓨터에서 만드는 건지), 아니면 배포하는 중앙(?)서버(aws ec2 또는 이 강의에서 처럼 vercel)의 컴퓨팅 자원을 사용하는 건지(서버에서 만드는 건지) 궁금합니다.  클라이언트 측에서 다 계산을 한다고 하면, 중앙(?)서버의 부담이 적을테지만, 중앙(?)서버에서 한다고 하면, 부담이 갈 수 있을 것 같아서요. 최근 next.js 14버전이 되면서 디비와 직접 통신하는 등 기능이 많이 생겼는데, 이 통신하는 등의 역할은 client side가 아닌 server side에서만 가능하더라구요. 그래서 server side라는 게 중앙서버 하나에만 있다면, 계산이 오래걸린다거나 트래픽이 늘어나거나 한다면 다른 사용자들에게도 영향을 끼치지 않을까 궁금했습니다.(자동 확장이 되지 않을때) 또, 이런식으로 간다면 따로 백엔드 서버가 필요없게 될 수도 있겠다라고도 생각해봤는데, 어떻게 보고계시는지도 궁금합니다.

SSR 방식에 서버 컴포넌트와 클라이언트 컴포넌트를 둘 다 적절히 사용하는 것인가요??서버 컴포넌트는 데이터 페칭, 보안, 캐싱, JS 번들크기 감소와 같은 장점이 있고 event와 hook을 사용하지 못한다는 특징도 이야기해주셨는데, 그렇다면 데이터를 받아서(페칭해서) 클라이언트 컴포넌트에 데이터를 뿌려주는 느낌으로 조합해서 사용하는 건가요??서버컴포넌트는 event를 사용하지 않으므로, TTI를 개선하기 위해 나온 개념은 아닌거죠???

33-05 강의에서 test에서 자꾸 이 오류가 뜹니다apis.jsimport { graphql } from "msw"; const gql = graphql.link("http://mock.com/graphql") export const apis = [ gql.mutation("createBoard", (req, res, ctx) => { const { writer, title, contents } = req.variables.createBoardInput return res( ctx.data({ createBoard: { _id: "qqq", writer, title, contents, __typepname: "Board", }, }) ); }), // gql.query("fetchBoards", () => {}) ]; jest.setup.jsimport { server } from "./src/commons/mocks/index" beforeAll(() => server.listen()); afterAll(() => server.close()); index.test.tsx import { fireEvent, render, screen, waitFor } from "@testing-library/react"; import StaticRoutingMovedPage from "../../pages/section33/33-05-jest-unit-test-mocking"; import { ApolloClient, ApolloProvider, HttpLink, InMemoryCache, } from "@apollo/client"; import fetch from "cross-fetch"; import mockRouter from "next-router-mock"; jest.mock("next/router", () => require("next-router-mock")); it("게시글이 잘 등록되는지 테스트 하자!", async () => { const client = new ApolloClient({ link: new HttpLink({ uri: "http://mock.com/graphql", fetch, }), cache: new InMemoryCache(), }); render( <ApolloProvider client={client}> <StaticRoutingMovedPage /> </ApolloProvider> ); fireEvent.change(screen.getByRole("input-writer"), { target: { value: "맹구" }, }); fireEvent.change(screen.getByRole("input-title"), { target: { value: "안녕하세요" }, }); fireEvent.change(screen.getByRole("input-contents"), { target: { value: "방가방가" }, }); fireEvent.click(screen.getByRole("submit-button")); await waitFor(() => { expect(mockRouter.asPath).toEqual("/boards/qqq"); }); }); 도와주십쇼 ㅠㅠ