강좌에서는 backend 서버와 프론트 서버를 인스턴스를 2개를 사용해서 배포하는데혹시 인스턴스 1개에서 둘다 배포하는건 불가능한건가요? 가능하다면 어떤식으로 해야할까요?

안녕하세요 선생님.일단 우분투에서 백서버 실행을 하면 sudo npx pm2 reload all Use --update-env to update environment variables [PM2] Applying action reloadProcessId on app [all](ids: [ 0 ]) [PM2] [app](0) ✓이렇게 실행은 되는데 주소로 접근하면 자꾸 에러가 나서 로그를 보니까/root/.pm2/logs/app-error.log last 15 lines: 0|app | at Module._compile (internal/modules/cjs/loader.js:1114:14) 0|app | at Object.Module._extensions..js (internal/modules/cjs/loader.js:1143:10) 0|app | at Module.load (internal/modules/cjs/loader.js:979:32) 0|app | at Function.Module._load (internal/modules/cjs/loader.js:819:12) 0|app | code: 'MODULE_NOT_FOUND', 0|app | requireStack: [ 0|app | '/home/ubuntu/My-Projects/fourthProject/back/node_modules/@aws-sdk/lib-storage/dist-cjs/Upload.js', 0|app | '/home/ubuntu/My-Projects/fourthProject/back/node_modules/@aws-sdk/lib-storage/dist-cjs/index.js', 0|app | '/home/ubuntu/My-Projects/fourthProject/back/node_modules/multer-s3/index.js', 0|app | '/home/ubuntu/My-Projects/fourthProject/back/routes/post.js', 0|app | '/home/ubuntu/My-Projects/fourthProject/back/app.js' 0|app | ] 0|app | }이렇게 나오는데, 이건 routes/post.js 에서 aws-sdk를 적용한 뒤에 나온 에러라서 이 부근이 문제인건 알겠지만 어디를 봐야할지 모르겠어서 질문 드립니다. const multerS3 = require('multer-s3'); const AWS = require('aws-sdk'); 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: 'fashionary-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'), async(req, res, next) => { console.log("req.files:::::::" + req.files); res.json(req.files.map((v) => v.location)); });문제의 코드는 위와 같은데,버켓명도 일치하고, 리전도 서울(아시아 태평양(서울) ap-northeast-2)이고vim .env해서 S3_ACCESS_KEY_ID와 S3_SECRET_ACCESS_KEY도 넣고,(cat .env로 확인하였습니다)npm uninstall multer-s3 aws-sdk 후, npm install multer-s3 aws-sdk 도 해보았는데같은 에러가 떠요. 어디를 봐야 하나요 선생님..?          

강의 열심히 듣고 있습니다.Row.js에서 사용하고 있는 isLargeRow에 관해 질문드립니다. isLargeRow는 부모 컴포넌트에서 boolean값을 설정하지 않고 단지 문자열로 props로 보내지는데 Rows.js에서는 true 값을 가지게 되는게 잘 이해가 안가네요props로 문자열을 내려주면 자식 컴포넌트에서는 그 문자열이 내려오면 true로 없으면 false로 인식을 하는건가요?바쁘시겠지만 답변 부탁 드리겠습니다.

채용공고에서 많이들 리덕스 사용 경험을 물어서 리덕스로 해보고 싶은데 리덕스와 타입스크립트를 연계하는게 어려워보여서 혹시 관련 소스코드는 없을지 궁금하여 여쭤봅니다. 이 부분이 공부하기가 어렵네요.

typesciprt 였나 antd 였나 설치하고 부터 자주 밑에 그림처럼 뜨네요. 구글링으로 ctrl + f8로 일시적으로 문제를 해결할 수 있었으나 계속 오류가 반복되어 질문드립니다.혹시 어떤 부분에서 잘못 되었을지 ... 알수있을까요밑에 부분은 소스에서 빨간줄 뜨는 부분입니다.추가로 이런 오류도 자주 뜹니다 ...

