월 17,600원
5개월 할부 시다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 해결됨[리뉴얼] React로 NodeBird SNS 만들기
s3 관련 aws-sdk 오류 질문
안녕하세요 선생님.일단 우분투에서 백서버 실행을 하면 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 도 해보았는데같은 에러가 떠요. 어디를 봐야 하나요 선생님..?
- 해결됨[리뉴얼] React로 NodeBird SNS 만들기
ssr방식과 csr방식
수업시간 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보다 빠르다고 정리하면 될까요?? 답변해주시면 감사하겠습니다 !
- 해결됨[리뉴얼] React로 NodeBird SNS 만들기
front 인스턴스 퍼블릭 주소 접근 에러
안녕하세요 선생님..강의 따라 프론트 배포 후, 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로 백 주소 정의해서 교체도 진행했어요
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
401 오류
쿠키 세션과 전체 로그인 흐름 강의 까지 들었습니다. 안녕하세요. 로그인시 401 오류가 생겨서 해결을 못하고 있습니다. user saga 에서 logInAPI랑 logIn 부분에서 error가 생기고 있는거 같은데 이유를 찾지 못했습니다.아래에 비슷한 질문이 있길래 봤더니 json 형식으로 axios.post 해줘야 한다고 하시는 거 같은데 이해를 못하겠습니다... 조금 더 길게 설명해 주실 수 있을까요?
- 해결됨[리뉴얼] React로 NodeBird SNS 만들기
back에 mysql설치 중 뜬 메시지 질문
안녕하세요 선생님. 우분투(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))이렇게 나오던데 계속 진행해도 될까요?
- 해결됨[리뉴얼] React로 NodeBird SNS 만들기
loading의 상태 변화에 따라 컴포넌트 렌더링시 무한렌더링이 발생합니다.
안녕하세요. 도움을 요청할 데가 없어서 혹시 원인을 알고 계실까하여 글을 작성합니다.우선 nodebirdSNS 가 아닌 개인 프로젝트에서 발생한 문제라는 점 양해 부탁드립니다.공공API를 사용하여 데이터를 불러오기 위해 Redux Toolkit 을 사용하여 extraReducers로 pending, fulfilled, rejected 일 때 각각 loading의 상태를 변경시켜준 후 loading이 true일 때는 <Loader /> 컴포넌트를, false 일때는 데이터를 그려줄 컴포넌트가 열리도록 코드를 짰습니다.pending 일 때, loading = truefulfilled 일 때, loading = false 값이 잘 들어갔고 데이터도 잘 받아와지는데.. 문제는 이렇게 loading 을 보여주려고만 하면 무한렌더링에 걸려버립니다...ㅠ ㅠ분명 fulfilled일 때 false로 변경되었는데도 말이죠... 삼항연산자를 제외하고 실행시켜보면 원하는 대로 데이터를 불러올 때 딱 한번만 렌더링이 되는 것을 확인했습니다. 값은 잘 들어가놓고 왜 로딩의 값에 따라 컴포넌트를 보여주려고만 하면 무한렌더링에 걸리는 지 뭐가 문제인 건지 조금만 알려주시면 정말 감사할 것 같습니다 ㅠㅠ 아무리 찾아봐도 비슷한 케이스를 찾지 못했고, 많은 블로그와 유투브 영상을 참고해도 원인을 알 수가 없었습니다.. [삼항연산자 추가 시][삼항연산자 제거시]해당 코드는 이렇습니다.[API][Reducer][Component]
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
express redirect
client 주소: http://localhost:3000server 주소: http://localhost:5000현재 저는 쿠키 공유 잘 되며 글 작성도 잘 됩니다. 그런데 client에서 server로 요청을 보내고 요건에 부합하지 않으면 client측 화면을 redirect 시키려는데 cors 오류가 발생합니다. 어떤부분을 보면 좋을까요?server에서 redirect 주소는 http://localhost:3000/login 이런식으로 client 주소 작성했습니다.추가적으로 client 측에서 router.push로 서버 주소로 요청보내고 로직 수행 후 응답 결과로 res.redirect는 cors 오류 없이 잘 동작합니다. 이건 또 왜 잘 되는걸까요.?
- 해결됨[리뉴얼] React로 NodeBird SNS 만들기
passport로 로그인하기에서 passport로그인 이라는게 무슨 말인가요??
router.post('/login', (req, res, next) => { passport.authenticate('local', (err, user, info) => { // done에서 넣은값들이 순서대로 전달되는곳 if (err) { console.error(err); next(err); } if (info) { return res.status(401).send(info.reason); } })(req, res, next); // middleware 확장하는 express의 기법 // (req, res, next)를 붙히면 그냥 함수를 전달하는것과 똑같은 기능을 하게 된다. return req.login(user, async (loginErr) => { // 서비스 로그인이 다 끝나면 passport 로그인을 한번 더 하는데 에러발생시 핸들 if (loginErr) { console.error(loginErr); return next(loginErr); } return res.json(); }); });return req.login(user, async (loginErr) => {여기서 우리 서비스 로그인이 다 끝나면 passport 로그인을 한번 더 한다고 하셧는데 이게 무슨 의미 인가요?? 우리 서비스에서 로그인을 하면 끝 아닌가요?
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
타입에러 해결에 도움이 필요합니다.
필요한 정보를 넣어주고 회원가입 버튼을 누르면 saga 의 user.js 에서 signUp 에서 에러가 발생하는데 이유를 모르겠습니다.
- 해결됨[리뉴얼] React로 NodeBird SNS 만들기
조언 부탁드립니다.
안녕하세요. 혼자서는 결론을 내리지 못해 더 많은 경험과 고민을 한 제로초님께 조언을 구하고 싶습니다.제가 기존 코드에 Menu가 있었습니다. 그리고 이번에 타입스크립트로 마이그레이션 했는데 네이밍 컨벤션에 고민이 있습니다. 이 이름을 쓰는 곳은 총 4곳 입니다.menu - 데이터로 불러오는 menuMenu - 타입으로서 MenuMenu - 페이지(메뉴 상세 페이지)Menu - 메뉴 아이템(메뉴 리스트 안에 각각 뿌려지는 메뉴 아이템)사실 타입이 없을 때는 아래 2개의 파스칼 케이스의 Menu가 이름으로 겹칠 일이 없었습니다. 그러다가 타입을 도입 했는데, 타입인 Menu 같은 경우 제로초님이 요즘은 앞에 헝가리안 표기법으로 타입인지 인터페이스인지를 표기 안하는 추세라고 하시기도 했고, 프로그래밍에서 가장 중요한게 데이터라 생각해서 그 데이터의 타입은 그대로 쓰는게 좋다고 생각했습니다. 페이지 같은 경우에는 파일 명과 반드시 같은 필요가 없다 해서 라우팅할때 menu.tsx를 쓰더라도 파일 내부에서는 MenuPage로 명명했습니다.그리고 남은 컴포넌트가 문제인데 다른 강의를 봐도 MenuComponent 같은 이름 보단 다른 강의에서 List를 붙이시는거 보고 MenuItem으로 컴포넌트 명을 지으려고 하는데 괜찮을까요??감사합니다!!
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
Duplicate entry '2-349' for key 'posthashtag.PRIMARY'
음 .. 게시글 하나에 중복으로 된 해시태그를 2개 등록시 ex) #노드#노드 #익스프레스 DB Posts 테이블에는 데이터가 잘 등록되지만 해시태그 아래와 같은 에러가 발생됩니다. Hashtags 테이블에는 등록되지 않습니다.primary key 가 중복이라고 오류 나는 것 같은데 .. findOrCreate 는 DB상에 중복이 안되는거고 .. 생각나는 방법은 Set, filter, split, match, ... 등으로 중복 제거인데 .. findOrCreate 전에 중복제거 해줘야하는 부분일까요? Error at Query.run (/Users/jeondaewon/WebstormProjects/nodebird/prepare/back/node_modules/sequelize/lib/dialects/mysql/query.js:52:25) at /Users/jeondaewon/WebstormProjects/nodebird/prepare/back/node_modules/sequelize/lib/sequelize.js:314:28 at process.processTicksAndRejections (node:internal/process/task_queues:95:5) at async MySQLQueryInterface.bulkInsert (/Users/jeondaewon/WebstormProjects/nodebird/prepare/back/node_modules/sequelize/lib/dialects/abstract/query-interface.js:346:21) at async recursiveBulkCreate (/Users/jeondaewon/WebstormProjects/nodebird/prepare/back/node_modules/sequelize/lib/model.js:1663:25) at async PostHashtag.bulkCreate (/Users/jeondaewon/WebstormProjects/nodebird/prepare/back/node_modules/sequelize/lib/model.js:1752:12) at async Promise.all (index 0) at async BelongsToMany.add (/Users/jeondaewon/WebstormProjects/nodebird/prepare/back/node_modules/sequelize/lib/associations/belongs-to-many.js:516:30) at async /Users/jeondaewon/WebstormProjects/nodebird/prepare/back/routes/post.js:40:13 { name: 'SequelizeUniqueConstraintError', errors: [ ValidationErrorItem { message: 'PRIMARY must be unique', type: 'unique violation', path: 'PRIMARY', value: '2-358', origin: 'DB', instance: null, validatorKey: 'not_unique', validatorName: null, validatorArgs: [] } ], parent: Error: Duplicate entry '2-358' for key 'posthashtag.PRIMARY' at Packet.asError (/Users/jeondaewon/WebstormProjects/nodebird/prepare/back/node_modules/mysql2/lib/packets/packet.js:728:17) at Query.execute (/Users/jeondaewon/WebstormProjects/nodebird/prepare/back/node_modules/mysql2/lib/commands/command.js:29:26) at Connection.handlePacket (/Users/jeondaewon/WebstormProjects/nodebird/prepare/back/node_modules/mysql2/lib/connection.js:488:32) at PacketParser.onPacket (/Users/jeondaewon/WebstormProjects/nodebird/prepare/back/node_modules/mysql2/lib/connection.js:94:12) at PacketParser.executeStart (/Users/jeondaewon/WebstormProjects/nodebird/prepare/back/node_modules/mysql2/lib/packet_parser.js:75:16) at Socket.<anonymous> (/Users/jeondaewon/WebstormProjects/nodebird/prepare/back/node_modules/mysql2/lib/connection.js:101:25) at Socket.emit (node:events:513:28) at addChunk (node:internal/streams/readable:324:12) at readableAddChunk (node:internal/streams/readable:297:9) at Readable.push (node:internal/streams/readable:234:10) { code: 'ER_DUP_ENTRY', errno: 1062, sqlState: '23000', sqlMessage: "Duplicate entry '2-358' for key 'posthashtag.PRIMARY'", sql: "INSERT INTO `PostHashtag` (`createdAt`,`updatedAt`,`HashtagId`,`PostId`) VALUES ('2023-03-07 05:57:36','2023-03-07 05:57:36',3,358),('2023-03-07 05:57:36','2023-03-07 05:57:36',2,358),('2023-03-07 05:57:36','2023-03-07 05:57:36',2,358);", parameters: undefined }, original: Error: Duplicate entry '2-358' for key 'posthashtag.PRIMARY' at Packet.asError (/Users/jeondaewon/WebstormProjects/nodebird/prepare/back/node_modules/mysql2/lib/packets/packet.js:728:17) at Query.execute (/Users/jeondaewon/WebstormProjects/nodebird/prepare/back/node_modules/mysql2/lib/commands/command.js:29:26) at Connection.handlePacket (/Users/jeondaewon/WebstormProjects/nodebird/prepare/back/node_modules/mysql2/lib/connection.js:488:32) at PacketParser.onPacket (/Users/jeondaewon/WebstormProjects/nodebird/prepare/back/node_modules/mysql2/lib/connection.js:94:12) at PacketParser.executeStart (/Users/jeondaewon/WebstormProjects/nodebird/prepare/back/node_modules/mysql2/lib/packet_parser.js:75:16) at Socket.<anonymous> (/Users/jeondaewon/WebstormProjects/nodebird/prepare/back/node_modules/mysql2/lib/connection.js:101:25) at Socket.emit (node:events:513:28) at addChunk (node:internal/streams/readable:324:12) at readableAddChunk (node:internal/streams/readable:297:9) at Readable.push (node:internal/streams/readable:234:10) { code: 'ER_DUP_ENTRY', errno: 1062, sqlState: '23000', sqlMessage: "Duplicate entry '2-358' for key 'posthashtag.PRIMARY'", sql: "INSERT INTO `PostHashtag` (`createdAt`,`updatedAt`,`HashtagId`,`PostId`) VALUES ('2023-03-07 05:57:36','2023-03-07 05:57:36',3,358),('2023-03-07 05:57:36','2023-03-07 05:57:36',2,358),('2023-03-07 05:57:36','2023-03-07 05:57:36',2,358);", parameters: undefined }, fields: { PRIMARY: '2-358' }, sql: "INSERT INTO `PostHashtag` (`createdAt`,`updatedAt`,`HashtagId`,`PostId`) VALUES ('2023-03-07 05:57:36','2023-03-07 05:57:36',3,358),('2023-03-07 05:57:36','2023-03-07 05:57:36',2,358),('2023-03-07 05:57:36','2023-03-07 05:57:36',2,358);" } Error at Query.run (/Users/jeondaewon/WebstormProjects/nodebird/prepare/back/node_modules/sequelize/lib/dialects/mysql/query.js:52:25) at /Users/jeondaewon/WebstormProjects/nodebird/prepare/back/node_modules/sequelize/lib/sequelize.js:314:28 at process.processTicksAndRejections (node:internal/process/task_queues:95:5) at async MySQLQueryInterface.bulkInsert (/Users/jeondaewon/WebstormProjects/nodebird/prepare/back/node_modules/sequelize/lib/dialects/abstract/query-interface.js:346:21) at async recursiveBulkCreate (/Users/jeondaewon/WebstormProjects/nodebird/prepare/back/node_modules/sequelize/lib/model.js:1663:25) at async PostHashtag.bulkCreate (/Users/jeondaewon/WebstormProjects/nodebird/prepare/back/node_modules/sequelize/lib/model.js:1752:12) at async Promise.all (index 0) at async BelongsToMany.add (/Users/jeondaewon/WebstormProjects/nodebird/prepare/back/node_modules/sequelize/lib/associations/belongs-to-many.js:516:30) at async /Users/jeondaewon/WebstormProjects/nodebird/prepare/back/routes/post.js:40:13 POST /post 500 40.883 ms - 1306
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
formData 대신 객체로 보낼때
백엔드에 게시글 등록시 const upload = multer({...}) router 에서 upload.none() 를 사용하였습니다. 작성된 코드에서는 이미지 업로드 버튼을 누르고 이미지 선택 확인 누르는 순간 로컬에 저장되고 반환되어 프론트에서 imagePaths 에 담겨있습니다. 그 후 강의에선 imagePaths를 FormData에 담아서 보내고있는데 imagePaths는 텍스트만 들어있어서 객체로 보내보려고합니다.배열을 그대로 담으면 될 것 같아 dispatch({ type: ADD_POST_REQUEST, data: { imagePaths, content: text }, });이렇게 작성하여 보냈는데 Network에서도 성공이고 프론트에서도 오류나는것 없이 다 SUCCESS입니다. 게시글에는 사진이 나타나지 않습니다. 경로가 잘못된 것 같지는 않고 .. 어떤 문제가 있는걸까요? [등록 전][등록 후]
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
[공유] next 13 버전 Link 태그 속 a 링크 오류
Error: Invalid <Link> with <a> child. Please remove <a> or use <Link legacyBehavior>. Learn more: https://nextjs.org/docs/messages/invalid-new-link-with-extra-anchornext 13 버전 이후로부터는 Link 태그 속에 a 태그 넣지 않아야 정상 작동 합니다. 만약 꼭 Link 속에 a 태그를 넣어야 한다 (예시, 이전 버전 코드를 13으로 변경하는데 class 속성 등이 a 태그에 있다) link 에 legacyBehavior 넣으면 됩니다.<Link href="/" legacyBehavior> <a className="... code"> </a> </Link>
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
[공유] 개인 서버에서 reverse-proxy 적용시 next dev 설정
제목 내용 그대로 서버에서 reverse-proxy 적용시 next dev 실행에 관한 내용입니다. 아래 링크 참고 하시면 됩니다. (https://itnext.io/one-domain-multiple-next-js-apps-5e39b0ffa1bf)package.json이 있는 위치에 next.config.js 파일 만들고module.exports = { assetPrefix: "/npm", };+) 추가 사항 : 혹시 개인 서버에서 https 적용 중이시면, hmr에서 "WebSocket is closed before the connection is established" 오류 발생합니다. (https://github.com/vercel/next.js/issues/31139) 에서 해답을 찾기는 했는데... 네트워크 탭 보면 이미 wws:// 로 요청이 가서 왜 해결이 되는지는 모르겠지만, hmr 잘 작동됩니다.module.exports = { assetPrefix: "https://{서버 도메인 주소}/npm", } 참고로 nginx reverse-proxy 설정 입니다location /npm/ { proxy_pass http://localhost:8084/; proxy_redirect off; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_set_header X-Forwarded-Host $server_name; proxy_set_header Upgrade $http_upgrade; proxy_set_header Connection upgrade; proxy_set_header Accept-Encoding gzip; }
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
cookie 완전히 제거 하는법
로그아웃을 했을때 브라우저에서 쿠키를 완전히 제거하는 코드를 구현했습니다 그런데 페이지 이동을 하는게 아니면 같은 페이지에선 새로고침을 하면 계속 connect.sid에 쿠키가 남아있는데 완전히 없애는 방법 없는지 여쭤보고 싶습니다
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
스크롤때문에 데이터 불러오는거
스크롤때문에 무한으로 데이터 요청 보내는거 작업, 게시글 좋아요 강의 편에서 한다고 했는데 돌려봐도 스크롤 데이터 요청막는거 안보여서요 아직 구현 안한건가요?
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
redux saga를 사용한 비동기 통신 질문
안녕하세요 강사님, 비동기 통신 관련해서 질문이 있습니다.상세페이지를 만들면서 map 돌린 것 중 어떤 아이템을 클릭하면 아이템의 이름을 url 주소에 넣고, 그걸 매개변수로 데이터를 가져오려고 합니다.그래서 api를 result를 매개변수로 아래와 같이 만들고 saga도 만들었습니다.getWordArt: (result) => localApi.get("/api/markets/search?text=" + result),function* loadSearchArt(action) { try { const result = yield call(ArtApi.getWordArt()); yield put({ type: SEARCHART_SUCCESS, data: result.data, }); } catch (err) { yield put({ type: SEARCHART_FAILURE, error: err.response.data, }); }}function* watchLoadSearchArt() { yield takeLatest(SEARCHART_REQUEST, loadSearchArt);}export default function* ArtSaga() { yield all([ fork(watchLoadSearchArt), ]);}그리고 useParams로 result를 가져와서 아래처럼 getWordArt에 매개변수로 넣었습니다.const { result } = useParams(); useEffect(() => { ArtApi.getWordArt(result) .then((res) => { setSearchArt(res.data.data.markets); }) .catch((err) => { throw new Error(err); }); }, [result]);데이터는 잘 가져오는데 이 코드를 dispatch를 사용해서 아래처럼 수정하고 싶은데 어떻게 하면 좋을지 잘 모르겠어서 질문합니다. useEffect(() => { dispatch({ type: SEARCHART_REQUEST, }); }, [dispatch]);저런 코드에 result를 여기저기 넣어봤는데 데이터를 못 가져옵니다ㅜㅜ아래에 reducer도 같이 첨부합니다.const initialState = {searchArt: [], searchArtLoading: false, searchArtDone: false, searchArtError: null}export const SALEART_REQUEST = "SALEART_REQUEST";export const SALEART_SUCCESS = "SALEART_SUCCESS";export const SALEART_FAILURE = "SALEART_FAILURE"; const ArtReducer = (state = initialState, action) => { return produce(state, (draft) => { switch (action.type) { case SEARCHART_REQUEST: draft.searchArtLoading = true; draft.searchArtDone = false; draft.searchArtError = null; break; case SEARCHART_SUCCESS: draft.searchArtLoading = false; draft.searchArtDone = true; draft.searchArt = action.data.data; break; case SEARCHART_FAILURE: draft.searchArtLoading = false; draft.searchArtDone = true; draft.searchArtError = action.data.error; break; default: return; } });};
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
오류 해결에 도움이 필요합니다.
시퀄라이즈 sync 부분 강의까지 들었습니다. port는 3306번을 다른게 차지하고 있어서 3307을 사용했습니다. node app.js 했는데 실행이 안되네요.. 오류를 파일 부분을 찾아보려했는데 다 모듈 관련된 부분인거 같아서 어디를 봐야 할지 막혔습니다. 워크벤치도 연결이 안되는 상황입니다. 서버 실행 중ConnectionRefusedError [SequelizeConnectionRefusedError]: connect ECONNREFUSED 127.0.0.1:3307 at ConnectionManager.connect (/Users/jinkyungjung/Documents/programming/TIL/react-nodebird/prepare/back/node_modules/sequelize/lib/dialects/mysql/connection-manager.js:92:17) at processTicksAndRejections (node:internal/process/task_queues:96:5) at async ConnectionManager._connect (/Users/jinkyungjung/Documents/programming/TIL/react-nodebird/prepare/back/node_modules/sequelize/lib/dialects/abstract/connection-manager.js:220:24) at async /Users/jinkyungjung/Documents/programming/TIL/react-nodebird/prepare/back/node_modules/sequelize/lib/dialects/abstract/connection-manager.js:174:32 at async ConnectionManager.getConnection (/Users/jinkyungjung/Documents/programming/TIL/react-nodebird/prepare/back/node_modules/sequelize/lib/dialects/abstract/connection-manager.js:197:7) at async /Users/jinkyungjung/Documents/programming/TIL/react-nodebird/prepare/back/node_modules/sequelize/lib/sequelize.js:304:26 at async MySQLQueryInterface.tableExists (/Users/jinkyungjung/Documents/programming/TIL/react-nodebird/prepare/back/node_modules/sequelize/lib/dialects/abstract/query-interface.js:102:17) at async Function.sync (/Users/jinkyungjung/Documents/programming/TIL/react-nodebird/prepare/back/node_modules/sequelize/lib/model.js:939:21) at async Sequelize.sync (/Users/jinkyungjung/Documents/programming/TIL/react-nodebird/prepare/back/node_modules/sequelize/lib/sequelize.js:376:9) { parent: Error: connect ECONNREFUSED 127.0.0.1:3307 at TCPConnectWrap.afterConnect [as oncomplete] (node:net:1187:16) { errno: -61, code: 'ECONNREFUSED', syscall: 'connect', address: '127.0.0.1', port: 3307, fatal: true }, original: Error: connect ECONNREFUSED 127.0.0.1:3307 at TCPConnectWrap.afterConnect [as oncomplete] (node:net:1187:16) { errno: -61, code: 'ECONNREFUSED', syscall: 'connect', address: '127.0.0.1', port: 3307, fatal: true }}
- 해결됨[리뉴얼] React로 NodeBird SNS 만들기
route에서 res.status(201).json시 undefined
안녕하세요 선생님게시글 수정을 route에서 처리하고 마지막으로 res.status(201).json(fullPost) 이렇게 게시글 정보를 담아서 보내려는데 자꾸 사가에서 데이터를 undefined로 받습니다..담기 전에 fullPost를 콘솔로 찍어보면 데이터가 잘 들어가 있는데 프론트로 넘어가면 undefined로 바뀌어요.그래서 단순 문자열도 res.status(201).json('성공');이런 식으로 보내봤는데도data가이렇게 undefined로 뜨는건 어느 부분을 봐야 하는 건가요?
- 해결됨[리뉴얼] React로 NodeBird SNS 만들기
useSelector의 적절한 사용법에 대해 궁금합니다.
안녕하세요 제로초님. 강의 내용과는 다를 수 있지만... 확실한 대답을 얻기가 어려워서 질문 드립니다 ㅜㅜ리덕스 툴킷 + useSelector에 대해 질문이 있습니다.기존에는 다음과 같이 구조 분해 할당을 사용해왔습니다.const { id, name } = useSelector((state:RootState) => state.user)하지만 최근에 이 방법이 굉장한 안티 패턴이라는 것을 알게 되었고 다른 방법을 찾고 있습니다.공식 문서에 기반하면 총 3개 정도의 방법이 있는 것 같아요.state를 하나씩 불러오도록 useSelector를 여러번 사용.const id = useSelector((state: RootState) => state.user.id)const name = useSelector((state: RootState) => state.user.name)구조 분해 할당 + equalityFn 사용 (shallowEqual 등)RTK에서 제공하는 createSelector 사용. 공식 문서를 읽어보니 1번을 제일 추천하는 뉘앙스로 느꼈습니다. 저도 1번이 가장 심플하면서도 정확한 방법 같아요. 하지만 걱정되는게 한 컴포넌트에서 불러와야 할 상태가 많다면 useSelector가 굉장히 많아져서 가독성을 해지지 않을까 고민입니다.하나의 슬라이스에 상태가 많은 경우도 있어서요.(많이 사용할수록 전체적인 코드의 볼륨이 더 커질 수도 있을 것 같구요..) 2번은 경우에 따라 shallowEqual이 중첩된 객체는 검사하지 못한다는 점, equalityFn을 일일이 설정해줘야한다는 점에서 오히려 공수가 더 많이 들지 않을까 고민입니다. 3번은 단순히 값만 불러오는 것 보다 불러오는 동시에 복잡한 연산이 있을 때 권장되는 방법으로 느껴졌습니다. 메모이제이션이 갖고 있는 트레이드 오프도 있구요. 각 스토어 슬라이스마다 또는 각 컴포넌트마다 사용한다면 너무 과하게 사용하는 것이 아닌가 고민입니다. 어떤 방법을 사용하는 것이 가장 괜찮은 방법일까요?아니면 따로 추천하시는 방법이 있으신가요? 열심히 구글을 돌아다녔지만 딱 명확한 대답을 얻기가 힘들어서 부득이하게 질문 드립니다...