프론트로 sudo npx pm2 monit 하면 이런 에러가 뜨는데 PostCard에 문제가 있는걸까요? 지금 처음 데이터는 이런식으로 불러오고있습니다

PostCardContent에서 취소 버튼을 클릭시 바로 onCancelUpdate()를 하게 되면 editText의 값이 리셋되지 않습니다.그래서 다시 수정 버튼을 클릭하면, TextArea에 postData가 보이는 것이 아닌, 이전에 수정을 하려다가 취소할 당시의 값이 남아있게 됩니다! (해당 내용은 제로초님 sleact 레파지토리에 pull request 하였습니다.) 취소 버튼 클릭시 editText를 리셋하고 onCancelUpdate를 실행할 함수를 만들어주면 됩니다!const onClickCancel = useCallback(() => { setEditText(postData); onCancelUpdate(); });<Button type="danger" onClick={onClickCancel}>취소</Button>

안녕하세요. thunder client로 get 요청시 무한로딩이 됩니다.localhost:3000/api/hello에 대한 요청이 되지 않습니다.다른 open api 요청을 쏴봤는데요. 그건 됩니다.혹시 원인이 무엇일까요?개발 환경은 실행중입니다.폴더 구조입니다. 아래는 코드입니다.// hello.ts // Next.js API route support: https://nextjs.org/docs/api-routes/introduction import { NextApiRequest, NextApiResponse } from 'next'; import FirebaseAdmin from '@/models/firebase_admin'; export default function handler(_: NextApiRequest, res: NextApiResponse) { FirebaseAdmin.getInstance().Firebase.collection('test'); res.status(200).json({ name: 'John Doe' }); }  // firebase_admin.ts import * as admin from 'firebase-admin'; interface Config { credential: { privateKey: string; clientEmail: string; projectId: string; }; } /** 싱글톤 패턴을 이용해서 어디서든 같은 인스턴스를 불러낼 수 있도록 한다. */ export default class FirebaseAdmin { public static instance: FirebaseAdmin; /** 초기화 여부 */ private init = false; /** 인스턴스를 반환하는 메서드 */ public static getInstance(): FirebaseAdmin { if (FirebaseAdmin.instance === undefined || FirebaseAdmin.instance === null) { /** 초기화 진행 */ FirebaseAdmin.instance = new FirebaseAdmin(); /** 환경을 초기화한다. */ FirebaseAdmin.instance.bootstrap(); } return FirebaseAdmin.instance; } /** 환경을 초기화할 때 사용할 메서드 */ private bootstrap(): void { /** 등록되어 있는 앱의 갯수가 0이 아니어야 앱이 존재함을 의미한다. */ const haveApp = admin.apps.length !== 0; if (haveApp) { this.init = true; return; } /** config를 활용해서 초기화한다. */ const config: Config = { credential: { /** process.env.로 환경변수에 접근하여 각 값들을 받아온다. * 각 갑들은 undefined일 수 있으므로, 값이 없을 경우 빈 문자열을 할당한다. */ projectId: process.env.projectid || '', clientEmail: process.env.clientEmail || '', /** * privateKey는 원래 개행이 들어간 여러 줄 짜리 텍스트인데, 반환할 때는 json에서는 그렇게 표현할 수 없기 때문에 한 줄이 된다. * 그 한줄짜리 json을 원래대로 개행이 들어가도록 임의로 다시 개행문자를 넣어주는 것이다. */ privateKey: (process.env.privatekey || '').replace(/\\n/g, '\n'), }, }; admin.initializeApp({ credential: admin.credential.cert(config.credential) }); console.info('bootstrap firebase admin'); } /** firestore를 반환 */ public get Firebase(): FirebaseFirestore.Firestore { if (this.init === false) { this.bootstrap(); } return admin.firestore(); } public get Auth(): admin.auth.Auth { if (this.init === false) { this.bootstrap(); } return admin.auth(); } }

 지올로케이션으로 위치 나타내는 함수 배우는데콘솔창 맨 위에[Violation] Only request geolocation information in response to a user gesture. 이렇게라고 떠요. 해당 자바스크립트 번호 보니까 딱히 문제 될 것도 없고 강사님이랑 똑같이 적었는데 왜 저렇게 뜰까요?

