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

안녕하세요! 제로초님[리뉴얼] 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 ." },

안녕하세요 헷깔리는게 있어서 질문을 드립니다.JSX 사용시에 XSS 방지가 된다고 말씀해주셨는데JSX 문법 사용하지 않고 createElement 사용하더라도방지가 되는 것 아닌가요?+ 제가 생각했던 것은 JSX 가 내부적으로 createElement 를 호출하고 createElement 메소드 내에서 escape 가 일어나는 것 아닌가 했는데, chatGPT 한테 물어본 결과JSX 문법을 사용하면 createElement 를 호출 하기 전에 escape 을 완료하는 것으로 이해를 하였습니다.이렇게 이해하는 것이 맞을까요..?

🚨 아래의 가이드라인을 꼭 읽고 질문을 올려주시기 바랍니다 🚨질문 하시기 전에 꼭 확인해주세요- 질문 전 구글에 먼저 검색해보세요 (답변을 기다리는 시간을 아낄 수 있습니다)- 코드에 오타가 없는지 면밀히 체크해보세요 (Date와 Data를 많이 헷갈리십니다)- 이전에 올린 질문에 달린 답변들에 꼭 반응해주세요 (질문에 대한 답변만 받으시고 쌩 가시면 속상해요 😢)질문 하실때 꼭 확인하세요- 제목만 보고도 무슨 문제가 있는지 대충 알 수 있도록 자세한 제목을 정해주세요 (단순 단어 X)- 질문의 배경정보를 제공해주세요 (이 문제가 언제 어떻게 발생했고 어디까지 시도해보셨는지)- 문제를 재현하도록 코드샌드박스나 깃허브 링크로 전달해주세요 (프로젝트 코드에서 문제가 발생할 경우)- 답변이 달렸다면 꼭 확인하고 반응을 남겨주세요- 강의의 몇 분 몇 초 관련 질문인지 알려주세요!- 서로 예의를 지키며 존중하는 문화를 만들어가요. - 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 안녕하세요.강의를 집에서 또는 사무실에서 들으니 진도가 나간 부분에 대한 코딩을 이어서 나가질 못하는데 혹시 강의에 대한 소스를 어디서 어떻게 쉽게 찾아볼 수 있을까요?답변 부탁드립니다.감사합니다.

콘솔창이 보이지 않는데 어떻게 열어야되는지 궁금합니다!

React Query 공식 문서에 보면 queryClient 인스턴스를 생성해서 바로 QueryClientProvider의 client로 넘겨주고 있는데 제로초님께서는 useState의 초기 값으로 QueryClient의 인스턴스를 생성해서 넘겨주는 방법을 사용하셨는데요. 이 두가지 방법 중에 어떤 것을 사용해야 좋을지 궁금합니다. // 공식 문서 const queryClient = new QueryClient() function App() { return ( <QueryClientProvider client={queryClient}> <Todos /> </QueryClientProvider> ) } // 제로초님 강의 function ReactQueryProvider({children} : Props) { const [client] = useState( new QueryClient({ defaultOptions: { queries: { refetchOnWindowFocus: false, retry: false, } } } ) ) return <QueryClientProvider client={queryClient}></QueryClientProvider> }   

크롬 개발자 도구에서 페이로드 확인을 하면 fetchBoards가 두번 요청을 합니다.시작점을 확인을 해보면 createUploadLink.js에서 빈 값으로 요청을 하고두 번째 요청에서는 제대로 index.tsx에서 값을 넣고 refetch를 진행을 합니다.fetchBoards가 1,3번 이고 fetchBoardsCount가 2번 입니다. 사용하는데 있어 아무런 문제 없이 사용이 가능한데 왜 이런 현상이 있는지 해결을 하고 싶습니다. 첫 마운트가 되거나 API요청을 하면 불필요한 fetchBoards, fetchBoardsCount가 createUploadLink.js에서 요청이 가는데ApolloClient Setting 부분에서 요청이 가는 걸 확인 했습니다.const uploadLink = createUploadLink({ uri: "http://backend-practice.codebootcamp.co.kr/graphql", }); const client = new ApolloClient({ link: ApolloLink.from([uploadLink]), cache: new InMemoryCache(), }); refetch하는 전체 코드입니다.// test - refetch 문제 export default function Hom(): JSX.Element { const { data, refetch } = useQueryFetchBoards(); const { data: dataBoardsCount, refetch: refetchBoardsCount } = useQueryFetchBoardsCount(); const router = useRouter(); const render = useRef(false); useEffect(() => { // 첫 마운트 실행 막음 if (!render.current) { render.current = true; console.log("처음 실행됨"); return; } const search = String(router.query.search); const page = Number(router.query.page) || 1; if (search === "undefined") { void refetch({ page }); console.log("검색X"); } else { void refetch({ page, search }); void refetchBoardsCount({ search }); console.log("검색O"); } console.log("Hom Search: ", search); }, [router.query]); return ( <> <SearchBar /> {data?.fetchBoards.map((el, index) => ( <div key={index}>{el.title}</div> ))} <Pagination count={dataBoardsCount?.fetchBoardsCount} /> </> ); }여기서 <SearchBar /> , <Pagination />는 router.push에서 query로 ?search= , ?page= 쿼리스트링 만드는 역할만 하고 있고 전체 부모 컴포넌트에서 useEffetch로 refetch하고 있습니다."next": "13", "react": "^18.2.0","apollo-upload-client": "^17.0.0", 입니다.

