173만명의 커뮤니티!! 함께 토론해봐요.
미해결
따라하며 배우는 리액트 A-Z[19버전 반영]
src/components/Row.js Line 14:7: React Hook useEffect has a missing dependency: 'fetchMovieData'. Either include it or remove the dependency array react-hooks/exhaustive-deps 쌤 그리고 fetchMovieData 가 있습니다. 그것을 포함하거나 종속성 배열 React-hooks/exhausitve deps를 제거하라는게 무슨말인가요??
해결됨
일잘하는 마케터, MD에게 꼭 필요한 파이썬 데이터 분석
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 선생님 안녕하세요! 강의를 들으며 열심히 실습중인데 에러가 자꾸떠서요 ㅠㅠ 맨처음에 if 문 넣기전에는 실행이 되었었는데 어찌된일인지 if문을 넣고 난 다음부터 자꾸 에러가 납니다 ㅠㅠ if문 넣기 전에 상품펼치기 지우기 전 자료는 new 상품 펼치기가 없었어요.. 혹시 그것때문은 아닐까요 ㅠㅠ 왕왕 초보라 어렵네요 답변부탁드려요 감사합니다!
해결됨
[리뉴얼] Node.js 교과서 - 기본부터 프로젝트 실습까지
안녕하세요. 강사님. 현재 learn-sequelize MySQL 부분을 실습하고 있습니다. 그런데 실습 과정중 이름(UNIQUE INDEX ) 을 중복되게 생성하여 일부러 오류를 일으켰으나 error.html 페이지가 호출 되지 않고있습니다. 사용자 생성 router 부분은 router.route('/') .get(async (req, res, next) => { try { const users = await User.findAll(); res.json(users); } catch(err) { console.error(err); next(err); } }) .post(async (req, res, next) => { try { const user = await User.create({ name : req.body.name , age : req.body.age, married : req.body.married }); console.log(user); res.status(201).json(user); // status 201 작성됨(생성됨) 뜻 } catch(err) { console.error(err); next(err); // <== next(err) 로 전달하나 error.html을 호출하지 못함 } }); 입니다. app.use((err, req, res, next) => { res.locals.message = err.message; res.locals.error = process.env.NODE_ENV !== 'production' ? err : {}; err.status = err?.status ?? 500; res.status(err.status); console.log('test'); //<== 로그는 찍힘 res.render('error');//error.html render안됨 }); res.render('error') 가 되지 않고 있습니다. 라우터 경로 테스트 결과 app.use((req, res, next) => { const error = new Error(`${req.method} ${req.url} 라우터가 없습니다.`); error.status = 404; next(error); }); 라우터 경로 오류시에는 정상적으로 호출하는 것으로 보아 문제는 없는 것 같은데 원인을 찾지 못하고 있습니다. 잘 부탁드립니다. -- 에러 로그는 다음과 같습니다. -- -- users 테이블에 중복된 이름을 입력 하였을 때 오류 내용으로 500 에러로 보아 error.html 호출이 되어야 하지만 호출이 되지 않고 있습니다. Executing (default): INSERT INTO users (`id`,`name`,`age`,`married`,`created_at`) VALUES (DEFAULT,?,?,?,?); Error at Query.run (D:\nodeExer\node_exer1\learn-sequelize\node_modules\sequelize\lib\dialects\mysql\query.js:52:25) at D:\nodeExer\node_exer1\learn-sequelize\node_modules\sequelize\lib\sequelize.js:314:28 at processTicksAndRejections (internal/process/task_queues.js:95:5) at async MySQLQueryInterface.insert (D:\nodeExer\node_exer1\learn-sequelize\node_modules\sequelize\lib\dialects\abstract\query-interface.js:308:21) at async User.save (D:\nodeExer\node_exer1\learn-sequelize\node_modules\sequelize\lib\model.js:2432:35) at async Function.create (D:\nodeExer\node_exer1\learn-sequelize\node_modules\sequelize\lib\model.js:1344:12) at async D:\nodeExer\node_exer1\learn-sequelize\routes\users.js:22:26 { name: 'SequelizeUniqueConstraintError', errors: [ ValidationErrorItem { message: 'name_UNIQUE must be unique', type: 'unique violation', path: 'name_UNIQUE', value: 'aa', origin: 'DB', instance: [User], validatorKey: 'not_unique', validatorName: null, validatorArgs: [] } ], parent: Error: Duplicate entry 'aa' for key ' users.name _UNIQUE' at Packet.asError (D:\nodeExer\node_exer1\learn-sequelize\node_modules\mysql2\lib\packets\packet.js:728:17) at Execute.execute (D:\nodeExer\node_exer1\learn-sequelize\node_modules\mysql2\lib\commands\command.js:29:26) at Connection.handlePacket (D:\nodeExer\node_exer1\learn-sequelize\node_modules\mysql2\lib\connection.js:456:32) at PacketParser.onPacket (D:\nodeExer\node_exer1\learn-sequelize\node_modules\mysql2\lib\connection.js:85:12) at PacketParser.executeStart (D:\nodeExer\node_exer1\learn-sequelize\node_modules\mysql2\lib\packet_parser.js:75:16) at Socket.<anonymous> (D:\nodeExer\node_exer1\learn-sequelize\node_modules\mysql2\lib\connection.js:92:25) at Socket.emit (events.js:400:28) at addChunk (internal/streams/readable.js:293:12) at readableAddChunk (internal/streams/readable.js:267:9) at Socket.Readable.push (internal/streams/readable.js:206:10) { code: 'ER_DUP_ENTRY', errno: 1062, sqlState: '23000', sqlMessage: "Duplicate entry 'aa' for key ' users.name _UNIQUE'", sql: 'INSERT INTO users (`id`,`name`,`age`,`married`,`created_at`) VALUES (DEFAULT,?,?,?,?);', parameters: [ 'aa', '11', false, '2022-12-14 17:38:07' ] }, original: Error: Duplicate entry 'aa' for key ' users.name _UNIQUE' at Packet.asError (D:\nodeExer\node_exer1\learn-sequelize\node_modules\mysql2\lib\packets\packet.js:728:17) at Execute.execute (D:\nodeExer\node_exer1\learn-sequelize\node_modules\mysql2\lib\commands\command.js:29:26) at Connection.handlePacket (D:\nodeExer\node_exer1\learn-sequelize\node_modules\mysql2\lib\connection.js:456:32) at PacketParser.onPacket (D:\nodeExer\node_exer1\learn-sequelize\node_modules\mysql2\lib\connection.js:85:12) at PacketParser.executeStart (D:\nodeExer\node_exer1\learn-sequelize\node_modules\mysql2\lib\packet_parser.js:75:16) at Socket.<anonymous> (D:\nodeExer\node_exer1\learn-sequelize\node_modules\mysql2\lib\connection.js:92:25) at Socket.emit (events.js:400:28) at addChunk (internal/streams/readable.js:293:12) at readableAddChunk (internal/streams/readable.js:267:9) at Socket.Readable.push (internal/streams/readable.js:206:10) { code: 'ER_DUP_ENTRY', errno: 1062, sqlState: '23000', sqlMessage: "Duplicate entry 'aa' for key ' users.name _UNIQUE'", sql: 'INSERT INTO users (`id`,`name`,`age`,`married`,`created_at`) VALUES (DEFAULT,?,?,?,?);', parameters: [ 'aa', '11', false, '2022-12-14 17:38:07' ] }, fields: { name_UNIQUE: 'aa' }, sql: 'INSERT INTO users (`id`,`name`,`age`,`married`,`created_at`) VALUES (DEFAULT,?,?,?,?);' } POST /users 500 52.768 ms - 785
미해결
처음 만난 리액트(React)
이곳에서 코드를 똑같이 따라했는데 아래와 같은 오류가 뜨네요 ㅜㅜ 에러가 왜 나는지 모르겠습니다.
미해결
처음 만난 리액트(React)
에러가 나서요ㅠ
미해결
따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
todoapp 클라이언트(리액트), 서버(몽구스) 로 작업중입니다. (글읽기, 리스트보여주기, 삭제 까지는 구현을 했는대요. 글리스트에서 특정리스트를 클릭시 해당상세페이지로 넘어가는 방법이 잘안됩니다. 구체적으로 어떻게 해야되는지 꼭좀 알려주세요. -----------리액트-------------------------- import React, { useEffect } from 'react' import axios from 'axios' import { useParams } from 'react-router-dom' const ShowPage = () => { const {id} = useParams() const getPost = (id) => { axios.get(`users/board/${id}`).then((res)=>{ console.log(res.data.user); }) } useEffect(()=>{ getPost(id); },[]) return ( <div>ShowPage</div> ) } -----------server-------------------------- userRouter.get('/board/:userId',async(req,res)=>{ try{ const {userId} = req.params; const user = await User.findOne({id:userId}); return res.status(200).json({success:true, user}) }catch(err){ console.log(err); return res.status(500).send({err: err.message}) } })
해결됨
[리뉴얼] React로 NodeBird SNS 만들기
id와 nickname에 마우스를 올리면 useState를 이용한 password(string), passwordCheck(boolean)과 다르게, 함수라고 나오는데 이렇게 되어도 괜찮은건가요?? 그리고 이것과 관련된 오류인지는 모르겠는데, 약관동의 버튼을 누르고 아이디와 비밀번호를 수정해도 값이 변경되지않습니다. 강의랑 똑같이 작성한것같은데 어디가 잘못된건지 모르겠네요 ㅠㅠ .. 어떻게 해결해야 할까요?? ```signup.js import React, { useCallback, useState } from 'react'; import AppLayout from '../components/AppLayout'; import Head from 'next/head'; import styled from 'styled-components'; import { Button, Checkbox, Form, Input } from 'antd'; import useInput from '../components/hooks/useInput'; const ErrorMessage = styled.div` color: red; `; const Signup = () => { const [id, onChangeId] = useInput(''); const [nickname, onChangeNickname] = useInput(''); const [password, onChangePassword] = useInput(''); const [passwordCheck, setPasswordCheck] = useState(''); const [passwordError, setPasswordError] = useState(false); const onChangePasswordCheck = useCallback( (e) => { setPasswordCheck(e.target.value); setPasswordError(e.target.value !== password); }, [password] ); console.log(id); const [term, setTerm] = useState(false); const [termError, setTermError] = useState(false); const onChangeTerm = useCallback((e) => { setTerm(e.target.checked); setTermError(false); }, []); const onSubmit = useCallback(() => { if (password !== passwordCheck) { return setPasswordError(true); } if (!term) { return setTermError(true); } console.log(id, nickname, password); }, [password, passwordCheck, term]); return ( <> <AppLayout> <Head> <title>회원가입 | NodeBird</title> </Head> <Form onFinish={onSubmit}> <div> <label htmlFor="user-id">아이디</label> <br /> <Input name="user-id" value={id} required onChange={onChangeId} /> </div> <div> <label htmlFor="user-nick">닉네임</label> <br /> <Input name="user-nick" value={nickname} required onChange={onChangeNickname} /> </div> <div> <label htmlFor="user-password">패스워드</label> <br /> <Input name="user-password" value={password} required onChange={onChangePassword} /> </div> <div> <label htmlFor="user-password-check">비밀번호체크</label> <br /> <Input name="user-password-check" value={passwordCheck} required onChange={onChangePasswordCheck} /> {passwordError && ( <ErrorMessage>비밀번호가 일치하지 않습니다</ErrorMessage> )} </div> <div> <Checkbox name="user-term" checked={term} onChange={onChangeTerm}> 약관에 동의합니다. </Checkbox> {termError && <ErrorMessage>약관에 동의하지 않습니다</ErrorMessage>} </div> <div style={{ marginTop: '10px' }}> <Button type="primary" htmlType="submit"> 가입하기 </Button> </div> </Form> </AppLayout> </> ); }; export default Signup; import { useState, useCallback } from 'react'; export default (initialValue = null) => { const [value, setValue] = useState(initialValue); const handler = useCallback((e) => { setValue(e.target.value); }, []); return [value, handler]; };
해결됨
[리뉴얼] Node.js 교과서 - 기본부터 프로젝트 실습까지
multer 로 한글 이미지를 올렸습니다. 한글 이미지 명은 각각 '꽃1.jpg', '꽃2.jpg' 입니다. 아래 req.files 로그에서보시면 한글명이 깨져서 나오는 데요. 한글명이 깨지지 않도록 할 수 있는 방법이 없을까요? req.files [Object: null prototype] { image1: [ { fieldname: 'image1', originalname: 'ê½\x831.jpg', encoding: '7bit', mimetype: 'image/jpeg', destination: 'uploads/', filename: 'ê½\x8311670868094390.jpg', path: 'uploads\\ê½\x8311670868094390.jpg', size: 77675 } ], image2: [ { fieldname: 'image2', originalname: 'ê½\x832.jpg', encoding: '7bit', mimetype: 'image/jpeg', destination: 'uploads/', filename: 'ê½\x8321670868094392.jpg', path: 'uploads\\ê½\x8321670868094392.jpg', size: 73716 } ] }
미해결
프론트엔드 개발자를 위한, 실전 웹 성능 최적화(feat. React) - Part. 1
안녕하세요, 동균님! 😁 강의 자막은 제공되지 않는걸까요!?
미해결
따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)
선생님 포스트 나 댓글 삭제기능은 어떤식으로 해야될까요 따로 강의는 없겟죠? ㅠ
해결됨
프론트엔드 개발자를 위한, 실전 웹 성능 최적화(feat. React) - Part. 2
이미지 지연 로딩에서 picture tag를 사용하여 webp가 지원되지 않는 브라우저인 경우 jpg로 로딩되도록 previousSibling을 사용하셨는데 picture tag 안에 source tag가 두 개 이상인 경우에는 어떻게 해야하나요? 반복문을 돌려야 하는 것인가요?
해결됨
풀스택 리액트 라이브코딩 - 간단한 쇼핑몰 만들기
[plugin:vite:react-babel] D:\react_01\shopping-mall\src\routes.tsx: Unterminated string constant. (14:14) 17 | } D:/react_01/shopping-mall/src/routes.tsx:14:14 12 | element: <GlobalLayout />, 13 | children: [ 14 | { path: 'D:\', element: <DynamicIndex />, index: true}, | ^ 15 | { path: 'D:\products\:id', element: <DynamicId />, }, 16 | ] at instantiate (D:\react_01\shopping-mall\node_modules\@babel\parser\lib\index.js:67:32) at constructor (D:\react_01\shopping-mall\node_modules\@babel\parser\lib\index.js:364:12) at TypeScriptParserMixin.raise (D:\react_01\shopping-mall\node_modules\@babel\parser\lib\index.js:3365:19) at Object.unterminated (D:\react_01\shopping-mall\node_modules\@babel\parser\lib\index.js:2333:20) at readStringContents (D:\react_01\shopping-mall\node_modules\@babel\parser\lib\index.js:2065:16) at TypeScriptParserMixin.readString (D:\react_01\shopping-mall\node_modules\@babel\parser\lib\index.js:3244:9) at TypeScriptParserMixin.getTokenFromCode (D:\react_01\shopping-mall\node_modules\@babel\parser\lib\index.js:2964:14) at TypeScriptParserMixin.getTokenFromCode (D:\react_01\shopping-mall\node_modules\@babel\parser\lib\index.js:7267:18) at TypeScriptParserMixin.getTokenFromCode (D:\react_01\shopping-mall\node_modules\@babel\parser\lib\index.js:9752:18) at TypeScriptParserMixin.nextToken (D:\react_01\shopping-mall\node_modules\@babel\parser\lib\index.js:2451:10) at TypeScriptParserMixin.next (D:\react_01\shopping-mall\node_modules\@babel\parser\lib\index.js:2366:10) at TypeScriptParserMixin.eat (D:\react_01\shopping-mall\node_modules\@babel\parser\lib\index.js:2371:12) at TypeScriptParserMixin.parseObjectProperty (D:\react_01\shopping-mall\node_modules\@babel\parser\lib\index.js:12126:14) at TypeScriptParserMixin.parseObjPropValue (D:\react_01\shopping-mall\node_modules\@babel\parser\lib\index.js:12154:100) at TypeScriptParserMixin.parseObjPropValue (D:\react_01\shopping-mall\node_modules\@babel\parser\lib\index.js:9482:18) at TypeScriptParserMixin.parsePropertyDefinition (D:\react_01\shopping-mall\node_modules\@babel\parser\lib\index.js:12083:17) at TypeScriptParserMixin.parseObjectLike (D:\react_01\shopping-mall\node_modules\@babel\parser\lib\index.js:11993:21) at TypeScriptParserMixin.parseExprAtom (D:\react_01\shopping-mall\node_modules\@babel\parser\lib\index.js:11464:23) at TypeScriptParserMixin.parseExprAtom (D:\react_01\shopping-mall\node_modules\@babel\parser\lib\index.js:7239:20) at TypeScriptParserMixin.parseExprSubscripts (D:\react_01\shopping-mall\node_modules\@babel\parser\lib\index.js:11171:23) at TypeScriptParserMixin.parseUpdate (D:\react_01\shopping-mall\node_modules\@babel\parser\lib\index.js:11153:21) at TypeScriptParserMixin.parseMaybeUnary (D:\react_01\shopping-mall\node_modules\@babel\parser\lib\index.js:11127:23) at TypeScriptParserMixin.parseMaybeUnary (D:\react_01\shopping-mall\node_modules\@babel\parser\lib\index.js:9590:20) at TypeScriptParserMixin.parseMaybeUnaryOrPrivate (D:\react_01\shopping-mall\node_modules\@babel\parser\lib\index.js:10956:61) at TypeScriptParserMixin.parseExprOps (D:\react_01\shopping-mall\node_modules\@babel\parser\lib\index.js:10962:23) at TypeScriptParserMixin.parseMaybeConditional (D:\react_01\shopping-mall\node_modules\@babel\parser\lib\index.js:10937:23) at TypeScriptParserMixin.parseMaybeAssign (D:\react_01\shopping-mall\node_modules\@babel\parser\lib\index.js:10895:21) at TypeScriptParserMixin.parseMaybeAssign (D:\react_01\shopping-mall\node_modules\@babel\parser\lib\index.js:9529:20) at D:\react_01\shopping-mall\node_modules\@babel\parser\lib\index.js:10863:39 at TypeScriptParserMixin.allowInAnd (D:\react_01\shopping-mall\node_modules\@babel\parser\lib\index.js:12640:12) at TypeScriptParserMixin.parseMaybeAssignAllowIn (D:\react_01\shopping-mall\node_modules\@babel\parser\lib\index.js:10863:17) at TypeScriptParserMixin.parseExprListItem (D:\react_01\shopping-mall\node_modules\@babel\parser\lib\index.js:12380:18) at TypeScriptParserMixin.parseExprList (D:\react_01\shopping-mall\node_modules\@babel\parser\lib\index.js:12352:22) at TypeScriptParserMixin.parseArrayLike (D:\react_01\shopping-mall\node_modules\@babel\parser\lib\index.js:12240:26) at TypeScriptParserMixin.parseArrayLike (D:\react_01\shopping-mall\node_modules\@babel\parser\lib\index.js:8976:24) at TypeScriptParserMixin.parseExprAtom (D:\react_01\shopping-mall\node_modules\@babel\parser\lib\index.js:11455:23) at TypeScriptParserMixin.parseExprAtom (D:\react_01\shopping-mall\node_modules\@babel\parser\lib\index.js:7239:20) at TypeScriptParserMixin.parseExprSubscripts (D:\react_01\shopping-mall\node_modules\@babel\parser\lib\index.js:11171:23) at TypeScriptParserMixin.parseUpdate (D:\react_01\shopping-mall\node_modules\@babel\parser\lib\index.js:11153:21) at TypeScriptParserMixin.parseMaybeUnary (D:\react_01\shopping-mall\node_modules\@babel\parser\lib\index.js:11127:23) at TypeScriptParserMixin.parseMaybeUnary (D:\react_01\shopping-mall\node_modules\@babel\parser\lib\index.js:9590:20) at TypeScriptParserMixin.parseMaybeUnaryOrPrivate (D:\react_01\shopping-mall\node_modules\@babel\parser\lib\index.js:10956:61) at TypeScriptParserMixin.parseExprOps (D:\react_01\shopping-mall\node_modules\@babel\parser\lib\index.js:10962:23) at TypeScriptParserMixin.parseMaybeConditional (D:\react_01\shopping-mall\node_modules\@babel\parser\lib\index.js:10937:23) at TypeScriptParserMixin.parseMaybeAssign (D:\react_01\shopping-mall\node_modules\@babel\parser\lib\index.js:10895:21) at TypeScriptParserMixin.parseMaybeAssign (D:\react_01\shopping-mall\node_modules\@babel\parser\lib\index.js:9529:20) at D:\react_01\shopping-mall\node_modules\@babel\parser\lib\index.js:10863:39 at TypeScriptParserMixin.allowInAnd (D:\react_01\shopping-mall\node_modules\@babel\parser\lib\index.js:12640:12) at TypeScriptParserMixin.parseMaybeAssignAllowIn (D:\react_01\shopping-mall\node_modules\@babel\parser\lib\index.js:10863:17) at TypeScriptParserMixin.parseObjectProperty (D:\react_01\shopping-mall\node_modules\@babel\parser\lib\index.j 라고 코드 에러낫구요 이런 상황입니다 1화 앱입니다까지 햇고 그뒤로 product 페이지 만드는데서안되네요 오늘 구매햇구요 토씨 하나 안틀리고 클라이언트 환경세팅 9:02까지왔습니다 에러로 안됩니다/ 반품해도될까요? window 환경입니다 지금강의하신것은 mac 으로하시는것으로보입니다만 제환경에서는 안될것같군요 원활한 해결책을 보고 환불을 결정하겟습니다
미해결
데이터 분석을 위한 파이썬: 입문부터 꿀팁까지
set_name 함수가 사라지고 set_cat함수가 남는 이유는 후에 class Cat을 정의하는 부분에 set_name에 대한 내용이 없기 떄문일까요? 이전에 정의했던 부분이 새로고침처럼 날아가는 건지, 추가되는건지 헷갈립니다 ㅠㅠ
해결됨
[리뉴얼] React로 NodeBird SNS 만들기
짹짹 버튼을 눌렀을 때, 처음 클릭 시에만 해당 Input이 초기화 되고, 그 뒤로는 초기화 되지 않는 오류입니다. useEffect가 addPostDone 이 바뀔 때 마다 작동이 되어야 하는데, Redux Devtool에서는 분명 변경이 되었음에도 , PostForm에서 변경이 없는걸로 감지가 됩니다. PostAction export const ADD_POST_REQUEST = 'ADD_POST_REQUEST'; export const ADD_POST_SUCCESS = 'ADD_POST_SUCCESS'; export const ADD_POST_FAILURE = 'ADD_POST_FAILURE'; const addPostRequestAction = (data) => ({ type: ADD_POST_REQUEST, data, }); export { addPostRequestAction, }; post.js (reducer) import shortId from 'shortid'; const dummyPost = (data) => ({ id: shortId.generate(), content: data, User: { id: 1, nickname: 'admin', }, Images: [], Comments: [], }); const reducer = (state = initialState, action) => { switch (action.type) { case ADD_POST_REQUEST: console.log('ADD_POST_REDUCER'); return { ...state, addPostLoading: true, addPostDone: false, addPostError: null, }; case ADD_POST_SUCCESS: return { ...state, mainPosts: [dummyPost(action.data), ...state.mainPosts], addPostLoading: false, addPostDone: true, }; case ADD_POST_FAILURE: return { ...state, addPostLoading: false, addPostError: action.error, }; default: return state; } }; ==Redux-Saga=== index.js(rootSaga) import { all, fork } from 'redux-saga/effects'; import postSaga from './post'; import userSaga from './user'; export default function* rootSaga() { yield all([ fork(postSaga), fork(userSaga), ]); } postSaga import { all, fork, takeLatest, put, delay } from 'redux-saga/effects'; import axios from 'axios'; import { ADD_POST_REQUEST, ADD_POST_SUCCESS, ADD_POST_FAILURE, } from '../reducers/Actions/post'; function* addPostRequest(action) { try { // const result = yield call(addPostAPI,action.data) delay(1000); yield put({ type: ADD_POST_SUCCESS, data: action.data, }); } catch (err) { yield put({ type: ADD_POST_FAILURE, error: err.response.data, }); } } function* watchAddPost() { yield takeLatest(ADD_POST_REQUEST, addPostRequest); } export default function* postSaga() { yield all([ fork(watchAddPost), ]); } ==Component== PostForm.js import { useCallback, useRef, useEffect, useState } from 'react'; import { Form, Input, Button } from 'antd'; import { useDispatch, useSelector } from 'react-redux'; import { addPostRequestAction } from '../reducers/Actions/post'; const PostForm = () => { const { imagePaths, addPostLoading, addPostDone } = useSelector((state) => state.post); const [text, setText] = useState(''); const dispatch = useDispatch(); useEffect(() => { if (addPostDone) { setText(''); } }, [addPostDone]); const onSubmit = useCallback(() => { dispatch(addPostRequestAction(text)); }, [text]); const onChangeText = useCallback((e) => setText(e.target.value), []); return ( <Form style={{ margin: '10px 0 20px' }} encType="multipart/form-data" onFinish={onSubmit}> <Input.TextArea value={text} onChange={onChangeText} maxLength={140} placeholder="어떤 신기한 일이 있었나요?" /> <div> {imagePaths.map((v) => ( <div key={v} style={{ display: 'inline-block' }}> <img src={v} style={{ width: '200px' }} alt={v} /> <div> <Button>제거</Button> </div> </div> ))} </div> </Form> ); }; export default PostForm;
미해결
장고 설계철학으로 시작하는 파이썬 장고 입문
안녕하세요 '프로젝트 생성 및 파이참에서 이쁘게 개발하기' 강좌 11:50 경에서 파이참 Configuration 설정 후 디버그 메뉴를 클릭해서 장고 서버를 띄우는 부분이 있는데요 제 환경에서 따라해보니 아래 에러가 뜹니다. 인코딩을 Settings > File Encodings > Project Encoding을 UTF-8로도 바꿔봤는데 동일한데 뭐가 잘못된걸까요? Fatal Python error: init_stdio_encoding: failed to get the Python codec name of the stdio encoding Python runtime state: core initialized LookupError: unknown encoding: x-windows-949 Current thread 0x000047e0 (most recent call first): <no Python frame>
미해결
따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)
안녕하세요 선생님 post 타이틀을 한글로 쓰면 경로이동이 안됩니다 영어로 쓰면 라우터대로 경로가 이동하는데 한글로 쓰면 이동이 안되네요... 왜이럴까요 한글타이틀 도 영어타이틀 처럼 잘 이동될순 없을까요
미해결
따라하며 배우는 노드, 리액트 시리즈 - 기본 강의
setupProxy.js 파일 내용을 아래처럼 바꾸시면 됩니다. 공식 문서 보니 설정 문법이 바뀌었나봐요. https://create-react-app.dev/docs/proxying-api-requests-in-development/#configuring-the-proxy-manually const { createProxyMiddleware } = require("http-proxy-middleware"); module.exports = function (app) { app.use( "/api", createProxyMiddleware({ target: "http://localhost:5000", changeOrigin: true, }) ); };
미해결
Slack 클론 코딩[실시간 채팅 with React]
회원가입을 눌렀으나 회원가입이 안되고 요청이 가지 않는 것 같습니다. 에러메세지를 긁어서 확인 해보았으나 어디가 잘못된건지 모르겠고, 서버 부분의 콘솔을 확인해 보았으나 에러메세지가 나오지 않았습니다. 에러 메세지 이미지와 본문입니다. react_devtools_backend.js:4012 Error: Minified React error #31; visit https://reactjs.org/docs/error-decoder.html?invariant=31&args[]=object%20with%20keys%20%7Bsuccess%2C%20code%2C%20data%7D for the full message or use the non-minified dev environment for full errors and additional helpful warnings. at ka (react-dom.production.min.js:140:47) at react-dom.production.min.js:150:265 at Ml (react-dom.production.min.js:176:171) at Bi (react-dom.production.min.js:271:134) at Eu (react-dom.production.min.js:250:347) at wu (react-dom.production.min.js:250:278) at bu (react-dom.production.min.js:250:138) at pu (react-dom.production.min.js:243:163) at react-dom.production.min.js:123:115 at t.unstable_runWithPriority (scheduler.production.min.js:18:34 혹시나 ENV를 까먹었을까봐 다시 확인했지만 있었고, 아래는 서버쪽 터미널 이미지입니다. 감사합니다.
미해결
따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)
배포하기 전에 커뮤니티, 포스트, comment 삭제하고 다시작성하고 싶은데 어떻게해야될까요?
미해결
따라하며 배우는 리액트 A-Z[19버전 반영]
import React, {useState} from "react"; import "./App.css"; export default function App () { const [todoData, setTodoData] = useState([ { id:"1", title:"공부하기", completed: false, }, { id:"2", title:"청소하기", completed: false, } ]); const [Value,setValue] = useState(""); // 첫번째 인수는 변수 두번재 인수는 state를 정하는 변수 const btnStyle ={ color: "#fff", border: "none", padding: "5px 9px", borderRadius: "50%", cursor: "pointer", float:"right", }; const getStyle = (completed) => { return{ padding:"10px", borderBottom:"1px #ccc dotted", textDecoration: completed ? 'line-through' : "none", }; }; const handleClick = (id) =>{ let newTodoData = todoData.filter(data => data.id !== id) console.log("newTodoData",newTodoData) setTodoData(newTodoData); }; const handleChange = (event) => { console.log("event",event.target.Value) setTodoData(event.target.Value); }; const handleSubmit = (event) =>{ console.log("event",event) event.preventDefault(); // reload를 막아줌 // 새로운 할일 데이터 let newTodo ={ id: Date.now(), title : Value, completed: false, }; // 원래 있던 할 일에 새로운 할일을 더해주기 setTodoData(prev => [...prev,newTodo]); setValue(""); }; const handleCompleteChange = (id) => { console.log("todoData",todoData) let newTodoData = todoData.map((data) =>{ if(data.id === id){ data.completed = !data.completed; } return data; }); setTodoData(newTodoData) }; return ( <div className="container"> <div className="todoBlock"> <div className="title"> <h1>할일 목록</h1> </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> ))} <form style={{display:'flex'}} onSubmit={handleSubmit}> <input type="text" name="value" style={{flex:'10', pedding:'50'}} placeholder="해야 할 일을 입력하세요." value={Value} onChange={handleChange}/> <input type="submit" value="입력" className="btn" style={{flex:'1'}} /> </form> </div> </div> ); } 아래 코드에서 form에 어떠한 글자를 입력하면 Console 창에 왜 Uncaught TypeError: Cannot read properties of undefined (reading 'map') 에러가 발생하는지 도저히 모르겠습니다. 혹시 아시는분 답변 부탁드립니다. 감사합니다.
