export const getStaticProps = wrapper.getStaticProps(async (context) => { console.log("getStaticProps"); context.store.dispatch({ type: LOAD_USER_REQUEST, data: 1, }); context.store.dispatch(END); await context.store.sagaTask.toPromise(); });about.js에서 위에 코드를 입력하면 사이트에 연결할수 없음이라고 뜨는데 이코드도 버전 차이면 어떻게 바꿔야 하는지 알려주시면 감사하겠습니다

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, RETWEET_REQUEST, } from "../reducers/post"; import Link from "next/link"; 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("로그인이 필요합니다."); } return dispatch({ type: LIKE_POST_REQUEST, data: post.id, }); }, [id]); const onUnLike = useCallback(() => { if (!id) { return alert("로그인이 필요합니다."); } return dispatch({ type: UNLIKE_POST_REQUEST, data: post.id, }); }, [id]); const onToggleComment = useCallback(() => { setCommentFormOpened((prev) => !prev); }, []); const onRemovePost = useCallback(() => { if (!id) { return alert("로그인이 필요합니다."); } return dispatch({ type: REMOVE_POST_REQUEST, data: post.id, }); }, [id]); const onRetweet = useCallback(() => { if (!id) { return alert("로그인이 필요합니다."); } return dispatch({ type: RETWEET_REQUEST, data: post.id, }); }, []); const liked = post.Likers?.find((v) => v.id === id); return ( <div style={{ marginBottom: 10 }}> <Card cover={post.Images[0] && <PostImages images={post.Images} />} actions={[ <RetweetOutlined key="retweet" onClick={onRetweet} />, 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>, ]} title={ post.RetweetId ? `${post.user.nickname}님이 공유하셨습니다` : null } extra={id && <FollowButton post={post} />} > {post.RetweetId && post.Retweet ? ( <Card cover={ post.Retweet.Images[0] && ( <PostImages images={post.Retweet.Images} /> ) } > <Card.Meta avatar={ <Link href={`/user/${post.Retweet.user.id}`}> <a> <Avatar>{post.Retweet.user.nickname[0]}</Avatar> </a> </Link> } title={post.Retweet.user.nickname} description={<PostCardContent postData={post.Retweet.content} />} /> </Card> ) : ( <Card.Meta avatar={ <Link href={`/user/${post.user.id}`}> <a> <Avatar>{post.user.nickname[0]}</Avatar> </a> </Link> } 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={ <Link href={`/user/${post.user?.id}`}> <a> <Avatar>{post.user?.nickname[0]}</Avatar> </a> </Link> } 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), RetweetId: PropTypes.number, Retweet: PropTypes.objectOf(PropTypes.any), }).isRequired, }; export default PostCard; 아바타를 클릭하면 해당 아이디 정보하고 그 아이디 게시물만 떠야하는데 해당 아이디 프로필은 잘뜨는데 게시물이 다른사람 게시글까지 같이 뜹니다. 참고로 저는 post.User를 u로 바꿔야지만 뜹니다

실제 몇몇 서비스를 보면 글 작성이나 수정같은 비동기 요청이 성공한 후에 새로고침을 하는데이 강좌와 같이 Next.js를 사용하는 리액트 개발은 새로고침을 하는게 맞는건가요?

안녕하세요! 보여주신 erd에서 궁금증이 생겨서 질문 드립니다.dms의 ReciverId과 mentions의 Receiverid 만 Non-identifying relation으로 맺어져 있고 나머지 관계들은 모두 Identifying Relation으로 맺어져 있는 이유가 뭘까요?Non-Identifying Relation과 Identifying Relation의 차이는 Non의 경우는 부모와 자식의 관계를 맺을때 자식이 부모 없이도 독립적으로 존재 가능한 것이고, Identifying-Relation은 자식이 부모 없이는 존재가 불가능한 차이로 알고 있습니다. DM과 Mention의 Receiver가 존재하지 않는다면, DM과 Mention의 정보가 불완전해질 것 같은데, 왜 non-identifying 일까요?typeorm entity 코드를 봐도, DM과 User entity의 Sender와 Receiver의 코드가 완전 똑같은데, 왜 ERD에서는 Receiver는 non-identifying 이고 Sender는 identifying인지 모르겠습니다.

