수강이 제한됩니다.
다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 해결됨React로 NodeBird SNS 만들기
모델 작성 중 질문 드립니다!
안녕하세요 강의 듣고 토이프로젝트 진행중인 학생입니다! 사용자가 아이템을 보유하고 있고, 장착버튼을 누르면 사용자의 캐릭터가 해당 아이템을 장착하는 기능을 만들고자 합니다. (아바타 개념) <Item 테이블 (하나의 모델만 사용)> 아이템 구매 시 해당 테이블에 데이터 값이 추가됩니다. 처음 설계했을 때엔 Item 모델을 만들고 사용자가 다수의 아이템을 갖는 1:N관계로 설정한 후에 아이템 column에 equipped를 넣어 true/false로 장착 여부를 판별하여 사용자의 캐릭터가 장착하고 있는 모자는 아이템 데이터들중에 UserId가 사용자의 아이디이고, itemType이 'hat'이고 equipped가 true인 아이템을 골라내어 보여주고, 옷은 itemType이 'clothes'이고 equipped가 true인 아이템을 찾아 보여주는 식으로 진행을 하고 있었습니다. 이렇게 되니 사용자의 아바타를 보여줄 때에 각 itemType별로 filter를 돌려 equipped 여부에 따라 값을 리턴하는 방식으로 코드를 짜게 되었는데, 너무 많은 데이터 사이에서 걸러내어 서버에 무리가 가게 되는 것은 아닌지 걱정되어 질문글 드립니다. 후에 다른 user의 아바타 또한 볼 수 있도록 만들고자 하는데, 그럴 때마다 item 테이블에서 해당 유저의 아이템들을 조회하여 타입별 equipped 여부를 파악하여 가져온다고 생각하니까 더더욱 서버에 무리가 가지 않을까 고민이 되었습니다 ㅠㅠ 제가 여태 하던 방식대로 item 모델에 equipped 여부를 넣어 해당 값을 가지고 있는 데이터를 가져오는 방식으로 진행하는게 나을지, 아니면 item 모델은 아이템을 구매하여 추가하고, 가지고 있는 아이템 목록을 불러오는 기능만 수행하도록 하고 따로 각 부위별로 어떤 아이템을 장착하고 있는지 데이터를 기록하는 equipment 모델을 만들어주어 아이템 장착, 장착해제는 해당 모델에서 이루어지도록 하는게 맞는지.. 어떤 방식이 서버에 덜 무리가 갈지가 궁금합니다! <Item 테이블 (equipment 모델과 같이 사용 시)> <Equipment 테이블> equipment 모델을 만들 경우 따지고보면 item모델에 있는 아이템 중에서 선택한 아이템의 id값을 따로 기록해두는 셈이 되는데... 이런 식으로 아이템을 다루는 모델을 중복하여 두개를 사용해도 되는 것인지 잘 모르겠습니다.ㅠㅠ 기존 방법대로 하나의 테이블에서 equipped 컬럼을 넣어주어 해당 값으로 장착여부를 판별하는 것이 나을까요? ㅠㅠ상황을 자세히 설명을 드리느라 내용이 복잡해졌는데.. 궁금한 포인트는 새로운 모델을 추가하여 데이터를 수정하고 불러들이는 것을 간소화하는 것 / 모델을 추가하지 않고 하나의 모델 내에서 진행을 하는 것 둘중 어느것이 바람직한 방법인지 여쭤보고 싶습니다! 조언 주시면 감사하겠습니다!
- 미해결React로 NodeBird SNS 만들기
게시글 상세페이지 관련 질문 + 댓글 삭제 관련 질문입니다 ㅠㅠ
1. 게시글 상세 페이지 관련입니다. https://www.inflearn.com/questions/32445 이 게시글이랑 연결되어 있는데, 화면에 댓글과 좋아요 등이 표시됩니다! 하지만 기능이 화면에 표현은 되지 않고, db에서는 돌아갑니다. 예를 들어 상세 페이지에서 댓글을 올리면 화면에서는 돌아가지 않는데, db에는 업로드 되고 페이지를 나갔다가 다시 들어오면 댓글이 올라와있습니다. 전에 ROUTES 부분 캡쳐 잘못 올린 부분때문에 다시 올립니다. <코드> <reducer> <routes> 2. 댓글 삭제 기능을 좋아요 취소 기능을 참고해서 만들어봤는데 어떤 부분때문에 작동을 안 하는지 헷갈려서 질문 남깁니다 ㅠ.ㅠ 힌트 주시면 감사하겠습니다 <코드> <routes> <saga> <reducer>
- 미해결React로 NodeBird SNS 만들기
Devtools 관련 에러와 작동 질문
안녕하세요 구조도 이해가 잘 가서 코드도 재확인 해보아도 문제가 없고 메인페이지-> 회원가입(버튼 ) -> 가입하기 (화면) 까지는 잘 가는데요 Redux-devtools에서는 각 Input란에 내용 넣고 버튼 눌그면 로그인 / 가입하기 액션이 데브툴즈에 나오지도 않고 작동도 안하고 있습니다. 강압적으로 devtoools안에서 직접 JSON형식으로 LOG_IN보내야만 겨우 로그인이 되는데요 이때 아래와 같은 에러도 함께 한번 발생했습니다. 우선 올려놓은 코드 제 깃헙에 올려놨습니다 ㅠㅠ 한번 확인 부탁드려요 https://github.com/minch1025/Nodebird_kwon/tree/master/front index.js:1 Warning: Invalid event handler property `onclick`. Did you mean `onClick`? in button (created by Context.Consumer) in Wave (created by Context.Consumer) in Button (at UserProfile.js:38) in div (created by Context.Consumer) in div (created by Context.Consumer) in Card (at UserProfile.js:15) in UserProfile (at AppLayout.js:31) in div (created by Context.Consumer) in Col (at AppLayout.js:30) in div (created by Context.Consumer) in Row (at AppLayout.js:29) in div (at AppLayout.js:12) in AppLayout (at _app.js:20) in Provider (at _app.js:12) in NodeBird (created by withRedux(NodeBird)) in withRedux(NodeBird) in Container (created by AppContainer) in AppContainer
- 미해결React로 NodeBird SNS 만들기
antd 디자인 렌더링속도문제
antd 적용까진 되는데새로고침하면 1초정도 antd가 안먹어서 화면이 깨져보이는데 무슨 문제일까요?
- 미해결React로 NodeBird SNS 만들기
react-helmet
6버전 이상부턴 default export가 없어서 import {Helmet} from 'react-helmet'; 이렇게 받아와야 하는거 같아요 버전 업데이트를 하면서 default export를 안쓰고 {}로 감싸고 import 해와야 하는데, 질문) 패키지에 어떤 기능추가를 위해서 저렇게 default export를 안쓰고 바꾸는 건가요?? 보통 어떤경우에 패키지 개발자가 저렇게 바꾸는지 궁금합니다.
- 미해결React로 NodeBird SNS 만들기
newPost.addImages(images)부분 질문입니다
newPost.addImages(images)부분 질문입니다 이부분이 일단 image쪽을 db에생성하고 postId에 값을 넣어주어서 연결시키게 만드는 메소드가 맞나요?
- 미해결React로 NodeBird SNS 만들기
게시글 컨텐츠 눌렀을 때 게시글 상세 페이지로 이동(post page)
게시글 컨텐츠 눌렀을 때 상세페이지로 이동을 구현하고 있는 중인데, 로직상으로 헷갈리는 부분이 있어서 여쭤봅니다. <Link href = {{pathname : '/post', query : { id : post.RetweetId ? post.RetweetId : post.id } }} as = {`/post/${post.RetweetId ? post.RetweetId : post.id}`}><PostCardAtag> {post.Retweet.User.nickname}</PostCardAtag></Link> 이동은 각 카드에 링크를 걸어, post.id로 이동하게 했고, post.js에서는 post card의 key를 singlePost를 넣었습니다. reducer, routes입니다. 이렇게 하니 post의 이미지와 타이틀, description과 같은 부분은 잘 불러와지나, 댓글 기능과 like 기능을 불러오지 못합니다 ㅠㅠ 아마 댓글 기능과 like 기능의 reducer이 mainPosts와 연결되어 있어서 그런 것 같습니다. 그래서 어떻게 해야할지 찾아보고 있는데, 이 댓글 기능과 like 기능을 reducer 부분에서 찾아서 넣어줘야할지 reducer에서 singlePost 값을 mainPosts의 post index와 연결시켜줘야 하는 것인지가 어려워서 여쭤봅니다! 답변 부탁드립니다!
- React로 NodeBird SNS 만들기
postId의 undefined
삭제된 글입니다
- 해결됨React로 NodeBird SNS 만들기
번들 파일이 생성이 되지 않습니다.
폴더가 생기지 않아요.
- 미해결React로 NodeBird SNS 만들기
next에서 route주소에서 새로고침 하면 404에러 질문입니다.
comment.js import React, { useEffect, useState } from "react"; import { useDispatch, useSelector } from "react-redux"; import { LOAD_POST_REQUEST, LOAD_COMMENTS_REQUEST } from "../reducers/post"; import PostCard from "../components/PostCard"; import Router from "next/router"; import CommentForm from "../components/CommentForm"; import CommentCard from "../components/CommentCard"; import styled from "styled-components"; import { LoadingOutlined } from "@ant-design/icons"; import Theme from "../styles/Theme"; const LoadingWrapper = styled.div` position: fixed; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; font-size: 2.5rem; color: ${Theme.themeColor}; `; const comment = ({ id }) => { const dispatch = useDispatch(); const { post, comments, isEditingComment, isAddingComment, isDeletingComment, isLoadingComments, isLoadedComments } = useSelector(state => state.post); const { me } = useSelector(state => state.user); const [isLoading, setIsLoading] = useState(false); useEffect(() => { dispatch({ type: LOAD_COMMENTS_REQUEST, data: id || (Router && Router.router && Router.router.query && Router.router.query.tag) }); dispatch({ type: LOAD_POST_REQUEST, data: id || (Router && Router.router && Router.router.query && Router.router.query.tag) }); }, []); useEffect(() => { if (isLoadedComments) { return; } if ( isEditingComment || isAddingComment || isDeletingComment || isLoadingComments ) { setIsLoading(true); setTimeout(() => { setIsLoading(false); }, 500); } }, [ isEditingComment, isAddingComment, isDeletingComment, isLoadingComments, isLoadedComments ]); return ( <> {/* <PostCard showMenu={false} post={post} /> */} {isLoading && ( <LoadingWrapper> <LoadingOutlined /> </LoadingWrapper> )} {me && ( <CommentForm postId={ id || (Router && Router.router && Router.router.query && Router.router.query.tag) } /> )} {comments && !isLoading && comments.map(comment => <CommentCard comment={comment} />)} </> ); }; comment.getInitialProps = async context => { const id = context.query.id; return { id }; }; export default comment; ----------------------------------------------------------------------------------------- followers.js import React from "react"; const followers = ({ id }) => { return <div>followers/{id}</div>; }; followers.getInitialProps = async context => { const id = context.query.id; return { id }; }; export default followers; 2개 js파일을 올려드렸습니다. 절취선 위에 있는 comment.js 파일은 http://localhost:3060/comment/9 에 접속해서 새로고침을 해도 정상적으로 동작합니다. 즉, 처음에 _app.js나 index.js 파일을 거치지 않고 바로 저 위에 주소로 접속해도 정상적으로 접속이 된다는 뜻 입니다. 하지만, 2번째로 올려드린 followers.js를 통해 http://localhost:3060/followers/2 로 _app.js나 index.js 파일을 거치지 않고 바로 접속하면( 즉, 저 위에 주소에서 새로고침) 하면, 404 에러가 나옵니다. comment.js 에서는 되는데,followers.js에서는 새로고침하면 404 에러가 나오는 이유가 무엇일까요? 질문드립니다.
- 미해결React로 NodeBird SNS 만들기
하이오더 컴포넌츠가 어떤의미인가요?
high order components라고 정의되는 것들이 따로 있는 것인가요? 의미를 잘 모르겠습니다
- 미해결React로 NodeBird SNS 만들기
댓글질문있습니다
댓글삭제 기능도 해보고싶어서 사가 리듀서 백라우트 프론트 코드 작성해봤어요~ 401Unauthorized 에러뜨는데 어떤 부분을 고쳐야 할까요? // 댓글삭제하기 const onRemoveComments = useCallback(userId => () => { alert('댓글을 삭제하시겠습니까?'); dispatch({ type: REMOVE_COMMENT_REQUEST, data: userId, }); }); < post.js/reducers > // 댓글 지우기 case REMOVE_COMMENT_REQUEST: { return { ...state, }; } case REMOVE_COMMENT_SUCCESS: { const postIndex = state.mainPosts.findIndex(v => v.id === action.data.postId); const post = state.mainPosts[postIndex]; const Comments = post.Comments.filter(v => v.id !== action.data.comments ); const mainPosts = [...state.mainPosts]; mainPosts[postIndex] = { ...post, Comments }; return { ...state, mainPosts, }; } case REMOVE_COMMENT_FAILURE: { return { ...state, }; } < post.js/sagas > // 댓글 지우기 function removeCommentsAPI(postId) { return axios.delete(`/post/${postId}/comment`); } function* removeComments(action) { try { const result = yield call(removeCommentsAPI, action.data); yield put({ type: REMOVE_COMMENT_SUCCESS, data: { postId: action.data, comments: result.data, }, }); } catch (e) { console.error(e); yield put({ type: REMOVE_COMMENT_FAILURE, error: e, }); } } -백 <post.js/routes> // 댓글삭제하기 routes router.delete('/:id/comment', isLoggedIn, async (req, res, next) => { try { const comment = await db.Comment.findOne({ where: { id: req.params.id } }); if (!comment) { return res.status(404).send('댓글이 존재하지 않습니다.'); } await db.Comment.destroy({ where: { id: req.params.id } }); res.send(req.params.id); } catch (e) { console.error(e); next(e); } });
- 미해결React로 NodeBird SNS 만들기
5-12 강의에서 5-14로 넘어갈 때 강의의 코드 달라서 질문 드립니다
보시면 return req.login(user, async(~~~ 이렇게 되어있는데 async 아래로는 설명이 안나와 있어서 문의드립니다. 5-12강에서는 윗 캡쳐처럼 되어있는데 5-14강에서는 아래 캡쳐처럼 되어있어서요 무엇때문에 코드가 변경된건지 설명 부탁드리겠습니다.
- 미해결React로 NodeBird SNS 만들기
npm i with-redux-wrapper 질문
npm i with-redux-wrapper 하닌깐 아래와 같이 404 에러가 뜨는데요, 구글에 쳐도 딱히 안보이던데 없어진것인가요? npm i with-redux-wrapper npm ERR! code E404 npm ERR! 404 Not Found - GET https://registry.npmjs.org/with-redux-wrapper - Not found npm ERR! 404 npm ERR! 404 'with-redux-wrapper@latest' is not in the npm registry. npm ERR! 404 You should bug the author to publish it (or use the name yourself!) npm ERR! 404 npm ERR! 404 Note that you can also install from a npm ERR! 404 tarball, folder, http url, or git url. npm ERR! A complete log of this run can be found in: npm ERR! /Users/eunwoo/.npm/_logs/2020-04-20T16_40_04_518Z-debug.log next-redux-wrapper는 잘 설치되는데, next안쓰는 경우에는 with-redux-wrapper 설치 해야하는게 아닌가 해서 질문드립니다.
- 해결됨React로 NodeBird SNS 만들기
1분 34초 쯤 reducer import 질문입니다.
import reducer from ../reducers에서 reducer 폴더안에 index에서 combine을 시켰는데, index를 import 하는게 아니라, reducer를 import하는게 이해가 안되네요. index의 숨겨진 이름같은건가요 reducer가? reducers폴더안에 reducer라는 js파일이 없는데 import하셔서 궁금합니다.
- 미해결React로 NodeBird SNS 만들기
bcrypt로 된 패스워드 비밀번호 찾기
안녕하세요. 제로초님 다름이 아니라 저희가 지금 bcrypt로 패스워드를 암호화했잖아요. 그러면 사용자가 패스워드 찾기를 하면 데이터베이스에 일치하는 비밀번호가 있다면 성공이잖아요? 하지만 db에서는 암호화된 비밀번호로 저장이되어있는데 어떻게 비밀번호 찾기 기능을 해야하나요??
- 해결됨React로 NodeBird SNS 만들기
이미지 회전하기
이미지 업로드시 휴대폰으로 찍은 사진의 회전값을 변경하려고 합니다. Exif Orientation에 대한 정보를 찾아 봤는데, 프론트에 변경된 값을 랜더링하니 이전 이미지가 다시 변경되어, 백단에서 저장하기 전에 정보를 변경하고 이미지를 회전하여 저장하려고 합니다. 어떤 방법이 있을까요?
- 해결됨React로 NodeBird SNS 만들기
싱글태그로 바꿀때 단축키가 있나요?
3분 19초쯤 보면, List 태그에 닫는태그 바로 지우면서 싱글태그로 바꾸시는데, 단축키가 따로 있으신건가요?
- 미해결React로 NodeBird SNS 만들기
미들웨어 이렇게 추가하는거 맞나요..??
middleware.js exports.postExist = async(req,res,next)=>{ const post = await db.Post.findOne({ where: { id: req.params.id } }); if (!post) { return res.status(404).send("해당 페이지가 존재하지 않습니다"); } next(); } post.js router.delete('/:id', isLoggedIn, postExist, async(req,res,next)=>{ try{ await db.Post.destroy({ where: {id: req.params.id}}); res.send(req.params.id); }catch(e){ console.error(e); next(e); } }) next()만 추가해서 다음 동작으로 갈수있게 해주었는데 더 추가할게 있는지 궁금합니다..!
- 해결됨React로 NodeBird SNS 만들기
더미데이터는 보통 한곳에 만드나요?
예를 들면 상위 컴포넌트에 사용할 dummy 데이터를 한번에 만들어서 각 컴포넌트의 props로 불러들이는게 나은지, 아니면 각 컴포넌트들 마다 필요한 dummy를 만드는게 나은건지, 둘다 상관은 없지만 주로 어떻게 하시는지 궁금합니다.