월 17,600원
5개월 할부 시다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
다대다 관계 중간 테이블에서 find하기
포스트정보를 가져올 때 이렇게 좋아요를 가져오는데 좋아요에 대한 건 중간 테이블에서 가져오는게 아닌가요?as Likers는 단순히 user테이블의 이름만 바꾼다고 생각을 했습니다..좋아요 테이블은 따로 find로 접근을 할 수 없나요?
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
models post.js nickname column 생성
안녕하세요 제로초쌤 유저의 게시글을 [id]로 받아오는건 잘 되는데유저의 게시글을 동적라우팅을 할때 유저의 닉네임을 넣어서 받아올려고 합니다!하지만 백엔드의 post.js의 column 형태가 아래와 같이 되어있어서nickname을 받아오게 하기 위해서 Posts DB안에 있던 게시글을 전부 지운뒤 models 의 post.js 안에 nickname관련 설정을 따로 넣었습니다.근데 저렇게 작성하면 백엔드에서는 nickname관련한 필드리스트를 찾을 수 없다고 해서 에러가 나더라구요혹시 post.js의 설정 중에서 어떤걸 건드려야 게시글 작성자의 nickname을 들어가게 할 수 있나요?
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
리트윗 따로 관리 시 테이블 관계성 질문
안녕하세요 선생님.제 프로젝트에서는 리트윗 기능이 일반 게시글과 분리되어 관리되거든요.(리트윗만 모아서 보여주고 게시글과 한꺼번에 렌더링해서 보여주지 않습니다)그래서 처음에는 그냥 for문으로 리트윗 내용일 땐 렌더링 하지 않는 식으로 처리했다가제 프로젝트에서 mainPosts로 map함수를 쓰는 컴포넌트가 몇 개 돼서그냥 리트윗 테이블을 따로 만들어서 관리할까 하는데 이럴 때 post와의 관계성은db.Post.hasMany(db.Retweet);이런 식으로 잡아주면 되나요?
- 해결됨[리뉴얼] React로 NodeBird SNS 만들기
npm i next@13
강의를 보면서 잘 오다가 npm i next@9로 해야하는걸 아래 질문에서 13을 써도 된다고 하셔서 @13 이라고 했는데 저렇게 에러 3줄이 next@9을 할 때 도 저렇게 뜨고 13으로 해도 저렇게 뜹니다 package.json 뜨는 것 까진 잘 됐어요 어떻게 해야할까요? PS C:\Users\USER\Desktop\1080\react1> cd preparePS C:\Users\USER\Desktop\1080\react1\prepare> cd frontPS C:\Users\USER\Desktop\1080\react1\prepare\front> node -v v18.14.0PS C:\Users\USER\Desktop\1080\react1\prepare\front> npm -v6.9.0PS C:\Users\USER\Desktop\1080\react1\prepare\front> npm initnpm WARN npm npm does not support Node.js v18.14.0npm WARN npm You should probably upgrade to a newer version of node as wenpm WARN npm can't make any promises that npm will work with this version.npm WARN npm Supported releases of Node.js are the latest release of 6, 8, 9, 10, 11, 12.npm WARN npm You can find the latest version at https://nodejs.org/This utility will walk you through creating a package.json file.It only covers the most common items, and tries to guess sensible defaults.See npm help json for definitive documentation on these fieldsand exactly what they do.Use npm install <pkg> afterwards to install a package andsave it as a dependency in the package.json file.Press ^C at any time to quit.package name: (front) react-nodebird-frontversion: (1.0.0)description:entry point: (index.js)test command:git repository:keywords:author:license: (ISC)About to write to C:\Users\USER\Desktop\1080\react1\prepare\front\package.json:{ "name": "react-nodebird-front", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "author": "", "license": "ISC"}Is this OK? (yes) yesPS C:\Users\USER\Desktop\1080\react1\prepare\front> npm i next@13npm WARN npm npm does not support Node.js v18.14.0npm WARN npm You should probably upgrade to a newer version of node as wenpm WARN npm can't make any promises that npm will work with this version.npm WARN npm Supported releases of Node.js are the latest release of 6, 8, 9, 10, 11, 12.npm WARN npm You can find the latest version at https://nodejs.org/npm ERR! cb.apply is not a functionnpm ERR! A complete log of this run can be found in:npm ERR! C:\Users\USER\AppData\Roaming\npm-cache\_logs\2023-02-14T14_50_16_126Z-debug.logPS C:\Users\USER\Desktop\1080\react1\prepare\front>
- 해결됨[리뉴얼] React로 NodeBird SNS 만들기
node -v v.18.14.0
node -v 쳤을 시 버전이 v18.14.0 으로 뜨는데 그대로 진행해도 괜찮은 건가요
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
PostHashtag테이블
PostHashtag(Post와 Hashtag 중간 테이블)에서 findAll을 해서 hashtag이름 까지 가지고 오는 방법이 있을 까요? 지금은 해쉬태그 Id까지밖에 가지고 오지 못해서요
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
npm run dev의 에러
안녕하세요 2023년에 강의를 듣는중입니다. Next와 React의 버전은 강의와 같고 Node Js 버전은 v18.13.0 인상태로 npm run dev를 실행하면> react-nodebird-front@1.0.0 dev> nextBrowserslist: caniuse-lite is outdated. Please run:npx browserslist@latest --update-dbready - started server on http://localhost:3000node:internal/crypto/hash:71 this[kHandle] = new _Hash(algorithm, xofLen); ^Error: error:0308010C:digital envelope routines::unsupported at new Hash (node:internal/crypto/hash:71:19) at Object.createHash (node:crypto:133:10) at module.exports (/Users/user/Desktop/Folders/Programming 2/zerocho/nodebird/prepare/front/node_modules/webpack/lib/util/createHash.js:135:53) at NormalModule._initBuildHash (/Users/user/Desktop/Folders/Programming 2/zerocho/nodebird/prepare/front/node_modules/webpack/lib/NormalModule.js:417:16) at handleParseError (/Users/user/Desktop/Folders/Programming 2/zerocho/nodebird/prepare/front/node_modules/webpack/lib/NormalModule.js:471:10) at /Users/user/Desktop/Folders/Programming 2/zerocho/nodebird/prepare/front/node_modules/webpack/lib/NormalModule.js:503:5 at /Users/user/Desktop/Folders/Programming 2/zerocho/nodebird/prepare/front/node_modules/webpack/lib/NormalModule.js:358:12 at /Users/user/Desktop/Folders/Programming 2/zerocho/nodebird/prepare/front/node_modules/loader-runner/lib/LoaderRunner.js:373:3 at iterateNormalLoaders (/Users/user/Desktop/Folders/Programming 2/zerocho/nodebird/prepare/front/node_modules/loader-runner/lib/LoaderRunner.js:214:10) at Array.<anonymous> (/Users/user/Desktop/Folders/Programming 2/zerocho/nodebird/prepare/front/node_modules/loader-runner/lib/LoaderRunner.js:205:4) { opensslErrorStack: [ 'error:03000086:digital envelope routines::initialization error' ], library: 'digital envelope routines', reason: 'unsupported', code: 'ERR_OSSL_EVP_UNSUPPORTED'}에러가 나오네요 chatGPT에게 물어보면 npx browserslist@latest --update-db 로 라이브러리를 업데이트 해라고 나와서 따라 했지만 여전히 같은 에러가 나왔습니다. 그러나 왠지 Node 의 버전이 문제일거같아서 12.17.0으로 낮춰서 npm run dev를 해보니 작동이 되었습니다. Node의 버전이 문제라면 에러메시지에 Node의 버전이 문제라고 나와야한다고 생각하는데 저런 에러가 나온 이유는 뭘까요???Node의 버전 문제인데 이 메세지라면 에러 메세지대로 해결 할 수 없는것 아닌가요?
- 해결됨[리뉴얼] React로 NodeBird SNS 만들기
Saga vs Thunk
Redux Toolkit을 써보고 싶은데 고민이 생겼습니다.제로초 님이 실무에서 리덕스 할 떄 Saga를 더 잘 쓰셨다고 말씀하셨던 거 같습니다. 근데 Redux Toolkit을 쓰려면 Thunk를 쓰는 게 더 편할 거 같은데 어떻게 생각하시나요?? 그리고 이미 Saga를 열심히 배워놨고 익숙해 졌는데 Toolkit를 쓰려고 Thunk로 다시 돌아가야 된다는 게 조금 배웠던 시간이 아깝기도 하고 고민중입니다. 물론 둘 다 동일한 비동기 요청을 하는 기능을 하는 것이지만 배우고 있는 입장에서는 고민이네요.제로초 님은 Redux Toolkit 쓸 때에도 Saga를 같이 쓰시는 편인가요?+인피니트 스크롤링을 구현할때의 경우도 생각을 해봐야 될 거 같은데, 이부분은 강의를 끝까지 안 들어봐서 어떤 결정이 나을지 모르겠네요
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
리듀서 action 과 draft 차이
리듀서에서 draft사용은 기본 state 이고 action은 dispatch에 받아온 값인거죠?
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
다이나믹 라우터 7버젼 이상 질문
다이나믹 라우팅을 할때 next-redux-wrapper 7버전 이상 사용하고 있는데질문이 2가지가 있습니다!구동방식에 대해서는 이해했는데 getServerSideProps 에 loadPost에 context.params.id 가 아니라 7버전 이상이여서 req.params.id로 넣어줬는데 백엔드에서 받는 postId가 undefined로 뜹니다 혹시 7버전이상일땐 loadPost에는 어떤 값을 넣어줘야하나요..!? 게시글에 <Link>를 사용해서 다이나믹 라우터를 이용하면 처음에 CSR 방식으로 값을 받아와서 데이터가 없기 때문에 undefined가 뜨기 때문에 그 동안 로딩창을 띄워줘야 된다고 말씀하셨는데 그 말씀 자체에는 이해가 됐는데 그러면 getServerSideProps 에 따로 작업을 해줘야하는건가요!?
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
PostImages 이미지 length 오류
PostImages.jsimport React, { useCallback, useState } from 'react'; import PropTypes from 'prop-types'; import { PlusOutlined } from '@ant-design/icons'; import ImagesZoom from './ImagesZoom'; const PostImages = ({ images }) => { const [showImagesZoom, setShowImagesZoom] = useState(false); const onZoom = useCallback(() => { setShowImagesZoom(true); }, []); const onClose = useCallback(() => { setShowImagesZoom(false); }, []); if (images.length === 1) { return ( <> <img role="presentation" src={images[0].src} alt={images[0].src} onClick={onZoom} /> {showImagesZoom && <ImagesZoom images={images} onClose={onClose} />} </> ); } if (images.length === 2) { return ( <> <div> <img role="presentation" src={images[0].src} alt={images[0].src} width="50%" onClick={onZoom} /> <img role="presentation" src={images[1].src} alt={images[1].src} width="50%" onClick={onZoom} /> </div> {showImagesZoom && <ImagesZoom images={images} onClose={onClose} />} </> ); } return ( <> <div> <img role="presentation" src={images[0].src} alt={images[0].src} width="50%" onClick={onZoom} /> <div role="presentation" style={{ display: 'inline-block', width: '50%', textAlign: 'center', verticalAlign: 'middle' }} onClick={onZoom} > <PlusOutlined /> <br /> {images.length - 1} 개의 사진 더보기 </div> </div> {showImagesZoom && <ImagesZoom images={images} onClose={onClose} />} </> ); }; PostImages.propTypes = { images: PropTypes.arrayOf(PropTypes.shape({ src: PropTypes.string, })).isRequired, }; export default PostImages;Post.jsexport const initialState = { mainPosts: [{ id: 1, User: { id: 1, nickname: '제로초', }, content: '첫 번째 게시글', Images: [{ src: 'https://bookthumb-phinf.pstatic.net/cover/137/995/13799585.jpg?udate=20180726', }, { src: 'https://gimg.gilbut.co.kr/book/BN001958/rn_view_BN001958.jpg', }, { src: 'https://gimg.gilbut.co.kr/book/BN001998/rn_view_BN001998.jpg', }], Comments: [{ User: { nickname: 'nero', }, content: '우와 개정판이 나왔군요~', }, { User: { nickname: 'hero', }, content: '얼른 사고싶어요~', }] }], imagePaths: [], postAdded: false, }; const ADD_POST = 'ADD_POST'; export const addPost = { type: ADD_POST, }; const dummyPost = { id: 2, content: '더미데이터입니다.', User: { id: 1, nickname: '제로초', }, Images: [], Comments: [], }; export default (state = initialState, action) => { switch (action.type) { case ADD_POST: { return { ...state, mainPosts: [dummyPost, ...state.mainPosts], postAdded: true, }; } default: { return { ...state, }; } } };코드에 문제가 없는 것 같은데 위와 같이 에러가 뜹니다.post.js파일도 비교해보면서 찾아봤는데도.. 답이 안보입니다.ㅠㅠ
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
state 중에 me: null
강의 진도 : 액션과 상태 정리하기state(=initialState) 중에 me: null 을 저희가 왜 만들어줬었죠?? 길을 잃었습니다. me가 무슨 정보는 담고 있는 걸까요..??
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
곧 mySQL 들어가기전에 질문입니다.
서버쪽도 타입스크립트 써도 되나요?? 프론트쪽 타입스크립트로 하고있어가지고요
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
로그인 로그아웃 액션을 세세하게 나누는 이유가 궁금합니다.
안녕하세요.노드버드강의 saga 쪼개기 부분 강의 듣고 있습니다. 로그인을 요청, 성공, 실패 이렇게 세세하게 나누시는데 이유가 궁금합니다. 로그인 요청을 보내면 무조건 성공하는게 아닌건가요? 저는 LOG_IN_ACTION 액션에 isLoggedIn 만 true/false 왔다갔다 하면 될거 라고 단순하게 생각하고 있었는데 왜 굳이 이렇게 나눠서 해야 되는지 와닿지가 않습니다. 뒤쪽의 서버 강의 까지 들으면 이해가 갈까요?
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
next 13버젼 관한 질문
제로초쌤 이제 백엔드 로직 끝내고 SSR 적용하기 위해서 next 진행하려하는데 next 13버젼이 기존 12버전 문법에서 새로운 문법이나 터보팩이 등장한걸로 알고 있는데 12버전과 배우면서 13버전의 문법도 같이 병행하면서 진행하는게 좋겠죠..!?
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
PostCard import 오류
import 문제 없어 보이는데 댓글 확인을 누르면 오류 페이지가 뜹니다..PostCard.jsimport React, { useState, useCallback } from 'react'; import { Card, Button, Avatar, Popover, List, Comment } from 'antd'; import PropTypes from 'prop-types'; import { RetweetOutlined, HeartTwoTone, HeartOutlined, MessageOutlined, EllipsisOutlined } from '@ant-design/icons'; import styled from 'styled-components'; import Link from 'next/link'; import { useSelector } from 'react-redux'; import PostImages from './PostImages'; import CommentForm from './CommentForm'; const PostCard = ({post}) => { const [liked, setLiked] = useState(false); const [commentFormOpened, setCommentFormOpened] = useState(false); const id = useSelector((state) => state.user.me && state.user.me.id); const onToggleLike = useCallback(() => { setLiked((prev) => !prev); }, []); const onToggleComment = useCallback(() => { setCommentFormOpened((prev) => !prev); }, []); return ( <div style={{matginBotton: 20}}> <Card cover={post.Images[0] && <PostImages Images={post.Images}/>} actions={[ <RetweetOutlined key="retweet"/>, liked ? <HeartTwoTone twoToneColor="#eb2f96" key="heart" onClick={onToggleLike} /> : <HeartOutlined key="heart" onClick={onToggleLike} />, <MessageOutlined key="message" onClick={onToggleComment} />, <Popover key="more" content={( <Button.Group> {id && post.User.id === id ? ( <> <Button>수정</Button> <Button type="danger">삭제</Button> </> ) : <Button>신고</Button>} </Button.Group> )}> <EllipsisOutlined/> </Popover>, ]} > <Card.Meta avatar={<Avatar>{post.User.nickname[0]}</Avatar>} title={post.User.nickname} description={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={<Avatar>{item.User.nickname[0]}</Avatar>} content={item.content} /> </li> )} /> </div> )} </div> ); }; PostCard.propTypes = { post: PropTypes.shape({ id: PropTypes.number, User: PropTypes.object, content: PropTypes.string, createdAt: PropTypes.object, Comments: PropTypes.arrayOf(PropTypes.any), Images: PropTypes.arrayOf(PropTypes.any), }), }; export default PostCard
- 해결됨[리뉴얼] React로 NodeBird SNS 만들기
시퀄라이즈 관계메소드를 두번 사용하는 경우
const images = await Promise.all( req.body.image.map((image) => Image.create({ src: image })) ); await post.addImages(images); 이런식으로 Image.create() 를 적용한 다음다시 post.addImages() 하는 이유가 뭔가요? 중복된 실행이라고 생각했는데 실행해봤을때는 중복된 튜플이 생성되지는 않네요..
- 해결됨[리뉴얼] React로 NodeBird SNS 만들기
백엔드 질문
1.사용자가 웹에 접속을 할 때, 브라우저 -> 프론트서버 로 요청을 보내게 되고프론트 -> 브라우저 로 html css js 파일을 보내서 뷰를 표시하게 되는데그러면 특정 기능을 사용할 때, 예를 들어 로그인 버튼을 누른다고 하면그 요청은 브라우저 -> 백엔드 인가요 프론트 -> 백엔드 인가요?만약 브라우저 -> 백엔드 이면백엔드 cors 설정에서는 프론트서버 도메인만 허용하도록 해놓는데 어떻게 브라우저에서백엔드로 접근이 가능한건가요? 2.강좌에서는 me값으로 로그인 유지를 위한 로직을 작성했고모든 페이지 접속 때마다 백엔드로 요청을 보내서 세션인증을 하는방식으로 로직을 작성했는데제가 알기로 세션인증방식은 세션id를 프론트에 보내서 쿠키에 있는 세션id를 이용해 로그인 유지를 하는것으로 알고있습니다. 제가 알고 있는 방식과 강좌에서의 세션인증이 좀 다른것 같은데 어떻게 이해해야 하나요?강좌는 ssr 적용 전 백엔드 부분까지만 들은 상태입니다.
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
antd의 upload로 이미지 업로드
안녕하세요 선생님..그냥 단순히 인풋박스 만들어서 이미지 업로드를 해도 되지만 antd의 upload가 예뻐보여서 이걸 써서 이미지를 업로드 하고 싶은데 아무리 해도 되질 않아서 질문 드립니다ㅠㅠ보니까 보통 인풋박스를 통해 이미지 파일을 업로드할 때 양식이 FileList형식(배열처럼 보이는 객체...?)이던데antd upload에서 제공하는 props의 filelist는양식이 좀 다르더라구요..일단 백은 기존의 이미지 업로드 방식에서 바뀐 부분이 없고, 제가 antd의 Upload를 사용한 방식은 아래와 같습니다. <Upload name='image' listType="picture-card" multiple fileList={fileList} onChange={onChangeImages} onPreview={onPreview} onRemove={onRemoveImage} > {fileList.length < 2 && 'Drag images or click'} </Upload>업로드 props는 위와 같이 설정하고 onChange함수는 const onChangeImages = useCallback(({ fileList: newFileList }) => { setFileList(newFileList); console.log('images', fileList); const imageFormData = new FormData(); for(let i = 0; i< fileList.length; i++){ imageFormData.append('key',fileList[i]); } return dispatch({ type: UPLOAD_IMAGES_REQUEST, data: imageFormData }); });위와 같이 작성하면 업로드 되지 않을까 했는데, 이미지 업로드가 성공했다고 쓰지만콘솔 창에 나온 메세지를 보면{type: 'UPLOAD_IMAGES_SUCCESS', data: Array(0), @@redux-saga/SAGA_ACTION: true}이런 식으로 빈 배열만 자꾸 들어가고, 콘솔로 찍어본 fileList는 아래와 같이 뜨던데images[{…}]0:lastModified: 1669296034457lastModifiedDate: Thu Nov 24 2022 22:20:34 GMT+0900 (한국 표준시) {}name: "icons8-team-URoyGsQdLwg-unsplash.jpg"originFileObj: File {uid: 'rc-upload-1675523328622-3', name: 'icons8-team-URoyGsQdLwg-unsplash.jpg', lastModified: 1669296034457, lastModifiedDate: Thu Nov 24 2022 22:20:34 GMT+0900 (한국 표준시), webkitRelativePath: '', …}percent: 0size: 674143status: "uploading"thumbUrl: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgtype: "image/jpeg"uid: "rc-upload-1675523328622-3"[[Prototype]]: Objectlength: 1[[Prototype]]: Array(0) 노드버드에서는 업로드할 파일을 콘솔에 찍어보았을 때FileList {0: File, length: 1}0: FilelastModified: 1669296034457lastModifiedDate: Thu Nov 24 2022 22:20:34 GMT+0900 (한국 표준시) {}name: "icons8-team-URoyGsQdLwg-unsplash.jpg"size: 674143type: "image/jpeg"webkitRelativePath: ""[[Prototype]]: Filelength: 1[[Prototype]]: FileList이렇게 나오는걸 보면 데이터 구조상의 차이가 있어서 업로드가 안되는 것인가요? antd upload를 이용한 파일 업로드를 할 때 제가 놓친 부분이 어디인지 알 수 있을까요..? 조언 부탁드립니다 선생님ㅠ
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
복습 중 질문이 있습니다!
제로초 쌤 강의 잘들으면서 구현하고 있다가 갑자기 머리가 꼬여서 복습 확인 차 질문 올립니다!(reduxjs/toolkit 사용하고 있어서 제로초쌤 강의에서 saga를 바꿔보면서 하고 있습니다)(wsl 문제는 mysql안에서 명령문 익히면서 진행하고 있습니다)컴포넌트에서 어떤 액션을 디스패치 해줄때 안에 dispatch안의 콜백함수의 인자가 액션이 백엔드 주소에 데이터를 요청할때 들어가는 data 값의 형태로 들어가서 그게 백엔드에선 req.body로 들어가고(동적라우팅은 주소에 ${data}로 넣어준 부분이 백엔드의 req.params.(동적라우팅변수)로 들어가는거고) 그 후에 백엔드의 작업이 끝나면 res.json() 안의 인자가 결국 최종적으로 action.payload로 들어오는게 맞나요!?이 문제는 로그아웃하고 난 뒤에 regenertion 문제가 생겨서 소스코드도 보고 로직에 문제가 있나 싶어서 돌려보고 해당 문제로 저랑 같이 질문하신 분의 답글도 봤는데 한번 안보이니까 너무 안보이더라구요. 한번만 봐주시면 감사하겠습니다 로그아웃시 코드도 사진 따로 첨부하겠습니다(그 외 기능은 전부 잘 돌아갑니다! 로그아웃 하고 난 뒤에만 오류가 나요..)항상 질 좋은 강의 답변해주셔서 감사합니다! next.js부분도 화이팅하면서 듣겠습니다~