안녕하세요. 좋은 강의 잘 듣고 있습니다.초반에 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;  

클라이언트 사이드 렌더링, 서버 사이드 렌더링이 클라이언트 컴포넌트 서버 컴포넌트인가요?예전에 사용한 getserversideprops() 이거는 이젠 안쓰는건가요?그러면 use client를 선언하면 csr 이고 사용하지 않으면 ssr인가요?

이 부분 에러 어떻게 고치나요?export const firebaseApp = initializeApp(firebaseConfig, "appname") 하니까 위에 오류는 안뜨는데 이 방법이 맞나요?저 방법으로 수정하면이 오류가 뜹니다 ㅠ

그럼 중첩 라우트는 인클루드 개념 인거겠네요?

안녕하세요 선생님 이미지 업로드와 관련한 질문 사항인데요, 도메인 연결 후 이미지 업로드시 이미지가 화면에 안뜨고, 서버에서 아래와 같은 타입 에러가 발생해서 에러 원인을 검색해보았는데, 버전을 2에서 3으로 업그레이드 한 뒤 코드를 수정한 뒤 이미지는 화면에 떴는데, 게시글이 안올라가서 보니까 이미지 Url길이가 너무 길어서 발생한 문제인것 같아서 image테이블에 src컬럼 길이 1000으로 변경하니까 에러가 해결되긴 했는데, 이렇게 변경해도 될까욧?백엔드 에러로그)0|app | Please migrate your code to use AWS SDK for JavaScript (v3). 0|app | For more information, check the migration guide at https://a.co/7PzMCcy 0|app | (Use `node --trace-warnings ...` to show where the warning was created) 0|app | TypeError: this.client.send is not a function 0|app | at _Upload.__uploadUsingPut (/home/ubuntu/react_nodebird/back/node_modules/@aws-sdk/lib-storage/dist-cjs/index.js:217:53) 0|app | at _Upload.__doConcurrentUpload (/home/ubuntu/react_nodebird/back/node_modules/@aws-sdk/lib-storage/dist-cjs/index.js:280:29) 0|app | at process.processTicksAndRejections (node:internal/process/task_queues:95:5) 0|app | at async Promise.all (index 0) 0|app | at async _Upload.__doMultipartUpload (/home/ubuntu/react_nodebird/back/node_modules/@aws-sdk/lib-storage/dist-cjs/index.js:366:5) 0|app | at async _Upload.done (/home/ubuntu/react_nodebird/back/node_modules/@aws-sdk/lib-storage/dist-cjs/index.js:190:12)문의1)back/package.json 버전 => aws-sdk 2버전에서 aws-sdk/client-s3 3버전으로 업그레이드{ "name": "react-nodebird-back", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "start": "cross-env NODE_ENV=production pm2 start app.js" }, "author": "luckyhaejin", "license": "ISC", "dependencies": { "@aws-sdk/client-s3": "^3.496.0", "aws-sdk": "^2.1538.0", "bcrypt": "^5.1.1", "cookie-parser": "^1.4.6", "cors": "^2.8.5", "cross-env": "^7.0.3", "dotenv": "^16.3.1", "express": "^4.18.2", "express-session": "^1.17.3", "helmet": "^7.1.0", "hpp": "^0.2.3", "morgan": "^1.10.0", "multer": "^1.4.5-lts.1", "multer-s3": "^3.0.1", "mysql2": "^3.6.5", "passport": "^0.7.0", "passport-local": "^1.0.0", "pm2": "^5.3.0", "sequelize": "^6.35.2", "sequelize-cli": "^6.6.2" }, "devDependencies": { "nodemon": "^2.0.22" } } 수정한 후 post.js 이미지 관련 코드const express = require('express'); const {Post, Image, Comment, User, Hashtag} = require('../models'); const {isLoggedIn} = require('./middlewares'); const router = express.Router(); const multer = require('multer'); const path = require('path'); const fs = require('fs'); const multerS3 = require('multer-s3'); // const AWS = require('aws-sdk'); try { fs.accessSync('uploads'); } catch(error) { console.error('uploads폴더가 없으므로 생성합니다.'); fs.mkdirSync('uploads'); } // AWS.config.update({ // accessKeyId: process.env.S3_ACCESS_KEY_ID, // secretAccessKey: process.env.S3_SECRET_ACCESS_KEY, // region: 'ap-northeast-2', // }); const { S3Client } = require('@aws-sdk/client-s3'); const s3Client = new S3Client({ credentials: { accessKeyId: process.env.S3_ACCESS_KEY_ID, secretAccessKey: process.env.S3_SECRET_ACCESS_KEY, }, region: 'ap-northeast-2', }); const upload = multer({ storage: multerS3({ // s3: new AWS.S3(), s3: s3Client, bucket: 'react-saga-nodebird-s3', key(req, file, cb){ cb(null, `original/${Date.now()}_${path.basename(file.originalname)}`) } }), limits: {fileSize: 20 * 1024 * 1024} //20MB }); router.post('/images', isLoggedIn, upload.array('image'),(req, res, next) => { //POST /post/images res.json(req.files.map((v) => v.location)); }); 게시글 업로드시 에러 로그)Error 0|app | at Query.run (/home/ubuntu/react_nodebird/back/node_modules/sequelize/lib/dialects/mysql/query.js:52:25) 0|app | at /home/ubuntu/react_nodebird/back/node_modules/sequelize/lib/sequelize.js:315:28 0|app | at process.processTicksAndRejections (node:internal/process/task_queues:95:5) 0|app | at async MySQLQueryInterface.insert (/home/ubuntu/react_nodebird/back/node_modules/sequelize/lib/dialects/abstract/query-interface.js:308:21) 0|app | at async Image.save (/home/ubuntu/react_nodebird/back/node_modules/sequelize/lib/model.js:2490:35) 0|app | at async Image.create (/home/ubuntu/react_nodebird/back/node_modules/sequelize/lib/model.js:1362:12) 0|app | at async /home/ubuntu/react_nodebird/back/routes/post.js:60:31 { 0|app | name: 'SequelizeDatabaseError', 0|app | parent: Error: Data too long for column 'src' at row 1 0|app | at Packet.asError (/home/ubuntu/react_nodebird/back/node_modules/mysql2/lib/packets/packet.js:728:17) 0|app | at Execute.execute (/home/ubuntu/react_nodebird/back/node_modules/mysql2/lib/commands/command.js:29:26) 0|app | at Connection.handlePacket (/home/ubuntu/react_nodebird/back/node_modules/mysql2/lib/connection.js:481:34) 0|app | at PacketParser.onPacket (/home/ubuntu/react_nodebird/back/node_modules/mysql2/lib/connection.js:97:12) 0|app | at PacketParser.executeStart (/home/ubuntu/react_nodebird/back/node_modules/mysql2/lib/packet_parser.js:75:16) 0|app | at Socket.<anonymous> (/home/ubuntu/react_nodebird/back/node_modules/mysql2/lib/connection.js:104:25) 0|app | at Socket.emit (node:events:518:28) 0|app | at addChunk (node:internal/streams/readable:559:12) 0|app | at readableAddChunkPushByteMode (node:internal/streams/readable:510:3) 0|app | at Readable.push (node:internal/streams/readable:390:5) { 0|app | code: 'ER_DATA_TOO_LONG', 0|app | errno: 1406, 0|app | sqlState: '22001', 0|app | sqlMessage: "Data too long for column 'src' at row 1", 0|app | sql: 'INSERT INTO `images` (`id`,`src`,`createdAt`,`updatedAt`) VALUES (DEFAULT,?,?,?);', 0|app | parameters: [ 0|app | 'https://react-saga-nodebird-s3.s3.ap-northeast-2.amazonaws.com/original/1705984124288_%C3%A1%C2%84%C2%89%C3%A1%C2%85%C2%B3%C3%A1%C2%84%C2%8F%C3%A1%C2%85%C2%B3%C3%A1%C2%84%C2%85%C3%A1%C2%85%C2%B5%C3%A1%C2%86%C2%AB%C3%A1%C2%84%C2%89%C3%A1%C2%85%C2%A3%C3%A1%C2%86%C2%BA%202024-01-23%20%C3%A1%C2%84%C2%8B%C3%A1%C2%85%C2%A9%C3%A1%C2%84%C2%92%C3%A1%C2%85%C2%AE%2012.20.36.png', 0|app | '2024-01-23 04:33:31', 0|app | '2024-01-23 04:33:31' 0|app | ] 0|app | }, 0|app | original: Error: Data too long for column 'src' at row 1 0|app | at Packet.asError (/home/ubuntu/react_nodebird/back/node_modules/mysql2/lib/packets/packet.js:728:17) 0|app | at Execute.execute (/home/ubuntu/react_nodebird/back/node_modules/mysql2/lib/commands/command.js:29:26) 0|app | at Connection.handlePacket (/home/ubuntu/react_nodebird/back/node_modules/mysql2/lib/connection.js:481:34) 0|app | at PacketParser.onPacket (/home/ubuntu/react_nodebird/back/node_modules/mysql2/lib/connection.js:97:12) 0|app | at PacketParser.executeStart (/home/ubuntu/react_nodebird/back/node_modules/mysql2/lib/packet_parser.js:75:16) 0|app | at Socket.<anonymous> (/home/ubuntu/react_nodebird/back/node_modules/mysql2/lib/connection.js:104:25) 0|app | at Socket.emit (node:events:518:28) 0|app | at addChunk (node:internal/streams/readable:559:12) 0|app | at readableAddChunkPushByteMode (node:internal/streams/readable:510:3) 0|app | at Readable.push (node:internal/streams/readable:390:5) { 0|app | code: 'ER_DATA_TOO_LONG', 0|app | errno: 1406, 0|app | sqlState: '22001', 0|app | sqlMessage: "Data too long for column 'src' at row 1", 0|app | sql: 'INSERT INTO `images` (`id`,`src`,`createdAt`,`updatedAt`) VALUES (DEFAULT,?,?,?);', 0|app | parameters: [ 0|app | 'https://react-saga-nodebird-s3.s3.ap-northeast-2.amazonaws.com/original/1705984124288_%C3%A1%C2%84%C2%89%C3%A1%C2%85%C2%B3%C3%A1%C2%84%C2%8F%C3%A1%C2%85%C2%B3%C3%A1%C2%84%C2%85%C3%A1%C2%85%C2%B5%C3%A1%C2%86%C2%AB%C3%A1%C2%84%C2%89%C3%A1%C2%85%C2%A3%C3%A1%C2%86%C2%BA%202024-01-23%20%C3%A1%C2%84%C2%8B%C3%A1%C2%85%C2%A9%C3%A1%C2%84%C2%92%C3%A1%C2%85%C2%AE%2012.20.36.png', 0|app | '2024-01-23 04:33:31', 0|app | '2024-01-23 04:33:31' 0|app | ] 0|app | }, 0|app | sql: 'INSERT INTO `images` (`id`,`src`,`createdAt`,`updatedAt`) VALUES (DEFAULT,?,?,?);', 0|app | parameters: [ 0|app | 'https://react-saga-nodebird-s3.s3.ap-northeast-2.amazonaws.com/original/1705984124288_%C3%A1%C2%84%C2%89%C3%A1%C2%85%C2%B3%C3%A1%C2%84%C2%8F%C3%A1%C2%85%C2%B3%C3%A1%C2%84%C2%85%C3%A1%C2%85%C2%B5%C3%A1%C2%86%C2%AB%C3%A1%C2%84%C2%89%C3%A1%C2%85%C2%A3%C3%A1%C2%86%C2%BA%202024-01-23%20%C3%A1%C2%84%C2%8B%C3%A1%C2%85%C2%A9%C3%A1%C2%84%C2%92%C3%A1%C2%85%C2%AE%2012.20.36.png', 0|app | '2024-01-23 04:33:31', 0|app | '2024-01-23 04:33:31' 0|app | ] 0|app | } models/image -> src컬럼 길이 200에서 1000으로 변경 const DataTypes = require('sequelize'); const {Model} = DataTypes; module.exports = class Image extends Model { static init(sequelize) { return super.init({ //id가 기본적으로 들어있다 src: { type:DataTypes.STRING(1000), allowNull:false }, },{ modelName: 'Image', tableName: 'images', charset: 'utf8', collate: 'utf8_general_ci', sequelize }); } static associate(db) { db.Image.belongsTo(db.Post); } }  

