강의와 다르게 성능측정이 발생하는 현상

저도 똑같이 출력되네요

질문있습니다

질문입니다.

제로초님 강의를 다들었지만 질문하나 해도 될까요?? 현재 antd를 사용해서 커스텀을 하려고 하는데 https://ant.design/components/form/#components-form-demo-register 이 사이트에 (사진) 이 폼양식을 사용하고 싶은데 Form.Item label="E-mail"> {getFieldDecorator('email', { rules: [ { type: 'email', message: 'The input is not valid E-mail!', }, { required: true, message: 'Please input your E-mail!', }, ], })(Input />)} Form.Item> 즉 getFieldDecorator를 문서를 보고도 사용이 안되고 에러가 출력되는데 이 클래스 기반의 폼양식을 훅스로 사용하고 싶은데 잘안되더라고요 조언좀 얻을 수 있을까요?? 감사합니다

에러 질문입니다.

0이 선언이 안되있다고 하는데 DB의 데이터가 없어서 출력되는 오류 같습니다. 어떻게 고쳐야할까요.. (사진) 아 해결했습니다. 언제나 성실한 답변 감사합니다.

동작 오류 질문입니다.

오류의 원인을 찾았습니다 //언팔로우 function unfollowAPI(userId) { // 서버에 요청을 보내는 부분 return axios.delete(`/user/${userId}/follow`, {}, { withCredentials: true, }); } //팔로우 function followAPI(userId) { // 서버에 요청을 보내는 부분 return axios.post(`/user/${userId}/follow`, {}, { withCredentials: true, }); } 이 부분에서 unfollowAPI의 axios.delete 부분의 {} 이부분이 문제가 있었네요 데이터 보내는게 없어도 빈 배열로 데이터 보내야 되는줄 알았는데 unfollow쪽에 저렇게 보내면 에러가 출력되더라고요 이유가 뭔가요??

동작 오류 질문입니다.

이부분 말씀하시는건가요? 해줬습니다. //언팔로우 function unfollowAPI(userId) { // 서버에 요청을 보내는 부분 return axios.delete(`/user/${userId}/follow`, {}, { withCredentials: true, }); } //팔로우 function followAPI(userId) { // 서버에 요청을 보내는 부분 return axios.post(`/user/${userId}/follow`, {}, { withCredentials: true, }); }

동작 오류 질문입니다.