안녕하세요!yarn add -D @graphql-codegen/cliyarn add -D @graphql-codegen/typescript 설치 후 yml 파일 생성하는데 빨간줄이 발생하고 이후 단계로 넘어가지 못합니다.마우스 오버 후 에러 메세지잘못 설치했나 싶어 node-modules 삭제 package.json 에서 codegen 지우고 재설치 해보아도 같은 에러가 나타납니다.확인 부탁드립니다.

- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 안녕하세요. 강의 잘 보고 있습니다.여러 아이콘을 저장해놨다가 사용하는 방법도 있는데스프라이트 이미지를 사용하시는 이유가 궁금합니다.

30분전 까지만 해도 됐었는데데이터베이스도 켜져있고클라이언트랑 서버도 켜져있는데 안되는 이유가 뭘까요 ㅠㅠ코드 수정하고 git pull 하고pm2 restart all 한번 했습니다.

import { useQuery } from "@apollo/client" import {useState} from 'react' import {useRouter} from "next/router" import {Fetch_List} from './BoardList.query' import BulletinBoardListUI from './BoardList.presenter' export default function BulletinBoardListFetch(){ const [page,setPage]=useState(1) const router = useRouter() const{data}=useQuery(Fetch_List,{ variables:{ page } }) function MoveIndex(){ console.log("dfgd") return true } return( <BulletinBoardListUI MoveIndex={MoveIndex}/> ) }  import * as S from './BoardList.style' export default function BulletinBoardListUI(props){ console.log(props) return( <S.TableWraper> <S.TableTop> <S.ColumnHeaderBasic>번호</S.ColumnHeaderBasic> <S.ColumnHeaderTitle>제목</S.ColumnHeaderTitle> <S.ColumnHeaderWriter>작성자</S.ColumnHeaderWriter> <S.ColumnHeaderDate>날짜</S.ColumnHeaderDate> </S.TableTop> {props.data?.fetchBoards?.map( (el,i)=>{ i++ return(<S.Column key={el._id}> <S.RowNum>{i}</S.RowNum> <S.RowTitle onClick={props.MoveIndex}>{el.title}</S.RowTitle> <S.RowWriter>{el.writer}</S.RowWriter> <S.RowDate>{el.createdAt.substring(0,10)}</S.RowDate> </S.Column> )})} </S.TableWraper> ) } props.MoveIndex가 실행이 안돼요...

일단 강의 잘 보고 있습니다.제 학습 수준이 아직 낮아서, 더이상 진도는 안나가고 있고 다시 리액트를 좀 복습중입니다.ㅎㅎ저도 언능 수준이 올라가서, 박용주님처럼 이것저것 만들어보고 싶네요. 최종 목표는 웹게임을 만들어보는겁니다.ㅎㅎ아무튼. 질문이 하나 있는데요~혹시 next.js로 개발을 할 때 Redux는 잘 사용 안하나요?리액트 배우면서 redux를 아주 중요하게 다루는것 같은데, next.js강의는 여러곳을 돌아다녀 봐도redux에 대해서는 안가르치는것같더라구요. 리액트에서 당연히 배워왔을 소양이라서 커리큘럼에 없는건지, 아니면 next.js에서는 redux는 잘 사용 안하는건지 궁금합니다! 

안녕하세요 강의시작마다 브랜치가 나오는데, 깃헙주소 알 수 있을까요?감사합니다.1-2 브랜치 1-4 브랜치가 어디에 있는지 알 수 있을까요?강의 중간중간 보시면 git checkout 하시는 것으로 보아 github주소가 있는 것 같습니다. github 주소 공유해부탁드립니다. 감사합니다.

