인프런 커뮤니티 질문&답변

Trendy Tube

작성한 질문수

[리뉴얼] React로 NodeBird SNS 만들기

게시글 불러오기

게시글 작성도 안됩니다..

해결된 질문

작성

193

게시글 작성하려고 하면 서버 콘솔이나 브러우저 콘솔창에 아무 에러메시지도 안나오고

ADD_POST_REQUEST 액션만 보내지는데요 어떻게 해결해야 할까요...??

components > PostForm.js 에서 onSubmit 을 강의대로 따라쳐봐도 안되서 // 주석처리하고 github master브랜치 가서 그쪽 코드 넣어봐도 안되네요. 게시글이 안올라가요..

 return alert('게시글을 작성하세요.');

여기 '게시글을 작성하세요.' 이 오류만 계속나오네요

react redux nodejs express Next.js

퀴즈

Node.js는 웹 서버 자체일까요, 아니면 다른 역할을 할까요?

웹 서버 자체입니다.

JavaScript 실행 환경입니다.

데이터베이스 관리 시스템입니다.

프론트엔드 렌더링 도구입니다.

답변 1

제로초(조현영)

지식공유자

제발 코드도 같이 올려주세요...

Trendy Tube

질문자

PostForm.js 코드 올립니다 확인해주세요! 게시글을 달아도 요청만 가고, 댓글도 그렇구요, 이제는 닉네임도 요청만 가네요.

import React, { useCallback, useEffect, useRef } from 'react';
import { Form, Input, Button } from 'antd';
import { useDispatch, useSelector } from 'react-redux';

import { ADD_POST_REQUEST, UPLOAD_IMAGES_REQUEST, REMOVE_IMAGE } from '../reducers/post';
import { addPost } from '../reducers/post';
import useInput from '../hooks/useInput';


const PostForm = () => {
  const { imagePaths, addPostDone } = useSelector((state) => state.post);
  const dispatch = useDispatch();
  const { text, onChangeText, setText } = useInput(''); // 커스텀 훅 만들어놓은거 자주 활용하기!

  useEffect(() => {
    if (addPostDone) {
      setText('');
    }
  }, [addPostDone]);

  const onSubmit = useCallback(() => {
    dispatch(addPost(text));
  }, [text]);

  // const onSubmit = useCallback(() => {
  //   if (!text || !text.trim()) {
  //     return alert('게시글을 작성하세요.');
  //   }
  //   const formData = new FormData();
  //   imagePaths.forEach((p) => {
  //     formData.append('image', p);
  //   });
  //   formData.append('content', text);
  //   return dispatch({
  //     type: ADD_POST_REQUEST,
  //     data: formData,
  //   });
  // }, [text, imagePaths]);

  const imageInput = useRef();
  const onClickImageUpload = useCallback(() => {
    imageInput.current.click();
  }, [imageInput.current]);

  const onChangeImages = useCallback((e) => {
    console.log('images', 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 onRemoveImage = useCallback((index) => () => {
    dispatch({
      type: REMOVE_IMAGE,
      data: index,
    });
  }, []);

  return (
    <Form style={{ margin: '10px 0 20px' }} encType="multipart/form-data" onFinish={onSubmit}>
      <Input.TextArea
        value={text}
        onChange={onChangeText}
        maxLength={140}
        placeholder='What happen?'
      />
      <div>
        <Input type="file" multiple hidden ref={imageInput} onChange={onChangeImages} />
        <Button onClick={onClickImageUpload}>이미지 업로드</Button>
        <Button type="primary" style={{ float: 'right' }} htmlType="submit">Add Story</Button>
      </div>
      <div>
        {imagePaths.map((v, i) => (
          <div key={v} style={{ display: 'inline-block' }}>
            <img src={`http://localhost:3065/${v}`} style={{ width: '200px' }} alt={v} />
            <div>
              <Button onClick={onRemoveImage(i)}>제거</Button>
            </div>
          </div>
        ))}
      </div>
    </Form>
  );
};

export default PostForm;

Trendy Tube

작성한 질문수

전체 Q&A

질문하기