emotion에 props 던지기 및 setState의 작동원리강의 49분경 설명에서.... 작성자,제목,내용 인풋창에 q,q,q를 입력하는 과정에서최종적으로 내용인풋에 q입력할때 처음에는 contents값이 없는 상태로 렌더링이 일어나고 42번째 함수가 종료가 될때, (임시로 저장해두었던 q) contents를 q로 바꾸라고 알아들어서 바꾸면 한번더 리렌더링이 일어나서 contents 값이 q가되어 있으므로 44번째 if문이 실행이 되어서 45번째 setMycolor가 실행이 되고, 또 다시 setMycolor가 바뀌므로 리렌더링 일어나서 버튼색이 노란색으로 바껴야 하는거 아닌가요? 왜 내용에 qw를 입력하는 순간 이 일이 일어나나요?

 안녕하세요. 언제나 좋은 강의 감사합니다! 다름이 아니라 section 14 과제인 마이페이지를 구현하는 중인데 나의 상품 페이지 pagination에 사용할 내 장터-나의 상품 count API는 어떤 걸 쓰면 될까요? 다른 페이지에서 사용할 count API는 모두 있는 것 같데 나의 상품만 없는 건지 제가 못 찾고 있는 건지 모르겠네요..

강의에서 좀 더 나아가 클라이언트와 서버도 도커 환경으로 구축?을 해보려고 합니다.계획은 Docker hub private repo에 Dockerfile로 빌드된 이미지를 push하고 ec2인스턴스에서 docker-compose up으로 pull을 받으려고 합니다. 간단히 테스트를 해보니 제대로 실행은 되고 있으나 보안적인 부분에 있어 문제될 것이 있나 궁금하여 질문 드립니다.답변 주시면 감사하겠습니다.감사합니다~

안녕하세요 제로초님 항상 질문에 빨리 답변 달아주셔서 감사합니다. 백엔드에 문제가 있는거 같은 pm2 monit은 아래와 같이 뜹니다 const express = require("express"); const session = require("express-session"); const cookieParser = require("cookie-parser"); const cors = require("cors"); const app = express(); const postRouter = require("./routes/post"); const userRouter = require("./routes/user"); const postsRouter = require("./routes/posts"); const hashtagRouter = require("./routes/hashtag"); const db = require("./models"); const passportConfig = require("./passport"); const passport = require("passport"); const dotenv = require("dotenv"); const morgan = require("morgan"); const path = require("path"); const hpp = require("hpp"); const helmet = require("helmet"); dotenv.config(); db.sequelize .sync() .then(() => { console.log("db 연결성공"); }) .catch(console.error); passportConfig(); //모드변경 if (process.env.NODE_ENV === "production") { app.use(morgan("combined")); app.use(hpp()); app.use(helmet({ contentSecurityPolicy: false })); app.use( cors({ origin: "http://sansbook.co.kr", credentials: true, }) ); } else { app.use(morgan("dev")); app.use( cors({ origin: true, credentials: true, }) ); } // app.use( // cors({ // origin: [ // "http://localhost:3000", // "http://sansbook.co.kr", // "http://43.200.92.114", // ], // credentials: true, // }) // ); app.use("/", express.static(path.join(__dirname, "uploads"))); app.use(express.json()); app.use(express.urlencoded({ extended: true })); app.use(cookieParser(process.env.COOKIE_SECRET)); app.use( session({ saveUninitialized: false, resave: false, secret: process.env.COOKIE_SECRET, cookie: { httpOnly: true, secure: false, domain: process.env.NODE_ENV === "production" && ".sansbook.co.kr", }, }) ); app.use(passport.initialize()); app.use(passport.session()); app.get("/", (req, res) => { res.send("hello express"); }); app.use("/posts", postsRouter); app.use("/post", postRouter); app.use("/user", userRouter); app.use("/hashtag", hashtagRouter); app.listen(80, () => { console.log("서버실행중!"); });

