173만명의 커뮤니티!! 함께 토론해봐요.
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
안녕하세요. 언제나 좋은 강의 감사합니다! 다름이 아니라 section 14 과제인 마이페이지를 구현하는 중인데 나의 상품 페이지 pagination에 사용할 내 장터-나의 상품 count API는 어떤 걸 쓰면 될까요? 다른 페이지에서 사용할 count API는 모두 있는 것 같데 나의 상품만 없는 건지 제가 못 찾고 있는 건지 모르겠네요..
미해결
따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)
강의에서 좀 더 나아가 클라이언트와 서버도 도커 환경으로 구축?을 해보려고 합니다. 계획은 Docker hub private repo에 Dockerfile로 빌드된 이미지를 push하고 ec2인스턴스에서 docker-compose up으로 pull을 받으려고 합니다. 간단히 테스트를 해보니 제대로 실행은 되고 있으나 보안적인 부분에 있어 문제될 것이 있나 궁금하여 질문 드립니다. 답변 주시면 감사하겠습니다. 감사합니다~
미해결
[리뉴얼] React로 NodeBird SNS 만들기
안녕하세요 제로초님 항상 질문에 빨리 답변 달아주셔서 감사합니다. 백엔드에 문제가 있는거 같은 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("서버실행중!"); });
미해결
작정하고 장고! Django로 Pinterest 따라만들기 : 바닥부터 배포까지
updateform에서 disabled = True로 변경하여 url로 접속해보면 제대로 적용이 되는 것을 확인할 수 있습니다. 하지만 비밀번호를 입력하고 제출을 누르면 계속해서 A user with that username already exists. 메시지만 뜨고 있는 상황입니다. ㅠㅠㅠ
미해결
[리뉴얼] React로 NodeBird SNS 만들기
{ "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으로 해도 에러가 떠서 찾아봐도 강의에 나와있지 않아서 글 남깁니다!!
미해결
[리뉴얼] React로 NodeBird SNS 만들기
git 저장소를 불러오는중에 Aborting떠서 git reset --hard를 해도 계속 최신 커밋이 안뜹니다 ㅠㅠ HEAD is now at 95de5ce Update: back start script 계속 이게 뜨면서 pull해도 Aborting이 계속 나오네요 ㅠㅠ
미해결
[리뉴얼] React로 NodeBird SNS 만들기
제가 다른게시물 보고 https://www.digitalocean.com/community/tutorials/how-to-install-mysql-on-ubuntu-20-04 이거까지 했는데 계속 새로운 비밀번호 입력 하라고 뜨네요 ㅠㅠ 이런 경우 어떻게 해야할까요 비밀번호도 보안수준에 맞게 했는데 계속 뜨네요 ㅠㅠ
해결됨
[리뉴얼] React로 NodeBird SNS 만들기
강좌를 듣고나면 saga의 user.js 랑 post.js 쪽 파일이 코드줄이 굉장히 길어지는데요 막상 파일을 쪼개서 정리를 하려고해도 연관되는 상태들이 많아서 결국엔 한쪽으로 몰게되네요 어쩔 수 없는 부분인가요? 사실 강좌를 듣고 프로젝트를 하나 완성했는데 saga 부분을 쪼갤 수 있으면 최종적으로 수정하고 마무리 할거고 아니면 바로 타입스크립트 강좌 듣고 repo 하나 더 파서 지금 프로젝트 타입스크립트로 정리해보려 합니다 ㅎ 좋은 강좌 만들어주셔서 정말 감사하고 다음 강좌는 전용 링크로 수수료없이 결제하겠습니다 ~ 감사합니다 !
미해결
[리뉴얼] React로 NodeBird SNS 만들기
깃허브에 올려주신 react query의 부분을 보고 공부하는 과정중에 궁금한 점이 생겨 질문드립니다. 로그인 정보를 가져오기 위한 const { data: me } = useQuery<User>('user', loadMyInfoAPI); useQuery를 이용해 캐싱한 데이터를 가져오는 방법과, 리덕스, 리코일의 전역관리 상태 라이브러리를 이용하여 로그인 정보를 관리하는 방법중에 어떠한 방법이 나은 방향인지 궁금합니다. 저의 경우는 전역 상태로 관리해, 데이터를 한 번만 가져와서 여러 곳에서 사용할 수 있어서 코드의 중복을 줄일 수있다고 생각하였는데 왜 useQuery를 이용해 캐싱한 데이터를 가져오는 방법을 사용하였는지 궁금합니다.
미해결
[리뉴얼] React로 NodeBird SNS 만들기
안녕하세요 제로초님! 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를 보내는 것이 아닌가 하는게 제 추측인데요, 맞을까요?ㅠㅠ
미해결
[리뉴얼] React로 NodeBird SNS 만들기
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에서 위에 코드를 입력하면 사이트에 연결할수 없음이라고 뜨는데 이코드도 버전 차이면 어떻게 바꿔야 하는지 알려주시면 감사하겠습니다
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
안녕하세요 취업할때 공부한 걸 블로그나 노션에 기록해뒀다가 주소를 이력서에 첨부하면 좋다고 들었는데요 노션에 공부노트 템플릿으로 저렇게 수업내용 같은거 작성하고 있는데 제가 노션이 익숙치 않아서ㅜㅜ 이런식으로 해서 주소첨부해도 괜찮은 게 맞나요? 혹시 팁이 있다면 알려주세요~^^
미해결
따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)
항상 좋은 강의 감사드려유♡
미해결
[리뉴얼] React로 NodeBird SNS 만들기
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로 바꿔야지만 뜹니다
해결됨
[리뉴얼] React로 NodeBird SNS 만들기
실제 몇몇 서비스를 보면 글 작성이나 수정같은 비동기 요청이 성공한 후에 새로고침을 하는데 이 강좌와 같이 Next.js를 사용하는 리액트 개발은 새로고침을 하는게 맞는건가요?
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
안녕하세요 혹시 강의 내용을 복습할 때 깃허브나 블로그에 정리 요약 해서 업로드 해도 될까요?
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
let i = 0; while (i <10) { console.log(i) i = i +1 } 여기서 콘솔로 0 ~10 까지 찍히는데 왜 10까지 찍히는건가요?? 강의 마지막에 편집오류인지 짤려서 이유가 안나와요
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
안녕하세요 멘토님 매번 강의 잘 듣고 있습니다. 이번 강의를 마무리로 별도로 개인 토이프로젝트 개발을 시작하고 배포를 할 때가 오면 다시 배포 부분부터 수강할 예정인데 이 강의에서 이해가 좀 정확히 안되는 부분이 있어서 질문 글을 올렸습니다. API 모킹을 통해 가짜 게시글 생성 테스트 API를 보내서 result를 받는 부분 중, _id 값 부분이 이해가 잘 안됩니다. writer , title , contents 는 테스트 input 부분에 있던 내용들 그대로 result에 적어서 이 값들이 제대로 insert 되었는지 테스트를 하기 때문에 같은 값을 입력했다는 것은 이해를 했습니다. 그런데 _id 부분은 왜 백엔드에서-받은-게시글ID 이라고 임의로 입력을 했는지 부분을 이해 못했습니다. id, _id 와 같은 값은 랜덤으로 생성되기에 뭘로 받아올지 모르기 때문에 테스팅 라이브러리에서 임의의 값으로 지정하도록 설정이 가능해서일까요? 그렇다면 아폴로에서 캐싱할 때도 _id, id 라는 명을 인식해서 캐싱이 더 잘되듯이, 테스팅 라이브러리도 _id, id 명에 한정해서 개발자가 임의의 값을 입력해도 되도록 만들어 둔 것인지도 궁금합니다. // 가짜 mutation 만들기 (요청, 응답 모두) const mocks = [ { request: { query: CREATE_BOARD, variables: { createBoardInput: { writer: "철수", title: "안녕하세요", contents: "반갑습니다", password: "1234", }, }, }, result: { data: { createBoard: { _id: "백엔드에서-받은-게시글ID", writer: "철수", title: "안녕하세요", contents: "반갑습니다", }, }, }, }, ];
미해결
[리뉴얼] React로 NodeBird SNS 만들기
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을 어떻게 처리할것인지.. 잘모르겠습니다
