안녕하세요 지금 section31과제를 진행하고 있습니다.제가 지금 useForm으로 포트폴리오 과제를 진행하고 있는데 초기값 설정하는 데 어려움이 있습니다현재 useForm이 가지고 있는 defalutValues속성으로 기본값을 설정하는데 console에서는 data값이 찍히는데 defaltValues에서는 undefined값으로 나옵니다.변수가 먼저 선언되고 값이 할당이 안되는 걸까요?useForm에서는 기본값을 어떻게 설정해야 하는걸까요?useForm을 사용하기 시작했는데, 점점 벅찬거같아요... 이제라도 input으로 변경해야할까요..export default function BoardWriteUI({isEdit, data, onSubmitCreate, onSubmitUpdate, onClickMoveToBack}) { console.log(data) const {register,watch, formState : {errors, isValid}, handleSubmit} = useForm({ mode : 'onSubmit', defaultValues : { writer : data?.fetchBoard.writer, password : "", title : data?.fetchBoard?.title, contents : data?.fetchBoard?.contents, } });

안녕하세요 강사님 :)강의 수강 중, author, emotion부분은 저장 이후 초기화가 되나, content부분은 초기화가 되지 않습니다! 🥲 아무리 오타 있나...확인을 해보고 ㅠ_ㅠ..어떤 오류가 있는건지 찾아아도 더 이상 모르겠어서 글을 남깁니다! 샌드박스 포크(?) 주소를 함께 남겨요. 감사합니다! https://codesandbox.io/s/chapt-2-forked-dc3sm8

현재 에러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 값을 넣어야된다고 나와있더라구요.궁금한게 강좌에서 설명하는 속성값과 지금 제가 검색해서 알게 된 넣어야되는 속성값이 다른이유가 있을까요 ?그리고 결국 결론은, 지금 현재 이 에러를 해결하기 위해서 기본값을 설정해주어야하는 부분인가요 ?

안내한 것 처럼 버전 확인하고 node modules 지운 다음 다시 설치해서 yarn dev를 실행했는데 안되는데 어디에서 틀린 지를 모르겠습니다.. 

기능완성 후 새로고침 시 application 항목에 key value 값 사라지는데 새로고침시에도 key value 값이 유지되는방법이 있을까요

format on save 기능을 사용하면 저장 시에 자동으로 개행과 줄바꿈을 해줘서 잘 사용하고 있습니다. 그런데 짧은 코드는 오히려 개행을 하지 않고 한줄에 작성하는 것이 가독성이 좋은 것 같아서 한줄에 쓰고 싶은데 format on save에 체크가 되어있어서 한 줄에 입력하는 게 불가능하네요.그런데 강사님의 경우에는 if (true) { alert("안녕하세요") ; } 같은 짧은 코드의 경우에는 if (true) { alert("안녕하세요") ; } 처럼 한줄로 작성하고 저장해도 강제로 개행이 안되던데, 여쭤보고 싶은건강사님은 format on save를 off로 설정해놓으셨나요? 아니면 format on save를 on으로 설정해놓고, 저런 짧은 if문을 한줄에 다 입력할 수 있는 설정방법이 있을까요?

안녕하세요 선생님 고생이 많으십니다._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를 했을 때 이런식으로 뜨는데 어떻게 해야 하나요??

안녕하세요. 섹션5 4번째 강의를 수강하면서 궁금한 게 생겨 질문글 남김니다.강의 영상 7:02 쯤에서 App.js에서 정의한 dummyList를 하위의 컴포넌트인 DiaryList에서 받아올 때 ({diaryList}) => {...}라고 객체를 직접적으로 명시해서 전달하는 방법을 확인하였습니다. 그런데 이 방식말고도 const DiaryList = (props) => {..} 이렇게 전달받아서 함수 내에서 props.diaryList로 리스트에 접근하는 것도 가능하다는 것을 알게 되었습니다.하위 컴포넌트에서 (props.전달인자명)으로 접근하는 것과 ({전달인자명})으로 접근하는 것의 차이가 있는 지 궁금합니다.

로그인 유지를 swr 방식으로 교체하려고 합니다.https://swr.vercel.app/ko/docs/getting-started공식문서에는 useSWR을 hook으로 활용하는 가이드를 제시하고 있습니다.(재사용 가능하게 만들기 항목)가이드와 같은 방식으로 외부 파일에 hooks를 만들고, 적용했습니다.useMyInfo.jsimport axios from 'axios'; export default function useMyInfo(useSWR) { const fetcher = url => axios.get(url, { withCredentials: true }).then(result => result.data); const { data: me, error: myInfoError, isLoading: myInfoLoading, } = useSWR(`${process.env.NEXT_PUBLIC_BACK_END_DOMAIN}/user/me`, fetcher); // mutate('ME', { me, myInfoError, myInfoLoading }); return { me, myInfoError, myInfoLoading, }; } index.jsconst Home = () => { const { freePosts, loadFreePostsStatus, postTotal, addPostStatus } = useSelector(state => state.post); useEffect(() => { useMyInfo(); // hooks 호출 }, []); ...// 생략매개변수로 전달하는 방식으로도 바꿔봤습니다.import useSWR from 'swr' const Home = () => { const { freePosts, loadFreePostsStatus, postTotal, addPostStatus } = useSelector(state => state.post); useEffect(() => { useMyInfo(useSWR); // hooks 호출, hooks에서는 매개변수 받아서 적용하는 방식으로 변경했음 }, []); ...// 생략여전히 같은 에러가 뜹니다.공식문서 가이드와 달리 hook으로 만들어 재사용하는 것이 잘 안되는데 어떻게 해결할수 있나요? 간단한 get요청 하나 가져오는게 편할줄 알았는데 redux 보다 어려운거 같네요..

