월 17,600원
5개월 할부 시다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 미해결[리뉴얼] 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가 들어가 있을 것을 (현재의 사용자를 위해) 방지 하기 위함 인가요? 아니면 다른 이유가 있나요? 감사합니다.
- 해결됨[리뉴얼] React로 NodeBird SNS 만들기
configureStore.js에서 createStore 밑줄 현상으로 인해 빌드 불가
[제로초 강좌 질문 필독 사항입니다]질문에는 여러분에게 도움이 되는 질문과 도움이 되지 않는 질문이 있습니다.도움이 되는 질문을 하는 방법을 알려드립니다.https://www.youtube.com/watch?v=PUKOWrOuC0c0. 숫자 0부터 시작한 이유는 1보다 더 중요한 것이기 때문입니다. 에러가 났을 때 해결을 하는 게 중요한 게 아닙니다. 왜 여러분은 해결을 못 하고 저는 해결을 하는지, 어디서 힌트를 얻은 것이고 어떻게 해결한 건지 그걸 알아가셔야 합니다. 그렇지 못한 질문은 무의미한 질문입니다.1. 에러 메시지를 올리기 전에 반드시 스스로 번역을 해야 합니다. 번역기 요즘 잘 되어 있습니다. 에러 메시지가 에러 해결 단서의 90%를 차지합니다. 한글로 번역만 해도 대부분 풀립니다. 그냥 에러메시지를 올리고(심지어 안 올리는 분도 있습니다. 저는 독심술사가 아닙니다) 해결해달라고 하시면 아무런 도움이 안 됩니다.2.3. 코드도 같이 올려주세요. 다만 코드 전체를 다 올리거나, 깃헙 주소만 띡 던지지는 마세요. 여러분이 "가장" 의심스럽다고 생각하는 코드를 올려주세요.import { applyMiddleware, compose, createStore } from "redux";const store = createStore(reducer, enhancer);공지사항에서는 결론적으로는 createStore 그대로 쓰셔도 됩니다. 아무 문제 없다고 나와있는데 저는 에러가 떠지면서 안됩니다 ㅠㅠ. 툴킷으로 바꿔야하나요? 바꾸게 되면 진도부분하고 헷갈리지 않을까 걱정이 되긴 하네요
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
왜/어떻게 nextjs를 사용하면 백엔드를 사용할 필요가 없나요?
안녕하세요 제로초님.NextJS에 대해 자세히 공부하고 싶은데 공부할 설명자료가 구글에 빈약한 거 같아 실무경험이 있는 제로초님께 쉬운 답변을 얻고 싶습니다.왜 nextjs를 사용하면 백엔드를 사용할 필요가 없는지 구글링을 해봤고 대충 비슷한 답변을 얻은 거 같긴 한데 아직도 좀 잘 모르겠는 부분이 있습니다.아래는 제가 찾은 답변을 구글 번역한 것입니다:그러나 SPA(단일 페이지 애플리케이션)의 등장으로 프런트엔드와 백엔드의 구분이 모호해졌습니다. SPA에서 전체 애플리케이션은 사용자의 브라우저에 로드되고 백엔드는 Node.js와 같은 서버 측 프레임워크에서 처리됩니다.Next.js는 한 단계 더 나아가 백엔드 프레임워크의 필요성을 제거합니다. 이를 통해 완전히 서버 렌더링되는 React 애플리케이션을 만들 수 있습니다. 이것은 사용자의 브라우저가 JavaScript 파일, CSS 파일 및 이미지와 같은 필요한 모든 자산을 포함하여 완전한 HTML 페이지를 다운로드한다는 것을 의미합니다. 또한 React 구성 요소에 대한 지원 기능이 내장되어 있으므로 라우팅, 상태 관리 및 기타 일반적인 프런트엔드 문제에 대해 걱정할 필요 없이 정교한 사용자 인터페이스를 만들 수 있습니다.-> 그래서 "어떻게" 백엔드 프레임워크가 필요하지 않다는 건지 아직도 이해가 안 됩니다 ㅠㅠ 예시를 들어 설명해 주시면 정말 감사하겠습니다!!예를들어, 제가 궁금한 점은, DB에서 node를 거치지 않고 Nextjs에서 바로 data를 가져올 수 있는지? 등등원문:However, with the rise of single-page applications (SPAs), the distinction between frontend and backend has become less clear. In a SPA, the entire application is loaded in the user’s browser, and the backend is handled by a server-side framework like Node.js.Next.js eliminates the need for a backend framework by taking it one step further. It allows you to create React applications that are completely server-rendered. This means that the user’s browser will download a complete HTML page, including all the necessary assets like JavaScript files, CSS files, and images. It also ships with built-in support for React components, so you can create sophisticated user interfaces without having to worry about routing, state management, and other common frontend concerns. 참고: https://matcha.fyi/nextjs-intro/#:~:text=js.-,Next.,%2C%20CSS%20files%2C%20and%20images.
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
styled-component ssr
스타일드 컴포넌트 ssr을 설정을 했는데도 자꾸 css가 깨지는데 혹시 어느 부분을 살펴보면 될까요 바벨과 document부분 모두 설정했습니다 강좌와는 다르게 타입스크립트로 진행했습니다
- 해결됨[리뉴얼] React로 NodeBird SNS 만들기
SSR이 아닐때 = CSR일때 쿠키 withCredentials 안 해줘도 되나요?
안녕하세요 제로초님.2:27 쯤에서 질문이 생겼습니다.그러면 SSR이 아닐때 = CSR일때에는front에서 쿠키 withCredentials 안 해주고, back에서만 credentials: true 해줘도 문제가 없는 건가요?
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
.next 파일 관련
aws ec2 인스턴스 하나에 프론트와 백을 동시에 실행시키려고 합니다 다만 프리티어 메모리 부족으로 npm run build를 로컬에서 빌드한 이후 .next 파일을 깃허브에 푸쉬해서 인스턴스에서 Pull받은 다음 npm start를 하려고 하는데 문제가 .next파일 용량이 커서 깃허브에 업로드가 안됩니다 lfs라는 방식으로 해결을 했지만 푸쉬를 할때마다 깃허브 무료 용량이 다 차는 바람에 쓰지 못하게 될것 같습니다 혹시 다른 방법이 있을까요? 그리고 프론트 서버에서 npm start를 했을때 next/prerender-manifest.json: unexpected token v in json at position 0 이런 에러가 나오는데 로컬에서 빌드하고 npm start했을때는 나오지 않던 에러여서 당황스럽네요 구글링도 해봤는데 해결하지 못했습니다 ㅜㅜ 혹시 방법이 있을까요?