게시글 작성 오류입니다!

오랜시간 도와주셔서 감사합니다! 덕분에 좋은 공부가 됬습니다!

게시글 작성 오류입니다!

제로초님 import부분에서 const [text, setText, onChangeText] = useInput(''); const [text, onChangeText, setText] = useInput(''); 위 부분을 아래처럼 바꾸었더니 기존에 콘솔에서 아무것도 찍히지 않았던 콘솔이 아래의 그림처럼 나오고 이제 정상적으로 타이핑이 가능합니다! 혹시 이유를 알 수 있을까요? (사진)

게시글 작성 오류입니다!

useInput.js import { useState, useCallback } from 'react'; export default (initValue = null) => { const [value, setter] = useState(initValue); const handler = useCallback((e) => { console.log('문제점 시작'); console.log(e.target.value); console.log('문제점 끝'); setter(e.target.value); }, []); return [value, handler, setter]; }; value={text}를 넣었을 때 콘솔입니다. (사진) value={text}를 주석처리했을 때 콘솔입니다. (사진) 아이디와 비밀번호 둘 다 정상적으로 나왔습니다.

게시글 작성 오류입니다!

input.TextArea 부분의 문제로 판단됩니다. Input.TextArea value={text} onChange={onChangeText} maxLength={140} placeholder="어떤 신기한 일이 있었나요?" /> 이 코드에서 1.maxLength 부분을 제거하면 처음 입력 했을 때 아래의 그림처럼 나오고 다른 입력이 불가능합니다. (사진) 2. value={text}부분을 제거하면 정상적으로 아래의 그림처럼 나타납니다. (사진) value={text} 부분이 문제가 있다고 판단했습니다. 혹시 value값을 대체허거나 제거할 수 있을까요?

게시글 작성 오류입니다!

제가 이해하는 것에 문제가 있어 return 부분에서 useInput부분수정을 못 하였으나 Input.Textarea시도하는 것은 해보았는데 글씨 작성이 되었습니다! 혹시 몰라서 코드 올려봅니다. useInput.js import { useState, useCallback } from 'react'; export default (initValue = null) => { const [value, setter] = useState(initValue); const handler = useCallback((e) => { setter(e.target.value); }, []); return [value, handler, setter]; }; PorstForm.js return부분 return ( Input.TextArea /> ); 타자가 쳐지는 그림 (사진)

게시글 작성 오류입니다!