로그인이 되어있는 상태인데 로그인이 필요합니다라고 출력되네요. (사진) reducers/user.js 의 소스입니다. case FOLLOW_USER_REQUEST: { return { ...state, }; } case FOLLOW_USER_SUCCESS: { return { ...state, me: { ...state.me, Followings: [{ id: action.data }, ...state.me.Followings], }, }; } case FOLLOW_USER_FAILURE: { return { ...state, }; } case UNFOLLOW_USER_REQUEST: { return { ...state, }; } case UNFOLLOW_USER_SUCCESS: { return { ...state, me: { ...state.me, // Followings: [...state.me.Followings].filter(v => v.id !== action.data), Followings: state.me.Followings.filter(v => v.id !== action.data), }, }; } case UNFOLLOW_USER_FAILURE: { return { ...state, }; } sagas/user.js의 소스입니다. //============================================= //팔로우 function followAPI(userId) { // 서버에 요청을 보내는 부분 return axios.post(`/user/${userId}/follow`, {}, { withCredentials: true, }); } function* follow(action) { try { // yield call(loadUserAPI); const result = yield call(followAPI, action.data); yield put({ // put은 dispatch 동일 type: FOLLOW_USER_SUCCESS, data: result.data, }); } catch (e) { // loginAPI 실패 console.error(e); yield put({ type: FOLLOW_USER_FAILURE, error: e, }); } } function* watchFollow() { yield takeEvery(FOLLOW_USER_REQUEST, follow); } //============================================= //언팔로우 function unfollowAPI(userId) { // 서버에 요청을 보내는 부분 return axios.delete(`/user/${userId}/follow`, {}, { withCredentials: true, }); } function* unfollow(action) { try { // yield call(loadUserAPI); const result = yield call(unfollowAPI, action.data); yield put({ // put은 dispatch 동일 type: UNFOLLOW_USER_SUCCESS, data: result.data, }); } catch (e) { // loginAPI 실패 console.error(e); yield put({ type: UNFOLLOW_USER_FAILURE, error: e, }); } } function* watchUnfollow() { yield takeEvery(UNFOLLOW_USER_REQUEST, unfollow); } back/routes/user.js의 소스입니다. router.post('/:id/follow', isLoggedIn, async (req, res, next) => { try { const me = await db.User.findOne({ where: { id: req.user.id }, }); await me.addFollowing(req.params.id); res.send(req.params.id); } catch (e) { console.error(e); next(e); } }); router.delete('/:id/follow', isLoggedIn, async (req, res, next) => { try { const me = await db.User.findOne({ where: { id: req.user.id }, }); await me.removeFollowing(req.params.id); res.send(req.params.id); } catch (e) { console.error(e); next(e); } });

에러 질문입니다.

답변감사합니다 갓로초님

에러 질문입니다.

undefined요

에러 질문입니다.

components/PostForm.js import React, { useCallback, useState, useEffect, useRef } from 'react'; import { Form, Input, Button } from 'antd'; import { useSelector, useDispatch } from 'react-redux'; import { ADD_POST_REQUEST, UPLOAD_IMAGES_REQUEST } from '../reducers/post'; const PostForm = () => { const dispatch = useDispatch(); const [text, setText] = useState(''); const { imagePaths, isAddingPost, postAdded } = useSelector(state => state.post); const imageInput = useRef(); useEffect(() => { if (postAdded) { setText(''); } }, [postAdded]); const onSubmitForm = useCallback((e) => { e.preventDefault(); //게시글 작성해야 글을 저장할 수 있게 해줌. if(!text || !text.trim()) { alert('게시글을 작성하세요.'); } dispatch({ type: ADD_POST_REQUEST, data: { content: text, }, }); }, [text]); const onChangeText = useCallback((e) => { setText(e.target.value); }, []); const onChangeImages = useCallback((e) => { console.log(e.target.files); const imageFormData = new FormData(); [].forEach.call(e.target.files, (f) => { imageFormData.append('image', f); }); dispatch({ type: UPLOAD_IMAGES_REQUEST, data: imageFormData, }); }, []); const onClickImageUpload = useCallback(() => { imageInput.current.click(); }, [imageInput.current]); return ( Form style={{ margin: '10px 0 20px' }} encType="multipart/form-data" onSubmit={onSubmitForm}> Input.TextArea maxLength={140} placeholder="어떤 신기한 일이 있었나요?" value={text} onChange={onChangeText} /> div> input type="file" multiple hidden ref={imageInput} onChange={onChangeImages} /> Button onClick={onClickImageUpload}>이미지 업로드Button> Button type="primary" style={{ float: 'right' }} htmlType="submit" loading={isAddingPost}>짹짹Button> div> div> {imagePaths.map(v => ( div key={v} style={{ display: 'inline-block' }}> img src={`http://localhost:3065/${v}`} style={{ width: '200px' }} alt={v} /> div> Button>제거Button> div> div> ))} div> Form> ); }; export default PostForm; routes/post.js //파일 업로드 const upload = multer({ storage: multer.diskStorage({ destination(req, file, done) { //uploads 폴더에 저장 done(null, 'uploads'); }, filename(req, file, done) { const ext = path.extname(file.originalname); const basename = path.basename(file.originalname, ext); //제로초.png, ext===png, basename===제로초 cb(null, basename + new Date().valueOf() + ext); //첫번째 인자: 서버 에러, 두번째 인자: 성공시 }, }), //파일 용량 제한 limits: { fileSize: 20*1024*1024 }, }); //array('image')의 image는 PostForm.js의 imageFormData.append('image')의 이름임. router.post('/images', upload.array('image'), (req, res) => { console.log(req.files); res.json(req.files.map(v => v.filename)); }); sagas/post.js function uploadImagesAPI(formData) { return axios.post(`/post/images`, FormData, { withCredentials: true, }); } function* uploadImages(action) { try { const result = yield call(uploadImagesAPI, action.data); yield put({ type: UPLOAD_IMAGES_SUCCESS, data: result.data, }); } catch (e) { console.error(e); yield put({ type: UPLOAD_IMAGES_FAILURE, error: e, }); } } function* watchUploadImages() { yield takeLatest(UPLOAD_IMAGES_REQUEST, uploadImages); } reducers/post.js case UPLOAD_IMAGES_REQUEST: { return { ...state, }; } case UPLOAD_IMAGES_SUCCESS: { return { ...state, imagePaths: [...state.imagePaths, ...action.data], }; } case UPLOAD_IMAGES_FAILURE: { return { ...state, }; } 해당 파일 첨부합니다. 이렇게 해줬는데도 에러가 나네요. 이미지 업로드시 TypeError: Cannot read property 'map' of undefined 이러한 에러가 출력됩니다. 혹시 몰라 하나 더 첨부합니다. file의 console.log의 결과입니다. (사진)