수강이 제한됩니다.
다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 미해결React로 NodeBird SNS 만들기
req.user.id
댓글 등록하는 route에서 req.user.id하니까 id가 정의되어 있지 않다고 떠요... 근데 포스트 등록하는 데서 req.user.id는 작동해요... 포스트는 되는데 댓글에서는 에러가 나는데 이럴수도있나요?? 둘다 req찍어보면 게시글 등록 하는 데서는 user객체가 있고 댓글등록하는 데서는 user객체가 없습니다... passport에서 user관리하는 걸로 아는데 왜 같은 파일에 있는데 하나는 되고 하나는 안될까요??
- 미해결React로 NodeBird SNS 만들기
제로초님 코드를 따라서도 그대로 복사했는데 이 무슨에러인가요? 몇일째 해결 못하고 있습니다;;
import React from "react"; import withRedux from 'next-redux-wrapper'; import { Provider } from 'react-redux'; import { createStore, compose, applyMiddleware } from 'redux'; import reducer from '../reducers'; import { composeWithDevTools } from 'redux-devtools-extension'; import Head from 'next/head'; import AppLayout from '../components/AppLayout' const NodeBird = ({ Component, store }) => { return ( <Provider store={store}> <Head> <title>NodeBird</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/antd/3.16.2/antd.css" /> </Head> <AppLayout> <Component /> </AppLayout> </Provider> ); }; const configureStore = (initialState, options) => { const middlewares = []; // 미들웨어들을 넣으면 된다. const store = createStore(reducer, initialState); return store; } export default withRedux(configureStore)(NodeBird); /!\ You are using legacy implementaion. Please update your code: use createWrapper() and wrapper.withRedux(). TypeError: Cannot read property 'getState' of undefined at C:\dev\js\react-project\react-nodebird\ch1\front\node_modules\react-redux\lib\components\Provider.js:31:18 at Object.useMemo (C:\dev\js\react-project\react-nodebird\ch1\front\node_modules\react-dom\cjs\react-dom-server.node.development.js:1239:19) at useMemo (C:\dev\js\react-project\react-nodebird\ch1\front\node_modules\react\cjs\react.development.js:1521:21) at Provider (C:\dev\js\react-project\react-nodebird\ch1\front\node_modules\react-redux\lib\components\Provider.js:30:42) at processChild (C:\dev\js\react-project\react-nodebird\ch1\front\node_modules\react-dom\cjs\react-dom-server.node.development.js:3043:14) at resolve (C:\dev\js\react-project\react-nodebird\ch1\front\node_modules\react-dom\cjs\react-dom-server.node.development.js:2960:5) at ReactDOMServerRenderer.render (C:\dev\js\react-project\react-nodebird\ch1\front\node_modules\react-dom\cjs\react-dom-server.node.development.js:3435:22) 먼 짓을해도 똑같은 오류입니다.
- 미해결React로 NodeBird SNS 만들기
next의 동적 라우팅
[...hashtag].js 이런식으로 파일을 만들면 동적 라우팅이 가능한 것으로 알고 있습니다. 이렇게 파일을 만들고 back에 있는 express로 hashtag테이블에서 정보들을 불러오면 안되는 건가요?? 굳이 next쪽에 express를 두어야 하나요??
- 미해결React로 NodeBird SNS 만들기
setCommentFormOpened 질문드립니다.
(PostCard.js) /* onClick -> 댓글창 열고닫기 */ const onToggleComment = useCallback(() => { console.log(commentFormOpened); // false setCommentFormOpened(prev => !prev); console.log(commentFormOpened); // false // console.log(commentFormOpened); if (!commentFormOpened) { dispatch({ type: LOAD_COMMENTS_REQUEST, data: post.id, }); } }, [commentFormOpened]); 여기서, setCommentFormOpened()를 했을때, commentFormOpened state가 즉시 true로 변하지 않는 이유가 무엇인가요 ? console.log를 찍어보니 setCommentFormOpened() 앞뒤로 둘다 false가 떠서 궁금해서 질문드립니다.
- 해결됨React로 NodeBird SNS 만들기
sequelize utility method 질문 입니다
1. add method는 N:M관계에만 만들어지나요? 아니면 1:1 이나 1:N도 만들어지나요? 2. add method의 정확한 기능이 무엇인가요? include랑 차이를 모르겠습니다. ex)post 테이블과 hashtag테이블이 N:M 관계일때 post.addHashtag 쓰지않고 find로 post테이블을 찾아서 include로 hashtag테이블을 넣어줘도 되지 않을까요? 3. get, set method도 있는것 같은데 해당 메서드는 어떤 관계때 만들어지고 어떤 기능인가요?
- 미해결React로 NodeBird SNS 만들기
Link태그의 href관련 질문드립니다.
지금까지는 sagas/index.js에서 설정한 axios.defaults.baseURL = 'http://localhost:3065/api'; 를 이용해서 localhost:3065/api/user~ 라든지, localhost:3065/api/post 이렇게 요청을 보내면, back단에서 routes로 처리를 한다음 res.json으로 프론트로 응답을 보내주는 형식으로만 알고있었습니다. 그런데 이번강의의 PostCard.js에서 <Link href={`/hashtag/${v.slice(1)}`} key={v}><a>{v}</a></Link> 이 부분같은 경우는 Link를 클릭해보니 localhost:3060/hashtag/좋아요 로 가던데... 이게 어떻게 가능한건가요 ? localhost:3065는 백엔드 서버라 당연히 요청을 처리해서 응답을 주는곳으로 알고있는데, localhost:3060은 프론트 주소 아닌가요 ? ㅠ 심지어, 백단에서의 요청 주소에는 앞에 api/user 이런식으로 api가 붙어야 됐었는데, 지금 Link내에서 요청을 보낼때는 api/ 접두사가 붙지않았는데도 붙구하고 요청이 제대로 동작을 하는게 이해가 잘 안되서 질문드립니다.. + 추가질문) Link href='hashtag/좋아요' 이 부분이 백단의 routes/hashtag.js에서 동작하는거 맞나요? (아마 맞을거같습니다만..)
- 미해결React로 NodeBird SNS 만들기
질문
폴리필을 붙일 때 느려지는 이유가 궁금합니다. 혹시 폴리필을 하지 않고 속도에 구애 안받고 최적화 시키는 방법은 있나요? css 이슈에 대해서는 조금 손이 더 간다고 하셨는데 그러면 모든 브라우저에 대해서 테스팅을 하면서 다 맞추려면 너무 힘들지 않을 까요?? 실무에서는 어떻게 진행이 되는지요? 감사합니다.
- 해결됨React로 NodeBird SNS 만들기
useRef의 click 펑션에서 에러 질문입니다
다음과 같이 useRef의 current.click()을 해주려는데, button을 눌렀을때 , TypeError가 발생합니다. 에러메세지는 이렇습니다... 그냥 바닐라 자바스크립트로, click이벤트 해보닌깐 문제없는데. function이 없다고 하는게 왜 그런지 이유를 잘 못찾겠습니다. 공식문서봐도 딱히 그런내용없고, current.focus()로 예문들이 있길래 해봣는데, text input에 그냥 focus하는거라 그런지 file input에는 안 먹히네요. 제로초님 코드랑 비교해봐도 왜 image.current.click()에서 에러가 나는지 모르겠습니다. 혹시 어떤걸 시도해보면 될까요? TypeError: imageInput.current.click is not a function (anonymous function) ./components/postform.js:27 24 | 25 | const onClickImageUpload = useCallback(() => { 26 | console.log(imageInput.current);> 27 | imageInput.current.click(); | ^ 28 | }, [imageInput.current]); 29 | 30 | const onChangeImage = useCallback((e) => {View compiled import React, { useState, useCallback, useEffect, useRef } from "react"; import { Form, Input, Button } from "antd"; import { useSelector, useDispatch } from "react-redux"; import { ADD_POST_REQUEST, UPLOAD_IMAGES_REQUEST } from "../reducers/post"; const PostForm = () => { const { imagePaths, isAddingPost, isAddedPost } = useSelector( (state) => state.post ); const [text, setText] = useState(""); const dispatch = useDispatch(); const imageInput = useRef(); const onChangeText = useCallback((e) => { setText(e.target.value); }, []); const onSubmitForm = useCallback(() => { if (!text || !text.trim()) { return alert("please write something"); } dispatch({ type: ADD_POST_REQUEST, data: { content: text.trim() } }); }, [text]); const onClickImageUpload = useCallback(() => { console.log(imageInput.current); imageInput.current.click(); }, [imageInput.current]); const onChangeImage = useCallback((e) => { console.log(e.target.files); const imageFormData = new FormData(); [].forEach.call(e.target.files, (currentValue) => { imageFormData.append(image, currentValue); }); dispatch({ type: UPLOAD_IMAGES_REQUEST, data: imageFormData, }); }, []); useEffect(() => { if (isAddedPost) { setText(""); } }, [isAddedPost]); return ( <React.Fragment> <Form encType="multipart/form-data" onFinish={onSubmitForm}> <Form.Item> <Input.TextArea maxLength={140} placeholder="What is your latest news?" value={text} onChange={onChangeText} ></Input.TextArea> </Form.Item> <Input type="file" multiple ref={imageInput} onChange={onChangeImage} /> <div> {imagePaths.map((x, i) => { return ( <div key={i} style={{ display: inline - block }}> <img src={"localhost:/3065/" + x} alt={x} style={{ width: "200px" }} ></img> </div> ); })} </div> <Button onClick={onClickImageUpload}>Upload Image</Button> <Button htmlType="submit" type="primary" style={{ float: "right" }} loading={isAddingPost} > Submit </Button> </Form> </React.Fragment> ); }; export default PostForm;
- 미해결React로 NodeBird SNS 만들기
댓글 삭제 기능 예전에 여쭤봤었는데 추가로 여쭤봅니다 ㅠㅠ
https://www.inflearn.com/questions/33328 이 질문을 했었는데 ㅠㅡㅠ 해결을 다시 해보려고 합니다 <코드> <router> <saga> <reducer> 아 이해했습니다. 그러면 request 액션에 post Id를 넣으시고, saga, axios통해서 요청 보내신 후에 success액션에서 request액션으로부터 postId 그대로 가져와서 하시면 됩니다. function* watchLoad(action) { dispatch({ type: LOAD_SUCCESS, postId: action.data.postId }) // 이런 식으로 action에 들어있는 거 그대로 쓰세요.} 이렇게 댓글을 달아주셨는데 request 액션에서 postId를 넣을 때 router 파트에서 그 부분을 찾아줘야 하는지, 혹시 그동안 수업했던 부분 중 참고할 수 있는 부분이 있는지 궁금합니다. 제가 다른 기능들을 참고하면서 여러가지 시도를 해봤었는데 ㅠㅠ 계속 오류가 나서요! postId 자체를 찾아주지 못하고 있는 상황이라고 저는 생각하고 있습니다.
- 미해결React로 NodeBird SNS 만들기
nodebird.com 사이트 안들어가져요
들어가서 다시 볼려고 했더니 안들어가지네요...
- 해결됨React로 NodeBird SNS 만들기
[].forEach.call 에 대한질문
e.target.files가 유사배열 즉 객체여서, 아래와 같이 예문을 만들어서 돌렸는데, ===================================== const obj2 = {0:"a1",1:"a2",2:"a3"}; [].forEach.call(obj2,(f)=>{console.log(f)}) ====================================== undefined가 나오더라구요... 강의에서 코드에 보면 [].forEach.call(e.target.files, (f)=>{console.log(f)}); 와 같은 형태인데, 제가 어디를 잘못알고 있는걸까요? call의 첫번째 인자부분에 array를 넣어야 제대로 된 출력값이 나오는데 e.target.files를 넣으면 어떻게 출력값이 나올 수 있는지 궁금합니다.
- 미해결React로 NodeBird SNS 만들기
sequelize의 include 속성에 대한 질문입니다.
sequelize의 include 속성에 대한 질문입니다. 가령, models폴더안의 post.js를 보면, post와 user, comment, image, hashtag등등이 Post.associate()라는 함수에서 관계가 정의되어있는데.. 질문1) 이렇게 관계가 서로 정해진것들끼리'만' include가 가능한거 맞나요? 좀더 구체적으로 질문을 드리자면, 관계를 정의할때 '1대1' 또는 '1대다' 또는 '다대다' 등등 어떤 관계로 정의를해도 관계만 맺어져있다면 include가 사용가능한것인지 궁금합니다! 질문2) models/hashtag.js의 Hashtag.associate에서 Hashtag와 Post의 관계가 다대다로 설정되어있는것을 확인할수있는데, (routes/hashtag.js) const posts = await db.Post.findAll({ include: [{ model: db.Hashtag, // 게시글 가져올때 해시태그도 함께 가져오도록. where: { name: decodeURIComponent(req.params.name) }, // decodeURIComponent(): tag에 한글이 들어오면 URIComponent로 감싸지게 되므로, 그것을 decodeURI }], }); 여기서 include의 의미가 제대로 이해가 되지않아서 질문드립니다. 조금더 구체적으로 질문을 드리자면... (models/hashtag.js) // 관계 설정 Hashtag.associate = (db) => { db.Hashtag.belongsToMany(db.Post, { through: 'PostHashtag' }); }; return Hashtag; 위 관계설정 부분에서 '다대다'로 설정을 했고, through를 통해, 'PostHashtag' 라는 테이블이 새로 생겼는데, mySQL 워크벤치에서 바로 이 'posthashtag'테이블의 필드들을 살펴보면, 'HashtagId'와 'PostId'가 있는것을 확인할 수 있는데요! 그렇다면, 위 첫번째 사진의 include부분에서 req.params로 넘어온 tag name을포함하는 hashtag가 있고, (이부분은 mySQL hashtags테이블의 name필드와 일치하는것 같습니다) 이 hashtag가 posthashtag테이블의 PostId필드에 들어간 후, 그 PostId를 포함하는 post를 최종적으로 뽑아낸게 바로, 첫번째 사진의 const posts = {} 객체 라는건가요 ??? 너무너무너무 헷갈립니다 ㅠㅠㅠ 저 include라는 의미가 어떤 순서로 작동을 해서 포함관계가 되는것인지 정말 모르겠어서 질문드려요 ...ㅠㅠ
- 미해결React로 NodeBird SNS 만들기
제로초님~
제로초님 유튜브에서 공지 사항 봤었는데 사고 난건 괜찮으 신가요? 완쾌 하셔서 정말 다행입니다. 이론적으로 물어 볼께 있어서 질문을 남깁니다. react.children들에서 react.children.only react.children.map 이 있던데 어떤 차이 인지 궁금 해서 질 문 남깁니다 현재도 사용 중인 것들인지도 질문 남깁니다.
- 미해결React로 NodeBird SNS 만들기
콘솔에러 핸들링 질문드립니다.
1. 태그를 클릭했을 시 이러한 에러가 발생했습니다. pages/hashtag.js 에서 이렇게 수정하고, components/PostCard.js 에서 key값을 이렇게 수정하니 콘솔에러가 사라졌습니다. 같은 키를 사용해서 발생한 에러같은데 결국엔 같은 키값을 사용했더니 에러가없어진? 이러한 느낌인데 조금 상세히 설명 부탁드려도 될까요? 2. 밑에 질문들을 참고하였지만 해결이 되지 않은 부분입니다. 강의 잘 듣고있습니다. 감사합니다.
- 해결됨React로 NodeBird SNS 만들기
bcrypt 관련질문
안녕하세요. 강의중에 회사에서 작업할때 "bcrypt": "^4.0.1" 버전으로 깔고 작업하는데 이상이 없었습니다. 그런데 집에와서 클론해서 node_modules 인스톨 후에 시작했더니 계속 app crash 오류만 나고 정확한 원인을 찾지 못하다가 버전을 "bcrypt": "^3.0.6" 으로 낮췄더니 다시 정상적으로 돌아가기 시작했습니다. 원인이 뭘까요?
- 미해결React로 NodeBird SNS 만들기
로그인이 안됩니다..
로그인 버튼 누르면 백엔드단 쿼리 실행해서 state 200 까지 되는데, 사진을 보시면 프론트단으로 데이터를 가져오질 못합니다.. result변수가 promise 객체라 then을 이용하니 data를 가져오긴 하는데,... 뭐 프론트 쪽에서 로그인 안되는건 매한가지네요 ㅠ
- 미해결React로 NodeBird SNS 만들기
sequelize 의 associate method에 대해서
안녕하세요! associate method로 추가시에 어디에 저장되는건가요? 예를들면 back/routes/post.js에 있는 코드중에 post.addComment(req.params.id)의 경우 이걸 db에서는 제가 못찾겠던데 (Post와 Comment테이블 두곳 다 봤을때 특별하게 추가된게 뭔지 모르겠습니다.) 1. 이렇게 추가되는건 어디에 정보가 저장되어 있는건가요? 2. 그리고 이걸 안쓰면 어떻게 될까요?
- 미해결React로 NodeBird SNS 만들기
next관련 질문
ch1에서 ReactDOM.render나 html이 없는데 next를 쓰면 html은 따로 안만들어도 되는 건가요?
- 해결됨React로 NodeBird SNS 만들기
배포 후 문제 질문 드립니다 ㅠㅠ (pm2 kill 했는데도 사이트가 계속 동작하는 문제 & 타임존 문제)
안녕하세요! 배포 후에 문제점이 생겨 질문 드립니다. (이 문제 해결 되었습니다!! 추가 질문을 덧글로 적어두었어요 확인해주시면 감사하겠습니다 ㅠㅠ) 백엔드 라우터에 시간을 기준으로 데이터를 가져오는 작업이 있는데, ec2가 미국시간을 기준으로 데이터를 가져오는것 같아 timezone을 바꾸기 위해 다음의 작업을 수행한 뒤(https://ora-sysdba.tistory.com/entry/Cloud-Computing-Amazon-EC2-%EC%9D%B8%EC%8A%A4%ED%84%B4%EC%8A%A4%EC%9D%98-TIMEZONE-%EB%B3%80%EA%B2%BD) 시스템을 재부팅하기 위해 진행중인 pm2를 종료하고 sudo reboot를 치고 다시 들어왔습니다. 백엔드 monit 결과를 보고자 켜보니까 이런 화면이 뜨네요... 뭔가 이상하다 싶어서 프론트와 백엔드 모두 pm2 kill을 눌러 진행중이던 pm2를 종료했는데도 사이트가 계속 돌아가고 있습니다 ㅠㅠ pm2 list로 확인해보아도 아무것도 뜨지 않아요 이럴 수가 있나요.....??? ㅠㅠ 프론트와 백엔드 둘다 제대로 들어가고 있는데 왜 돌아가는건지... 위의 경고는 서버가 이미 돌아가서 나는 경고인지 모르겠는데 어떤 식으로 상태를 파악하고 어떻게 고쳐야할지 감이 안잡히네요 도움 주시면 감사하겠습니다 ㅠㅠ
- 미해결React로 NodeBird SNS 만들기
생략된 부분에 대한 질문!
직전강의에서는 로그인시에 짹짹 수와 팔로잉수 팔로워 수 부분이 없었는데 이번강의에서 나타나있어서 코드를 참조하여 아래부분을 추가했습니다. 그리고 서버를 재시작하면 정상 작동을 합니다. 그런데 새로고침을 하면 아래와 같은 에러가 발생합니다 어떠한 이유일까요? <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>, ]} >