소개
게시글
질문&답변
git clone할때 질문입니다.
답변 감사합니다.
- 0
- 2
- 174
질문&답변
파비콘 이미지가 계속 지구입니다.
저도 계속 안되다가 hard reload하닌깐 되네요! 감사합니다.
- 0
- 2
- 473
질문&답변
app.render 질문입니다.
착각했네요.. express의 render가 아니라 next군요ㅠ
- 0
- 1
- 152
질문&답변
sequelize 에러 내용파악이 잘안됩니다..
맞네용.. 제로초님 말대로 await로 find해보닌깐 바로 보이네요 ㅠ 보닌깐 db.Image.create({src: req.body.image}) 앞에 await를 빼먹었네요.. ㅠㅠ 분명 1:1로 대조해보면서 여러번 확인했는데 왜 꼭 이런건 눈에 안보일까요!! 감사합니다.
- 0
- 2
- 372
질문&답변
useRef의 click 펑션에서 에러 질문입니다
하... 죄송합니다.. 제가 Component를 Ant design꺼를 모르고 썼네요.. Input 을 일반 input 태그로 바꾸닌깐 제대로 작동하네요 결국 이번에도 오타였군요 ㅠ
- 0
- 2
- 1.1K
질문&답변
[].forEach.call 에 대한질문
감사합니다! 잘되네요
- 0
- 2
- 257
질문&답변
req에 대한 질문입니다.
감사합니다 ^^
- 0
- 2
- 152
질문&답변
post를 작성하고 form 을 제출할때마다 페이지가 새로고침이 됩니다..
제로초님 도움주셔서 감사합니다. 원인을 찾았는데 어이없게도... ADD_POST_SUCCESS의 put 부분에 data: "" 이렇게 해놨더라구요.. data : result.data로 하닌깐 잘 동작합니다. 위에 보호연산자를 안썼으면 진짜 못찾을 뻔했네요.. 새로고침을 막은덕에 리덕스 상태를 알수가 있었습니다. 아래는 제 개인노트에 정리한 내용 복붙입니다. ===================================================== new post를 추가하여 form을 제출했는데, trouble shoot 15와 같은 에러가 계속 발생함 해결단계 : 1) post.User에 보호연산자를 통해 새로고침이 되는것을 먼저 막음 2) 새로고침이 되지 않기 때문에 Redux의 상태를 확인할 수 있었음 3) Redux상태를 보니 mainPosts에 diff가 빈값임을 확인함 (db내에는 저장이 되었지만, add post action을 하는 과정에서 mainPosts가 바로 업데이트 되지 못한것) 4) 원인 확인을 해보니 addpost의 saga에서 put을 하는데 거기에 data: "" 이렇게 비어있었음.. Redux로 확인해보니 diff에서 mainpost의 값이 빈 값으로 추가됨을 확인함. 5) ADD_POST_SUCCESS의 put값을 data: result.data로 변경 후 해결 (3일동안 고생, 제로초님 도움으로 실마리를 찾을 수 있었음) ===================================================== 어떻게 딴곳을 다 뒤져봤는데 저기만 빼먹었을까요?... 딱 저기빼고 다 봤거든요 ㅠㅠ... 보호연산자를 빼도 정상동작합니다. 도움주셔서 감사합니다!
- 0
- 12
- 1.1K
질문&답변
post를 작성하고 form 을 제출할때마다 페이지가 새로고침이 됩니다..
index.js 에 useEffect추가했구요 import React, { useEffect, useState } from "react"; import Postform from "../components/postform"; import PostCard from "../components/postcard"; import { useSelector, useDispatch } from "react-redux"; import { LOAD_MAIN_POSTS_REQUEST } from "../reducers/post"; const Home = () => { const { mainPosts, isAddedPost } = useSelector((state) => state.post); const { me } = useSelector((state) => state.user); const dispatch = useDispatch(); const [renderPosts, setRenderPosts] = useState(false); useEffect(() => { dispatch({ type: LOAD_MAIN_POSTS_REQUEST, }); }, []); useEffect(() => { setRenderPosts(true); }, [isAddedPost]); return ( React.Fragment> {renderPosts} {me && Postform />} {mainPosts.map((v, i) => { return PostCard key={+v.createdAt} post={v} />; })} React.Fragment> ); }; export default Home; 이건 postcard에다가 post.User 보호연산자 추가한 것입니다. Link랑 이런데에 직접적으로 추가하닌깐 없는상황에서 Link가 비어있다고 에러가 나서 Card전체에 post.User로 감쌋고 이러닌깐 새로고침 자체는 안생기는데, 포스트 추가가 안되네요(db상에는 추가되어 직접 새로고침하면 포스트가 나옵니다.) import React, { useState, useCallback, useEffect } from "react"; import { useDispatch, useSelector } from "react-redux"; import Link from "next/link"; import { Card, Button, Avatar, Input, Comment, List, Form } from "antd"; import { RetweetOutlined, HeartOutlined, MessageOutlined, EllipsisOutlined, } from "@ant-design/icons"; import { ADD_COMMENT_REQUEST, LOAD_MAIN_POSTS_REQUEST } from "../reducers/post"; const PostCard = ({ post }) => { const [commentFormOpened, setCommentFormOpened] = useState(false); const [commentText, setCommentText] = useState(""); const { me } = useSelector((state) => state.user); const { isAddedComment, isAddingComment, isAddedPost } = useSelector( (state) => state.post ); const dispatch = useDispatch(); useEffect(() => { // console.log("effect"); setCommentText(""); }, [isAddedComment === true]); const onCommentToggle = useCallback(() => { setCommentFormOpened((prev) => !prev); }, []); const onChangeCommentText = useCallback((e) => { setCommentText(e.target.value); }, []); const onSubmitComment = useCallback(() => { if (!me) { return alert("Please Login First"); } console.log("submit"); console.log(post.id); return dispatch({ type: ADD_COMMENT_REQUEST, data: { postId: post.id } }); }, [me && me.id]); return ( div> {post.User && ( Card key={+post.createdAt} hoverable style={{ width: 240, padding: 10, marginTop: 10 }} cover={post.img && img alt={post} src={post.img} />} actions={[ RetweetOutlined />, HeartOutlined />, MessageOutlined onClick={onCommentToggle} />, EllipsisOutlined />, ]} extra={Button>FollowButton>} > Card.Meta avatar={ // {"dummy"} Link href={ post.User && { pathname: "/user", query: { id: post.User.id }, } } as={post.User && `/user/${post.User.id}`} > a> Avatar>{post.User && post.User.nickname[0]}Avatar> a> Link> } // title="dummy" title={post.User && post.User.nickname} // description="dummy" description={ post.User && post.content.split(/(#[^\s]+)/g).map((v) => { if (v.includes("#")) { const hashtag = v; return ( Link key={v} href={{ pathname: "/hashtag", query: { tag: v.slice(1) }, }} as={`/hashtag/${v.slice(1)}`} > a>{hashtag}a> Link> ); } else { return v; } }) } >Card.Meta> Card> )} {commentFormOpened && ( React.Fragment> Form onFinish={onSubmitComment}> Form.Item> Input.TextArea rows={4} value={commentText} onChange={onChangeCommentText} /> Form.Item> Button type="primary" htmlType="submit" loading={isAddingComment}> Reply Button> Form> List header={`${post.Comments ? post.Comments.length : 0} 댓글`} itemLayout="horizontal" dataSource={post.Comments || []} renderItem={(item) => ( li> Comment author={item.userId} avatar={Avatar>{item.User.nickName[0]}Avatar>} content={item.content} /> li> )} /> React.Fragment> )} div> ); }; export default PostCard;
- 0
- 12
- 1.1K
질문&답변
post를 작성하고 form 을 제출할때마다 페이지가 새로고침이 됩니다..
post.User를 붙이닌깐 새로고침현상은 없어졌는데요,, 포스트가 다시 랜더링되면서 업데이트가 되야하는데, mainPosts 카드들이 그대로 있네요 그래서 renderPost라는 hooks state하나 만들어서 index.js에서 useEffect로 상태바꿔줬는데도 랜더링이 다시 안되네요.. 컴포넌트 다시 랜더링하려면 이렇게 하는게 아닌가요?
- 0
- 12
- 1.1K