월 17,600원
5개월 할부 시다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
쿠키공유 질문드립니다.
도메인까지 연결 성공했고 쿠키 공유만 해결하면 되는데 뭐 때문인지 감이 안잡힙니다....
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
413 Request Entity Too Large 질문
안녕하세요 선생님. 프로젝트 배포하고 나서 테스트 중에 특정 이미지를 업로드 하면 '413 Request Entity Too Large'라고 뜨는 오류를 발견했습니다. 특정 이미지 크기는 4.13mb정도구요. 일단 에러가 떠도 그대로 post요청을 보내면 업로드된 이미지가 보이긴 하는데 왜 이런 에러가 뜨는지 모르겠습니다..테스트 해보니까 세로 길이가 비교적 긴 이미지를 업로드 요청할 때 에러가 나는걸 확인했습니다.위 이미지가 프론트에서 나는 에러 상태 입니다. 오류 해결을 위해 먼저 back의 const upload = multer({ storage: multerS3({ s3: new AWS.S3(), bucket: 'fashionary-s3', key(req, file, cb) { cb(null, `original/${Date.now()}_${path.basename(file.originalname)}`) } }), limits: { fileSize: 20 * 1024 * 1024 }, // 20MB });여기서 limits부분이 20m인걸 확인하고, sudo vim /etc/nginx/nginx.conf 해서 http { ## # Basic Settings ## client_max_body_size 20M; sendfile on; tcp_nopush on; types_hash_max_size 2048; # server_tokens off; # server_names_hash_bucket_size 64; # server_name_in_redirect off; include /etc/nginx/mime.types; default_type application/octet-stream; 위와 같이 http부분 설정을 20m으로도, 0으로도 설정 후 sudo service nginx reload 했는데도 특정 이미지 전송을 시도하면 같은 에러가 떠요..이럴 땐 어디를 봐야 하나요?
- 해결됨[리뉴얼] React로 NodeBird SNS 만들기
팔로우,언팔로우 강의
음 어디를 봐야할지 잘몰라서 글을 남깁니다 ㅠㅠ팔로우를 누르고 프로필을 넘어가면서다른 사람을 팔로우 했다가 자신을 팔로우 한것으로 바뀌네요 ㅠㅠ 그래서 팔로우하고 프로필 페이지로 넘어가면 팔로잉 목록하고 팔로워 목록에 자신 닉넴임이 둘다 뜹니다 ㅠㅠ일단 팔로우는 다른 사람 팔로우 했다고 정상적으로 뜹니다
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
안녕하세요 질문 있습니다.
안녕하세요 강의 관련된 내용은 아닌데 혹시 질문 드려도 괜찮을까요?이번에 슬랙에서 만두피님이 하신걸 보고 저에게 맞게 따라하고 있는데 잘 되지 않아 질문 드립니다.위와 같은 문제가 있는데 그 전에 비슷하게 사용했을땐 잘 되던 일이라 이것저것 해보다가 typescript 버전을 v4로 내리면 data가 IForm[] 으로 추론 된다는걸 알았습니다. typescript v5을 사용하려면 어떤 식으로 풀어가야 할까요?? rk는 v4 사용하고 있습니다.공홈에서는 저 fetchFormAPI에서 리턴 값 타입으로 Promise<IForm[]>으로 주면 된다는데 처음 보는 방법이라 맞는건지 아니면 그냥 연습을 위한 방법인지 잘 몰라 질문 드립니다.const { data, isLoading } = useQuery<IForm[]>(['forms'], () => fetchFormsAPI('test'));export function fetchFormsAPI(domain: string) { // 1 return api.get(`/forms?formId=${domain}`).then((response) => response.data); // 2 // return axios({ // method: 'get', // url: `/forms?formId=${domain}`, // }).then((response) => response.data); }export const api = axios.create({ baseURL: backUrl, withCredentials: true, }); 위 2번째 코드에서 2번을 사용하면 첫번째 사진 빨간 밑줄은 사라지는데 결국 타입 추론이 안되는건 같았습니다. 그리고 공식 문서 처럼 fetchFormAPI함수에 리턴 타입을 붙이고 useQuery에 타입을 빼면 아래와 같이 useQuery에서는 타입을 정상적으로 추론하지만 막상 데이터를 사용할 때는 이상한 값이 들어오는 것을 확인했습니다.export function fetchFormsAPI(domain: string): Promise<IForm[]> { // 1 return api.get(`/forms?formId=${domain}`).then((response) => response.data); }const { data, error, isLoading } = useQuery(['forms'], () => fetchFormsAPI('test'));typescript 버전을 v4로 내리면 정상 작동하는 것은 확인했습니다. 어제부터 해결을 못하고 있어 질문드립니다. 감사합니다.
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
스크롤링 success 문제
안녕하세요 제로초님인피니트 스크롤링 적용하는 부분에서 스크롤이 끝에 올 때마다 mainPosts가 10개씩 추가 되지 않고 한번에 50개(draft.hasMorePost = draft.mainPosts.length < 50;)가 추가 되는데 원래라면 스크롤을 끝까지 내릴 때마다 10개씩만 추가 되어야 하는 건가요?댓글에서 SUCCESS는 한 번만 와야 된다고 하셨는데 저는 처음 한 번만 게시글이 10개 추가(success 한 번)되고 이후에는 게시글이 50개가 될 때까지 한꺼번에 success가 들어옵니다콘솔에 inView를 찍어보니 처음 10개만 들어왔을 때는 true -> false로 값의 변화가 있는데 한번에 success 되는 부분에서의 inView의 값은 계속 true로 찍힙니다..이런 경우에는 어떻게 해결해야 되나요..??index.jsconst Home = () => { const dispatch = useDispatch(); const { me } = useSelector((state) => state.user); const { mainPosts, hasMorePost, loadPostsLoading } = useSelector((state) => state.post); const [ref, inView] = useInView(); useEffect( () => { dispatch({ type: LOAD_POSTS_REQUEST, }); }, []); useEffect( () => { if (inView && hasMorePost && !loadPostsLoading) { const lastId = mainPosts[mainPosts.length - 1]?.id; dispatch({ type: LOAD_POSTS_REQUEST, lastId, }); } }, [inView, hasMorePost, loadPostsLoading, mainPosts], ); return ( <AppLayout> {me && <PostForm />} {mainPosts.map((post) => <PostCard key={post.id} post={post} />)} <div ref={hasMorePost && !loadPostsLoading ? ref : undefined} style={{ height: 10, backgroundColor: 'red' }} /> </AppLayout> );
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
게시글 좋아요 부분 강의에서 하트색이 바로 변하지 않습니다
에러는 없고 데이터에서도 like하고 unlike가 잘되는건 확인했는데 화면에서는 새로고침 해야지만 바뀌네요그리고 좋아요하고 다시 눌러서 취소 할려는데 취소가 안되고 계속 중복으로 좋아요가 됩니다 const express = require("express"); const { Post, Image, Comment, User } = require("../models"); const { isLoggedIn } = require("./middlewares"); const router = express.Router(); router.post("/", isLoggedIn, async (req, res, next) => { try { const post = await Post.create({ content: req.body.content, userId: req.user.id, }); const fullPost = await Post.findOne({ where: { id: post.id }, include: [ { model: Image, }, { model: Comment, include: [ { model: User, // 댓글 작성자 attributes: ["id", "nickname"], }, ], }, { model: User, // 게시글 작성자 attributes: ["id", "nickname"], }, { model: User, // 좋아요 누른 사람 as: "Likers", attributes: ["id"], }, ], }); res.status(201).json(fullPost); } catch (error) { console.error(error); next(error); } }); router.post("/:postId/comment", isLoggedIn, async (req, res, next) => { try { const post = await Post.findOne({ where: { id: req.params.postId }, }); if (!post) { return res.status(403).send("존재하지 않는 게시글입니다"); //return을 붙여줘야지 send하고 밑에 json이 동시에 실행안됨 } const comment = await Comment.create({ content: req.body.content, PostId: req.params.postId, userId: req.user.id, }); const fullComment = await Comment.findOne({ where: { id: comment.id }, include: [ { model: User, attributes: ["id", "nickname"], }, ], }); res.status(201).json(fullComment); } catch (error) { console.error(error); next(error); } }); router.patch("/:postId/like", isLoggedIn, async (req, res, next) => { try { const post = await Post.findOne({ where: { id: req.params.postId }, }); if (!post) { return res.status(403).send("게시글이 존제하지 않습니다"); } await post.addLikers(req.user.id); res.json({ PostId: post.id, userID: req.user.id }); } catch (error) { console.error(error); next(error); } }); router.delete("/:postId/like", isLoggedIn, async (req, res, next) => { try { const post = await Post.findOne({ where: { id: req.params.postId }, }); if (!post) { return res.status(403).send("게시글이 존제하지 않습니다"); } await post.removeLikers(req.user.id); res.json({ PostId: post.id, userID: req.user.id }); } catch (error) { console.error(error); next(error); } }); router.delete("/", (req, res) => { res.json({}); }); module.exports = router; const express = require("express"); const { Post, Image, User, Comment } = require("../models"); const router = express.Router(); router.get("/", async (req, res, next) => { try { const posts = await Post.findAll({ limit: 10, order: [ ["createdAt", "DESC"], [Comment, "createdAt", "DESC"], ], //옵션 = ASC: 오름차순 include: [ { model: User, attributes: ["id", "nickname"], //아이디 ,닉네임만 가져오기 }, { model: Image, }, { model: Comment, include: [ { model: User, attributes: ["id", "nickname"], }, ], }, { model: User, // 좋아요 누른 사람 as: "Likers", attributes: ["id"], }, ], }); res.status(200).json(posts); } catch (error) { console.error(error); next(error); } }); module.exports = router; import { Card, Button, Avatar, Popover, List, Comment } from "antd"; import { RetweetOutlined, HeartOutlined, MessageOutlined, HeartTwoTone, EllipsisOutlined, } from "@ant-design/icons"; import { useDispatch, useSelector } from "react-redux"; import PropTypes from "prop-types"; import PostImages from "./PostImages"; import { useCallback, useEffect, useState } from "react"; import CommentForm from "./CommentForm"; import PostCardContent from "./PostCardContent"; import FollowButton from "./FollowButton"; import { REMOVE_POST_REQUEST, LIKE_POST_REQUEST, UNLIKE_POST_REQUEST, } from "../reducers/post"; const PostCard = ({ post }) => { const dispatch = useDispatch(); const { removePostLoading } = useSelector((state) => state.post); const [commentFormOpened, setCommentFormOpened] = useState(false); const id = useSelector((state) => state.user.me?.id); const onLike = useCallback(() => { if (!id) { return alert("로그인이 필요합니다."); } dispatch({ type: LIKE_POST_REQUEST, data: post.id, }); }, [id]); const onUnLike = useCallback(() => { if (!id) { return alert("로그인이 필요합니다."); } dispatch({ type: UNLIKE_POST_REQUEST, data: post.id, }); }, [id]); const onToggleComment = useCallback(() => { setCommentFormOpened((prev) => !prev); }, []); const onRemovePost = useCallback(() => { dispatch({ type: REMOVE_POST_REQUEST, data: post.id, }); }, []); const liked = post.Likers.find((v) => v.id === id); console.log("@@@", liked); return ( <div style={{ marginBottom: 10 }}> <Card cover={post.Images[0] && <PostImages images={post.Images} />} actions={[ <RetweetOutlined key="retweet" />, liked ? ( <HeartTwoTone twoToneColor="#eb2f96" key="heart" onClick={onUnLike} /> ) : ( <HeartOutlined key="heart" onClick={onLike} /> ), <MessageOutlined key="message" onClick={onToggleComment} />, <Popover key="more" content={ <Button.Group> {id && post.user?.id === id ? ( <> <Button>수정</Button> <Button type="danger" onClick={onRemovePost} loading={removePostLoading} > 삭제 </Button> </> ) : ( <Button>신고</Button> )} </Button.Group> } > <EllipsisOutlined /> </Popover>, ]} extra={id && <FollowButton post={post} />} > <Card.Meta avatar={<Avatar>{post.user?.nickname[0]}</Avatar>} title={post.user?.nickname} description={<PostCardContent postData={post.content} />} /> </Card> {commentFormOpened && ( <div> <CommentForm post={post} /> <List header={`${post.Comments.length}개의 댓글`} itemLayout="horizontal" dataSource={post.Comments} renderItem={(item) => ( <li> <Comment author={item.user?.nickname} avatar={<Avatar>{item.user?.nickname[0]}</Avatar>} content={item.content} /> </li> )} /> </div> )} </div> ); }; PostCard.propTypes = { post: PropTypes.shape({ id: PropTypes.number, user: PropTypes.object, content: PropTypes.string, createdAt: PropTypes.string, Comment: PropTypes.arrayOf(PropTypes.object), Images: PropTypes.arrayOf(PropTypes.object), Likers: PropTypes.arrayOf(PropTypes.object), }).isRequired, }; export default PostCard;
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
댓글을 달면 500에러가 뜹니다
로그인 후 게시물에 댓글을 달면 500에러가 뜨면서 실패합니다 ㅠㅠ 백엔드에는 comment.comment 없다고 에러 뜨는거같은데 어디가 문제인지 잘모르겠습니다지금까지 해본건 오타 찾아보고 대소문자를 바꿔보고 했는데도 안되서 결국에 질문하네요 ㅠㅠconst express = require("express"); const { Post, Image, Comment, User } = require("../models"); const { isLoggedIn } = require("./middlewares"); const router = express.Router(); router.post("/", isLoggedIn, async (req, res, next) => { try { const post = await Post.create({ content: req.body.content, userId: req.user.id, }); const fullPost = await Post.findOne({ where: { id: post.id }, include: [ { model: Image, }, { model: Comment, include: [ { model: User, // 댓글 작성자 attributes: ["id", "nickname"], }, ], }, { model: User, // 게시글 작성자 attributes: ["id", "nickname"], }, { model: User, // 좋아요 누른 사람 as: "Likers", attributes: ["id"], }, ], }); res.status(201).json(fullPost); } catch (error) { console.error(error); next(error); } }); router.post("/:postId/comment", isLoggedIn, async (req, res, next) => { try { const post = await Post.findOne({ where: { id: req.params.postId }, }); if (!post) { return res.status(403).send("존재하지 않는 게시글입니다"); //return을 붙여줘야지 send하고 밑에 json이 동시에 실행안됨 } const comment = await Comment.create({ content: req.body.content, PostId: req.params.postId, UserId: req.user.id, }); const fullComment = await Comment.findOne({ where: { id: comment.id }, include: [ { model: User, attributes: ["id", "nickname"], }, ], }); res.status(201).json(fullComment); } catch (error) { console.error(error); next(error); } }); router.delete("/", (req, res) => { res.json({}); }); module.exports = router;
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
useMemo 질문이요
const TextAreaStyle = { resize: 'none', height: 120, marginBotton: 5, }; function EditPostCard() { return ( <> <TextArea rows={4} style={TextAreaStyle} /> <Space wrap> <Button type="primary">수정</Button> <Button type="primary" danger>취소</Button> </Space> </> ); } export default EditPostCard; 컴포넌트 밖에서 스타일객체를 선언한 경우 function EditPostCard() { const TextAreaStyle = useMemo(() => ({ resize: 'none', height: 120, marginBotton: 5, })); return ( <> <TextArea rows={4} style={TextAreaStyle} /> <Space wrap> <Button type="primary">수정</Button> <Button type="primary" danger>취소</Button> </Space> </> ); } 컴포넌트 안에서 useMemo를 사용한 경우리렌더링때문에 스타일을 따로 선언해주었는데요.두 가지 경우가 큰 차이가 있나요? useMemo안 쓰고컴포넌트 밖에다 선언해줘도 상관없나요?
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
글작성시 userId가 데이터에 저장을 안해서 게시글을 가져올려고 해도 안가져와집니다.
1. 뭔가 프론트는 문제가 없는거같은데 백에서는 어디에서 문제가 있는지 잘모르겠습니다 ㅠㅠ에러는 없습니다3. const express = require("express"); const { Post, Image, Comment, User } = require("../models"); const { isLoggedIn } = require("./middlewares"); const router = express.Router(); router.post("/", isLoggedIn, async (req, res) => { try { const post = await Post.create({ content: req.body.content, UserId: req.user.id, }); const fullPost = await Post.findOne({ where: { id: post.id }, include: [ { model: Image, }, { model: Comment, include: [ { model: User, // 댓글 작성자 attributes: ["id", "nickname"], }, ], }, { model: User, // 게시글 작성자 attributes: ["id", "nickname"], }, { model: User, // 좋아요 누른 사람 as: "Likers", attributes: ["id"], }, ], }); res.status(201).json(fullPost); } catch (error) { console.error(error); next(error); } }); router.post("/:postId/comment", isLoggedIn, async (req, res) => { try { const post = await Post.findOne({ where: { id: req.params.postId }, }); if (!post) { return res.status(403).send("존재하지 않는 게시글입니다"); //return을 붙여줘야지 send하고 밑에 json이 동시에 실행안됨 } const comment = await Comment.create({ content: req.body.content, PostId: req.params.postId, UserId: req.user.id, }); res.status(201).json(comment); } catch (error) { console.error(error); next(error); } }); router.delete("/", (req, res) => { res.json({}); }); module.exports = router; import { Form, Input, Button } from "antd"; import { useCallback, useRef, useEffect, useState } from "react"; import { useDispatch, useSelector } from "react-redux"; import { ADD_POST_REQUEST } from "../reducers/post"; import useInput from "./hooks/useInput"; const PostForm = () => { const { imagePaths, addPostDone, addPostLoading } = useSelector( (state) => state.post ); const [text, setText] = useState(""); const dispatch = useDispatch(); const imageInput = useRef(); useEffect(() => { if (addPostDone) { setText(""); } }, [addPostDone]); const onSubmitForm = useCallback(() => { dispatch({ type: ADD_POST_REQUEST, data: text, }); }, [text]); const onChangeText = useCallback((e) => { setText(e.target.value); }, []); const onClickImageUpload = useCallback(() => { imageInput.current.click(); }, [imageInput.current]); return ( <Form style={{ margin: "10px 0 20px" }} encType="multipart/form-data" onFinish={onSubmitForm} > <Input.TextArea value={text} onChange={onChangeText} maxLength={140} placeholder="어떤 일이 생겼나요" /> <div> <input type="file" multiple hidden ref={imageInput} /> <Button onClick={onClickImageUpload}>이미지 업로드</Button> <Button type="primary" style={{ float: "right" }} htmlType="submit" loading={addPostLoading} > 짹쨱 </Button> </div> <div> {imagePaths.map((v) => ( <div key={v} style={{ display: "inline-block" }}> <img src={v} style={{ width: "200px" }} alt={v} /> <div> <Button>제거</Button> </div> </div> ))} </div> </Form> ); }; export default PostForm; //saga - AddPost function addPostAPI(data) { return axios.post("/post", { content: data }); } function* addPost(action) { try { const result = yield call(addPostAPI, action.data); yield put({ //put : dispatch type: ADD_POST_SUCCESS, data: result.data, }); yield put({ type: ADD_POST_TO_ME, data: result.data.id, }); } catch (err) { yield put({ type: ADD_POST_FAILURE, data: err.response.data, }); } } // reducer 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;
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
ec2 에러
프론트서버를 ec2 에서 npm start를 하면 자꾸 client_loop: send disconnect: connection reset by peer 이라는 에러가 나오는데 해결방법이 있을까요 구글링도 해봤지만 해답을 찾지 못했습니다
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
새로고침 시 로그인 문제 + mui ssr 문제
안녕하세요 제로초님.getServerSideProp를 적용한 이후 새로고침 시 로그인 문제가 발생합니다.로그인을 하고 -> 1번째 새로 고침 시 로그인이 풀립니다.하지만 1번째 새로 고침 이후, 끈기를 가지고 계속해서 새로고침을 하다보면 로그인 상태로 다시 돌아옵니다.보통 3번째 정도 새로고침을 하면 로그인이 돌아옵니다..이거는 됐다가 안됐다가 하는 문제이기 때문에 제 코드 문제는 아닌 거 같습니다..새로고침을 n번째 시도 했을 때 로그인이 불규칙 하게 돌아옵니다.그리고 mui ssr 문제도 있는데요.styled-components는 _document와 babelrc? 를 적용하지 않아도 잘 적용되는 반면에, mui ssr은 https://github.com/mui/material-ui/issues/33072 여기에서 시키는 대로 해봐도 적용이 안 되네요1번째 사진은 새로고침 해서 ssr이 적용된 스타일 입니다.2번째 사진은 /profile 페이지 갔다가, 왼쪽 상단 mui 눌러서 홈페이지로 이동 했을때 csr이 적용된 스타일 (= 원래 디자인) 입니다. 혹시 짚이는 게 있으시면 답변 부탁드릴게요.. 감사합니다.
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
faker가 안먹혀요 ㅠㅠ
faker를 개발자가 망쳐두고 튀었다고 듣긴했는데 그럼 몇버젼을 사용해야할까요 게시글들 보면서 보이는 버전들은 다 사용했는데 안먹혀서 ㅠㅠ 요즘에는 몇버전 사용하나요?
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
postData.split is not a function 에러
[제로초 강좌 질문 필독 사항입니다]질문에는 여러분에게 도움이 되는 질문과 도움이 되지 않는 질문이 있습니다.도움이 되는 질문을 하는 방법을 알려드립니다.https://www.youtube.com/watch?v=PUKOWrOuC0c0. 숫자 0부터 시작한 이유는 1보다 더 중요한 것이기 때문입니다. 에러가 났을 때 해결을 하는 게 중요한 게 아닙니다. 왜 여러분은 해결을 못 하고 저는 해결을 하는지, 어디서 힌트를 얻은 것이고 어떻게 해결한 건지 그걸 알아가셔야 합니다. 그렇지 못한 질문은 무의미한 질문입니다.2.3.case ADD_POST_TO_ME: return { ...state, me: { ...state.me, Posts: [{ id: action.data }, ...state.me.Posts], }, };const PostCardContent = ({ postData }) => ( //#해쉬태그 <div> {postData?.split(/(#[^\s#]+)/g).map((v, i) => { if (v.match(/(#[^\s#]+)/)) { return ( <Link href={`/hashtag/${v.slice(1)}`} key={i}> <a>{v}</a> </Link> ); } return v; })} </div> ); function* addPost(action) { try { //const result = yield fork(addPostAPI, action.data); yield delay(1000); const id = shortId.generate(); yield put({ //put : dispatch type: ADD_POST_SUCCESS, data: { id, content: action.data, }, }); yield put({ type: ADD_POST_TO_ME, data: id, }); } catch (err) { yield put({ type: ADD_POST_FAILURE, data: err.response.data, }); } }로그인하고 게시물을 아무거나 입력하고 짹짹을 누르면 에러가뜹니다postData.split이 읽히지가 않아서 ?까지 넣어봤는데 같은오류가 나옵니다.<PostCardContent postData={post.content} />여기서 post.content는 콘솔로 찍어본 결과 "첫 번째 게시글 #해시태그 #jangsan"만 뜹니다어디가 문제인지 잘모르겠습니다
- 해결됨[리뉴얼] React로 NodeBird SNS 만들기
swr이 ssr을 지원하지 않는건가요?
19:20에서 load action이 꼭 ssr이 되어야 하는 거 아니면, swr를 쓰는 걸 추천한다고 하셨는데,이게 무슨 의미인지 모르겠어요..ssr은 그냥 getServerSideProps 함수 안에다가, 아무 action 함수를 넣으면 ssr로 data가 불려와 지는 거 아니였나요?그러면 swr 뿐만 아니라 RTK Query나 thunk를 써도 ssr이 안 되는 거는 마찬가지인가요? 갑자기 잘 모르겠네요 ...
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
S3 관련
Aws s3 프리티어 조건을 보니 5GB 제공에 get 요청 2만건 put요청 2000건까지 무료라고 되어있는데 get요청이라는게 노드버드로 치면 게시글 에 있는 이미지를 조회할때마다 요청이되는건가요? 그럼 새로고침 될때마다 요청이 되는거고 새로고침 2만번하면 프리티어에서 초과되는 이런 개념인가요?
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
쿠키 공유 질문이요
제가 어디서부터 흐름이 끊겼는지 모르겠는데 우선 로컬에서 브라우저랑 백엔드서버가 쿠키공유를 할 때 origin이 서로 달라서 브라우저에서는 axios.defaults.withCredentials = true를 해주고 백엔드서버에서는 credentials: true 하고 origin: http://localhost:3060을해서 쿠키를 서로 공유했는데 배포 할 때도 백엔드서버에서 브라우저 ip주소를 origin에 적어주면 공유 되는 거 아닌가요? 왜 배포할 떄는 브라우저와 백엔드서버 origin이 서로 같아야 쿠키가 공유 되는 건가요?
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
Error: Data too long for column 'src' at row 1
게시글 작성에서 이미지를 업로드할때 이런 에러가 나옵니다 s3를 적용한 다음부터인데 검색을 해보니 db에 지정해둔 길이 보다 s3로 부터 가져온 이미지 문자열이 길어서 그런거 같은데 어떻게 하면 좋을까요? 이미지 부분 datatype string을 기존 200에서 300으로 늘려도 에러가 나오네요
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
도메인 구매
혹시 도메인 구매할때 .com만 구입하는게 좋을까요? .site같은 도메인을 쓰게 되면 문제되는게 있을까요?
- 해결됨[리뉴얼] React로 NodeBird SNS 만들기
더미데이터와 포스터폼 만들기 강좌 질문
[제로초 강좌 질문 필독 사항입니다]질문에는 여러분에게 도움이 되는 질문과 도움이 되지 않는 질문이 있습니다.도움이 되는 질문을 하는 방법을 알려드립니다.https://www.youtube.com/watch?v=PUKOWrOuC0c0. 숫자 0부터 시작한 이유는 1보다 더 중요한 것이기 때문입니다. 에러가 났을 때 해결을 하는 게 중요한 게 아닙니다. 왜 여러분은 해결을 못 하고 저는 해결을 하는지, 어디서 힌트를 얻은 것이고 어떻게 해결한 건지 그걸 알아가셔야 합니다. 그렇지 못한 질문은 무의미한 질문입니다.1. 에러 메시지를 올리기 전에 반드시 스스로 번역을 해야 합니다. 번역기 요즘 잘 되어 있습니다. 에러 메시지가 에러 해결 단서의 90%를 차지합니다. 한글로 번역만 해도 대부분 풀립니다. 그냥 에러메시지를 올리고(심지어 안 올리는 분도 있습니다. 저는 독심술사가 아닙니다) 해결해달라고 하시면 아무런 도움이 안 됩니다.2.Unhandled Runtime ErrorError: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports. Check the render method of PostForm.Sourcecomponents/LoginForm.js (15:4) @ eval 13 | 14 | const onSubmitForm = useCallback(() => { > 15 | dispatch( | ^ 16 | loginAction({ 17 | id, 18 | password,터미널 에러 메세지/!\ You are using legacy implementation. Please update your code: use createWrapper() and wrapper.useWrappedStore().4. withRedux(Sansbook) created new store with { giapState: undefined, gspState: null, gsspState: null, gippState: null}{}4. withRedux(Sansbook) created new store with { giapState: undefined, gspState: null, gsspState: null, gippState: null}{}3. import React, { useCallback } from "react"; import { Button, Form, Input } from "antd"; import Link from "next/link"; import { useDispatch } from "react-redux"; import useInput from "./hooks/useInput"; import { loginAction } from "../reducers/user"; const LoginForm = () => { const [id, onChangeId] = useInput(""); const [password, onChangePassword] = useInput(""); const dispatch = useDispatch(); const onSubmitForm = useCallback(() => { dispatch( loginAction({ id, password, }) ); }, [id, password]); return ( <Form onFinish={onSubmitForm} style={{ padding: "10px" }}> <div> <label htmlFor="user-id">아이디</label> <br /> <Input name="user-id" value={id} onChange={onChangeId} required /> </div> <div> <label htmlFor="user-password">비밀번호</label> <br /> <Input name="user-password" value={password} onChange={onChangePassword} type="password" required /> </div> <div style={{ marginTop: "10px" }}> <Button type="primary" htmlType="submit" loading={false}> 로그인 </Button> <Link href="/signup"> <a> <Button>회원가입</Button> </a> </Link> </div> </Form> ); }; export default LoginForm; import { Form, Input, Button } from "antd"; import { useCallback, useState, useRef } from "react"; import { useDispatch, useSelector } from "react-redux"; const PostForm = () => { const { imagePaths } = useSelector((state) => state.post); const [text, setText] = useState(""); const dispatch = useDispatch(); const imageInput = useRef(); const onChangeText = useCallback((e) => { setText(e.target.value); }, []); const onSubmit = useCallback(() => { dispatch(addPost); }, []); const onClickImageUpload = useCallback(() => { imageInput.current.click(); }, [imageInput.current]); return ( <Form style={{ margin: "10px 0 20px" }} encType="multipart/form-data" onFinish={onSubmit} > <Input.Textarea value={text} onChange={onChangeText} maxLength={140} placeholder="어떤 일이 생겼나요" /> <div> <input type="file" multiple hidden ref={imageInput} /> <Button onClick={onClickImageUpload}>이미지 업로드</Button> <Button type="primary" style={{ float: "right" }} htmlType="submit"> 짹쨱 </Button> </div> <div> {imagePaths.map((v) => ( <div key={v} style={{ display: "inline-block" }}> <img src={v} style={{ width: "200px" }} alt={v} /> <div> <Button>제거</Button> </div> </div> ))} </div> </Form> ); }; export default PostForm; 포스트폼까지 만들고 로그인버튼 누르면 저 에러가 뜨면서 안되네요 ㅠㅠ 에러메시지를 보면 LoginForm에 dispatch가 문제가 있다하고 PostForm 렌더링 방법을 한번 체크해보라는데 잘모르겠습니다
- 해결됨[리뉴얼] React로 NodeBird SNS 만들기
context.req 존재 여부를 2번이나 체크하는 이유?
안녕하세요 제로초님.const cookie = context.req ? context.req.headers.cookie : ''; axios.defaults.headers.Cookie = ''; if (context.req && cookie) { axios.defaults.headers.Cookie = cookie; }여기에서 context.req 존재 여부를 2번이나 체크를 하고 있는데요.그 이유는 cookie 변수 안에 이전의 사용자의 sid가 들어가 있을 것을 (현재의 사용자를 위해) 방지 하기 위함 인가요? 아니면 다른 이유가 있나요? 감사합니다.