redirect는 try/catch문 안에 있으면 안돼서 그 위해 shouldRedirect의 값으로 조건문을 만들어 if문 안에서만 redirect하게 하셨는데, 이후에 catch문에서 return을 넣어주시더라고요. 그러면 shouldRedirect라는 변수를 쓰지 않아도 어차피 catch문이 실행된 경우에는 return 되니까 redirect를 아래에 그냥 배치해도 상관없지 않나 질문드립니다.

안녕하세요! 제가 설치도구들을 다운 받고 강의를 이어 듣는데, 제 플레이터와 선생님이 보여주신 초기 화면이 달라서 어느 부분이 잘못되었는지 확인 받고 싶습니다! 

List.js로 나눈 다음 data. 도 지우고 했는데 List.js에서 key={id} 부분에서 계속 오류가 발생합니다.List.js:22 Uncaught TypeError: Cannot read properties of undefined (reading 'draggableProps') at List (List.js:22:1) at renderWithHooks (react-dom.development.js:16305:1) at mountIndeterminateComponent (react-dom.development.js:20074:1) at beginWork (react-dom.development.js:21587:1) at HTMLUnknownElement.callCallback (react-dom.development.js:4164:1) at Object.invokeGuardedCallbackDev (react-dom.development.js:4213:1) at invokeGuardedCallback (react-dom.development.js:4277:1) at beginWork$1 (react-dom.development.js:27451:1) at performUnitOfWork (react-dom.development.js:26557:1) at workLoopSync (react-dom.development.js:26466:1) Lists.js 코드import React from 'react'; import { DragDropContext } from "react-beautiful-dnd"; import { Droppable } from "react-beautiful-dnd"; import { Draggable } from "react-beautiful-dnd"; import List from "./List"; export default function Lists({todoData, setTodoData}) { const handleEnd = (result) => { if(!result.destination) return; const newTodoData = todoData; const [reorderedItem] = newTodoData.splice(result.source.index, 1); newTodoData.splice(result.destination.index, 0, reorderedItem); setTodoData(newTodoData); }; return ( <div> <DragDropContext onDragEnd={handleEnd}> <Droppable droppableId="todo"> {(provided) => ( <div {...provided.droppableProps} ref={provided.innerRef}> {todoData.map((data, index) => ( <Draggable key={data.id} draggableId={data.id.toString()} index={index} > {(provided, snapshot) => ( <List key={data.id} id={data.id} title={data.title} completed={data.completed} todoData={todoData} setTodoData={setTodoData} provided={provided} snapshot={snapshot} /> )} </Draggable> ))} {provided.placeholder} </div> )} </Droppable> </DragDropContext> </div> ); }  List.js 코드import React from "react"; const List = ({ id, title, completed, todoData, setTodoData, provided, snapshot }) => { const handleClick = (id) => { let newTodoData = todoData.filter((data) => data.id !== id); setTodoData(newTodoData); }; const handleCompleteChange = (id) => { let newTodoData = todoData.map((data) => { if(data.id === id) { data.completed = !data.completed; } return data; }); setTodoData(newTodoData); }; return ( <div key={id} {...provided.draggableProps} ref={provided.innerRef} {...provided.dragHandleProps} className={`${ snapshot.isDragging ? "bg-gray-400" : "bg-gray-100"} flex items-center justify-between w-full px-4 py-1 my-2 text-gray-600 border rounded`} > <div className='items-center'> <input type="checkbox" onChange={() => handleCompleteChange(id)} checked={completed} /> <span className={completed ? 'line-through' : undefined}> {title} </span> </div> <div className='items-center'> <button className="px-4 py-2 float-right" onClick={() => handleClick(id)}> X </button> </div> </div> ) } export default List;