안녕하세요 선생님 도메인 연결을 했는데, 처음에 Front 도메인을 입력한 뒤 ?가 붙는 원인을 어떻게 알 수 있는지 궁급합니다. 도메인 연결 후 login후 Network => Headers-> RequestURL, Access-Control-Allow-Orign, SetCookie, Application->Cookies에는 도메인주소와 쿠키가 있고, 백엔드 도메인 입력시에는 물음표 안생깁니다. 둘다 화면은 잘 나옵니다.백엔드 도메인 입력시)프론트 도메인 입력시)로그인시 network, application) 

에러 삽질 해결법 등의 노션 자료를 공유받아보고 싶습니다

안녕하세요! 제로초님[리뉴얼] React로 NodeBird SNS 만들기 강의의섹션 6. AWS에 배포하기: 프론트 서버 배포하기 강의를 진행 중인 수강생 입니다!우분투 프론트 서버는 구동이 되지만 프론트 IP 주소 사이트가 페이지 응답이 되지 않아 질문 올립니다!'로컬 리소스를 로드할 수 없습니다' 에러가 콘솔에 출력 되었지만 새로 고침을 하면서 없어졌습니다!Not allowed to load local resource: chrome-error://chromewebdata/#buttons사전에 아래 사항을 정확히 확인 후 질문을 올립니다!1. EC2 프론트 서버와 백엔드 인스턴스 상태는 잘 실행 중이며,프론트 퍼블릭 IPv4가 틀리지 않았는지 확인하였습니다.2. 로컬 프론트 경로에서 npm run build를 하였습니다.-> 저의 경우 우분투 프론트 서버에서 npm run build를 하면 메모리가 부족해 멈춤 현상이 나타납니다.-> 그래서 .next를 Git LFS로 관리하였고, 로컬 프론트에서 빌드에 성공하였습니다.3. 윈도우 서비스에서 MySQL 서비스를 실행한 상태입니다.4. 우분투 백엔드 서버 실행에 성공한 상태입니다!5. 로컬 프론트 경로에서 node_module과 .next를 삭제했다가 npm i와 build를 통해 다시 만들었습니다.6. about.js는 잠시 바탕 화면으로 옮겼습니다.우분투 프론트 서버에 아래 명령어를 순서대로 입력하였습니다.(우분투 프론트 서버의 경우 sudo를 붙이지 않아도 되었습니다.)sudo git pull>>> 메모리 부족 문제로 npm run build는 로컬 프론트에서 진행하고 아래 작업을 마저 진행했습니다. <<<sudo npx pm2 reload allnpx pm2 start npm -- startsudo npx pm2 monit우분투 프론트 서버가 실행된 상태입니다.우분투 백엔드 서버에 아래 명령어를 순서대로 입력하였습니다.sudo git pullsudo npx pm2 reload allsudo npx pm2 monit우분투 백엔드 서버가 실행된 상태입니다.back/app.js실제 프론트 서버 주소의 CORS 요청을 허용하였습니다.cors 요청 주소들을 변수로 빼서 작성하였습니다. // 로컬 프론트 서버, 노드버드 닷컴, 실제 프론트 서버 URL IP 주소 요청만 허용 const corsOkUrl = ['http://localhost:3000', 'nodebird.com', 'http://52.79.86.100' ]; . . . // 미들웨어 연결 app.use(cors({ /* 특정 url에서 요청했을 때만 cors 허용 */ origin: corsOkUrl, /* 사용자 인증이 필요한 쿠키 전달 허용 */ credentials: true, })); . . . // http://54.180.201.249 : 실제 백엔드 서버 URL IP 주소인 80번 포트로 서버 실행 app.listen(80, () => { console.log('서버 실행 중!'); }); back/config/config.js실제 백엔드 주소가 들어가는 부분 코드에 모두 'backUrl'을 변수로 넣어주었습니다.// 실제 백엔드 서버 URL IP 주소 내보내기 export const backUrl = 'http://54.180.201.249';  front와 back의 package.json이 문제를 해결하기 위해 먼저 노드버드 커뮤니티를 살펴보았습니다.https://www.inflearn.com/course/lecture?courseSlug=%EB%85%B8%EB%93%9C%EB%B2%84%EB%93%9C-%EB%A6%AC%EC%95%A1%ED%8A%B8-%EB%A6%AC%EB%89%B4%EC%96%BC&unitId=49016&category=questionDetail&tab=community&q=164898저와 비슷하게 프론트 서버 구동에 성공하였으나 페이지 응답이 되지 않는 작성자 분이 계셨습니다.글과 똑같이 우분투 프론트 서버 터미널에서 ctrl+c로 sudo npx pm2 monit을 끄고pm2 list를 입력하면 status가 errored 임을 확인할 수 있었습니다.보안 그룹에서 http 80번 포트가 열려있음에도 status는 errored 였습니다.Not allowed to load local resource 에러 해결,우분투 프론트 서버 페이지 응답 등의 키워드로 검색하였으나이미지 외부 경로 지정하기 관련 글들만 있어 방법이 맞는지 의심스럽습니다...프론트 서버 구동 시 어떻게 하면 페이지 응답이 안되는 문제를 해결할 수 있을까요?질문 글이 많이 김에도 끝까지 읽어주셔서 감사합니다제로초님 강의 항상 잘 보고 있습니다!

