stefan CHO
@skku77146429
Reviews Written
-
Average Rating
-
Posts
Q&A
git cloneํ ๋ ์ง๋ฌธ์ ๋๋ค.
๋ต๋ณ ๊ฐ์ฌํฉ๋๋ค.
- 0
- 2
- 221
Q&A
ํ๋น์ฝ ์ด๋ฏธ์ง๊ฐ ๊ณ์ ์ง๊ตฌ์ ๋๋ค.
์ ๋ ๊ณ์ ์๋๋ค๊ฐ hard reloadํ๋๊น ๋๋ค์! ๊ฐ์ฌํฉ๋๋ค.
- 0
- 2
- 571
Q&A
app.render ์ง๋ฌธ์ ๋๋ค.
์ฐฉ๊ฐํ๋ค์.. express์ render๊ฐ ์๋๋ผ next๊ตฐ์ใ
- 0
- 1
- 196
Q&A
sequelize ์๋ฌ ๋ด์ฉํ์ ์ด ์์๋ฉ๋๋ค..
๋ง๋ค์ฉ.. ์ ๋ก์ด๋ ๋ง๋๋ก await๋ก findํด๋ณด๋๊น ๋ฐ๋ก ๋ณด์ด๋ค์ ใ ๋ณด๋๊น db.Image.create({src: req.body.image}) ์์ await๋ฅผ ๋นผ๋จน์๋ค์.. ใ ใ ๋ถ๋ช 1:1๋ก ๋์กฐํด๋ณด๋ฉด์ ์ฌ๋ฌ๋ฒ ํ์ธํ๋๋ฐ ์ ๊ผญ ์ด๋ฐ๊ฑด ๋์ ์๋ณด์ผ๊น์!! ๊ฐ์ฌํฉ๋๋ค.
- 0
- 2
- 433
Q&A
useRef์ click ํ์ ์์ ์๋ฌ ์ง๋ฌธ์ ๋๋ค
ํ... ์ฃ์กํฉ๋๋ค.. ์ ๊ฐ Component๋ฅผ Ant design๊บผ๋ฅผ ๋ชจ๋ฅด๊ณ ์ผ๋ค์.. Input ์ ์ผ๋ฐ input ํ๊ทธ๋ก ๋ฐ๊พธ๋๊น ์ ๋๋ก ์๋ํ๋ค์ ๊ฒฐ๊ตญ ์ด๋ฒ์๋ ์คํ์๊ตฐ์ ใ
- 0
- 2
- 1.2K
Q&A
[].forEach.call ์ ๋ํ์ง๋ฌธ
๊ฐ์ฌํฉ๋๋ค! ์๋๋ค์
- 0
- 2
- 317
Q&A
req์ ๋ํ ์ง๋ฌธ์ ๋๋ค.
๊ฐ์ฌํฉ๋๋ค ^^
- 0
- 2
- 204
Q&A
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.3K
Q&A
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.3K
Q&A
post๋ฅผ ์์ฑํ๊ณ form ์ ์ ์ถํ ๋๋ง๋ค ํ์ด์ง๊ฐ ์๋ก๊ณ ์นจ์ด ๋ฉ๋๋ค..
post.User๋ฅผ ๋ถ์ด๋๊น ์๋ก๊ณ ์นจํ์์ ์์ด์ก๋๋ฐ์,, ํฌ์คํธ๊ฐ ๋ค์ ๋๋๋ง๋๋ฉด์ ์ ๋ฐ์ดํธ๊ฐ ๋์ผํ๋๋ฐ, mainPosts ์นด๋๋ค์ด ๊ทธ๋๋ก ์๋ค์ ๊ทธ๋์ renderPost๋ผ๋ hooks stateํ๋ ๋ง๋ค์ด์ index.js์์ useEffect๋ก ์ํ๋ฐ๊ฟ์คฌ๋๋ฐ๋ ๋๋๋ง์ด ๋ค์ ์๋๋ค์.. ์ปดํฌ๋ํธ ๋ค์ ๋๋๋งํ๋ ค๋ฉด ์ด๋ ๊ฒ ํ๋๊ฒ ์๋๊ฐ์?
- 0
- 12
- 1.3K




