묻고 답해요
131만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결따라하며 배우는 노드, 리액트 시리즈 - 유튜브 사이트 만들기
npm run dev 동작에러납니다...
PS C:\Users\Desktop\boilerplate-mern-stack> yarn dev yarn run v1.22.19 $ concurrently "npm run backend" "npm run start --prefix client" [1] [1] > client@0.1.0 start [1] > react-scripts start [1] [0] [0] > react-boiler-plate@1.0.0 backend [0] > nodemon server/index.js [0] [0] [nodemon] 1.19.4 [0] [nodemon] to restart at any time, enter `rs` [0] [nodemon] watching dir(s): *.* [0] [nodemon] watching extensions: js,mjs,json [0] [nodemon] starting `node server/index.js` [0] Server Listening on 5000 [0] MongooseError: The `uri` parameter to `openUri()` must be a string, got "undefined". Make sure the first parameter to `mongoose.connect()` or `mongoose.createConnection()` is a string. [0] at Connection.openUri (C:\Users\Desktop\boilerplate-mern-stack\node_modules\mongoose\lib\connection.js:694:11) [0] at C:\Users\Desktop\boilerplate-mern-stack\node_modules\mongoose\lib\index.js:351:10 [0] at C:\Users\Desktop\boilerplate-mern-stack\node_modules\mongoose\lib\helpers\promiseOrCallback.js:32:5 [0] at new Promise (<anonymous>) [0] at promiseOrCallback (C:\Users\Desktop\boilerplate-mern-stack\node_modules\mongoose\lib\helpers\promiseOrCallback.js:31:10) [0] at Mongoose._promiseOrCallback (C:\Users\Desktop\boilerplate-mern-stack\node_modules\mongoose\lib\index.js:1149:10) [0] at Mongoose.connect (C:\Users\Desktop\boilerplate-mern-stack\node_modules\mongoose\lib\index.js:350:20) [0] at Object.<anonymous> (C:\Users\Desktop\boilerplate-mern-stack\server\index.js:19:4) [0] at Module._compile (node:internal/modules/cjs/loader:1233:14) [0] at Module._extensions..js (node:internal/modules/cjs/loader:1287:10) [0] at Module.load (node:internal/modules/cjs/loader:1091:32) [0] at Module._load (node:internal/modules/cjs/loader:938:12) [0] at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:83:12) [0] at node:internal/main/run_main_module:23:47 [1] [HPM] Proxy created: / -> http://localhost:5000 [1] i 「wds」: Project is running at http://192.999.111.116/ [1] i 「wds」: webpack output is served from [1] i 「wds」: Content not from webpack is served from C:\Users\Desktop\boilerplate-mern-stack\client\public [1] i 「wds」: 404s will fallback to / [1] Starting the development server... [1] [1] Error: error:0308010C:digital envelope routines::unsupported [1] at new Hash (node:internal/crypto/hash:69:19) [1] at Object.createHash (node:crypto:138:10) [1] at module.exports (C:\Users\Desktop\boilerplate-mern-stack\client\node_modules\webpack\lib\util\createHash.js:135:53) [1] at NormalModule._initBuildHash (C:\Users\Desktop\boilerplate-mern-stack\client\node_modules\webpack\lib\NormalModule.js:417:16) [1] at handleParseError (C:\Users\Desktop\boilerplate-mern-stack\client\node_modules\webpack\lib\NormalModule.js:471:10) [1] at C:\Users\Desktop\boilerplate-mern-stack\client\node_modules\webpack\lib\NormalModule.js:503:5 [1] at C:\Users\Desktop\boilerplate-mern-stack\client\node_modules\webpack\lib\NormalModule.js:358:12 [1] at C:\Users\Desktop\boilerplate-mern-stack\client\node_modules\loader-runner\lib\LoaderRunner.js:373:3 [1] at iterateNormalLoaders (C:\Users\Desktop\boilerplate-mern-stack\client\node_modules\loader-runner\lib\LoaderRunner.js:214:10) [1] at iterateNormalLoaders (C:\Users\Desktop\boilerplate-mern-stack\client\node_modules\loader-runner\lib\LoaderRunner.js:221:10) [1] C:\Users\Desktop\boilerplate-mern-stack\client\node_modules\react-scripts\scripts\start.js:19 [1] throw err; [1] ^ [1] [1] Error: error:0308010C:digital envelope routines::unsupported [1] at new Hash (node:internal/crypto/hash:69:19) [1] at Object.createHash (node:crypto:138:10) [1] at module.exports (C:\Users\Desktop\boilerplate-mern-stack\client\node_modules\webpack\lib\util\createHash.js:135:53) [1] at NormalModule._initBuildHash (C:\Users\Desktop\boilerplate-mern-stack\client\node_modules\webpack\lib\NormalModule.js:417:16) [1] at C:\Users\Desktop\boilerplate-mern-stack\client\node_modules\webpack\lib\NormalModule.js:452:10 [1] at C:\Users\Desktop\boilerplate-mern-stack\client\node_modules\webpack\lib\NormalModule.js:323:13 [1] at C:\Users\Desktop\boilerplate-mern-stack\client\node_modules\loader-runner\lib\LoaderRunner.js:367:11 [1] at C:\Users\Desktop\boilerplate-mern-stack\client\node_modules\loader-runner\lib\LoaderRunner.js:233:18 [1] at context.callback (C:\Users\Desktop\boilerplate-mern-stack\client\node_modules\loader-runner\lib\LoaderRunner.js:111:13) [1] at C:\Users\Desktop\boilerplate-mern-stack\client\node_modules\react-scripts\node_modules\babel-loader\lib\index.js:59:103 { [1] opensslErrorStack: [ 'error:03000086:digital envelope routines::initialization error' ], [1] library: 'digital envelope routines', [1] reason: 'unsupported', [1] code: 'ERR_OSSL_EVP_UNSUPPORTED' [1] } [1] [1] Node.js v20.5.1 [1] npm run start --prefix client exited with code 1반나절 넘게 이 오류만 붙잡고 있었는데 해결이 안되네요...사이트에 연결할 수 없음연결이 재설정되었습니다.다음 방법을 시도해 보세요.연결 확인프록시 및 방화벽 확인Windows 네트워크 진단 프로그램 실행브라우저에서 위와 같이 뜨는데 이유가 뭘까요....
-
해결됨[리뉴얼] React로 NodeBird SNS 만들기
서버사이드 렌더링 적용 후, css가 풀렸다가 다시 적용되는것 같아요.
안녕하세요!서버사이드 렌더링 적용후에 css가 풀렸다가 다시적용되는 것 같은데, 해결 방법이 있을까요?로그인 후 새로고침을 하면 잠깐 첫번째 화면이 보였다가 두번째 화면을 보여줍니다. 세번째 화면은 리덕스 상태입니다.서버사이드 렌더링을 해서 user와 post의 데이터는 잘 받아오고 있는것 같습니다.
-
해결됨[리뉴얼] React로 NodeBird SNS 만들기
faker 사용 후 postData.split is not a function 에러 질문
이전에는 잘 되었는데 faker로 더미데이터 사용 후에 다음과 같은 에러가 뜹니다!faker 버전 이슈를 보고 삭제 후 npm i -D faker@5 로 재설치했는데 오류가 해결되지 않았습니다ㅠ console.log 찍어본 postData의 타입이랑 에러메시지 입니다!4. WrappedApp created new store with withRedux(NodeBird) { initialState: undefined, initialStateFromGSPorGSSR: undefined }type : stringtype : functionTypeError: postData.split is not a functionat PostCardContent (C:\Users\pc\react-nodebird\prepare\front\.next\server\pages\index.js:1131:13)at processChild (C:\Users\pc\react-nodebird\prepare\front\node_modules\react-dom\cjs\react-dom-server.node.development.js:3043:14)at resolve (C:\Users\pc\react-nodebird\prepare\front\node_modules\react-dom\cjs\react-dom-server.node.development.js:2960:5)at ReactDOMServerRenderer.render (C:\Users\pc\react-nodebird\prepare\front\node_modules\react-dom\cjs\react-dom-server.node.development.js:3435:22)at ReactDOMServerRenderer.read (C:\Users\pc\react-nodebird\prepare\front\node_modules\react-dom\cjs\react-dom-server.node.development.js:3373:29)at renderToString (C:\Users\pc\react-nodebird\prepare\front\node_modules\react-dom\cjs\react-dom-server.node.development.js:3988:27)at Object.renderPage (C:\Users\pc\react-nodebird\prepare\front\node_modules\next\dist\next-server\server\render.js:50:851)at Document.getInitialProps (C:\Users\pc\react-nodebird\prepare\front\.next\server\pages\_document.js:264:19)at loadGetInitialProps (C:\Users\pc\react-nodebird\prepare\front\node_modules\next\dist\next-server\lib\utils.js:5:101)at renderToHTML (C:\Users\pc\react-nodebird\prepare\front\node_modules\next\dist\next-server\server\render.js:50:1142) PostCardContent.js 코드 중 의심스러운 부분입니다const PostCardContent = ({ postData }) => ( <div> {postData.split(/(#[^\s#]+)/g).map((v, i) => { if (v.match(/(#[^\s#]+)/)) { return <Link href={`/hashtag/${v.slice(1)}`} key={i}><a>{v}</a></Link>; } return v; })} </div> ); PostCardContent.propTypes = { postData: PropTypes.string.isRequired, };
-
해결됨[리뉴얼] React로 NodeBird SNS 만들기
slick에 이미지가 안 뜨는 오류
상세이미지에서 전체화면까지는 되었는데, 이미지가 안 떠서 질문드립니다 밑에 이미지 Indicator를 보면 스크롤하면 다음으로 넘어가는 기능은 잘 작동하는 것 같은데이미지 불러오기가 안 되는 것 같습니다만 이유를 모르겠습니다.. 컴파일도 잘 되었구요ㅠ ImagesZoom/index.js 코드 첨부합니다const ImagesZoom = ({ images, onClose }) => { const [currentSlide, setCurrentSlide] = useState(0); return ( <Overlay> <Global /> <Header> <h1>상세 이미지</h1> <CloseBtn onClick={onClose}>X</CloseBtn> </Header> <SlickWrapper> <div> <Slick initialSlide={0} beforeChange={(slide) => setCurrentSlide(slide)} infinite arrows={false} slidesToShow={1} slidesToScroll={1} > {images.map((v) => ( <ImgWrapper key={v.src}> <img src={v.src} alt={v.src} /> </ImgWrapper> ))} </Slick> <Indicator> <div> {currentSlide + 1} {' '} / {images.length} </div> </Indicator> </div> </SlickWrapper> </Overlay> ); }; PostImages.js 코드입니다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 style={{ width: "50%", display: 'inline-block' }} role="presentation" src={images[0].src} alt={images[0].src} onClick={onZoom} /> <img style={{ width: "50%", display: 'inline-block' }} role="presentation" src={images[1].src} alt={images[1].src} onClick={onZoom} /> </div> {showImagesZoom && <ImagesZoom images={images} onClose={onClose} />} </> ); } return ( <> <div> <img style={{ width: "50%" }} role="presentation" src={images[0].src} alt={images[0].src} 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} />} </> ); };
-
미해결[리뉴얼] React로 NodeBird SNS 만들기
안녕하세요 제로초님 이미지 업로드 관련 질문이 있습니다.
이미지 업로드를 위한 multer 강의까지 수강을 하였습니다.이미지 업로드를 할때 uploads 폴더에도 이미지가 잘 들어가고UPLOAD_IMAGES_SUCCESS도 잘 나오는 상황입니다.하지만 제로초님의 화면은 제거 버튼과 비록 깨지지만 이미지가 올라간 화면이 보이는데 저는 그 부분이 나오지 않아서 이 점이 궁금하여 질문 드립니다.import React, { useState } from "react"; import { Button, Card, Popover, Avatar, Image, List, Comment } from "antd"; import { RetweetOutlined, HeartOutlined, MessageOutlined, EllipsisOutlined, HeartTwoTone, } from "@ant-design/icons"; import { useCallback } from "react"; import { useSelector, useDispatch } from "react-redux"; import PropTypes from "prop-types"; import PostImages from "./PostImages"; import CommentForm from "./CommentForm"; import PostCardContent from "./PostCardContent"; import { REMOVE_POST_REQUEST, LIKE_POST_REQUEST, UNLIKE_POST_REQUEST, } from "../reducers/post"; import FollowButton from "./FollowButton"; const PostCard = ({ post }) => { //pages/index.js에서 mainPosts에서 하나씩 뜯어서 보내줌 const dispatch = useDispatch(); const [commentFormOpened, setCommentFormOpened] = useState(false); //댓글창 열지 말지 const onLike = useCallback(() => { dispatch({ type: LIKE_POST_REQUEST, data: post.id, }); }, []); //좋아요 const onUnlike = useCallback(() => { dispatch({ type: UNLIKE_POST_REQUEST, data: post.id, }); }, []); //좋아요 취소 const onToggleComment = useCallback(() => { setCommentFormOpened((prev) => !prev); }, []); //폼 버튼 한번 더 누르면 폼 닫기 const onRemovePost = useCallback(() => { return dispatch({ type: REMOVE_POST_REQUEST, data: post.id, }); }, [id]); const id = useSelector((state) => state.user.me?.id); const { removePostloading } = useSelector((state) => state.post); const liked = post.Likers.find((v) => v.id === id); //게시글 좋아요 누른 사람 중에 내가 있는지. return ( <div style={{ marginBottom: 20 }}> <Card cover={post.Images?.[0] && <PostImages images={post.Images} />} //이미지가 존재한다면 PostImages를 출력 actions={[ //카드 아래에 존재하는 것들 <RetweetOutlined key="retweet" />, liked ? ( <HeartTwoTone twoToneColor="red" onClick={onUnlike} /> ) : ( <HeartOutlined key="heart" onClick={onLike} /> ), <MessageOutlined onClick={onToggleComment} key="comment" />, <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>, ]} extra={id && <FollowButton post={post} />} > <Card.Meta //프로필과 내용 등 avatar={<Avatar>{post.User.nickname[0]}</Avatar>} title={post.User.nickname} description={<PostCardContent postData={post.content} />} /> </Card> {commentFormOpened && ( //commentFormOpened가 true이면 열어라 <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.string, Comment: PropTypes.arrayOf(PropTypes.object), Images: PropTypes.arrayOf(PropTypes.object), Likers: PropTypes.arrayOf(PropTypes.object), }).isRequired, }; export default PostCard;저의 PostCard 코드입니다 이 코드에서 cover={post.Images?.[0] && <PostImages images={post.Images} />}이 부분이 이미지들을 출력해주는 부분이 아닌가요?? 저의 화면에는 아래처럼 나오지 않습니다.
-
미해결[리뉴얼] React로 NodeBird SNS 만들기
게시글 작성 오류
안녕하세요 제로초님!게시글을 작성하게되면 아래와 같이 성공했다고 응답도 잘 도착하지만 id가 undefined이라고 오류가 납니다.제가 어느 부분을 놓치고 있는건가요??
-
미해결[리뉴얼] React로 NodeBird SNS 만들기
로그인 오류
안녕하세요 제로초님 middleware.js를 사용하여로그인했을때와 하지않았을 때의 경우를 나눠놓으셨자나요!그 강좌를 듣고 코드를 그대로 작성하고 로그인을 진행해보는데올바른 이메일과 비밀번호를 입력해도 이 알림이 뜹니다.. 로그인도 실패로 응답하구요.. 어떤 부분이 문제일 가능성이 높을까요??
-
해결됨[리뉴얼] React로 NodeBird SNS 만들기
특정 페이지의 비로그인 차단
강좌에서처럼 me(내 정보 불러오는 상태변수) 변수를 통해 로그인 유지를 하고특정 페이지에서 비로그인 사용자를 차단할경우useEffect(() => { if(!me){ redirects(); } },[])이런식으로 로직을 짤수가 있는데문제가 브라우저 url로 접속할 경우 초기 me 의 상태가 null 이기 때문에 로그인을 한 상태더라도리다이렉트가 되는 문제가 있었습니다. 물론 ssr을 이용하면 이 문제가 해결은 되지만csr만 이용하는 선에서 리다이렉트가 정상적으로 작동하도록 하고 싶은데 어떻게 하면 좋을까요?
-
미해결따라하며 배우는 노드, 리액트 시리즈 - 유튜브 사이트 만들기
npm run dev 실행 오류
Should not import the named export 'version' (imported as 'version') from default-exporting module (only default export is available soon) npm run dev를 실행했더니 이런 오류가 떠요.....도와주세요ㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜ
-
미해결[리뉴얼] React로 NodeBird SNS 만들기
안녕하세요 제로초님 로그인 관련 redux 질문있습니다.
다름이 아니라 제로초님의 로그인 문제 해결하기 챕터를 보다가Posts.length관련 오류 해결하는 강의를 보는데제로초님의 redux화면이랑 저의 화면이랑 구성이 좀 다른 것 같아서 문의드립니다.제로초님의 화면은 위 사진처럼 me라는 객체로 나와서 확인하기 쉬운데제 화면은 아래처럼 그냥 데이터 라고 나오고 있습니다..어느 부분을 수정해야하는지 잘 모르겠어서 질문드립니다.
-
해결됨[리뉴얼] React로 NodeBird SNS 만들기
글 작성이 안 되는 오류
컴파일은 오류 없이 잘 되는데, 폼에서 짹짹(게시)버튼을 눌러도 글 작성이 되지 않습니다개발자도구에서 나타나는 오류입니Incorrect use of <label for=FORM_ELEMENT>The label's for attribute doesn't match any element id. This might prevent the browser from correctly autofilling the form and accessibility tools from working correctly.To fix this issue, make sure the label's for attribute references the correct id of a form field. PostCard가 작성되지 않는데 코드에서 오류를 못 찾겠어서 질문합니다! 의심스러운 부분들만 올려봅니다..post.js 코드입니다const ADD_POST = 'ADD_POST'; export const addPost = { type: ADD_POST } const reducer = (state = initialState, action) => { switch (action.type) { case ADD_POST: { return { ...state, mainPosts: [dummyPost, ...state.mainPosts], postAdded: true, }; }; default: { return { ...state, }; }; } }; PostForm.js 코드입니다const PostForm = () => { const { imagePaths } = useSelector((state) => state.post); const dispatch = useDispatch(); const imageInput = useRef(); const [text, setText] = useState(''); const onChangeText = useCallback((e) => { setText(e.target.value); }, []); const onSubmit = useCallback(() => { dispatch(addPost); setText('') }, []); return ( <Form style={{ margin: '10px 0 20px' }} encType="multipart/form-data" onFinish={onSubmit}> <Input.TextArea value={text} onChange={onChangeText} maxLength={140} placeholder='새로운 글 작성' /> <div> <input type="file" multiple hidden ref={imageInput} /> <Button onClick={onClickImageUpload}>이미지 업로드</Button> <Button type="primary" style={{ float: 'right' }} htmlType="submit">게시</Button> </div> <div> {imagePaths?.map((v) => ( <div key={v} style={{ display: 'inline-block' }}> <img scr={v} style={{ width: '200px' }} alt={v} /> <div> <Button>제거</Button> </div> </div> ))} </div> </Form> ) }; pages/index.js 코드입니다const Home = () => { const { isLoggedIn } = useSelector((state) => state.user); const { mainPosts } = useSelector((state) => state.post); return ( <AppLayout> {isLoggedIn && <PostForm />} {mainPosts.map((post) => <PostCard key={post.id} post={post} />)} </AppLayout> );
-
해결됨[리뉴얼] React로 NodeBird SNS 만들기
로그아웃시 req logout의 콜백함수 에러가 납니다...
req.logout을 호출할때 콜백함수가 필요하다 라고 나옵니다.req#logout requires a callback function이런식으로요 제 코드는 제로초님 코드처럼 적어놨는데 제가 이해하는 콜백함수라는게 라우터 부분이라고 생각이 드는데 어떻게 수정을 해야할지 감이 안잡힙니다 ㅜㅜ const express = require('express'); const bcrypt = require('bcrypt'); const passport = require('passport'); const { isLoggedIn, isNotLoggedIn } = require('./middlwares') const { User, Post } = require('../models'); const router = express.Router(); router.post("/login", isNotLoggedIn, (req, res, next) => { passport.authenticate("local", (err, user, info) => { if (err) { // 서버에러 부분 console.error(err) return next(err) } if(info){// 클라이언트 에러 부분 return res.status(401).send(info.reason) } // 성공시 return req.login(user,async(loginErr)=>{ // 패스포트 에러날시 if(loginErr){ console.error(loginErr) return next(loginErr) } // 유저의 모든 정보 const fullUserWithoutPassword = await User.findOne({ where:{id:user.id}, // 비밀번호 제외 // 받고 싶은 정보만 적을경우 // attributes:["id","nickname","email"], attributes: { exclude:["password"] }, // 나머지 정보 include:[{ model:Post }, { model: User, as: "Followings", }, { model: User, as: "Followers", }] }) // post 팔로워 팔로잉 정보 비밀번호 제거 return res.status(200).json(fullUserWithoutPassword) }) })(req,res,next) }) router.post("/", isNotLoggedIn, async (req, res, next) => { try { const exUser = await User.findOne({// 중복이 됫는지아닌지. where:{ email:req.body.email, } }) if(exUser){ return res.status(403).send("이미 사용중인 아이디입니다.") } const hashedPassword = await bcrypt.hash(req.body.password, 12) await User.create({ email:req.body.email, nickname: req.body.nickname, password: hashedPassword, }) // res.setHeader("Access-Control-Allow-Origin","http://localhost:3000") res.status(201).send("회원가입이 완료되셨습니다.") // 201은 생성이 잘됫다. } catch (error) { console.error(error) next(error)// 에러가 난거를 브라우저에 알려준다. statsus:500 } }) router.post('/logout', (req, res) => { req.logout(); req.session.destroy(); res.send('ok'); }); module.exports = router
-
미해결[리뉴얼] React로 NodeBird SNS 만들기
post 추가 시 오류
안녕하세요 제로초님다름이 아니라 로그인 후 포스트를 추가할 때 에러가 발생하는데혼자 해결하려고 노력해봤지만 해결을 아직 하지 못하여 질문드립니다.reducers/post.jsimport shortId from "shortid"; import { produce } from "immer"; import faker from "faker"; export const initialValue = { mainPosts: [], //이미지업로드 할떄 이미지경로들이 여기 들어간다. imagePaths: [], hasMorePost: true, //true면 가져올 시도를 해라. (스크롤 했을 때) loadPostsLoading: false, loadPostsDone: false, loadPostsError: null, //게시글 추가가 완료되었을때 TRue addPostLoading: false, addPostDone: false, addPostError: null, removePostLoading: false, removePostDone: false, removePostError: null, addCommentLoading: false, addCommentDone: false, addCommentError: null, }; //가짜 데이터 export const generateDummyPost = (number) => Array(number) .fill() .map(() => ({ id: shortId.generate(), User: { id: shortId.generate(), nickname: faker.name.findName(), }, content: faker.lorem.paragraph(), //아무 문장, Images: [ { src: "https://image.utoimage.com/preview/cp872722/2022/12/202212008462_500.jpg", }, ], Comments: [ { User: { id: shortId.generate(), nickname: faker.name.findName(), }, content: faker.lorem.sentence(), }, ], })); export const LOAD_POSTS_REQUEST = "LOAD_POSTS_REQUEST"; export const LOAD_POSTS_SUCCESS = "LOAD_POSTS_SUCCESS"; export const LOAD_POSTS_FAILURE = "LOAD_POSTS_FAILURE"; export const ADD_POST_REQUEST = "ADD_POST_REQUEST"; export const ADD_POST_SUCCESS = "ADD_POST_SUCCESS"; export const ADD_POST_FAILURE = "ADD_POST_FAILURE"; export const REMOVE_POST_REQUEST = "REMOVE_POST_REQUEST"; export const REMOVE_POST_SUCCESS = "REMOVE_POST_SUCCESS"; export const REMOVE_POST_FAILURE = "REMOVE_POST_FAILURE"; export const ADD_COMMENT_REQUEST = "ADD_COMMENT_REQUEST"; export const ADD_COMMENT_SUCCESS = "ADD_COMMENT_SUCCESS"; export const ADD_COMMENT_FAILURE = "ADD_COMMENT_FAILURE"; export const addPost = (data) => ({ type: ADD_POST_REQUEST, data, }); export const addComment = (data) => ({ type: ADD_COMMENT_REQUEST, data, }); //리듀서란 이전 상태를 액션을 통해 다음 상태로 만들어내는 함수(단, 불변성은 지키면서) //draft는 불변성 상관없이 바꾸면 immer가 알아서 불변성있게 만들어준다. const reducer = (state = initialValue, action) => produce(state, (draft) => { switch (action.type) { //게시글 추가 case ADD_POST_REQUEST: draft.addPostLoading = true; draft.addPostDone = false; draft.addPostError = null; break; case ADD_POST_SUCCESS: draft.addPostLoading = false; draft.addPostDone = true; draft.mainPosts.unshift(action.data); draft.imagePaths = []; //unshift란 배열의 맨 앞에다가 추가하는 함수 break; case ADD_POST_FAILURE: draft.addPostLoading = false; draft.addPostError = action.error; break; //게시글 불러오기 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); //concat은 두개 이상의 배열을 합칠 때 사용 //action.data에는 더미데이터들이 들어있고 draft.mainPosts는 원래 데이터 draft.hasMorePost = draft.mainPosts.length < 50; //50개보다 적으면 불러와야함 break; case LOAD_POSTS_FAILURE: draft.loadPostsLoading = false; draft.loadPostsError = action.error; break; //댓글 추가 case ADD_COMMENT_REQUEST: draft.addCommentLoading = true; draft.addCommentDone = false; draft.addCommentError = null; break; case ADD_COMMENT_SUCCESS: //immer버전 (너무 간단함) const post = draft.mainPosts.find( (v) => v.id === action.data.postId ); //해당 게시글 찾기 post.Comments.unshift(dummyComment(action.data.content)); draft.addCommentLoading = false; draft.addCommentDone = true; //댓글 넣어주기 break; //immer를 안 쓴 부분 // const postIndex = state.mainPosts.findIndex( // (v) => v.id === action.data.postId // ); // const post = { ...state.mainPosts[postIndex] }; // post.Comments = [ // dummyComment(action.data.content), // ...post.Comments, // ]; //얕은 복사 // const mainPosts = [...state.mainPosts]; // mainPosts[postIndex] = post; //댓글 추가하는 부분 너무어려움.. // //불변성을 지키다 보니 가독성이 너무 안좋음 // return { // ...state, // mainPosts, // addCommentLoading: false, // addCommentDone: true, // }; case ADD_COMMENT_FAILURE: draft.addCommentLoading = false; draft.addCommentError = action.error; break; //게시글 삭제 case REMOVE_POST_REQUEST: draft.removePostDone = false; draft.removePostLoading = true; draft.removePostError = null; break; case REMOVE_POST_SUCCESS: draft.removePostLoading = false; draft.removePostDone = true; draft.mainPosts = draft.mainPosts.filter( (v) => v.id !== action.data ); break; case REMOVE_POST_FAILURE: draft.removePostLoading = false; draft.removePostError = action.error; break; default: break; } }); export default reducer;여기서 Images안에 아무것도 들어있지 않아서 나타나는 오류같은데 잘 모르겠습니다.
-
해결됨[리뉴얼] React로 NodeBird SNS 만들기
<StopOutLined> 이 exported 되지 않는 오류
import { List, Button, Card } from 'antd';import { StopOutLined } from '@ant-design/icons';로 임포트를 했는데도 불구하고 프로필창을 열면 다음과 같은 에러가 납니다터미널에는 에러메시지도 뜨고요error - ./components/FollowList.jsAttempted import error: 'StopOutLined' is not exported from '@ant-design/icons'. npm i antd antd 와 npm install @ant-design/icons --save-dev로 다시 설치해봤는데 해결되지 않았습니다 package.json 에서 확인한 버전입니다 "antd": "^5.10.2", "@ant-design/icons": "^5.2.6", FollowList.js 에서 의심스러운 부분입니다import { List, Button, Card } from 'antd'; import { StopOutLined } from '@ant-design/icons'; const FollowList = ({header, data}) => { return ( <List renderItem={(item) => ( <List.Item style={{ marginTop: 20 }}> <Card actions={[<StopOutLined key="stop" />]}> <Card.Meta description={item.nickname} /> </Card> </List.Item> )} /> ) };
-
미해결따라하며 배우는 리액트 A-Z
todoData.map 화살표 함수 질문
[JSX Key 속성 이해하기] 파트에서는 todoData에 map 메서드를 사용할 때 this.todoData.map((value) => ( <div style={this.getStsyle()} key={value.id}> <input type="checkbox" defaultChecked={false} /> {value.title} <button style={this.btnStyle}>X</button> </div> ))로 return 없이 사용하셨는데 전 기존에는 this.todoData.map((value) => { return ( <div style={this.getStsyle()} key={value.id}> <input type="checkbox" defaultChecked={false} /> {value.title} <button style={this.btnStyle}>X</button> </div> ) })이렇게 사용했습니다 둘다 정상 동작하는데 차이점이 뭔지 궁금합니다
-
해결됨[리뉴얼] React로 NodeBird SNS 만들기
포스트 트윗 시 게시글이 추가되지 않고, 요청 무한로딩에 걸립니다. TypeError: Cannot read properties of undefined (reading 'data')
안녕하세요 제로초님현재 섹션3 redux-saga 연동하기 - 게시글, 댓글 saga 작성하기 영상의 Warning: Encountered two children with the same key, 2. 에러 해결까지 수강한 학생입니다!로그인 후 포스트 폼에 글을 입력 후 트윗하기 버튼을 누르는 순간 콘솔 창에 에러가 발생했습니다.redux-devtools로 포스트 추가 액션의 변화를 살펴보니ADD_POST_SUCCESS 포스트 추가 성공 액션이 실행되고 있지 않았습니다! 콘솔에 있는 에러 메시지 번역은 다음과 같았습니다.번역을 읽고 data가 undefined이며, addPost에 이상이 있음을 확인했고,컴포넌트 폴더의 PostForm.js와 reducers/post.js, sagas/post.js를 코드를 확인했습니다.https://github.com/ZeroCho/react-nodebird/blob/master/ch4/front/components/PostForm.js제로초님의 깃허브 챕터4와 구글 검색을 참고 후 가장 의심되는 코드 부분을 올립니다!※ 관련 없는 코드는 . . . 으로 요약 표시하였습니다. components/PostForm.js가독성을 위해 setText는 setPostText로, text는 postText로 바꾸어 코딩했습니다.// reducer 포스트 추가 요청 액션 불러오기 import { addPost } from '../reducers/post'; // 포스트 폼 컴포넌트(사용자 정의 태그) const PostForm = () => { const dispatch = useDispatch(); const [postText, onChangePostText, setPostText] = useInput(''); const { imagePaths, addPostLoading, addPostDone } = useSelector((state) => state.post); /* ----- 포스트 추가 완료 시 포스트 폼 글자 지우기 ----- */ useEffect(() => { if (addPostDone) { setPostText(''); } }, [addPostDone]); /* ----- 포스트 폼 제출 시 포스트 카드 추가 ----- */ const onSubmitForm = useCallback(() => { dispatch(addPost(postText)); }, [postText]); // const onSubmitForm = useCallback(() => { // dispatch({ // type: ADD_POST_REQUEST, // data: addPost, // }); // }, [postText]); return ( <Form . . . /> <Input.TextArea id="post-form" value={postText} onChange={onChangePostText} maxLength={140} placeholder="어떤 신기한 일이 있었나요?" /> . . . {/* ---------- 포스트 작성 버튼 ---------- */} <Button type="primary" style={{ float: 'right' }} htmlType="submit" loading={addPostLoading} > 트윗하기 </Button> </div> </Form> ); }; reducers/post.js// ShortId 라이브러리 불러오기 import shortId from 'shortid'; // 중앙 데이터 저장소(기본 state) export const initialState = { /* ---------- 메인 포스트 더미 데이터 ---------- */ mainPosts: [{ . . . }], /* ---------- 이미지 업로드 시 경로 저장 ---------- */ imagePaths: [], /* ---------- 포스트 추가 시도 중, 완료, 에러 ---------- */ addPostLoading: false, addPostDone: false, addPostError: null, } // 포스트 추가 액션 : 요청, 성공, 실패 export const ADD_POST_REQUEST = 'ADD_POST_REQUEST'; export const ADD_POST_SUCCESS = 'ADD_POST_SUCCESS'; export const ADD_POST_FAILURE = 'ADD_POST_FAILURE'; // 포스트 추가 요청 액션 생성함수(action creator) export const addPost = (data) => ({ type: ADD_POST_REQUEST, data, }); // 포스트 더미 데이터 const dummyPost = (data) => ({ id: shortId.generate(), content: data, User: { id: 1, nickname: '다랑', }, Images: [], Comments: [], }); // 리듀서(reducer) : (이전 상태, 액션) => 다음 상태 const reducer = (state = initialState, action) => { switch (action.type) { /* ----- 포스트 추가 요청 리듀서 ----- */ case ADD_POST_REQUEST: return { addPostLoading: true, addPostDone: false, addPostError: null, }; /* ----- 포스트 추가 성공 리듀서 ----- */ case ADD_POST_SUCCESS: return { ...state, mainPosts: [dummyPost(action.data), ...state.mainPosts], addPostLoading: false, addPostDone: true, // 사용자 더미 데이터 me: dummyUser(action.data), }; /* ----- 포스트 추가 실패 리듀서 ----- */ case ADD_POST_FAILURE: return { addPostLoading: false, addPostError: action.error, }; default: return state; } }; sagas/post.js// Saga 이펙트 불러오기 import { all, fork, call, takeLatest, put, delay } from 'redux-saga/effects'; // Axios 라이브러리 불러오기 import axios from 'axios'; // reducer 포스트 추가, 답글 추가 액션 불러오기 import { ADD_POST_REQUEST, ADD_POST_SUCCESS, ADD_POST_FAILURE, } from '../reducers/post'; // addPost 실행 시 서버에 addPostAPI 요청 function addPostAPI(data) { return axios.post('/api/post', data) } // ADD_POST_REQUEST 액션이 실행되면 addPost 함수 실행 function* addPost(action) { try { // const result = yield call(addPostAPI, action.data); /* ----- 요청 성공 시 ADD_POST_SUCCESS 액션 디스패치 ----- */ yield delay(1000); yield put({ type: ADD_POST_SUCCESS, data: action.data, // 성공 결과 }); } catch (err) { /* ----- 요청 실패 시 ADD_POST_FAILURE 액션 디스패치 ----- */ yield put({ type: ADD_POST_FAILURE, error: err.response.data, // 실패 결과 }); } } 강의 잘 보고 있습니다!항상 정성스러운 답변 남겨주셔서 감사합니다 제로초님!
-
미해결[리뉴얼] React로 NodeBird SNS 만들기
정말 렌덤하게 403(Forbiden Error) 가 뜹니다.
안녕하세요! 람다하고 nginx 까지 적용했는데, 정말 렌덤하게 403 error 가 뜹니다.몇몇 이미지는 처음 업로드 할때 403 error 가 나지만 새로고침을 하면 업로드가 되어 있었습니다.1MB에 png 이미지는 resizing 이 되지 안고 새로고침을 해도 403에러가 납니다.람다 모니터링 메세지를 봤는데 이렇게 나옵니다.혹시 제가 resize 폴더에 너무 많은 이미지를 저장해서 나는 오류일까요? 감사합니다.
-
미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
[plugin:vite-plugin-eslint] error 'React' is defined but never used no-unused-vars
eslint 와 관련된 에러 인 것 같은데요.물론 강의 중에 말씀하신 eslint 설정도 완료 하였습니다. React를 사용하지 않는데 React를 import 해서 그런것 같습니다. 강사님 강의 중에는 이런 현상이 없는데 이런 현상이 나와서 구글링을 해보아도 뾰족한 답을 못찾았습니다.확인 부탁드립니다~!!
-
미해결따라하며 배우는 노드, 리액트 시리즈 - 유튜브 사이트 만들기
비디오 업로드, 로그인, 회원가입 504 error
안녕하세요 http://localhost:3000/video/upload 실행해 비디오를 선택하면 POST http://localhost:3000/api/video/uploadfiles 504 (Gateway Timeout),http://localhost:3000/register실행해 가입을 하려하면POST http://localhost:3000/api/users/register 504 (Gateway Timeout)Uncaught (in promise) Error: Request failed with status code 504이런 에러가 나옵니다 vscode 에서는 Server Listening on 5000[0] MongoError: bad auth : authentication failed[0] at MessageStream.messageHandler (C:\Han\boilerplate-mern-stack-master\boilerplate-mern-stack-master\node_modules\mongoose\node_modules\mongodb\lib\cmap\connection.js:299:20) [0] at MessageStream.emit (node:events:520:28)[0] at processIncomingData (C:\Han\boilerplate-mern-stack-master\boilerplate-mern-stack-master\node_modules\mongoose\node_modules\mongodb\lib\cmap\message_stream.js:144:12) [0] at MessageStream._write (C:\Han\boilerplate-mern-stack-master\boilerplate-mern-stack-master\node_modules\mongoose\node_modules\mongodb\lib\cmap\message_stream.js:42:5) [0] at writeOrBuffer (node:internal/streams/writable:389:12)[0] at _write (node:internal/streams/writable:330:10)[0] at MessageStream.Writable.write (node:internal/streams/writable:334:10)[0] at TLSSocket.ondata (node:internal/streams/readable:754:22)[0] at TLSSocket.emit (node:events:520:28)[0] at addChunk (node:internal/streams/readable:315:12)[0] at readableAddChunk (node:internal/streams/readable:289:9)[0] at TLSSocket.Readable.push (node:internal/streams/readable:228:10)[0] at TLSWrap.onStreamRead (node:internal/stream_base_commons:190:23) {[0] ok: 0,[0] code: 8000,[0] codeName: 'AtlasError'[0] } ,Error: ffmpeg exited with code 4294967291: frame= 1 fps=0.0 q=-0.0 Lq=-0.0 q=-0.0 size=N/A time=00:00:00.00 bitrate=N/A dup=2 drop=0 speed= 0x [0] video:199kB audio:0kB subtitle:0kB other streams:0kB global headers:0kB muxing overhead: unknown[0] Conversion failed![0][0] at ChildProcess.<anonymous> (C:\Han\boilerplate-mern-stack-master\boilerplate-mern-stack-master\node_modules\fluent-ffmpeg\lib\processor.js:182:22)[0] at ChildProcess.emit (node:events:520:28)[0] at Process.ChildProcess._handle.onexit (node:internal/child_process:291:12)[0] Waiting for the debugger to disconnect...[0] node:events:498[0] throw er; // Unhandled 'error' event[0] ^[0][0] MongooseError: Operation `users.findOne()` buffering timed out after 10000ms[0] at Timeout.<anonymous> (C:\Han\boilerplate-mern-stack-master\boilerplate-mern-stack-master\node_modules\mongoose\lib\drivers\node-mongodb-native\collection.js:198:23)[0] at listOnTimeout (node:internal/timers:559:17)[0] at processTimers (node:internal/timers:502:7)[0] Emitted 'error' event on Function instance at:[0] at C:\Han\boilerplate-mern-stack-master\boilerplate-mern-stack-master\node_modules\mongoose\lib\model.js:5084:15[0] at processTicksAndRejections (node:internal/process/task_queues:78:11)[1] [HPM] Error occurred while trying to proxy request /api/users/auth from localhost:3000 to http://localhost:5000 (ECONNRESET) (https://nodejs.org/api/errors.html#errors_common_system_errors)[0] [nodemon] app crashed - waiting for file changes before starting...[1] [HPM] Error occurred while trying to proxy request /api/users/auth from localhost:3000 to http://localhost:5000 (ECONNREFUSED) (https://nodejs.org/api/errors.html#errors_common_system_errors)[1] [HPM] Error occurred while trying to proxy request /api/users/auth from localhost:3000 to http://localhost:5000 (ECONNREFUSED) (https://nodejs.org/api/errors.html#errors_common_system_errors)[1] [HPM] Error occurred while trying to proxy request /api/users/register from localhost:3000 to http://localhost:5000 (ECONNREFUSED) (https://nodejs.org/api/errors.html#errors_common_system_errors)[1] [HPM] Error occurred while trying to proxy request /api/video/getVideos from localhost:3000 to http://localhost:5000 (ECONNREFUSED) (https://nodejs.org/api/errors.html#errors_common_system_errors)[1] [HPM] Error occurred while trying to proxy request /api/users/auth from localhost:3000 to http://localhost:5000 (ECONNREFUSED) (https://nodejs.org/api/errors.html#errors_common_system_errors)[1] [HPM] Error occurred while trying to proxy request /api/users/auth from localhost:3000 to http://localhost:5000 (ECONNREFUSED) (https://nodejs.org/api/errors.html#errors_common_system_errors)[1] [HPM] Error occurred while trying to proxy request /api/video/uploadfiles from localhost:3000 to http://localhost:5000 (ECONNREFUSED) (https://nodejs.org/api/errors.html#errors_common_system_errors)[1] [HPM] Error occurred while trying to proxy request /api/users/auth from localhost:3000 to http://localhost:5000 (ECONNREFUSED) (https://nodejs.org/api/errors.html#errors_common_system_errors)[1] [HPM] Error occurred while trying to proxy request /api/users/auth from localhost:3000 to http://localhost:5000 (ECONNREFUSED) (https://nodejs.org/api/errors.html#errors_common_system_errors)[1] [HPM] Error occurred while trying to proxy request /api/users/register from localhost:3000 to http://localhost:5000 (ECONNREFUSED) (https://nodejs.org/api/errors.html#errors_common_system_errors) 이렇게 나옵니다어떻게 해결해야 할까요 깃허브 https://github.com/Hanboreum/boilerplate-mern-stack-master
-
미해결따라하며 배우는 노드, 리액트 시리즈 - 유튜브 사이트 만들기
시작부터 오류생기시는 분들 해결법입니다.
boiler plate폴더의 루트 디렉토리의 package.json 에서 bcrypt 를 없애고 npm install 을 해줍니다.이후 npm install bcryptjs --save 를 루트 디렉토리에 설치해줍니다.sever > models > User.js 에서 상단의 const bcrypt = require('bcryptjs') 로 변경해줍니다.sever > models > User.js 파일의 85번째 줄의 "_id" : decoded 부분을 decode 로 변경해줍니다.client폴더로 넘어가서 package.json 은 건들지 않고 npm install 을 해줍니다.위치를 boiler plate 폴더의 루트 디렉토리로 넘어가서 npm run dev 를 실행시켜줍니다.