묻고 답해요
161만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결[리뉴얼] React로 NodeBird SNS 만들기
util/produce.js 에서 오류가 납니다
npm run dev를 했는데아래와 같은 오류가 뜨면서 실행이 안됩니다어디서 문제가 있는 건가요? util/produce.js 코드 내용import { enableES5, produce } from 'immer'; export default (...args) => { enableES5(); return produce(...args); }; 터미널 에러> react-nodebird-front@1.0.0 dev> next -p 3060ready - started server on 0.0.0.0:3060, url: http://localhost:3060event - compiled client and server successfully in 668 ms (1830 modules)wait - compiling / (client and server)...event - compiled client and server successfully in 1185 ms (4446 modules)4. WrappedApp created new store with withRedux(NodeBird) { initialState: undefined, initialStateFromGSPorGSSR: undefined }{}wait - compiling /_error (client and server)...error - util/produce.js (4:11) @ __WEBPACK_DEFAULT_EXPORT__error - TypeError: (0 , immer__WEBPACK_IMPORTED_MODULE_0__.enableES5) is not a function at __WEBPACK_DEFAULT_EXPORT__ (webpack-internal:///./util/produce.js:11:53) at reducer (webpack-internal:///./reducers/user.js:115:106) at /Users/hyeonyeongjeong/Documents/2023project/nodebird/prepare/front/node_modules/redux/lib/redux.js:476:24 at Array.forEach (<anonymous>) at assertReducerShape (/Users/hyeonyeongjeong/Documents/2023project/nodebird/prepare/front/node_modules/redux/lib/redux.js:474:25) at combineReducers (/Users/hyeonyeongjeong/Documents/2023project/nodebird/prepare/front/node_modules/redux/lib/redux.js:539:5) at eval (webpack-internal:///./reducers/index.js:19:75) { page: '/'} 2 | 3 | export default (...args) => {> 4 | enableES5(); | ^ 5 | return produce(...args); 6 | };event - compiled client and server successfully in 315 ms (4447 modules)4. WrappedApp created new store with withRedux(NodeBird) { initialState: undefined, initialStateFromGSPorGSSR: undefined }{}TypeError: (0 , immer__WEBPACK_IMPORTED_MODULE_0__.enableES5) is not a function at __WEBPACK_DEFAULT_EXPORT__ (webpack-internal:///./util/produce.js:11:53) at reducer (webpack-internal:///./reducers/user.js:115:106) at /Users/hyeonyeongjeong/Documents/2023project/nodebird/prepare/front/node_modules/redux/lib/redux.js:476:24 at Array.forEach (<anonymous>) at assertReducerShape (/Users/hyeonyeongjeong/Documents/2023project/nodebird/prepare/front/node_modules/redux/lib/redux.js:474:25) at combineReducers (/Users/hyeonyeongjeong/Documents/2023project/nodebird/prepare/front/node_modules/redux/lib/redux.js:539:5) at eval (webpack-internal:///./reducers/index.js:19:75) at processTicksAndRejections (node:internal/process/task_queues:96:5)^C%
-
미해결따라하며 배우는 리액트 A-Z[19버전 반영]
리액트가 계속 로딩만되고 창이안떠요
강의 다잘따라왔는데 ㅠㅠ 왜이러죠 ? 컴퓨터를껏다켜도이래요 파일에 에러는 없습니다
-
미해결[리뉴얼] React로 NodeBird SNS 만들기
cosnt is not defined
npm run dev 시 cosnt is not defined 가 뜹니다 제 코드는import React from 'react'; import propTypes from 'prop-types'; import Link from 'next/link'; import { Menu, Input, Row, Col } from 'antd'; import 'antd/dist/antd.css' import UserProfile from '../components/UserProfile'; import LoginForm from '../components/LoginForm'; const AppLayout = ({ children }) => { cosnt [IsLoggedIn, setIsLoggedIn] = useState(false); return ( <div> <Menu mode="horizontal"> <Menu.Item> <Link href="/"><a>노드버드</a></Link> </Menu.Item> <Menu.Item> <Link href="/profile"><a>프로필</a></Link> </Menu.Item> <Menu.Item> <Input.Search enterButton style={{verticalAlign: 'middle' }}/> </Menu.Item> <Menu.Item> <Link href="/signup"><a>회원가입</a></Link> </Menu.Item> </Menu> <Row gutter={8}> <Col xs={24} md={6}> {isLoggedIn ? <Userprofile /> : <LoginForm />} </Col> <Col xs={24} md={12}> {children} </Col> <Col xs={24} md={6}> <a href="" target='_blank' rel='noreferrer noopener'>Made by 0880</a> </Col> </Row> </div> ); }; AppLayout.propTypes = { children: propTypes.node.isRequired, } export default AppLayout; 입니다 무엇이 문제 일까요
-
미해결[리뉴얼] React로 NodeBird SNS 만들기
App is not defined
npm run dev를 했을 시 ReferenceError: App is not defined 이렇게 뜹니다 제 코드는 import React from 'react'; import PropTypes from 'prop-types'; import Head from 'next/head'; import 'antd/dist/antd.css' const NodeBird = ({Component}) => { return ( <> <Head> <meta charset='utf-8' /> <title>NodeBird</title> </Head> <Component /> </> ) }; App.PropTypes = { Component: PropTypes.elementType.isRequired, } export default App;입니다 어떻게 해야 하나요?
-
미해결따라하며 배우는 리액트 A-Z[19버전 반영]
Banner.css가 안보이네요!
css가 전체적으로 안보여줘서 작성을 못했네요ㅜㅜ 파일 부탁드립니다.
-
미해결[리뉴얼] React로 NodeBird SNS 만들기
null 속성을 읽을 수 없음.
npm run dev를 할 시 Cannot read properties of null (reading 'prefixCls')이렇게 뜹니다..제 코드는 이렇게 되어 있는데 무엇이 문제일까요?
-
미해결실전 리액트 프로그래밍
setValue 함수 질문 있습니다.
현재 whois 프로젝트 진행중인데요. function setKeyword(value) { if (value !== keyword) { dispatch(actions.setValue("keyword", value)); dispatch(actions.fetchAutoComplete(value)); } }export const actions = { setValue: createSetValueAction(Types.SetValue), fetchAutoComplete: (keyword) => ({ type: Types.FetchAutoComplete, keyword, }), };export function createSetValueAction(type) { return (key, value) => ({ type, key, value }); }이 부분에서 actions.setValue 함수 부분이 이해가 안갑니다.ㅠㅠ createSetValueAction 함수에서 type만 받았는데 return 에서 key와 value를 어디에서 가져오는건가요?? setValue에서 들어간 값들이 인자로 들어가는거 같은데 이해가 안가네요ㅠㅠ
-
미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
paypal관련 문의
오랜만에 문의 드립니다.바쁘시겠지만 답변 부탁 드릴께요페이팔로 결제를 할때 동영상에서는 샌드박스로 가상결제가 되도록 했는데 실제로 결제가 되도록 할려면 어떻게 해야 하는지 문의 드립니다.회사에서 페이팔을 사용하고 있다고 하는데 회사에 무슨정보를 받아서 어디에 설정을 하면 되는지 알려주시면 감사하겠습니다.
-
미해결실무 중심! FE 입문자를 위한 React
setAnswers 에 함수가 들어가도 괜찮은건가요?
안녕하세요. 유익한 강의 감사합니다.const useCurrentAnswer = () => { const step = useStep(); const [answers, setAnswers] = useRecoilState(answersState); const answer = answers[step]; const setAnswer = (newAnswer) => { setAnswers((answers) => { // 새로운 답변 렌더링 (answers 는 그냥 변수명 ) const newAnswers = [...answers]; // 기존 답변목록을 복붙함 (불변성의 법칙을 지켜라 / 기존 데이터는 건들지마..) newAnswers[step] = newAnswer; // 새로 작성한 답변을 복붙한 배열에 넣어줌 return newAnswers; // 새로운 답변 목록 반환 }); }; return [answer, setAnswer]; };에서 answer - String / 답변answers - String[] / 답변 목록 setAnswer - answer를 렌더링해주기위한 함수 / setAnswer(param) { answer = param }setAnswers - answers를 렌더링해주기위한 함수 / setAnswers(param) { answers = param } 로 이해되는데 그렇다면 setAnswers에 함수가 들어가도 괜찮은건지 궁금합니다. setAnswers((answers) => { const newAnswers = [...answers]; newAnswers[step] = newAnswer; return newAnswers; });는 setAnswers(화살표함수) { answers = 화살표함수} 이고answers는 화살표함수가 되는게 아닌가요? answers는 함수가 되어 입력된값을 리턴해서 바로 answers에 할당되는건가요?아니면setAnswers에서 함수가 실행되어 리턴된 값이 answers에 할당되는 건가요??
-
미해결[리뉴얼] React로 NodeBird SNS 만들기
시퀄라이즈 메소드 findOrCreate 옵션 에러
현재 에러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 값을 넣어야된다고 나와있더라구요.궁금한게 강좌에서 설명하는 속성값과 지금 제가 검색해서 알게 된 넣어야되는 속성값이 다른이유가 있을까요 ?그리고 결국 결론은, 지금 현재 이 에러를 해결하기 위해서 기본값을 설정해주어야하는 부분인가요 ?
-
해결됨[리뉴얼] React로 NodeBird SNS 만들기
파비콘 안뜨는 이유
안녕하세요 선생님 고생이 많으십니다._app.js 헤드에 코드도 추가했고 front 폴더안에 public 폴더만들어서 파비콘 이미지도 넣어놨는데 왜 파비콘이 지구모양에서 안바뀔까요.. 체크해 볼 경우의 수가 머가 있을지 궁금합니다.. <link rel="shortcut icon" href="/favicon.ico" />
-
미해결[리뉴얼] React로 NodeBird SNS 만들기
'next'은(는) 내부 또는 외부 명령, 실행할 수 있는 프로그램, 또는 배치 파일이 아닙니다. 문제
npm run dev를 하니 'next'은(는) 내부 또는 외부 명령, 실행할 수 있는 프로그램, 또는배치 파일이 아닙니다.라고 뜨는데 어떻게 고치나요
-
미해결[리뉴얼] React로 NodeBird SNS 만들기
서버 들어갈 시 에러
- 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 }저번 폴더구조 문제를 해결하니 이러한 문제가 생겼습니다 어떻게 하나요?
-
미해결[리뉴얼] React로 NodeBird SNS 만들기
pages 또는 앱 디렉토리를 찾을 수 없음 에러
- 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를 했을 때 이런식으로 뜨는데 어떻게 해야 하나요??
-
해결됨[리뉴얼] React로 NodeBird SNS 만들기
useSWR 로직을 hooks로 사용하는 경우
로그인 유지를 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 보다 어려운거 같네요..
-
미해결[리뉴얼] React로 NodeBird SNS 만들기
게시글 작성시 post.id를 읽지 못 하는 문제가 있습니다.
안녕하세요, 제로초님. 문제에 대한 고민을 공유하기 앞서 현재 저는 [해시태그 등록하기]까지 수강한 상태입니다.공유하려는 문제는 제목과 같이 게시글 작성시 post.id를 읽지 못 하여 컴포넌트가 렌더링 되지 않습니다. 그러나 새로고침을 하면 작성한 게시글이 정상적으로 렌더링됩니다. 네트워크와 redux 데브툴즈에는 액션들이 모두 정상적으로 작동하고 있음을 확인하였고, 콘솔을 확인해보니 아래와 같은 오류가 뜹니다.위 오류는 비동기로 데이터를 받아오기 전에 먼저 render가 되서 발생하는 에러임을 검색을 통해 확인하였습니다. 그래서 react suspense를 이용하여 해결해보려 했으나 해결하지 못 했습니다. 혹시 제가 해당 오류의 원인을 제대로 파악하지 못 하고 있는 걸까요? 알려주시면 감사하겠습니다.
-
미해결따라하며 배우는 리액트 A-Z[19버전 반영]
setValue가 함수가 아니라는 오류 발생
TailwindCss 적용하기 실습 중 발생한 문제입니다.setValue is not a function TypeError: setValue is not a function at handleChange (http://localhost:3000/static/js/bundle.js:167:5) at HTMLUnknownElement.callCallback (http://localhost:3000/static/js/bundle.js:11038:18) at Object.invokeGuardedCallbackDev (http://localhost:3000/static/js/bundle.js:11082:20) at invokeGuardedCallback (http://localhost:3000/static/js/bundle.js:11139:35) at invokeGuardedCallbackAndCatchFirstError (http://localhost:3000/static/js/bundle.js:11153:29) at executeDispatch (http://localhost:3000/static/js/bundle.js:15297:7) at processDispatchQueueItemsInOrder (http://localhost:3000/static/js/bundle.js:15323:11) at processDispatchQueue (http://localhost:3000/static/js/bundle.js:15334:9) at dispatchEventsForPlugins (http://localhost:3000/static/js/bundle.js:15343:7) at http://localhost:3000/static/js/bundle.js:15503:16이러한 오류가 발생하였습니다.아래는 코드입니다.지난 시간에서 딱히 바꾼게 없는데 오류의 원인을 잘 모르겠어서 질문드립니다.App.jsimport React, {useState} from "react"; import "./App.css"; import List from "./components/List"; import Form from "./components/Form" export default function App (){ const [todoData, setTodoData] = useState([]); const [value,setValue] = useState(""); const handleSubmit = (e) =>{ e.preventDefault(); // 전송시 페이지 새로고침 방지 함수 let newTodo = { id : Date.now(), title: value, completed : false }; // 새로운 할 일 데이터의 형성 setTodoData(prev => [...prev,newTodo] ) setValue("") // 원래 할 일에 새로운 할 일 데이터의 update 해주는 setState 함수 } const btnStyle = { color: "#fff", border: "none", padding : "5px 9px", borderRadius: "50%", cursor: "pointer", float:"right" } return( <div className="container"> <div className='todoBlock'> <div className="title"> <h1>To do list</h1> </div> <h1 className='text-3xl font-bold underline'>Hello world!</h1> <List todoData= {todoData} setTodoData = {setTodoData}/> <Form handleSubmit = {handleSubmit} value ={value} setValue = {setValue}/> </div> </div> ); }list.jsimport React from 'react' export default function List({todoData , setTodoData}) { const btnStyle = { color: "#fff", border: "none", padding : "5px 9px", borderRadius: "50%", cursor: "pointer", float:"right" } const handleClick = (id) => { let newTodoData = todoData.filter(data => data.id !== id) console.log('newTodoData',newTodoData); setTodoData(newTodoData); } const getStyle = (completed) => { return { padding : "10px", borderBottom: "1px #ccc solid", textDecoration: completed ? 'line-through' : 'none', } } const handleCompleteChange = (id) => { let newTodoData = todoData.map(data => { if (data.id === id){ data.completed = !data.completed; } return data; }); setTodoData(newTodoData); }; return ( <div> {todoData.map((data)=>( <div style = {getStyle(data.completed)} key = {data.id}> <input type = "checkbox" defaultChecked = {false} onChange = {() => handleCompleteChange(data.id)}/> {data.title} <button style = {btnStyle} onClick = {() => handleClick(data.id)}>X</button> </div> ))} </div> ) }form.jsimport React from 'react' export default function Form(handleSubmit,value,setValue) { const handleChange = (e) =>{ setValue(e.target.value); } return ( <form style = {{display:"flex"}} onSubmit = {handleSubmit}> <input type = "text" name = "value" style = {{flex: '10', padding :'5px'}} placeholder = "해야 할 일을 입력하세요." value ={value} onChange ={handleChange} /> <input type = "submit" value = "입력" className="btn" style ={{flex:'1'}} /> </form> ) }
-
미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
initialState에 있는 error가 안나옵니다.
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;
-
미해결Redux vs MobX (둘 다 배우자!)
thunk 미들웨어 잡업 중 논리로직 단계? 질문이 있습니다.
미들웨어가 들어간 이후 궁금한 부분이 있어서 질문 합니다.리덕스에 dispatch를 하면 리듀서가 이를 받고, 기존에 액션함수를 만들었다면, 만든 액션함수를 매칭 시켜서 상태관리를 하잖아요? 그래서 이번 강좌(2-4.redux-thunk)에서도 비동기 로그인을 디스패치 하잖아요?store.dispatch( logIn({ id: 1, name: "goodsosbva", admin: true, })이 이후에 액션에 정의한// async action creator const logIn = (data) => { return (dispatch, getState) => { // async action dispatch(logInRequest()); try { setTimeout(() => { dispatch( logInSuccess({ userId: 1, nickname: "khszzang!", }) ); }, 2000); } catch (e) { dispatch(logInFailure(e)); } }; };여기로 가서 로직을 하잖아요? 이때, 만들어둔 미들웨어가const thunkMiddleware = (store) => (next) => (action) => { if (typeof action === "function") { // 비동기 return action(store.dispatch, store.getState); } return next(action); }; const enhancer = applyMiddleware(firstMiddleware, thunkMiddleware); const store = createStore(reducer, initialState, enhancer); 어떤 순간에 작동하는지가 감이 안와서 질문드립니다.이전 강의에서는 dispatch -> 미들웨어 -> reducer라고 하신거 같은데요.이걸 보고 나름 이해하려고 노력했는데...걸리는 점은지금은 비동기로 만든 액션함수가 하나니까 미들웨어에서 하나로 매칭될 수 있겠는데..?여러개면 어떻게 되는거지라는? 의문입니다.제질문이 좀 난해한거같기도 한데요. 요약하면, 미들웨어가 어디서 동작하는지 모르겠다.비동기 미들웨어 요청을 할때 액션함수를 알맞게 어떻게 요청하는지 몰라서 질문드립니다.
-
미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
tailwindCss 꼭 사용해야하나요?
tailwindCss 꼭 사용해야하나요? 그냥 css로 사용하고 싶은데 tailwindCss를 사용하지 않으면 강의를 듣는데 문제가 생길까요 ?