SerializableError: Error serializing `.initialState.post.loadPostsError` returned from `getServerSideProps` in "/user/[id]". Reason: `undefined` cannot be serialized as JSON. Please use `null` or omit this value all together. at isSerializable (/Users/js/Desktop/sansbook/node_modules/next/dist/lib/is-serializable-props.js:7:95) at /Users/js/Desktop/sansbook/node_modules/next/dist/lib/is-serializable-props.js:7:503 at Array.every (<anonymous>) at isSerializable (/Users/js/Desktop/sansbook/node_modules/next/dist/lib/is-serializable-props.js:7:304) at /Users/js/Desktop/sansbook/node_modules/next/dist/lib/is-serializable-props.js:7:503 at Array.every (<anonymous>) at isSerializable (/Users/js/Desktop/sansbook/node_modules/next/dist/lib/is-serializable-props.js:7:304) at /Users/js/Desktop/sansbook/node_modules/next/dist/lib/is-serializable-props.js:7:503 at Array.every (<anonymous>) at isSerializable (/Users/js/Desktop/sansbook/node_modules/next/dist/lib/is-serializable-props.js:7:304)이 에러가 떴는데 user-[id].js에서 getServerSideProps 코드가 잘못되었다는 뜻인가요? 아니면 undefined나 null을 어떻게 처리할것인지..잘모르겠습니다

코드가 잘못 됐나요..상품 목록이 나오질 않네요..#1 vsCode<html> <head> <title>TerretAccompany</title> <link href="index.css" type="text/css" rel="stylesheet" /> <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script> </head> <body> <div id="header"> <div id="header-area"> <img src="images\icons\logo.png" /> </div> </div> <div id="body"> <div id="banner"> <img src="images\banners\banner1.png" /> </div> <h1>판매되는 상품들</h1> <div id="product-list"></div> </div> <div id="footer"></div> </body> <script> axios .get("https://2007f5d2-9d8b-49f0-8b70-032507e17d79.mock.pstmn.io") .then(function (result) { console.log("통신 결과 : ", result); const products = result.data.products; let productsHtml = ""; for (var i = 0; i < products.length; i++) { let product = products[i]; productsHtml = productsHtml + '<div class="product-card">' + "<div>" + '<img class="product-img"' + 'src="' + product.imageUrl + '" />' + "</div>" + '<div class="product-contents">' + "<!-- text를 넣을때 많이 씀 -->" + '<span class="product-name">' + product.name + "</span>" + '<span class="product-price">' + product.price + "원" + "</span>" + '<div class="product-seller">' + '<img class="product-avatar" src="images/icons/avatar.png" />' + "<span>" + product.seller + "</span>" + "</div>" + "</div>" + "</div>"; } document.querySelector("#product-list").innerHTML = productsHtml; }) .catch(function (error) { console.error("error 발생 : ", error); }); </script> </html>  #2 postman{ "products" : [ { "name": "농구공", "price": 500000, "seller": "조던", "imageUrl": "images/products/basketball1.jpeg" }, { "name": "축구공", "price": 600000, "seller": "메시", "imageUrl": "images/products/soccerball1.jpg" }, { "name": "키보드", "price": 300000, "seller": "그랩", "imageUrl": "images/products/keyboard1.jpg" } ] }

안녕하세요. 제로초님.우선 학습관련 내용이 아닌 내용에 대해 질문드리게 되어 죄송합니다.혹여 문제가 될 시 질문 글을 삭제하도록 하겠습니다.몇 일 동안 해결하려 했으나 해결이 잘 되지 않아 이 곳을 통해 질문드리게 되었습니다.fe작업물을 테스트 서버에 반영하였으나,로그인을 시도할 때 아래와 같은 에러가 발생중입니다.xhr.js:247 Mixed Content: The page at 'https://도메인주소/' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://백엔드api주소'. This request has been blocked; the content must be served over HTTPS. 구글링을 해본 결과 메타 태그를 index.html에 삽입하라고 하여 삽입을 해보았으나,pending로 통신 자체가 불가능한 상황입니다.http-proxy-middleware 라이브러리를 사용하여 setproxy.js파일도 세팅을 해보았으나 여전히 위와 같은 문제가 발생중입니다..env 파일을 생성하여 백엔드 api를 프록시로 설정을 하였고, 프론트엔드 host도 지정을 하였는데 위와 같은 문제가 발생 중입니다. 도무지 해결이 되지 않아 여기 질문드린 점 다시 한번 사과드리겠습니다.혹여 문제가 되면 질문 글은 바로 삭제하도록 하겠습니다.

강의에 올라와 있는 pages폴더에서 index.js 파일 getServerSideProps부분이 저도 store.dispatch오류가 나서 고차함수로 바꾸어 주니까 해결됬습니다. 근데 이유를 잘모르겠습니다 ㅠㅠexport const getServerSideProps = wrapper.getServerSideProps( (store) => async () => { store.dispatch({ type: LOAD_MY_INFO_REQUEST, }); store.dispatch({ type: LOAD_POSTS_REQUEST, }); store.dispatch(END); await store.sagaTask.toPromise(); } ); 

컨트롤러스 page.js 에서 이부분 객체로 만든건가요?exports.renderProfile=(req,res,next)=>{}