post관련 front 코드입니다. PostForm.js import React, { useCallback, useEffect, useRef } from 'react'; import { Form, Input, Button } from 'antd'; import { useSelector, useDispatch } from 'react-redux'; import { addPost } from '../reducers/post'; import useInput from '../hooks/useInput'; const PostForm = () => { const dispatch = useDispatch(); const [text, setText, onChangeText] = useInput(''); const { imagePaths, addPostLoading, addPostDone } = useSelector((state) => state.post); const imageInput = useRef(); const onClickImageUpload = useCallback(() => { imageInput.current.click(); }, [imageInput.current]); useEffect(() => { if (addPostDone) { setText(''); } }, [addPostDone]); const onSubmit = useCallback(() => { dispatch(addPost(text)); }, [text]); return ( Form style={{ margin: '10px 0 20px' }} encType="multipart/form-data" onFinish={onSubmit}> Input.TextArea value={text} onChange={onChangeText} maxLength={140} placeholder="어떤 신기한 일이 있었나요?" /> type="file" multiple hidden ref={imageInput} /> Button onClick={onClickImageUpload}>이미지 업로드Button> Button type="primary" style={{ float: 'right' }} htmlType="submit" loading={addPostLoading}>짹짹Button> {imagePaths.map((v) => ( key={v} style={{ display: 'inline-block' }}> (사진) src={`http://localhost:3065/${v}`} style={{ width: '200px' }} alt={v} /> Button>제거Button> ))} Form> ); }; export default PostForm; sagas/post.js import axios from 'axios'; import { call,all, delay, fork, put, takeLatest, throttle } from 'redux-saga/effects'; import { ADD_COMMENT_FAILURE, ADD_COMMENT_REQUEST, ADD_COMMENT_SUCCESS, ADD_POST_FAILURE, ADD_POST_REQUEST, ADD_POST_SUCCESS, generateDummyPost, LOAD_POSTS_FAILURE, LOAD_POSTS_REQUEST, LOAD_POSTS_SUCCESS, REMOVE_POST_FAILURE, REMOVE_POST_REQUEST, REMOVE_POST_SUCCESS, } from '../reducers/post'; import { ADD_POST_TO_ME, REMOVE_POST_OF_ME } from '../reducers/user'; function loadPostsAPI(data) { return axios.get('/api/posts', data); } function* loadPosts(action) { try { // const result = yield call(loadPostsAPI, action.data); yield delay(1000); yield put({ type: LOAD_POSTS_SUCCESS, data: generateDummyPost(10), }); } catch (err) { console.error(err); yield put({ type: LOAD_POSTS_FAILURE, data: err.response.data, }); } } function addPostAPI(data) { return axios.post('/post', data); } function* addPost(action) { try { const result = yield call(addPostAPI, action.data); yield put({ type: ADD_POST_SUCCESS, data: result.data, }); yield put({ type: ADD_POST_TO_ME, data: result.data.id, }); } catch (err) { console.error(err); yield put({ type: ADD_POST_FAILURE, data: err.response.data, }); } } function removePostAPI(data) { return axios.delete('/api/post', data); } function* removePost(action) { try { // const result = yield call(removePostAPI, action.data); yield delay(1000); yield put({ type: REMOVE_POST_SUCCESS, data: action.data, }); yield put({ type: REMOVE_POST_OF_ME, data: action.data, }); } catch (err) { console.error(err); yield put({ type: REMOVE_POST_FAILURE, data: err.response.data, }); } } function addCommentAPI(data) { return axios.post(`/post/${data.postId}/comment`, data); } function* addComment(action) { try { const result = yield call(addCommentAPI, action.data); yield put({ type: ADD_COMMENT_SUCCESS, data: result.data, }); } catch (err) { yield put({ type: ADD_COMMENT_FAILURE, data: err.response.data, }); } } function* watchLoadPosts() { yield throttle(5000, LOAD_POSTS_REQUEST, loadPosts); } function* watchAddPost() { yield takeLatest(ADD_POST_REQUEST, addPost); } function* watchRemovePost() { yield takeLatest(REMOVE_POST_REQUEST, removePost); } function* watchAddComment() { yield takeLatest(ADD_COMMENT_REQUEST, addComment); } export default function* postSaga() { yield all([ fork(watchAddPost), fork(watchLoadPosts), fork(watchRemovePost), fork(watchAddComment), ]); } reducers/post.js import shortId from 'shortid'; import faker from 'faker'; import produce from '../util/produce'; export const initialState = { mainPosts: [], imagePaths: [], hasMorePosts: true, loadPostsLoading: false, loadPostsDone: false, loadPostsError: null, addPostLoading: false, addPostDone: false, addPostError: null, removePostLoading: false, removePostDone: false, removePostError: null, addCommentLoading: false, addCommentDone: false, addCommentError: null, }; export const generateDummyPost = (number) => Array(number).fill().map(() => ({ id: shortId.generate(), User: { id: shortId.generate(), nickname: faker.name.findName(), }, content: faker.lorem.paragraph(), Images: [{ src: faker.image.image(), }], Comments: [{ User: { id: shortId.generate(), nickname: faker.name.findName(), }, content: faker.lorem.sentence(), }], })); export const LOAD_POSTS_REQUEST = 'LOAD_POSTS_REQUEST'; export const LOAD_POSTS_SUCCESS = 'LOAD_POSTS_SUCCESS'; export const LOAD_POSTS_FAILURE = 'LOAD_POSTS_FAILURE'; export const ADD_POST_REQUEST = 'ADD_POST_REQUEST'; export const ADD_POST_SUCCESS = 'ADD_POST_SUCCESS'; export const ADD_POST_FAILURE = 'ADD_POST_FAILURE'; export const REMOVE_POST_REQUEST = 'REMOVE_POST_REQUEST'; export const REMOVE_POST_SUCCESS = 'REMOVE_POST_SUCCESS'; export const REMOVE_POST_FAILURE = 'REMOVE_POST_FAILURE'; export const ADD_COMMENT_REQUEST = 'ADD_COMMENT_REQUEST'; export const ADD_COMMENT_SUCCESS = 'ADD_COMMENT_SUCCESS'; export const ADD_COMMENT_FAILURE = 'ADD_COMMENT_FAILURE'; export const addPost = (data) => ({ type: ADD_POST_REQUEST, data, }); export const addComment = (data) => ({ type: ADD_COMMENT_REQUEST, data, }); // 이전 상태를 액션을 통해 다음 상태로 만들어내는 함수(불변성은 지키면서) const reducer = (state = initialState, action) => produce(state, (draft) => { switch (action.type) { case LOAD_POSTS_REQUEST: draft.loadPostsLoading = true; draft.loadPostsDone = false; draft.loadPostsError = null; break; case LOAD_POSTS_SUCCESS: draft.loadPostsLoading = false; draft.loadPostsDone = true; draft.mainPosts = draft.mainPosts.concat(action.data); draft.hasMorePosts = action.data.length === 10; //draft.mainPosts = action.data.concat(draft.mainPosts); //draft.hasMorePosts = draft.mainPosts.length break; case LOAD_POSTS_FAILURE: draft.loadPostsLoading = false; draft.loadPostsError = action.error; break; case ADD_POST_REQUEST: draft.addPostLoading = true; draft.addPostDone = false; draft.addPostError = null; break; case ADD_POST_SUCCESS: draft.addPostLoading = false; draft.addPostDone = true; draft.mainPosts.unshift(action.data); break; case ADD_POST_FAILURE: draft.addPostLoading = false; draft.addPostError = action.error; break; case REMOVE_POST_REQUEST: draft.removePostLoading = true; draft.removePostDone = false; draft.removePostError = null; break; case REMOVE_POST_SUCCESS: draft.removePostLoading = false; draft.removePostDone = true; draft.mainPosts = draft.mainPosts.filter((v) => v.id !== action.data); break; case REMOVE_POST_FAILURE: draft.removePostLoading = false; draft.removePostError = action.error; break; case ADD_COMMENT_REQUEST: draft.addCommentLoading = true; draft.addCommentDone = false; draft.addCommentError = null; break; case ADD_COMMENT_SUCCESS: { const post = draft.mainPosts.find((v) => v.id === action.data.PostId); post.Comments.unshift(action.data); draft.addCommentLoading = false; draft.addCommentDone = true; break; // const postIndex = state.mainPosts.findIndex((v) => v.id === action.data.postId); // const post = { ...state.mainPosts[postIndex] }; // post.Comments = [dummyComment(action.data.content), ...post.Comments]; // const mainPosts = [...state.mainPosts]; // mainPosts[postIndex] = post; // return { // ...state, // mainPosts, // addCommentLoading: false, // addCommentDone: true, // }; } case ADD_COMMENT_FAILURE: draft.addCommentLoading = false; draft.addCommentError = action.error; break; default: break; } }); export default reducer;

게시글 작성 오류입니다!

빠른 답변 감사합니다! Textarea.js 117번째 줄입니다. (사진)

POST 404 NOT FOUND 에러 문제입니다.

app.js에서 app.use('/user',userRouter); 코드 누락으로 404에러를 해결하고 500에러는 signup에서 nickname을 인식을 못하길래 기존의 nick과 nickname으로 나누어져있 던것을 통일하여 해결하였습니다!

POST 404 NOT FOUND 에러 문제입니다.

(사진)백엔드 주소를 확인할 방법을 알 수 있을까요? 쉬운 질문 죄송합니다.