수업시간 5분 50초때 설명해주시기로는ssr방식은 첫 페이지는 전통적인 방식으로 seo를 가능하게 하고, 이후 페이지 전환시에는 react방식으로 하신다고 하셨는데, 이게 next.js에서 구현된 ssr에 한하여 설명해주신건가요?? 아니면 next가 아니더라도 보편적인 ssr방식을 설명해주신건가요 ?? 동아리 면접 대비로 ssr, csr, spa, mpa 개념이 헷갈려서 공부하고있는데,제가 이해하기로는 ssr은 브라우저의 요청시마다 페이지 전체를 데이터까지 적용하여 서버에서 전달받아 렌더링하는걸로 이해했는데, 6분때 설명해주시는것은 csr방식이 섞인것 같은데, 혹시 제 이해가 잘못되었나 싶어서 여쭤봅니다.. + 수업 1분20초에 ssr의 전체 과정이 길어서 로딩속도가 많이걸려 느리게 그려준다고 하셨는데, 다른 관련 블로그 글에선 오히려 csr방식이 서버에 첫 요청시 전체 페이지에 대한 문서파일을 받아오니 ssr보다 첫페이지 로딩속도가 느리다고 하더라고요.그러면 첫페이지 로딩속도는 ssr이 csr보다 빠르고,페이지 전환 속도는 csr이 ssr보다 빠르다고 정리하면 될까요?? 답변해주시면 감사하겠습니다 !  

 포트폴리오 과제에서 주셨던 무한 스크롤 리뷰가 오늘 강의에선 없네요! 혹시 이유가 있는걸까요?!그리고 백앤드에 하나의 게시판에 달려있는 댓글 갯수를 가져오는 api가 따로 없던데 퀴즈처럼 무한스크롤을 직접구현하는 건가요?

안녕하세요.eslint와 prettier 설정 및 UI 프레임워크 강의 상에서는.eslintignore가 적용되지 않는데 혹시 추후 강의에 이 부분이 다시 언급되는지가 궁금해서 문의 남깁니다. 혹시 언급되지 않는다면 어떻게 처리하면 될까요?그리고 추가로 .eslintrc.js 파일 내용이 이전 강의랑 다른데 이건 왜 달라졌는지 알 수 있을까요?(이전 강의에서는 .eslintrc.js에 parser: @typescript-eslint/parser도 있었고, plugins에도 적용을 해주었던거 같은데 이번 강의에서는 다 빠져있어서 문의드립니다.)