{ "name": "sansbook-back", "version": "1.0.0", "description": "", "main": "app.js", "scripts": { "dev": "nodemon app", "start": "cross-env NODE_ENV=production pm2 start app.js" }, "author": "jangsan", "license": "ISC", "dependencies": { "bcrypt": "^5.1.0", "cookie-parser": "^1.4.6", "cors": "^2.8.5", "cross-env": "^7.0.3", "dotenv": "^16.0.3", "express": "^4.18.2", "express-session": "^1.17.3", "helmet": "^6.1.5", "hpp": "^0.2.3", "morgan": "^1.10.0", "multer": "^1.4.5-lts.1", "mysql2": "^3.2.0", "passport": "^0.6.0", "passport-local": "^1.0.0", "pm2": "^5.3.0", "sequelize": "^6.30.0", "sequelize-cli": "^6.6.0", "session": "^0.1.0" }, "devDependencies": { "nodemon": "^2.0.22" } } const express = require("express"); const session = require("express-session"); const cookieParser = require("cookie-parser"); const cors = require("cors"); const app = express(); const postRouter = require("./routes/post"); const userRouter = require("./routes/user"); const postsRouter = require("./routes/posts"); const hashtagRouter = require("./routes/hashtag"); const db = require("./models"); const passportConfig = require("./passport"); const passport = require("passport"); const dotenv = require("dotenv"); const morgan = require("morgan"); const path = require("path"); const hpp = require("hpp"); const helmet = require("helmet"); dotenv.config(); db.sequelize .sync() .then(() => { console.log("db 연결성공"); }) .catch(console.error); passportConfig(); //모드변경 if (process.env.NODE_ENV === "production") { app.use(morgan("combined")); app.use(hpp()); app.use(helmet()); } else { app.use(morgan("dev")); } app.use( cors({ origin: ["http://localhost:3000", "sansbook.com", "http://15.164.99.87"], credentials: true, }) ); app.use("/", express.static(path.join(__dirname, "uploads"))); app.use(express.json()); app.use(express.urlencoded({ extended: true })); app.use(cookieParser(process.env.COOKIE_SECRET)); app.use( session({ saveUninitialized: false, resave: false, secret: process.env.COOKIE_SECRET, }) ); app.use(passport.initialize()); app.use(passport.session()); app.get("/", (req, res) => { res.send("hello express"); }); app.use("/posts", postsRouter); app.use("/post", postRouter); app.use("/user", userRouter); app.use("/hashtag", hashtagRouter); app.listen(80, () => { console.log("서버실행중!"); }); 회원가입 할떄 마다 500에러가 나는데 프론트 문제인가요?

로그인은 가능한데 로그아웃은 어떻게 하는지 모르겠습니다 ㅠlogoutUser mutation으로 해도 에러가 떠서 찾아봐도 강의에 나와있지 않아서글 남깁니다!!

git 저장소를 불러오는중에 Aborting떠서git reset --hard를 해도 계속 최신 커밋이 안뜹니다 ㅠㅠHEAD is now at 95de5ce Update: back start script계속 이게 뜨면서 pull해도 Aborting이 계속 나오네요 ㅠㅠ

제가 다른게시물 보고 https://www.digitalocean.com/community/tutorials/how-to-install-mysql-on-ubuntu-20-04이거까지 했는데 계속 새로운 비밀번호 입력 하라고 뜨네요 ㅠㅠ이런 경우 어떻게 해야할까요 비밀번호도 보안수준에 맞게 했는데 계속 뜨네요 ㅠㅠ