이미지 업로드 후 thumb 폴더가 생성 안됩니다!검색해보니 AWS Lambda 함수에서 S3 서비스를 호출할 때, 해당 Lambda 함수의 실행 역할이 S3 버킷에 대한 필요한 권한을 가지고 있지 않아서 발생한 것이라고 합니다...역할도 S3객체 읽기 전용 권한 선택했습니다.근데 여기서 PutObject가 없는게 걸립니다..

도메인까지 연결 성공했고 쿠키 공유만 해결하면 되는데 뭐 때문인지 감이 안잡힙니다....

안녕하세요 선생님. 프로젝트 배포하고 나서 테스트 중에 특정 이미지를 업로드 하면 '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 했는데도 특정 이미지 전송을 시도하면 같은 에러가 떠요..이럴 땐 어디를 봐야 하나요? 

@Get(':id') getOneCat(@Param('id', PositiveIntPipe) id: number) { console.log(id, typeof id); return 'one cat'; }이전에 작성되었던 아이디로 검색 메서드가 있었는데요,이번 강의에서 @Get('all') 을 추가해서포스트맨으로 테스트하는데 위에 getOneCat 으로 넘어가는데 왜 이런건지 알 수 있을까요?@ApiOperation({ summary: '현재 고양이 가져오가' }) @UseGuards(JwtAuthGuard) @Get() getCurrentCat(@CurrentUser() cat) { return cat.readOnlyData; }만약 이게 더 위에 있다면, 여기서 걸린다면 이해 하겠는데그렇지도 않고 @Get('all') 일때만 걸리는 이유가 뭘까요..?

ec2-ubuntu 환경에서 pm2사용하는데sudo npm run start:prodcross-env NODE_ENV=production PORT=80 pm2 start dist/src/main.js실행하였는데Error: EACCES: permission denied, mkdir '/root/.pm2/logs'Error: EACCES: permission denied, mkdir '/root/.pm2/pids'Error: EACCES: permission denied, open '/root/.pm2/module_conf.json'Error: EACCES: permission denied, mkdir '/root/.pm2/modules'에러가 발생해서 제로초님이 답변하신거 찾아보고 노드 재설치도 했는데같은 에러가 발생합니다 

 안녕하세요 정말 열심히 듣고 있었지만 오류가 발생하자 아무리 찾아도 나오지 않아 답답해서 문의 드립니다. 강의: 크롤링 2 - puppeteerdocker-compose up 으로 실행 하였고crawler 를 node index.js 실행 하자 저런 에러들이 발생하였습니다.... 해결 방법이 있을까요??

controller\auth 랑 passport\localStrategy에서 로그인 post를 보낼때의 경우가 service로 보내서 비즈니스로직을 돌고 컨트롤러에 return값을 보내주는 방식으로 passport\localStrategy가 Service역할을 한다고 생각해도 괜찮나요? 

음 어디를 봐야할지 잘몰라서 글을 남깁니다 ㅠㅠ팔로우를 누르고 프로필을 넘어가면서다른 사람을 팔로우 했다가 자신을 팔로우 한것으로 바뀌네요 ㅠㅠ 그래서 팔로우하고 프로필 페이지로 넘어가면 팔로잉 목록하고 팔로워 목록에 자신 닉넴임이 둘다 뜹니다 ㅠㅠ일단 팔로우는 다른 사람 팔로우 했다고 정상적으로 뜹니다 

어디 쪽에서 문제가 발생 하는지 모르겠습니다. 

일단 저는 공개/비공개는 제외하고 만들고 있었는데 ImageContext에서 prevDara를 추가한 이후로 첫 로드시에 첫번째 이미지 리스트들을 두번 호출하는데 어떤 방식으로 해결해야 할까요???옵저버가 발동 되면 두번째 페이지 리스트들은 한번만 호출이 되는데 첫번째 페이지에 해당되는 이미지들만 두번이 호출되버립니다 ㅠㅠ 깃허브에 임시로 올려두긴 했는데 다른 파일들은 문제가 없어 보이긴 합니다ㅠㅠuseEffect(() => { if(pastImageUrlRef.current === imageUrl) return; setImageLoad(true); axios .get(imageUrl) .then((result) => setImages((prevData) => [...prevData, ...result.data])) .catch((err) => { console.error(err); setImageError(err) }) .finally(() => { setImageLoad(false); pastImageUrlRef.current = imageUrl; }); }, [imageUrl]);

안녕하세요 강의 관련된 내용은 아닌데 혹시 질문 드려도 괜찮을까요?이번에 슬랙에서 만두피님이 하신걸 보고 저에게 맞게 따라하고 있는데 잘 되지 않아 질문 드립니다.위와 같은 문제가 있는데 그 전에 비슷하게 사용했을땐 잘 되던 일이라 이것저것 해보다가 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로 내리면 정상 작동하는 것은 확인했습니다. 어제부터 해결을 못하고 있어 질문드립니다. 감사합니다.