안녕하세요 선생님..강의 따라 프론트 배포 후, aws인스턴스에 나와있는 퍼블릭 ip주소로 들어가서 프론트 서버가 실행되는지 확인해보니 연결을 거부했다는 창이 떴습니다.우분투에서 npm run build 해서 info - Generating static pages (4/4) info - Finalizing page optimization Page Size First Load JS ┌ λ / 2.04 kB 374 kB ├ /_app 0 B 105 kB ├ ○ /404 2.77 kB 108 kB ├ λ /hashtag/[tag] 1.54 kB 299 kB ├ ○ /login 1.89 kB 225 kB ├ ○ /newLook 14.3 kB 310 kB ├ λ /post/[id] 34 kB 345 kB ├ λ /post/allPosts 973 B 278 kB ├ λ /profile 180 B 365 kB ├ ○ /signup 5.97 kB 282 kB └ λ /user/[id] 2.75 kB 365 kB + First Load JS shared by all 105 kB ├ chunks/2eefa3dc3cc8f0c2cde672071668ef45dcb6f3dd.22cde6.js 28.1 kB ├ chunks/commons.7a84f9.js 11.5 kB ├ chunks/f0193db3.b49a15.js 69 B ├ chunks/framework.1daf1e.js 39.9 kB ├ chunks/main.8aa676.js 9.07 kB ├ chunks/pages/_app.6afac7.js 15.7 kB ├ chunks/webpack.eb080e.js 751 B ├ css/342ac7ff0ab1780a5748.css 72 kB └ css/4fae701701216c0faa95.css 198 B λ (Server) server-side renders at runtime (uses getInitialProps or getServerSideProps) ○ (Static) automatically rendered as static HTML (uses no initial props) ● (SSG) automatically generated as static HTML + JSON (uses getStaticProps) (ISR) incremental static regeneration (uses revalidate in getStaticProps)이렇게 빌드 하고, sudo npx pm2 start npm -- start위의 명령어를 입력하니까ubuntu@ip-172-31-15-140:~/My-Projects/fourthProject/front$ sudo npx pm2 start npm -- start npx: installed 184 in 13.279s [PM2] Spawning PM2 daemon with pm2_home=/root/.pm2 [PM2] PM2 Successfully daemonized [PM2] Starting /usr/bin/npm in fork_mode (1 instance) [PM2] Done. ┌─────┬────────┬─────────────┬─────────┬─────────┬──────────┬────────┬──────┬───────────┬──────────┬──────────┬──────────┬──────────┐ │ id │ name │ namespace │ version │ mode │ pid │ uptime │ ↺ │ status │ cpu │ mem │ user │ watching │ ├─────┼────────┼─────────────┼─────────┼─────────┼──────────┼────────┼──────┼───────────┼──────────┼──────────┼──────────┼──────────┤ │ 0 │ npm │ default │ N/A │ fork │ 19231 │ 0s │ 0 │ online │ 0% │ 26.1mb │ root │ disabled │ └─────┴────────┴─────────────┴─────────┴─────────┴──────────┴────────┴──────┴───────────┴──────────┴──────────┴──────────┴──────────┘터미널에 이런 창이 떴구요,sudo npx pm2 monit위의 명령어 입력하니까ubuntu@ip-172-31-15-140:~/My-Projects/fourthProject/front$ sudo npx pm2 monit npx: installed 184 in 7.952s ubuntu@ip-172-31-15-140:~/My-Projects/fourthProject/front$ npm run build > fahsionary@1.0.0 build /home/ubuntu/My-Projects/fourthProject/front > cross-env ANALYZE=true NODE_ENV=production next build Browserslist: caniuse-lite is outdated. Please run: npx browserslist@latest --update-db info - Using external babel configuration from /home/ubuntu/My-Projects/fourthProject/front/.babelrc Webpack Bundle Analyzer saved report to /home/ubuntu/My-Projects/fourthProject/front/.next/server/analyze/client.html Webpack Bundle Analyzer saved report to /home/ubuntu/My-Projects/fourthProject/front/.next/analyze/client.html info - Creating an optimized production build info - Compiled successfully info - Collecting page data [ ==] info - Generating static pages (0/4)watchSinUp [====] info - Generating static pages (1/4)watchSinUp 메인포스트: [] undefined [=== ] info - Generating static pages (1/4)watchSinUp undefined watchSinUp info - Generating static pages (4/4) info - Finalizing page optimization Page Size First Load JS ┌ λ / 2.04 kB 374 kB ├ /_app 0 B 105 kB ├ ○ /404 2.77 kB 108 kB ├ λ /hashtag/[tag] 1.54 kB 299 kB ├ ○ /login 1.89 kB 225 kB ├ ○ /newLook 14.3 kB 310 kB ├ λ /post/[id] 34 kB 345 kB ├ λ /post/allPosts 973 B 278 kB ├ λ /profile 180 B 365 kB ├ ○ /signup 5.97 kB 282 kB └ λ /user/[id] 2.75 kB 365 kB + First Load JS shared by all 105 kB ├ chunks/2eefa3dc3cc8f0c2cde672071668ef45dcb6f3dd.22cde6.js 28.1 kB ├ chunks/commons.7a84f9.js 11.5 kB ├ chunks/f0193db3.b49a15.js 69 B ├ chunks/framework.1daf1e.js 39.9 kB ├ chunks/main.8aa676.js 9.07 kB ├ chunks/pages/_app.6afac7.js 15.7 kB ├ chunks/webpack.eb080e.js 751 B ├ css/342ac7ff0ab1780a5748.css 72 kB └ css/4fae701701216c0faa95.css 198 B λ (Server) server-side renders at runtime (uses getInitialProps or getServerSideProps) ○ (Static) automatically rendered as static HTML (uses no initial props) ┌─ Process List ───────────────────┐┌── npm Logs ────────────────────────────────────────────────────────────────────┐ │[ 0] npm Mem: {#aN-fg} 0 MB ││ │ │ ││ │ │ ││ │ │ ││ │ │ ││ │ │ ││ │ │ ││ │ │ ││ │ │ ││ │ │ ││ │ │ ││ │ │ ││ │ │ ││ │ │ ││ │ │ ││ │ │ ││ │ │ ││ │ │ ││ │ │ ││ │ └──────────────────────────────────┘└──────────────────────────────────────────────────────────────────────────────────┘ ┌─ Custom Metrics ─────────────────┐┌─ Metadata ───────────────────────────────────────────────────────────────────────┐ │ ││ App Name npm │ │ ││ Namespace default │ │ ││ Version N/A │ │ ││ Restarts 15 │ │ ││ Uptime 0 │ │ ││ Script path /usr/bin/npm │ └──────────────────────────────────┘└──────────────────────────────────────────────────────────────────────────────────┘ left/right: switch boards | up/down/mouse: scroll | Ctrl-C: exit To go further check out https://pm2.io/ 이렇게 뜨던데..어디가 문제인가요?vim package.json 하니까 "scripts": { "dev": "next", "build": "cross-env ANALYZE=true NODE_ENV=production next build", "start": "cross-env NODE_ENV=production next start -p 80" },scripts부분은 이렇게 나왔습니다 aws에서 프론트 인스턴스의 보안그룹 인바운드 규칙은이렇게 구성했습니다.백서버는 ip주소로 들어가면 수업 내용과 같이 hello express가 보여서 잘 실행되고 있는걸 확인했습니다. config폴더에에서 confing.js로 backUrl로 백 주소 정의해서 교체도 진행했어요

쿠키 세션과 전체 로그인 흐름 강의 까지 들었습니다. 안녕하세요. 로그인시 401 오류가 생겨서 해결을 못하고 있습니다. user saga 에서 logInAPI랑 logIn 부분에서 error가 생기고 있는거 같은데 이유를 찾지 못했습니다.아래에 비슷한 질문이 있길래 봤더니 json 형식으로 axios.post 해줘야 한다고 하시는 거 같은데 이해를 못하겠습니다... 조금 더 길게 설명해 주실 수 있을까요?

- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. docker compose up 을 작성했는데이런식으로 나와서 연결이 된건지 안된건지 모르겠습니다.오류문구가 뜨지는 않지만 회원가입 눌렀을때 백엔드 문구가 뜨지 않아서 연결이 안된거 같아 문의드려봅니다.혹시 어느 부분이 잘못된건지 알수 있을까요?[+] Running 1/0⠿ Container postgres Running 0.0sAttaching to postgres

import { gql,useMutation,useQuery } from "@apollo/client" import styled from "@emotion/styled" const FETCH_PRODUCT = gql` query fetchBoards($page:Int){ fetchBoards(page:$page){ writer title contents number } } ` const FETCH_DELETE = gql` mutation deleteBoard($number:Int){ deleteBoard(number:$number){ message } } ` const Row = styled.div` display:flex; ` const Column = styled.div` width: 25%; ` export default function StaticRoutedPage(){ const{data}=useQuery(FETCH_PRODUCT, {variables:{ page:2 }}) const[deleteBoard]= useMutation(FETCH_DELETE) console.log(data?.fetchBoards) const onClickDelete= async (event)=>{ await deleteBoard({ variables:{ number: Number(event.target.id) }, refetchQueries:[{query: FETCH_PRODUCT}] }) } return ( <> {data?.fetchBoards?.map((el)=>( <Row> <Column><input type="checkbox"/></Column> <Column>{el.number}</Column> <Column>{el.title}</Column> <Column>{el.contents}</Column> <Column> <button id={el.number} onClick={onClickDelete}>삭제</button> </Column> </Row>))} </> ) }  

 안녕하세요,중고마켓을 진행하게 되는 로그인 섹션부터는포트폴리오 리뷰가 진행되지 않는다고 하셨는데,완성코드도 제공이 되지 않는걸까요?제공이 되지 않는다면 모르는 부분에 대해선코드수정과 리뷰는 어떻게 알 수 있을까요??

안녕하세요 선생님. 우분투(back)에 mysql 설치 커맨드를 강의 따라 입력하다가터미널 창에 아래와 같은 메시지가 떴는데우분투가 mysql에 지원되지 않는 서버라고...?? 목록에 있는 시스템 중 하나를 선택하라고 하는데 이때 뭘 선택해야 하나요? 명령어 sudo dpkg -i mysql-apt-config_0.8.13-1_all.deb 입력하니까 저런게 나왔어요.우분투 22.04 LTS 입니다.mysql --version 하니까mysql Ver 8.0.32-0ubuntu0.22.04.2 for Linux on x86_64 ((Ubuntu))이렇게 나오던데 계속 진행해도 될까요?