npm run dev를 할 시 Cannot read properties of null (reading 'prefixCls')이렇게 뜹니다..제 코드는 이렇게 되어 있는데 무엇이 문제일까요?

 안녕하세요!해당 수업에서 CORS 에러가 발생한 이유를 다른 작성자 분께서 질문해주셨는데, 강사님께서 프론트엔드와 백엔드의 포트가 달라서 그렇다고 대답해주셨습니다. 백엔드에서는 app.listen을 통해 포트를 설정을 해주었지만, 프론트엔드에서는 포트를 설정한 적이 없는데 포트번호를 어떻게 알 수 있나요..?설정하는 방법이 따로 있는건가요?그리고 이전수업에서 한 컴퓨터에서는 프론트엔드와 백엔드의 포트번호가 달라야한다고 말씀하셨는데, 그렇다면 하나의 컴퓨터에서는 same origin이 될 수 없는건가요?

  3번째 사진의 post.addliked(parseInt~~ 이 부분에서 addliked 라는 함수가 존재하지 않는다고 하는데 s를 붙여봐도 as에 해당하는 부분으로 교체해봐도 전부 오류가 뜨네요왜그럴까요....

게시글 업로드시 다른 요청/응답은 다 정상이고 게시글 업로드와 DB생성도 다 정상적으로 작동되던데 마지막에 GET /cart.json 404 4.349 ms - 2902 에러가 뜨던데 이번 코드에서 /cart.json 요청을 한 코드가 있었나요? 신경을 안 써도 되는 부분인지 궁금합니다.

선생님 수업 따라서 열심히 따라 왔는데 여기서 막히네요.해결 좀 부탁드립니다.제가 나이가 53인데 사다리차 운전 하면서 자영업 하는데 다른길좀 가보려고 공부하는 중이거든요. 다른 분들한테는 쉬운걸 텐데 저한테는 어렵네요.구글링 해보고 네이버 도 찾아봣는데 찾을수가 없네요.이걸 해결해야 앞으로 나갈수 있을것 같은데 도와주세요.감사합니다

 이 강의만 들으면 되나요?아니면 파이썬이나 자바는 제가 따로 공부해야하나요?

main/index.js 에서는setProducts(result.data.products); 로 써야하고product/index.js 에서는setProducts(result.data); 로 써야하는데두 파일에서 return문에서는 동등하게 {product.name} , {product.price} 등으로 사용됩니다. 둘의 차이를 알려주시면 감사하겠습니다.

import axios from 'axios'; 에서는 중괄호가 없고import {Link} from 'react-router-dom' 에서는 중괄호가 있는데 차이가 뭔지 잘 모르겠습니다.axios는 'axios' 안에 있는 함수를 import 하는 것이고 {Link} 는 'react-router-dom' 안에 많은 컴포넌트 중 Link만 import 하기 위함인가요?

 버전1으로 듣다가 버전2가 있다는 걸 알게 되어서 버전 1 말고 버전2으로 들어도 되나요?버전2는 처음부터 들으려고요

빈 배열을 선언해서 빈 배열에 (axios 통신을 통해 전달받은) result.data를 대입해서 사용하는 것이 아니라 useState를 사용하는 이유는 무엇인가요?제가 이해한 것은 서버에 새로운 데이터가 업로드되면 그때마다 바로바로 업로드 된 데이터를 화면에 보여주기 위함인 것 같은데(예를 들어 상품이 3개로 보이다가 관리자가 상품을 한 개 추가하면 새로고침을 안해도 4개로 보임), 올바르게 이해한 것이 맞을까요?

-C:\Users\ysm65\learn-sequelize>npm start> learn-seuqellize@0.0.1 start> nodemon app[nodemon] 3.0.1[nodemon] to restart at any time, enter rs[nodemon] watching path(s): .[nodemon] watching extensions: js,mjs,cjs,json[nodemon] starting node app.js3001 번 포트에서 대기중Executing (default): SELECT TABLE_NAME FROM INFORMATION_SCHEMA.TABLES WHERE TABLE_TYPE = 'BASE TABLE' AND TABLE_NAME = 'users' AND TABLE_SCHEMA = 'nodejs'Executing (default): SHOW INDEX FROM users FROM nodejsExecuting (default): SELECT TABLE_NAME FROM INFORMATION_SCHEMA.TABLES WHERE TABLE_TYPE = 'BASE TABLE' AND TABLE_NAME = 'comments' AND TABLE_SCHEMA = 'nodejs'Executing (default): SHOW INDEX FROM comments FROM nodejs데이터베이스 연결 성공  --개정 3판 7장 내용 실습 중 마지막에 브라우저 창에 띄우는 것 까지 확인을 했지만 이름을 클릭 시 comment 내용이 뜨지 않아 하나씩 확인하면서 오류를 찾고 있습니다. 그 과정에서 3판 교과서 344page에서 소개된 내용과 다른 점을 찾았고 강사님과 다르게 CREATED가 아니라 SELECTED 로 뜨는 게 문제의 원인이지 않을까 생각하고 있습니다. 코드의 오타는 확인한 상황인데, 다른 원인이 어떤 게 있는지 고민을 하다가 이렇게 질문 글을 남깁니다. 어떻게 해결을 하는 게 좋을 지 조언을 구하기 위해서 질문을 남깁니다.   

 안녕하세요. 강의 잘 듣고 있습니다.user - service - google가 있다고 했을 때,user가 oauth code grant방식으로 login을 하면 service가 callback을 통해 code를 받게되고, 그 정보와 다른 정보를 조합하여 google로 부터 access token과 refresh token을 받아올텐데요.여기서 token을 어떤식으로 처리하는지 궁금합니다.service가 google로 부터 받은 token들을 app으로 전달하는 건가요? 그렇다면 app은 token이 만료되면 google에 직접 토큰을 다시 요청하는걸까요? 아니면 service를 통해 relay를 해서 토큰을 다시 요청할까요? service는 token이 올바른건지는 검증할 수 없으니 db에 저장을 해 두고 나중에 같은 토큰을 user로부터 받았을때 같은지 비교해서 허용할 지 말지 알 수 있을거 같은데 이렇게 하는건가요?아니면 service가 직접 새로운 토큰들을 생성해서 관리하는게 좋을까요?그리고 public app에서 보안을 더 강화하기 위해 pkce방식도 쓰는거 같던데 실제 많이 쓰시는지 궁금하네요.답변 부탁드립니다.감사합니다.

08-ESLint & Prettier 강의를 보는 중인데 5분 27초 경에 강의 에서 나오는 eslint 에러가 저는 안나옵니다. eslint가 적용이 안되고 있는걸까요?강의 화면제 vscode 화면   

16:19의 3번에서 세션 객체를 찾아서 req.session으로 만든다고 했었는데 이전에 처음에 로그인 했을 때 req.session으로 등록된 세션 객체(13:40의 6번)는 사라진 건가요?

현재 에러Error: Missing where attribute in the options parameter passed to findOrCreate. Please note that the API has changed, and is now options only (an object with where, defaults keys, transaction etc.) at Function.findOrCreate (/Users/yang-areum/Desktop/study/React-NodeBirdSNS/prepare/back/node_modules/sequelize/lib/model.js:1388:13) at /Users/yang-areum/Desktop/study/React-NodeBirdSNS/prepare/back/routes/post.js:50:19 at Array.map (<anonymous>) at /Users/yang-areum/Desktop/study/React-NodeBirdSNS/prepare/back/routes/post.js:49:18 at processTicksAndRejections (node:internal/process/task_queues:96:5) Error: Missing where attribute in the options parameter passed to findOrCreate. Please note that the API has changed, and is now options only (an object with where, defaults keys, transaction etc.) at Function.findOrCreate (/Users/yang-areum/Desktop/study/React-NodeBirdSNS/prepare/back/node_modules/sequelize/lib/model.js:1388:13) at /Users/yang-areum/Desktop/study/React-NodeBirdSNS/prepare/back/routes/post.js:50:19 at Array.map (<anonymous>) at /Users/yang-areum/Desktop/study/React-NodeBirdSNS/prepare/back/routes/post.js:49:18 at processTicksAndRejections (node:internal/process/task_queues:96:5) POST /post 500 17.278 ms - 820 번역 해본 결과 :현재 코드 :현재 해시태그와 관련된 라우터코드만 올려보아요.const express = require("express"); const multer = require("multer"); const path = require("path"); const fs = require("fs"); const { Post, Image, Comment, User, Hashtag } = require("../models"); const { isLoggedIn } = require("./middlewares"); const router = express.Router(); // 이미지 업로드 파일 생성 try { fs.accessSync("uploads"); } catch (error) { console.log("uploads 폴더가 없어서 맹들었슴돠 !"); fs.mkdirSync("uploads"); } // multer 미들웨어 : 게시물 이미지 업로드 설정 const upload = multer({ storage: multer.diskStorage({ destination(req, file, done) { done(null, "uploads"); }, filename(req, file, done) { const ext = path.extname(file.originalname); // 확장자추출(.png) const basename = path.basename(file.originalname, ext); // 파일명 done(null, basename + "_" + new Date().getTime() + ext); // 파일명 + _ + 시간초 + 확장자 }, }), limits: { fileSize: 20 * 1024 * 1024 }, }); // 게시글 업로드 router.post("/", isLoggedIn, upload.none(), async (req, res, next) => { // POST /post try { // 해시태그 추출 const hashtags = req.body.content.match(/#[^\s]+/g); const post = await Post.create({ content: req.body.content, UserId: req.user.id, // 게시글을 작성한 사용자 id }); // 해시태그 등록 if (hashtags) { const result = await Promise.all( hashtags.map((tag) => Hashtag.findOrCreate({ wehre: { name: tag.slice(1).toLowerCase() }, }) ) ); console.log("HASHTAG", result); await post.addHashtags(result.map((v) => v[0])); } // 받은 이미지 시퀄라이즈, DB저장 if (req.body.image) { if (Array.isArray(req.body.image)) { // 이미지를 여러개 올리면 image: [파일명.png, 파일명.png] const images = await Promise.all( req.body.image.map((image) => Image.create({ src: image })) ); await post.addImages(images); } else { // 이미지를 하나만 올리면 image: 파일명.png const image = await Image.create({ src: req.body.image }); await post.addImages(image); } } const fullPost = await Post.findOne({ where: { id: post.id }, include: [ { model: Image, }, { model: Comment, include: [ { model: User, // 댓글 단 작성자 attributes: ["id", "nickname"], }, ], }, { model: User, // 게시글 작성자 attributes: ["id", "nickname"], }, { model: User, // 좋아요 누른 사람 as: "Likers", attributes: ["id"], }, ], }); res.status(201).json(fullPost); } catch (err) { console.error(err); next(err); } }); 혹시나 하고 시퀄라이즈에서 모델에서 코드를 잘 못 쳐서 DB가 잘못 설계 된것인가? 도 생각이 들어 코드확인과 워크밴치에서 테이블 확인했는데 문제점은 없다고 생각을 했어요./* models.index.js */ const Sequelize = require("sequelize"); const env = process.env.NODE_ENV || "development"; const config = require("../config/config")[env]; const db = {}; const sequelize = new Sequelize( config.database, config.username, config.password, config ); // 시퀄라이즈에서 모델을 등록 (시퀄라이즈로 db에 require들을 넣어서 forEach문으로) db.Comment = require("./comment")(sequelize, Sequelize); db.Hashtag = require("./hashtag")(sequelize, Sequelize); db.Image = require("./image")(sequelize, Sequelize); db.User = require("./user")(sequelize, Sequelize); db.Post = require("./post")(sequelize, Sequelize); Object.keys(db).forEach((modelName) => { if (db[modelName].associate) { db[modelName].associate(db); } }); db.sequelize = sequelize; db.Sequelize = Sequelize; module.exports = db;/* medels/post.js */ module.exports = (sequelize, DataTypes) => { const Post = sequelize.define( "Post", { // id: {}, MySQL에서 id가 자동으로 생성된다. content: { type: DataTypes.TEXT, // 글자를 무제한으로 늘려주기위해 TEXT를 사용해보았다. STRING으로 한다. allowNull: false, }, }, { // Post Module에 대한 셋팅 charset: "utf8mb4", // 한글 + 이모티콘 collate: "utf8mb4_general_ci", // 한글 + 이모티콘 저장 } ); // belongsTo 단수, hasMany 복수 (뒤에 s) Post.associate = (db) => { db.Post.belongsTo(db.User); db.Post.belongsToMany(db.Hashtag, { through: "PostHashtag" }); db.Post.hasMany(db.Comment); db.Post.hasMany(db.Image); db.Post.belongsToMany(db.User, { through: "Like", as: "Likers" }); db.Post.belongsTo(db.Post, { as: "Retweet" }); }; return Post; };/* models/hashtag.js */ module.exports = (sequelize, DataTypes) => { const Hashtag = sequelize.define( "Hashtag", { // id: {}, MySQL에서 id가 자동으로 생성된다. name: { type: DataTypes.STRING(20), allowNull: false, }, }, { // Hashtag Module에 대한 셋팅 charset: "utf8mb4", // 한글 + 이모티콘 collate: "utf8mb4_general_ci", // 한글 + 이모티콘 저장 } ); Hashtag.associate = (db) => { db.Hashtag.belongsToMany(db.Post, { through: "PostHashtag" }); // 하나의 해시태그에 여러개의 게시글 (M:N의 관계) }; return Hashtag; }; 그리고 당연히 워크밴치에서는 게시글은 잘 들어갔지만, 해시태그 테이블은 아무것도 저장되지 않았죠.게시글해시태그 질문지금 번역도 해보고 구글링도 해본 결과, 원인은 findOrCreate메소드를 사용하면서 전달해주는 where속성이 누락되었다고 하더라구요..구글링을 해보니 첫번째 : where, 두번째 : 기본 키 (값), 세번째 : transaction 값을 넣어야된다고 나와있더라구요.궁금한게 강좌에서 설명하는 속성값과 지금 제가 검색해서 알게 된 넣어야되는 속성값이 다른이유가 있을까요 ?그리고 결국 결론은, 지금 현재 이 에러를 해결하기 위해서 기본값을 설정해주어야하는 부분인가요 ?

안녕하세요 선생님 고생이 많으십니다._app.js 헤드에 코드도 추가했고 front 폴더안에 public 폴더만들어서 파비콘 이미지도 넣어놨는데 왜 파비콘이 지구모양에서 안바뀔까요.. 체크해 볼 경우의 수가 머가 있을지 궁금합니다.. <link rel="shortcut icon" href="/favicon.ico" />

그랩님 안녕하세요 현재 depoly가 완료되었습니다.그런데 hostname페이지로 접속이 안되고 아래와 같이 실패하고있습니다.어떤부분이 문제인지 문의드립니다.git 링크: https://github.com/sunghankwon/grab-market-server   다른 수강생분들에게도 문제 해결에 도움을 줄 수 있도록 좋은 질문을 남겨봅시다 :) 1. 질문은 문제 상황을 최대한 표현해주세요.2. 구체적이고 최대한 맥락을 알려줄 수 있도록 질문을 남겨 주실수록 좋습니다. 그렇지 않으면 답변을 얻는데 시간이 오래걸릴 수 있습니다 ㅠㅠex) A라는 상황에서 B라는 문제가 있었고 이에 C라는 시도를 해봤는데 되지 않았다!3. 먼저 유사한 질문이 있었는지 꼭 검색해주세요!

npm run dev를 하니 'next'은(는) 내부 또는 외부 명령, 실행할 수 있는 프로그램, 또는배치 파일이 아닙니다.라고 뜨는데 어떻게 고치나요

- error Error: The default export is not a React Component in page: "/" at renderToHTMLImpl (C:\Users\USER\Desktop\1080\react\front\node_modules\next\dist\server\render.js:279:19) at PagesRouteModule.render (webpack-internal:///./node_modules/next/dist/server/future/route-modules/pages/module.js:31:45) at doRender (C:\Users\USER\Desktop\1080\react\front\node_modules\next\dist\server\base-server.js:1055:40) at cacheEntry.responseCache.get.incrementalCache.incrementalCache (C:\Users\USER\Desktop\1080\react\front\node_modules\next\dist\server\base-server.js:1215:34) at C:\Users\USER\Desktop\1080\react\front\node_modules\next\dist\server\response-cache\index.js:99:42 at ResponseCache.get (C:\Users\USER\Desktop\1080\react\front\node_modules\next\dist\server\response-cache\index.js:149:11) at DevServer.renderToResponseWithComponentsImpl (C:\Users\USER\Desktop\1080\react\front\node_modules\next\dist\server\base-server.js:1134:53) at C:\Users\USER\Desktop\1080\react\front\node_modules\next\dist\server\base-server.js:727:121 at NextTracerImpl.trace (C:\Users\USER\Desktop\1080\react\front\node_modules\next\dist\server\lib\trace\tracer.js:90:20) at DevServer.renderToResponseWithComponents (C:\Users\USER\Desktop\1080\react\front\node_modules\next\dist\server\base-server.js:727:41) at DevServer.renderPageComponent (C:\Users\USER\Desktop\1080\react\front\node_modules\next\dist\server\base-server.js:1366:35) at processTicksAndRejections (node:internal/process/task_queues:96:5) at async DevServer.renderToResponseImpl (C:\Users\USER\Desktop\1080\react\front\node_modules\next\dist\server\base-server.js:1398:32) at async DevServer.pipeImpl (C:\Users\USER\Desktop\1080\react\front\node_modules\next\dist\server\base-server.js:645:25) at async Object.fn (C:\Users\USER\Desktop\1080\react\front\node_modules\next\dist\server\next-server.js:1153:21) at async Router.execute (C:\Users\USER\Desktop\1080\react\front\node_modules\next\dist\server\router.js:315:32) at async DevServer.runImpl (C:\Users\USER\Desktop\1080\react\front\node_modules\next\dist\server\base-server.js:619:29) at async DevServer.run (C:\Users\USER\Desktop\1080\react\front\node_modules\next\dist\server\dev\next-dev-server.js:908:20) at async DevServer.handleRequestImpl (C:\Users\USER\Desktop\1080\react\front\node_modules\next\dist\server\base-server.js:546:20) { digest: undefined }저번 폴더구조 문제를 해결하니 이러한 문제가 생겼습니다 어떻게 하나요?

- ready started server on 0.0.0.0:3000, url: http://localhost:3000 Error: > Couldn't find any `pages` or `app` directory. Please create one under the project root at findPagesDir (C:\Users\USER\Desktop\1080\react\front\node_modules\next\dist\lib\find-pages-dir.js:54:15) at DevServer.getRoutes (C:\Users\USER\Desktop\1080\react\front\node_modules\next\dist\server\dev\next-dev-server.js:191:71) at new Server (C:\Users\USER\Desktop\1080\react\front\node_modules\next\dist\server\base-server.js:198:47) at new NextNodeServer (C:\Users\USER\Desktop\1080\react\front\node_modules\next\dist\server\next-server.js:175:9) at new DevServer (C:\Users\USER\Desktop\1080\react\front\node_modules\next\dist\server\dev\next-dev-server.js:149:9) at NextServer.createServer (C:\Users\USER\Desktop\1080\react\front\node_modules\next\dist\server\next.js:179:24) at C:\Users\USER\Desktop\1080\react\front\node_modules\next\dist\server\next.js:200:42 at async NextServer.prepare (C:\Users\USER\Desktop\1080\react\front\node_modules\next\dist\server\next.js:161:24) at async Server.<anonymous> (C:\Users\USER\Desktop\1080\react\front\node_modules\next\dist\server\lib\render-server.js:128:17) { type: 'Error'npm run dev를 했을 때 이런식으로 뜨는데 어떻게 해야 하나요??