강의 2분에 서버쪽에서 쿼리 가져오는게 좋은 상황이 검색 노출이 될 때 라고 하셨는데, SEO 이외에 다른 장점은 없나요? 서버사이드가 속도가 더 빠르지 않을까 라고 생각을 하고 있었습니다.

JWT 사용해서 로그인정보는 zustand에 저장하고middleware.ts 파일에서 zustand state에 접근해서 유저정보값이 없으면 로그인 화면으로 리다이렉트 하고 싶습니다만,middleware.ts에서는 zustand state값을 가져오질 못하는것 같은데... 방법이 없을까요?

질문 제출 안내 제목: vercel 배포후 메인페이지 데이터 연동이 안됩니다설명: 오늘 완강했습니다 재밌었어요 ㅎㅎ 제가 놓친 부분이 있는지 모르겠네요.글 수정삭제는 잘됩니다. 그런데 메인페이지에 있는 최신글이랑 차트는 재배포를 해야 적용이 되는군요 ㅠㅠ 

선생님 안녕하세요도메인 대신 탄력적 ip2개를 front, back인스턴스에 연결해서 사용중인데요, 로그인이 되지 않았습니다.라는 메세지가 뜨며 이미지 업로드가 안되서 안되 상황입니다. isAuthenticated가 false가 되는 원인을 알고 이 문제를 해결하고 싶어 문의드립니다. 사용중인 ip)back13.209.144.99front13.125.122.77현재 화면)monit에 uploadImages관련 상태 결과 falseerrorlog 전체)에러로그 일부)0|npm | cause: Error: socket hang up 0|npm | at connResetException (node:internal/errors:787:14) 0|npm | at Socket.socketOnEnd (node:_http_client:519:23) 0|npm | at Socket.emit (node:events:530:35) 0|npm | at endReadableNT (node:internal/streams/readable:1696:12) 0|npm | at process.processTicksAndRejections (node:internal/process/task_queues:82:21) { 0|npm | code: 'ECONNRESET' 0|npm | } 0|npm | } 0|npm | TypeError: Cannot read properties of undefined (reading 'data') 0|npm | at loadMyInfo (/home/ubuntu/react_nodebird/front/.next/server/pages/_app.js:531:27) 0|npm | at loadMyInfo.throw (<anonymous>) 0|npm | at next (/home/ubuntu/react_nodebird/front/node_modules/@redux-saga/core/dist/redux-saga-core.prod.cjs.js:1070:32) 0|npm | at currCb (/home/ubuntu/react_nodebird/front/node_modules/@redux-saga/core/dist/redux-saga-core.prod.cjs.js:1195:7) 0|npm | at /home/ubuntu/react_nodebird/front/node_modules/@redux-saga/core/dist/redux-saga-core.prod.cjs.js:346:5 0|npm | at process.processTicksAndRejections (node:internal/process/task_queues:95:5) 0|npm | The above error occurred in task loadMyInfo 0|npm | created by takeLatest(LOAD_MY_INFO_REQUEST, loadMyInfo) 0|npm | created by watchLoadMyInfo 0|npm | created by userSaga 0|npm | created by rootSaga 0|npm | Tasks cancelled due to error: 0|npm | postSaga 0|npm | TypeError: Cannot read properties of undefined (reading 'data') 0|npm | at loadMyInfo (/home/ubuntu/react_nodebird/front/.next/server/pages/_app.js:531:27) 0|npm | at loadMyInfo.throw (<anonymous>) 0|npm | at next (/home/ubuntu/react_nodebird/front/node_modules/@redux-saga/core/dist/redux-saga-core.prod.cjs.js:1070:32) 0|npm | at currCb (/home/ubuntu/react_nodebird/front/node_modules/@redux-saga/core/dist/redux-saga-core.prod.cjs.js:1195:7) 0|npm | at /home/ubuntu/react_nodebird/front/node_modules/@redux-saga/core/dist/redux-saga-core.prod.cjs.js:346:5 0|npm | at process.processTicksAndRejections (node:internal/process/task_queues:95:5)질문1)이미지 업로드시 isAuthenticated가 false가 되는 원인이 뭘까요?질문2)도메인 안쓰고 탄력적 ip 2개 연결해서 쓰면 쿠키가 전달이 안되서 이미지 업로드는 못하나요?질문3)이 부분에 문제가 있을까요?if(process.env.NODE_ENV === 'production'){ app.use(morgan('combined')); app.use(hpp()); app.use(helmet()); app.use(cors({ origin: 'http://13.125.122.77', credentials: true, })); } else { app.use(morgan('dev')); } app.use(cors({ origin: ['http://localhost:3060', 'http://13.125.122.77'], credentials:true }));app.use(session({ saveUninitialized: false, resave: false, secret: process.env.COOKIE_SECRET, cookie: { httpOnly: true, //자바스크립트로 접근하지못하게 secure: false, //일단 false로 하고 https적용할 땐 ture // domain: process.env.NODE_ENV = 'production' && '.nodebirdcom' //도메인 사용할 경우 }, }));back/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: ['http://nodebird.com', 'http://13.125.122.77'], credentials: true, })); } else { app.use(morgan('dev')); } app.use(cors({ origin: ['http://localhost:3060', 'http://nodebird.com', 'http://13.125.122.77'], credentials:true })); 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: false, //일단 false로 하고 https적용할 땐 ture // domain: process.env.NODE_ENV = 'production' && '.nodebirdcom' //도메인 사용할 경우 }, })); 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(80, () => { console.log('서버 실행 중'); }); routes/post 일부const express = require('express'); const {Post, Image, Comment, User, Hashtag} = require('../models'); const {isLoggedIn} = require('./middlewares'); const router = express.Router(); const multer = require('multer'); const path = require('path'); const fs = require('fs'); const multerS3 = require('multer-s3'); const AWS = require('aws-sdk'); try { fs.accessSync('uploads'); } catch(error) { console.error('uploads폴더가 없으므로 생성합니다.'); fs.mkdirSync('uploads'); } AWS.config.update({ accessKeyId: process.env.S3_ACCESS_KEY_ID, secretAccessKey: process.env.S3_SECRET_ACCESS_KEY, region: 'ap-northeast-2', }); const upload = multer({ storage: multerS3({ s3: new AWS.S3(), bucket: 'react-saga-nodebird-s3', key(req, file, cb){ cb(null, `original/${Date.now()}_${path.basename(file.originalname)}`) } }), limits: {fileSize: 20 * 1024 * 1024} //20MB }); router.post('/images', isLoggedIn, upload.array('image'),(req, res, next) => { //POST /post/images res.json(req.files.map((v) => v.location)); });middlewares.jsexports.isLoggedIn = (req, res, next) => { if(req.isAuthenticated()) { next(); } else { res.status(401).send('로그인이 필요합니다.'); } }front에 img src에서 backUrl 지워줌시도해본 것)cors리소스 공유에 아래 내용을 넣어서 실행해보기도 하고 없는 상태에서도 실행해보았지만 상태코드는 401에 이미지 업로드 실패back/package.json 일부"scripts": { "test": "echo \"Error: no test specified\" && exit 1", "start": "cross-env NODE_ENV=production pm2 start app.js" },front/package.json 일부"scripts": { "dev": "npx browserslist@latest --update-db && NODE_OPTIONS=--openssl-legacy-provider next -p 3060", "build": "cross-env ANALYZE=true NODE_ENV=production next build", "start": "cross-env NODE_ENV=production next start -p 80", "lint": "eslint ." },