게시글
질문&답변
2022.03.09
강의와 다르게 성능측정이 발생하는 현상
저도 똑같이 출력되네요
- 1
- 2
- 247
고민있어요
2022.02.22 00:40
질문있습니다
- 1
- 1
- 326
질문&답변
2020.02.01
질문입니다.
제로초님 강의를 다들었지만 질문하나 해도 될까요?? 현재 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
- 2
- 160
질문&답변
2020.01.20
에러 질문입니다.
0이 선언이 안되있다고 하는데 DB의 데이터가 없어서 출력되는 오류 같습니다. 어떻게 고쳐야할까요.. (사진) 아 해결했습니다. 언제나 성실한 답변 감사합니다.
- 0
- 2
- 134
질문&답변
2020.01.16
동작 오류 질문입니다.
오류의 원인을 찾았습니다 //언팔로우 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쪽에 저렇게 보내면 에러가 출력되더라고요 이유가 뭔가요??
- 0
- 7
- 334
질문&답변
2020.01.15
동작 오류 질문입니다.
이부분 말씀하시는건가요? 해줬습니다. //언팔로우 function unfollowAPI ( userId ) { // 서버에 요청을 보내는 부분 return axios . delete ( `/user/ ${ userId } /follow` , {}, { withCredentials: true , }); } //팔로우 function followAPI ( userId ) { // 서버에 요청을 보내는 부분 return axios . post ( `/user/ ${ userId } /follow` , {}, { withCredentials: true , }); }
- 0
- 7
- 334
질문&답변
2020.01.15
동작 오류 질문입니다.
로그인이 되어있는 상태인데 로그인이 필요합니다라고 출력되네요. (사진) 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 ); } });
- 0
- 7
- 334
질문&답변
2020.01.14
에러 질문입니다.
답변감사합니다 갓로초님
- 0
- 5
- 335
질문&답변
2020.01.14
에러 질문입니다.
undefined요
- 0
- 5
- 335
질문&답변
2020.01.14
에러 질문입니다.
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의 결과입니다. (사진)
- 0
- 5
- 335