173만명의 커뮤니티!! 함께 토론해봐요.
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
emotion에 props 던지기 및 setState의 작동원리강의 49분경 설명에서.... 작성자,제목,내용 인풋창에 q,q,q를 입력하는 과정에서 최종적으로 내용인풋에 q입력할때 처음에는 contents값이 없는 상태로 렌더링이 일어나고 42번째 함수가 종료가 될때, (임시로 저장해두었던 q) contents를 q로 바꾸라고 알아들어서 바꾸면 한번더 리렌더링이 일어나서 contents 값이 q가되어 있으므로 44번째 if문이 실행이 되어서 45번째 setMycolor가 실행이 되고, 또 다시 setMycolor가 바뀌므로 리렌더링 일어나서 버튼색이 노란색으로 바껴야 하는거 아닌가요? 왜 내용에 qw를 입력하는 순간 이 일이 일어나나요?
react node.js seo graphql next.js
H,S
2023-04-22T13:22:50.738Z
댓글 1
좋아요 0
조회수 438
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
안녕하세요. 언제나 좋은 강의 감사합니다! 다름이 아니라 section 14 과제인 마이페이지를 구현하는 중인데 나의 상품 페이지 pagination에 사용할 내 장터-나의 상품 count API는 어떤 걸 쓰면 될까요? 다른 페이지에서 사용할 count API는 모두 있는 것 같데 나의 상품만 없는 건지 제가 못 찾고 있는 건지 모르겠네요..
react node.js seo graphql next.js
Hephaestus
2023-04-22T12:51:37.492Z
댓글 1
좋아요 0
조회수 320
미해결
따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)
강의에서 좀 더 나아가 클라이언트와 서버도 도커 환경으로 구축?을 해보려고 합니다. 계획은 Docker hub private repo에 Dockerfile로 빌드된 이미지를 push하고 ec2인스턴스에서 docker-compose up으로 pull을 받으려고 합니다. 간단히 테스트를 해보니 제대로 실행은 되고 있으나 보안적인 부분에 있어 문제될 것이 있나 궁금하여 질문 드립니다. 답변 주시면 감사하겠습니다. 감사합니다~
react node.js postgresql docker typescript 클론코딩 next.js
오원
2023-04-22T12:08:39.640Z
댓글 1
좋아요 0
조회수 392
미해결
[리뉴얼] 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("서버실행중!"); });
react redux node.js express next.js
장산
2023-04-22T04:14:10.714Z
댓글 2
좋아요 0
조회수 561
미해결
작정하고 장고! Django로 Pinterest 따라만들기 : 바닥부터 배포까지
updateform에서 disabled = True로 변경하여 url로 접속해보면 제대로 적용이 되는 것을 확인할 수 있습니다. 하지만 비밀번호를 입력하고 제출을 누르면 계속해서 A user with that username already exists. 메시지만 뜨고 있는 상황입니다. ㅠㅠㅠ
kookb2000
2023-04-21T16:16:00.317Z
댓글 3
좋아요 3
조회수 1590
미해결
[리뉴얼] 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에러가 나는데 프론트 문제인가요?
react redux node.js express next.js
장산
2023-04-21T06:11:34.589Z
댓글 1
좋아요 0
조회수 392
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
로그인은 가능한데 로그아웃은 어떻게 하는지 모르겠습니다 ㅠ logoutUser mutation으로 해도 에러가 떠서 찾아봐도 강의에 나와있지 않아서 글 남깁니다!!
react node.js seo graphql next.js
호겸
2023-04-21T05:32:30.708Z
댓글 1
좋아요 0
조회수 563
미해결
[리뉴얼] React로 NodeBird SNS 만들기
git 저장소를 불러오는중에 Aborting떠서 git reset --hard를 해도 계속 최신 커밋이 안뜹니다 ㅠㅠ HEAD is now at 95de5ce Update: back start script 계속 이게 뜨면서 pull해도 Aborting이 계속 나오네요 ㅠㅠ
react redux node.js express next.js
장산
2023-04-20T12:14:27.751Z
댓글 1
좋아요 0
조회수 436
미해결
[리뉴얼] React로 NodeBird SNS 만들기
제가 다른게시물 보고 https://www.digitalocean.com/community/tutorials/how-to-install-mysql-on-ubuntu-20-04 이거까지 했는데 계속 새로운 비밀번호 입력 하라고 뜨네요 ㅠㅠ 이런 경우 어떻게 해야할까요 비밀번호도 보안수준에 맞게 했는데 계속 뜨네요 ㅠㅠ
react redux node.js express next.js
장산
2023-04-20T11:20:23.134Z
댓글 3
좋아요 0
조회수 565
해결됨
[리뉴얼] React로 NodeBird SNS 만들기
강좌를 듣고나면 saga의 user.js 랑 post.js 쪽 파일이 코드줄이 굉장히 길어지는데요 막상 파일을 쪼개서 정리를 하려고해도 연관되는 상태들이 많아서 결국엔 한쪽으로 몰게되네요 어쩔 수 없는 부분인가요? 사실 강좌를 듣고 프로젝트를 하나 완성했는데 saga 부분을 쪼갤 수 있으면 최종적으로 수정하고 마무리 할거고 아니면 바로 타입스크립트 강좌 듣고 repo 하나 더 파서 지금 프로젝트 타입스크립트로 정리해보려 합니다 ㅎ 좋은 강좌 만들어주셔서 정말 감사하고 다음 강좌는 전용 링크로 수수료없이 결제하겠습니다 ~ 감사합니다 !
react redux node.js express next.js
kenny
2023-04-19T10:17:42.076Z
댓글 1
좋아요 0
조회수 299
미해결
[리뉴얼] React로 NodeBird SNS 만들기
깃허브에 올려주신 react query의 부분을 보고 공부하는 과정중에 궁금한 점이 생겨 질문드립니다. 로그인 정보를 가져오기 위한 const { data: me } = useQuery<User>('user', loadMyInfoAPI); useQuery를 이용해 캐싱한 데이터를 가져오는 방법과, 리덕스, 리코일의 전역관리 상태 라이브러리를 이용하여 로그인 정보를 관리하는 방법중에 어떠한 방법이 나은 방향인지 궁금합니다. 저의 경우는 전역 상태로 관리해, 데이터를 한 번만 가져와서 여러 곳에서 사용할 수 있어서 코드의 중복을 줄일 수있다고 생각하였는데 왜 useQuery를 이용해 캐싱한 데이터를 가져오는 방법을 사용하였는지 궁금합니다.
react redux node.js express next.js
복준우
2023-04-19T09:42:15.816Z
댓글 1
좋아요 0
조회수 2302
미해결
[리뉴얼] 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 redux node.js express next.js
wodnjs306
2023-04-19T07:24:00.032Z
댓글 2
좋아요 0
조회수 413
미해결
[리뉴얼] 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에서 위에 코드를 입력하면 사이트에 연결할수 없음이라고 뜨는데 이코드도 버전 차이면 어떻게 바꿔야 하는지 알려주시면 감사하겠습니다
react redux node.js express next.js
장산
2023-04-18T16:11:48.446Z
댓글 1
좋아요 0
조회수 423
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
안녕하세요 취업할때 공부한 걸 블로그나 노션에 기록해뒀다가 주소를 이력서에 첨부하면 좋다고 들었는데요 노션에 공부노트 템플릿으로 저렇게 수업내용 같은거 작성하고 있는데 제가 노션이 익숙치 않아서ㅜㅜ 이런식으로 해서 주소첨부해도 괜찮은 게 맞나요? 혹시 팁이 있다면 알려주세요~^^
react node.js seo graphql next.js
혜인
2023-04-18T13:42:28.666Z
댓글 1
좋아요 0
조회수 749
미해결
따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)
항상 좋은 강의 감사드려유♡
react node.js postgresql docker typescript 클론코딩 next.js
특별한 지렁이
2023-04-18T10:59:51.652Z
댓글 1
좋아요 1
조회수 447
미해결
[리뉴얼] 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 redux node.js express next.js
장산
2023-04-18T09:27:48.830Z
댓글 1
좋아요 0
조회수 468
해결됨
[리뉴얼] React로 NodeBird SNS 만들기
실제 몇몇 서비스를 보면 글 작성이나 수정같은 비동기 요청이 성공한 후에 새로고침을 하는데 이 강좌와 같이 Next.js를 사용하는 리액트 개발은 새로고침을 하는게 맞는건가요?
react redux node.js express next.js
kenny
2023-04-18T06:12:13.510Z
댓글 1
좋아요 0
조회수 328
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
안녕하세요 혹시 강의 내용을 복습할 때 깃허브나 블로그에 정리 요약 해서 업로드 해도 될까요?
react node.js seo graphql next.js
2023-04-17T00:49:38.844Z
댓글 1
좋아요 0
조회수 444
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
let i = 0; while (i <10) { console.log(i) i = i +1 } 여기서 콘솔로 0 ~10 까지 찍히는데 왜 10까지 찍히는건가요?? 강의 마지막에 편집오류인지 짤려서 이유가 안나와요
react node.js seo graphql next.js
멋진남자
2023-04-16T18:57:06.329Z
댓글 1
좋아요 1
조회수 302
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
안녕하세요 멘토님 매번 강의 잘 듣고 있습니다. 이번 강의를 마무리로 별도로 개인 토이프로젝트 개발을 시작하고 배포를 할 때가 오면 다시 배포 부분부터 수강할 예정인데 이 강의에서 이해가 좀 정확히 안되는 부분이 있어서 질문 글을 올렸습니다. 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 node.js seo graphql next.js
FRONTEER
2023-04-16T16:54:37.444Z
댓글 1
좋아요 0
조회수 349