안녕하세요, 제로초님. 문제에 대한 고민을 공유하기 앞서 현재 저는 [해시태그 등록하기]까지 수강한 상태입니다.공유하려는 문제는 제목과 같이 게시글 작성시 post.id를 읽지 못 하여 컴포넌트가 렌더링 되지 않습니다. 그러나 새로고침을 하면 작성한 게시글이 정상적으로 렌더링됩니다. 네트워크와 redux 데브툴즈에는 액션들이 모두 정상적으로 작동하고 있음을 확인하였고, 콘솔을 확인해보니 아래와 같은 오류가 뜹니다.위 오류는 비동기로 데이터를 받아오기 전에 먼저 render가 되서 발생하는 에러임을 검색을 통해 확인하였습니다. 그래서 react suspense를 이용하여 해결해보려 했으나 해결하지 못 했습니다. 혹시 제가 해당 오류의 원인을 제대로 파악하지 못 하고 있는 걸까요? 알려주시면 감사하겠습니다.

TLDRNestJS를 최신 버전으로 업그레이드하여 프로젝트를 다시 생성하시면 설치가 가능합니다.Details2023년 6월 15일 기준 NestJS의 v10 릴리즈가 나와, 이전 버전의 CLI로 설치된 경우 아래 명령어 실행 시 에러가 발생합니다. (작성자의 경우 NestJS v9로 실행)$ npm i --save @nestjs/websockets @nestjs/platform-socket.io npm ERR! code ERESOLVE npm ERR! ERESOLVE unable to resolve dependency tree npm ERR! npm ERR! While resolving: test-chat@0.0.1 npm ERR! Found: @nestjs/common@9.4.3 npm ERR! node_modules/@nestjs/common npm ERR! @nestjs/common@"^9.0.0" from the root project npm ERR! npm ERR! Could not resolve dependency: npm ERR! peer @nestjs/common@"^10.0.0" from @nestjs/websockets@10.1.0 npm ERR! node_modules/@nestjs/websockets npm ERR! @nestjs/websockets@"*" from the root project npm ERR! npm ERR! Fix the upstream dependency conflict, or retry npm ERR! this command with --force or --legacy-peer-deps npm ERR! to accept an incorrect (and potentially broken) dependency resolution.이를 해결하기 위한 방법으로 두 가지를 생각해볼 수 있는데, 작성자 본인은 첫 번째 방법을 사용했음을 알려드립니다.NestJS v10으로 새로 설치 후 프로젝트 다시 생성공식문서(링크)를 따라 v9에서 v10으로 마이그레이션

persist에서는 error가 있는데 rehydrate에서는 error 가 없습니다. 그결과 pendding과 rejected에서 error가 안나옵니다.userslice 코드입니다.import { createSlice } from "@reduxjs/toolkit"; import { registerUser } from "./thunkFunctions"; import { toast } from "react-toastify"; const initialState = { userData: { id: "", email: "", name: "", role: 0, image: "", }, isAuth: false, isLoading: false, error: "실패", }; const userSlice = createSlice({ name: "user", initialState, reducers: {}, extraReducers: (builder) => { builder .addCase(registerUser.pending, (state) => { state.isLoading = true; }) .addCase(registerUser.fulfilled, (state) => { state.isLoading = false; toast.info("회원가입을 성공했습니다."); }) .addCase(registerUser.rejected, (state, action) => { state.isLoading = false; state.error = action.payload; toast.error(action.payload); }); }, }); export default userSlice.reducer;

 안녕하세요 선생님 다름이 아니라 synchronize: true, // 동기화 시켜준다 같게 한다.true을 하게되면 동기화를 시켜주는건데 매번 yarn start:dev을할때마다 QueryFailedError: Table '***' already exists이러한 오류가 나옵니다. 그럼 실행 할때마다 데이터베이스 테이블을 매번 지워야 하는건가요??

appendchild강의에서 addEventListener 로 넘어갈 때,const KeyCodeCheck = function () { if (window.event.keyCode === 13 && todoInput.value !== "") { createTodo(); } };위 코드에서const KeyCodeCheck = function () {if (window.event.keyCode === 13 && todoInput.value) {createTodo();}};로 아무런 설명없이 바뀌어 있네요. 이유를 설명해주세요.이거 외에도 아무 부연설명없이, 코드가 바뀌어 있는 경우가 매우 많습니다. 수정해서 다시 올려주세요

headless : false 로 설정해서 실행을 하면...생각보다 자주 크로니움이 많이 튕기며 오류를 발생시킵니다.puppeteer 와 puppeteer-core 업데이트도 진행했고, 크롬브라우져도 최신버젼을 사용하고 있습니다. 혹시 팁있을까요?

섹션3에서 섹션4로 넘어가면서 write.html에 코드가 변경된거같은데 변경된 write.html 전체코드가 없어서 문의드려요. write.html 코드부분 올려주실 수 있을까요?