강좌를 듣고나면 saga의 user.js 랑 post.js 쪽 파일이 코드줄이 굉장히 길어지는데요막상 파일을 쪼개서 정리를 하려고해도 연관되는 상태들이 많아서 결국엔 한쪽으로 몰게되네요어쩔 수 없는 부분인가요? 사실 강좌를 듣고 프로젝트를 하나 완성했는데 saga 부분을 쪼갤 수 있으면 최종적으로 수정하고 마무리 할거고 아니면 바로 타입스크립트 강좌 듣고 repo 하나 더 파서 지금 프로젝트 타입스크립트로 정리해보려 합니다 ㅎ좋은 강좌 만들어주셔서 정말 감사하고 다음 강좌는 전용 링크로 수수료없이 결제하겠습니다 ~감사합니다 !

깃허브에 올려주신 react query의 부분을 보고 공부하는 과정중에 궁금한 점이 생겨 질문드립니다.로그인 정보를 가져오기 위한const { data: me } = useQuery<User>('user', loadMyInfoAPI);useQuery를 이용해 캐싱한 데이터를 가져오는 방법과,리덕스, 리코일의 전역관리 상태 라이브러리를 이용하여 로그인 정보를 관리하는 방법중에 어떠한 방법이 나은 방향인지 궁금합니다.저의 경우는 전역 상태로 관리해, 데이터를 한 번만 가져와서 여러 곳에서 사용할 수 있어서 코드의 중복을 줄일 수있다고 생각하였는데 왜 useQuery를 이용해 캐싱한 데이터를 가져오는 방법을 사용하였는지 궁금합니다.

안녕하세요 제로초님! const { mainPosts, hasMorePosts, loadPostsLoading } = useSelector( (state) => state.post, ); useEffect(() => { function onScroll() { if ( window.scrollY + document.documentElement.clientHeight > document.documentElement.scrollHeight - 300 ) { if (hasMorePosts && !loadPostsLoading) { console.log('로딩상태 ; ', loadPostsLoading); console.log('불러오기'); dispatch({ type: LOAD_POSTS_REQUEST, }); } } } window.addEventListener('scroll', onScroll); return () => { window.removeEventListener('scroll', onScroll); }; }, [hasMorePosts, loadPostsLoading]);현재 여기까지 코딩이 진행된 상태인요! 콘솔로 찍어보니이렇게 두번 REQUEST를 보내게 됩니다.리덕스를 찍어봤을 때는이렇게 나옵니다.reducers 부분은const reducer = (state = initialState, action) => produce(state, (draft) => { switch (action.type) { case LOAD_POSTS_REQUEST: draft.loadPostsLoading = true; draft.loadPostsDone = false; draft.loadPostsError = null; break; case LOAD_POSTS_SUCCESS: draft.loadPostsLoading = false; draft.loadPostsDone = true; draft.mainPosts = action.data.concat(draft.mainPosts); draft.hasMorePosts = draft.mainPosts.length < 50; break; case LOAD_POSTS_FAILURE: draft.loadPostsLoading = false; draft.loadPostsError = action.error; break; ...saga > post.js 코드는function loadPostsAPI(data) { return axios.get('/api/post', data); } function* loadPosts(action) { try { // const result = yield call(loadPostsAPI, action.data) yield delay(1000); const id = shortid.generate(); yield put({ type: LOAD_POSTS_SUCCESS, data: generateDummyPost(10), }); } catch (err) { yield put({ type: LOAD_POSTS_FAILURE, data: err.response.data, }); } } function* watchLoadPosts() { yield throttle(5000, LOAD_POSTS_REQUEST, loadPosts); }이 상태입니다.조건문에서 !loadPostsLoading < 이걸 지우면 엄청난 양으로 REQUEST가 보내지는 것을 보니 !loadPostsLoading 이게 먹히는 것 같기는 합니다.왠지 REQUEST가 보내진 후 loadPostsLoading이 true로 변경된 것 같기는 한데 이게 useEffect 코드에서는 아직 false로 인식해서 또 REQUEST를 보내는 것이 아닌가 하는게 제 추측인데요, 맞을까요?ㅠㅠ 

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를 사용하는 리액트 개발은 새로고침을 하는게 맞는건가요?