강의에서 알려주신 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 으로 이동하도록 폴더를 구성해서 구현해 봤습니다. 이 방식으로 구현해도 문제 없을까요?

상황)도메인 연결하면 돈이 나간대서 탄력적 ip만 연결헤줘도 원래 로그인까지 화면은 잘 나왔었는데요, s3연결하기부터 따라하기 전에 강의를 보았는데 prepare에 레파지토리 한개만 연결하길래, 기존에 front, back 경로에 레파지토리를 각각 만들어서 커밋중이여가지고 기존 레파지토리를 다 지우고 초기화한 다음 새 레파지토리와 새 인스턴스를 연결해서 s3까지 따라했거든요. 그런데 그 뒤로 back ip는 화면에 hello express라고 잘 나오는데 front탄력적 ip를 입력하니까 화면이 연결이 안되는 상황입니다. (DB 테이블 대소문자 잘 되어있습니다, env는 ubuntu에도 비밀 엑세스키까지 4가지 똑같이 입력해놓았습니다, S3에 나오는 내용까지 설치는 완료한 상태입니다. img관련 코드에서 backUrl 지워주었습니다. ubuntu에서도 git pull, npm i , npm run build해주었습니다.) 질문)프론트 ip가 화면에 안나오는데 log와 콘솔에 아무것도 안떠서, 이럴 때 화면이 안나오는 원인과 해결방법이 어떻게 되는지 궁금합니다. 질문)보안자격증명의 액세스키에 선생님거는 리전, 서비스가 나와있는데 제거는 코드에 작성한 내용과 연결이 안되서 N/A라고 나오는게 맞나요?시도해본 것)back에서 배포용일 때 if문에 도메인 주소를 빼고 실행해보기도 하고, 도메인 주소 대신 origin front 탄력적 ip를 넣어서 실행도 해보았지만 연결이 되지 않았습니다.if(process.env.NODE_ENV === 'production'){ app.use(morgan('combined')); app.use(hpp()); app.use(helmet()); // app.use(cors({ // origin: 'http://nodebird.com', // credentials: true, // })); } else { app.use(morgan('dev')); }작성한 코드 일부) app.jsconst 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', // 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.jsconst 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)); });backUrl남아있는 부분 config.jsexport const backUrl = 'http://13.209.144.99';profile.jsimport { backUrl } from '../config/config'; const Profile = () => { const { data: followersData, error:followerError } = useSWR(`${backUrl}/user/followers?limit=${followersLimit}`, fetcher); const { data: followingsData, error:followingError } = useSWR(`${backUrl}/user/followings?limit=${followingsLimit}`, fetcher); export default Profile;sagas/indeximport { backUrl } from '../config/config'; axios.defaults.baseURL = backUrl;back/package.json{ "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": "^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" } }  front/package.json{ "name": "react-nodebird-front", "version": "1.0.0", "description": "", "main": "index.js", "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 ." }, "author": "luckyhaejin", "license": "ISC", "dependencies": { "@ant-design/icons": "^4.2.1", "@next/bundle-analyzer": "^14.0.4", "antd": "^4.2.1", "axios": "^1.6.2", "babel-plugin-styled-components": "^2.1.4", "cross-env": "^7.0.3", "eslint-config-airbnb": "^19.0.4", "immer": "^10.0.3", "moment": "^2.30.1", "next": "^9.5.5", "next-redux-wrapper": "^6.0.2", "pm2": "^5.3.0", "prop-types": "^15.8.1", "react": "^16.14.0", "react-dom": "^16.14.0", "react-redux": "^7.2.9", "react-slick": "^0.29.0", "redux": "^4.2.1", "redux-devtools-extension": "^2.13.9", "redux-saga": "^1.3.0", "saga": "^4.0.0-alpha", "shortid": "^2.2.16", "styled-components": "^6.1.1", "swr": "^2.2.4" }, "devDependencies": { "babel-eslint": "^10.1.0", "eslint": "^8.56.0", "eslint-plugin-import": "^2.29.1", "eslint-plugin-jsx-a11y": "^6.8.0", "eslint-plugin-react": "^7.33.2", "eslint-plugin-react-hooks": "^4.6.0", "faker": "^5.5.3" } } 사용중인OS) macOS

안녕하세요! 제로초님[리뉴얼] React로 NodeBird SNS 만들기 강의의섹션 6. AWS에 배포하기: 우분투에 MySQL 설치하기 까지 진행한 수강생 입니다! 저는 windows 10을 사용하고 있으며, 윈도우 서비스에서 MySQL을 실행한 상태입니다.아마존의 front와 back 인스턴스가 잘 실행되고 있음을 확인하였습니다.사전에 AWS 우분투 프론트와 백엔드 서버 두 곳 모두 node와 npm을 설치하였습니다.node 버전은 v14.21.3, npm 버전은 6.14.18을 설치하였습니다.AWS 우분투 백엔드 서버와 root 서버에서 MySQL 8 버전을 완전 삭제한 후 재설치 하였습니다.(원래 우분투 백엔드 서버에만 설치해야 하는데 루트 경로에 설치하는 바람에 재설치를 진행하였습니다!) 사진과 같이 백엔드 root 서버 터미널에 npx sequelize db:create을 입력하면command not found: sequelize (sequalize 명령을 찾을 수 없습니다.)가 뜹니다.  문제를 해결하기 위해서 첫 번째로 sequelize와 sequelize-cil이back 폴더에 제대로 설치가 되어있는지 확인했습니다.아래 사진과 같이 back 폴더의 package.json 파일에서 시퀄라이즈 잘 설치되어 있음을 확인하였습니다.  두 번째로, 우분투 리눅스 루트 command not found: sequelize,npx sequelize db:create command not found: sequelize 해결시퀄라이즈 command not found 해결등등의 command not found: sequelize 관련 키워드를 구글링 하고,노드버드 강의 커뮤니티 글을 보던 중npx sequelize db:create 대신 sudo npx sequelize db:create 사용하는 방법을 찾았습니다.sudo를 사용해 npx sequelize db:create을 시도하였으나여전히 sequelize 명령어가 없다고 뜹니다.어떻게 하면 백엔드 root 서버에서 npx sequelize db:create을 성공할 수 있을까요?혹시 관련 키워드나 힌트를 주실 수 있나요?항상 강의 열심히 듣고 있습니다. 긴 글 읽어주셔서 감사합니다 제로초님!

질문이 있습니다.page 같은 경우는 최대한 SSR로 하고 page 하위에 사용되는 컴포넌트 같은 경우는 브라우저 API 사용한다면 CSR로 하는게 맞나요? ( 하이브리드 렌더링 방식 ) app/page.tsx 파일 상단에 "use client" 선언하면 페이지 전체가 CSR로 된다고 생각하는데 네트워크 창에 localhost에 preview를 보면 빈 페이지가 아닌 렌더링된 내용이 보이는데 왜 그런걸까요?

1부 듣고 이제 막 2부 와서 개발 환경 강의를 들었는데요혹시 리액트를 처음에 설치 하실 때 npx create-react-app 을 안쓰시고 직접 package.json을 직접 작성하신 다음에 npm i로 설치 하시나요??아니면 npx create-react-app을 하시고 나서 필요없는 파일 지우고 폴더구조나 package.json을 수정 하시는 건가요??깃 헙 저장소 가져와서 브런치 이동해보면 나오는 파일이나 폴더가 제가 npx create-react-app으로 리액트를 설치했을 때랑은 조금 다른것도 같은데 보통 다른 책이나 강의들 보면 거의 npx create-react-app으로 설치하고 진행 하는데 선생님은 어떻게 하시는지 궁금합니다... 그리고 혹시 전자의 경우로 하신다면 그렇게 하시는 이유도 궁금합니다!! 

이미지에 Link 태그를 쓰는거에 대한 질문입니다. Link 같은 경우에는 default로 prefetch가 되는데, 이미지를 눌렀을때 나오는 정보들은 굳이 prefetch를 미리 하고 있을 필요는 없겠죠? 그러면 실제 서비스라면 prefetch를 false로 하거나 router.push를 이용하는게 좋지 않을지 궁금합니다. 페이지를 구성할때 존재하는 모든 경로를 Link 태그로 그냥 쓰게 되면 prefetch가 모두 되어버려서, 큰 카테고리를 이동하는 경우만 prefetch를 키면 되지 않을까 하는 고민입니다.