수강이 제한됩니다.
다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 미해결React로 NodeBird SNS 만들기
address in use 에러 관련 질문입니다..
events.js:187 throw er; // Unhandled 'error' event ^ Error: listen EADDRINUSE: address already in use :::7001 at Server.setupListenHandle [as _listen2] (net.js:1300:14) at listenInCluster (net.js:1348:12) at Server.listen (net.js:1436:7) at Function.listen (C:\Users\zepet\Desktop\lecture\react-nodebird\ch1\back\node_modules\express\lib\application.js:618:24) at Object.<anonymous> (C:\Users\zepet\Desktop\lecture\react-nodebird\ch1\back\index.js:16:5) at Module._compile (internal/modules/cjs/loader.js:956:30) at Object.Module._extensions..js (internal/modules/cjs/loader.js:973:10) at Module.load (internal/modules/cjs/loader.js:812:32) at Function.Module._load (internal/modules/cjs/loader.js:724:14) at Function.Module.runMain (internal/modules/cjs/loader.js:1025:10) at internal/main/run_main_module.js:17:11 Emitted 'error' event on Server instance at: at emitErrorNT (net.js:1327:8) at processTicksAndRejections (internal/process/task_queues.js:80:21) { code: 'EADDRINUSE', errno: 'EADDRINUSE', syscall: 'listen', address: '::', port: 7001 } [nodemon] app crashed - waiting for file changes before starting... 해당코드이며 현재 mysql --version 결과 mysql Ver 14.14 Distrib 5.7.28, for Win64 (x86_64) 사용중입니다. root 계정에 처음에 설치할 떄 ip를 7001로 설정하고 진행을 하였고 react 소스에 7001로 하면 저런 에러가 떨어지고 다른 계정은 root계정과 비번이 안맞다고 나옵니다.. 해당 에러 문의드립니다.
- React로 NodeBird SNS 만들기
게시글 출력 api에서 include 했는데 user 정보가 포함이 안되서여
삭제된 글입니다
- 미해결React로 NodeBird SNS 만들기
게시글 출력할떄 user 정보가 인클루드가 안되서여
api 에서 router.get('', async (req, res, next) => { console.log("게시글 불러오기 호출 확인"); try { const posts = await db.Post.findAll({ include: [{ model: db.User, attributes: ['id', 'nickname'], }], }); console.log("posts : ", posts); res.json(posts); } catch (e) { console.error(e); next(e); } }) 이렇게 user 정보가 인클루드 되었는데 nickname이 없다고 에러가 발생해여 avatar={<Avatar>{post.User.nickname[0]}</Avatar>} title={post.User.nickname} description={post.content} 어디서 잘못된건지 봐주시면 감사여 ~! https://github.com/hyunsokstar/node_bird_22
- 미해결React로 NodeBird SNS 만들기
질문이여
웹페이지에서는 margin 을 줘서, div등을 이동 시켰는데요, 모바일에서는, margin 준 값을 변경해야, div가 알맞는 자리에 오더라구요.. ant desing 에서, md 와 xs로, 그리드를 왔다 갔다 하잖아요.. xs 일때만 따로 margin 을 주는 방법이 있나요? 또는 삼항 조건문을 써서, 따로따로 margin 값을 주려고하는데, md 나 xs일때만 알 수있는 방법이 있나요?
- 해결됨React로 NodeBird SNS 만들기
hashtag/:word
hashtag/:word와 같은 방법이 불가능하다는 이유가 잘 와닿지 않습니다. (user/:id와의 차이를 모르겠습니다. id도 동적으로 변하는 것 같은데..) hastag라는 공통 페이지를 하나 만들고, word를 가진 게시글 목록을 뿌려주면 되는게 아닌가요?
- 해결됨React로 NodeBird SNS 만들기
sagas부분에 addPost에서 addPostAPI를 못불러와요...
5-16강의 들으면서 게시글 작성하는걸 하고 있는데. 게시글을 올리는 버튼을 눌러도 개발자도구 Netwok랑 console에도 아무런 변화가 없고 Redux에만 ADD_POST_FAILURE만 뜹니다...그래서 제가 console을 찍어봣는데 처음 ADD_POST_REQUEST를 호출하는 PostForm에는 콘솔이 찍히고, 그다음 saga에 addPost도 console에 찍히는데 그다음 addPostAPI에서는 콘솔이 찍히지가 않습니다... 제로초님 깃허브 코드도 비교 해봤는데도 잘 모르겟습니다... ------------------------------------- -------------------------------------- --------------------------------------
- 미해결React로 NodeBird SNS 만들기
질문입니다!
안녕하세요 제로초님. 수강 중인 강의 내용과는 별개로 질문 좀 드려도 괜찮을까요? 제로초님 react nodebird 수강 중 강의 내용을 복습삼아 개인적으로 프로젝트를 진행해보는 중인데요, 초기에 레이아웃 구조를 만드는 중에 문제가 있어 질문드립니다. 현재 next 의 _app.js 에 AppLayout을 넣어주는 구조는 동일하게 가져갔으나 메뉴 중 user 라는 메뉴를 클릭 시 modal 을 출력하게 하여 로그인 폼을 따로 보여주고 싶은데요, AppLayout.js 코드 내에 아래와 같이 modal을 넣어주었고, modal 출력은 하는데 cancel 혹은 OK 버튼 클릭 시 useState로 modal의 visible을 false로 바꿔 modal을 닫는 동작이 안되네요 import React, { useState, useCallback } from "react"; import { Menu, Layout, Icon, Col, Modal } from "antd"; import PropTypes from "prop-types"; const AppLayout = ({ children }) => { const { SubMenu } = Menu; const { Header, Sider } = Layout; const [modalVisible, setModalVisible] = useState(false); const showModal = useCallback(() => { setModalVisible(true); console.log("showModal: " + modalVisible); }, []); const handleModal = useCallback((e) => { setModalVisible(false); console.log("handleModal: " + modalVisible); }, []); return ( <Layout> <Header className="header" style={{ backgroundColor: "#001a4d" }}> <div className="logo" /> <Menu theme="dark" mode="horizontal" style={{ lineHeight: "64px" }} ></Menu> <h1 style={{ color: "white" }}></h1> </Header> <Col xs={24} md={6}> <Layout style={{ minHeight: "100vh" }}> <Sider width={200} collapsible style={{ backgroundColor: "#ffffff" }}> <Menu mode="inline" defaultSelectedKeys={["1"]} defaultOpenKeys={["sub1"]} > <Menu.Item key="1" onClick={showModal} > <Icon type="user" /> <span>User</span> { <Modal title="Login Form" visible={modalVisible} onOk={handleModal} onCancel={handleModal} > <p>Some contents</p> </Modal>} </Menu.Item> </Menu> </Sider> </Layout> </Col> <Col xs={24} md={18}> {children} </Col> </Layout> ); }; AppLayout.propTypes = { children: PropTypes.node }; export default AppLayout; _app.js 에 들어간 AppLayout에서 modal 을 바로 출력하는 것 자체가 잘못된 걸까요? 로그로 modal 출력/cancel버튼 클릭 시 state 값을 확인해보니 false 로만 출력이 됩니다. 혹시 이상한 점이 있을까요??
- 미해결React로 NodeBird SNS 만들기
posts 데이터 전달 질문드려요
db에서 불러온 posts데이터를 saga에서 result에 담은다음 result.data 로 리듀서에 보내면 값이 undefined가 되는데 왜그런걸까요?
- 미해결React로 NodeBird SNS 만들기
deserialize 내부에서 db.User.findOne({..)}
passport.deserializeUser(async (id, done) => { try { const user = await db.User.findOne({ where: { id } }); return done(null, user); // 이 때 req.user에 유저 정보 저장 } catch (e) { console.error(e); return done(e); } }); local(); }; deserializeUser 의 callback 함수에서 done 으로 넘겨지는 user 데이터는 findOne({ where: {id}) 로 조회된 데이터인데요. 이 데이터에는 Followings, Followers 프로퍼티가 포함되지 않습니다. 그러다보니, 5-14에서 발생했던 것 처럼, front/component/AppLayout/UserPorfile 내부 아래 코드에서 에러가 발생하게 됩니다. import React, { useCallback } from 'react'; import { Card, Avatar, Button } from 'antd'; import { useSelector, useDispatch } from 'react-redux'; import { LOGOUT_REQUEST } from '../../reducers/user'; const UserProfile = () => { const { me } = useSelector(state => state.user); const dispatch = useDispatch(); const onLogout = useCallback(() => { dispatch({ type: LOGOUT_REQUEST, }); }, []); return ( <Card actions={[ <div key="twit"> 짹짹 <br /> {me.Posts.length} </div>, <div key="following"> 팔로잉 <br /> {me.Followings.length} </div>, <div key="follower"> 팔로워 <br /> {me.Followers.length} </div>, ]}> <Card.Meta avatar={<Avatar>{me.nickname[0]}</Avatar>} title={me.nickname} /> <Button onClick={onLogout}>로그아웃</Button> </Card> ); }; export default UserProfile; 이를 해결하기 위해서는 deserializeUser 에서 login 라우터에서 처럼 데이터를 조회해서 req.user에 저장해야 할 것 같습니다. 아래 코드와 같이 말이죠 - deserializeUser passport.deserializeUser(async (id, done) => { try { const user = await db.User.findOne({ where: { id }, include: [ { model: db.Post, as: 'Posts', attributes: ['id'] }, { model: db.User, as: 'Followings', attributes: ['id'] }, { model: db.User, as: 'Followers', attributes: ['id'] } ], attributes: ['id', 'nickname', 'userId'] }); return done(null, user); // 이 때 req.user에 유저 정보 저장 } catch (e) { console.error(e); return done(e); } }); local(); }; 이에 대해 어떻게 생각하시나요?
- 미해결React로 NodeBird SNS 만들기
질문이요
1. import React from 'react'; import Head from 'next/head' const index = () => { return( <> <div> Hello </div> </> ) } export default index 현재 인덱스 페이지를 만들고 있는데요, Warning: Did not expect server HTML to contain a <div> in <div>. 이런 경고가 뜨는데요, 원인이, <React.Fragment> <div> Hello </div> </React.Fragment> 이 부분인데 따로 해결 방법이 없나요 ?? <React.Fragment> 도 같더라구요... 2. return ( <> <Head> <title>NodeBird</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/antd/3.16.2/antd.css" /> </Head> <AppLayout> <Component /> </AppLayout> </> _app.js 에서 , pages 폴더에 들어있는 모든페이지를 Component로 받잖아요. 혹시 골라서만 받을 수도 있나요 ? 예를 들어서, a, b, c 가 pages 폴더에 있다고 치면은, a 와 b 만 AppLayout이 적용된 component로 받고, c 는 그냥 compoennt로 받는 식으로요.. 삼항 조건문을 써서, c 에게는 AppLayout 적용을 안시키려고, compoennt 를 console.log로 print 해보니, 딱히, 페이지이름은 안뜨고 이상한게 뜨더라구요... 혹시 방법 아시나요??
- 해결됨React로 NodeBird SNS 만들기
프론트서버에서 백앤드 서버로 못가는거 같아요
5-8강의를 듣고 백앤드 서버와 프론트 서버 연결하려는 실습을 하는데 자꾸 에러가 떠서 질문 드립니다. saga부분에 user 백앤드 주소 요청 하는곳까지는 consolg에 뜨는데 그다음 부터 응답을 못하는거 같아요... 이런 메세지가 뜨네요 ---------------------------------------- 어디가 문제인지 모르겟습니다...
- 미해결React로 NodeBird SNS 만들기
8:27 가량..
혹시 사용자 정보를 캐싱하는 내용은 어떤 키워드로 정보를 찾아봐야 하는지 여쭤봐도 될까요??
- 미해결React로 NodeBird SNS 만들기
imagesZoom.js를 전체 복붙했는데 좀 이상한거 같아여
2장이 한번에 표시되는데 뭔가 잘못된거겠져? https://github.com/hyunsokstar/ch6/blob/master/front/components/imagesZoom.js
- 미해결React로 NodeBird SNS 만들기
ImagesZoom 컴퍼넌트의 역할이 이미지 다보여주는거 맞나여?
이미지를 클릭하면 const onZoom = useCallback(()=> { setShowImagesZoom(true); }, []); 이 실행되서 이미지 두개 올린거 다 왼쪽 하단에 보이는데여 이미지 하나만 줌해주는게 아니라 다 보이는게 맞는거져? 또 2개가 2번씩 총 4개가 보이는데 이거 뭔가 오타난걸까여 css 적용하기 전이에여
- 해결됨React로 NodeBird SNS 만들기
address already in use....ㅠㅠ
5-5강의를 하면서 에러가 나길래 mysql를 설치하고 실행 했는데.... 자꾸 요런 에러가 뜹니다... port번호가 중복 된거 같아서 구글링 해서 현재 사용중인 port를 죽일라고 해도 자꾸 잘 안되네요...
- React로 NodeBird SNS 만들기
TypeError: Cannot read property '0' of undefined 에러
삭제된 글입니다
- 미해결React로 NodeBird SNS 만들기
폼데이터로 포스팅 api 라우터 질문이여
upload.none()은 뮬터를 이용해 프론트에서 서버로 넘긴 폼데이터를 const onSubmitForm = useCallback((e) => { e.preventDefault(); if (!text || !text.trim()) { return alert('게시글을 작성하세요.'); } const formData = new FormData(); imagePaths.forEach((i) => { formData.append('image', i); }); formData.append('content', text); dispatch({ type: ADD_POST_REQUEST, data: formData, }); }, [text, imagePaths]); req.body에 세팅하기 위한 미들웨어 로직이다 이렇게 이해하면 되나여? 또 db에서 include 로직은 const fullPost = await db.Post.findOne({ where:{id:newPost.id}, include:[{ model:db.User, }, { model: db.Image, }], }); 인데 user는 create 할때 const newPost = await db.Post.create({ content:req.body.content, UserId:req.user.id, });이렇게 저장해서 포스트 테이블내의 정보이기 때문에iinclude 모델 이름 이러면서 그냥 그 id로 user 정보를 검색해서 가져오는것 그렇게 생각했는데여 Image는 같은 테이블에 없는데 어떻게 이미지 데이터를 가져오는거져? 이에 대해 알려주시면 감사여 ~!~! 전체 코드 ``` router.post('', isLoggedIn, upload.none(), async (req, res, next) => { // console.log("req.body : " , req.body); try { const hashtags = req.body.content.match(/#[^\s]+/g); const newPost = await db.Post.create({ content:req.body.content, UserId:req.user.id, }); if (hashtags) { const result = await Promise.all(hashtags.map(tag => db.Hashtag.findOrCreate({ where: { name: tag.slice(1).toLowerCase() }, }))); console.log("result : ", result); await newPost.addHashtags(result.map(r => r[0])); } if (req.body.image) { // 이미지 주소를 여러개 올리면 image: [주소1, 주소2] if (Array.isArray(req.body.image)) { const images = await Promise.all(req.body.image.map((image) => { return db.Image.create({ src: image }); })); await newPost.addImages(images); } else { // 이미지를 하나만 올리면 image: 주소1 const image = await db.Image.create({ src: req.body.image }); await newPost.addImage(image); } } const fullPost = await db.Post.findOne({ where:{id:newPost.id}, include:[{ model:db.User, }, { model: db.Image, }], }); res.json(fullPost); } catch (e) { console.error(e); next(e); } }); ```
- 미해결React로 NodeBird SNS 만들기
이미지 업로드할때
첫번쨰 인자값으로 image가 왜 들어가는지 알려주시면 감사여 ~!``` const onChangeImages = useCallback((e) => { // 입력한 파일 정보를 이렇게 가져올 수 있음 console.log(e.target.files); // 폼의 정보를 담을수 있는 객체를 선언 const imageFormData = new FormData(); // 입력한 파일 정보를 반복문으로돌려서 imageFormData에 저장 [].forEach.call(e.target.files, (f) => { imageFormData.append('image', f); }); dispatch({ type: UPLOAD_IMAGES_REQUEST, data: imageFormData, }); }, []); ``` imageFormData.append('image', f);그리고 useRef로 인풋 박스 const onClickImageUpload = useCallback(() => { imageInput.current.click(); }, [imageInput.current]); 이때 이미지 업로드 버튼이랑 파일 업로드 버튼을 별개로 만드는 이유와 중간에 current는 무슨 의미인지 알려주시면 감사여
- React로 NodeBird SNS 만들기
이미지 업로드할때
삭제된 글입니다
- 미해결React로 NodeBird SNS 만들기
질문이요
깃에서요 /ch8/front/components/PostImages.js if (images.length === 2) { return ( <> <div> <img src={images[0].src.replace(/original\//, 'thumb/')} width="50%" onClick={onZoom} /> <img src={images[0].src.replace(/original\//, 'thumb/')} width="50%" onClick={onZoom} /> </div> {showImagesZoom && <ImagesZoom images={images} onClose={onClose} />} </> ); } 에서 <img src={images[0].src.replace(/original\//, 'thumb/')} width="50%" onClick={onZoom} /> <img src={images[0].src.replace(/original\//, 'thumb/')} width="50%" onClick={onZoom} /> images[1] 이 되어야하는데 0 이여서 이미지 두개 올리면, 첫번째 사진이 두번 올라가네요 1. 아마 이부분이 오타인거같요??? <img src={images[0].src.replace(/original\//, 'thumb/')} width="50%" onClick={onZoom} /> <img src={images[1].src.replace(/original\//, 'thumb/')} width="50%" onClick={onZoom} /> 2. AWS 는 쭉 무료인가요? 무료 EC2 만 쓰면요 ?? 3. 깃에서는 https 가 있고 nodebird.com은 https 이던데요, https 설정 하려면, 따로 참고 할 만한 사이트가 있나요? 4. 노드 js 는 자바스크립트를 운용할 수 있게해주는 런타임 이잖아요 그러면 리액트는 프레임워크라고 해야하나요? 리액트 리듀서, 리덕스사가 이런거는 npm 패키지로 보아야 하는건가요? 그리고 express 는 프레임워크인 npm 패키지가 맞죠?? 이런 개념들은 그냥 검색해서 알아가는 수 밖에 없겠죠? 아니면 책 같은게 있나요..? 솔직히 노드js V8 엔진이라는건 들었는데, 깊게 알 지를 못하겠네요...