수강이 제한됩니다.
다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 미해결React로 NodeBird SNS 만들기
npm run dev실행시 .next 파일
ch4까지 끝낸 후 npm run dev를 실행했더니 front폴더 밑에 .next 폴더가 생기고 .next폴더 밑에는 server폴더 static등등이 생기는데 정상인가요?
- 해결됨React로 NodeBird SNS 만들기
시퀄라이즈로 데이터를 가져오는 문제입니다.
app.post("/userscomment", async (req,res)=>{ console.log("--------------------") try{ const aaa= await db.user.findAll({ where:{id:req.body.id}, attributes:["id"] }) console.log("@@@@@@@",aaa) if(aaa){ const bbb = await aaa.getFollowers({include:[{model:db.comments}]}) if(bbb){ res.status(200).json(bbb) }else{ res.status(404).send("다시") } }else{ res.status(404).send("다시") } } catch(e){console.log(e)} 강의에서와 같은 방식으로 associate를 작성했습니다 그리고 as는 followers라고 만들었습니다 그래서 getfollowers라는 함수로 유저의 팔로우를 가져오고 그 팔로우의 커맨츠도(작성글) TypeError: aaa.getFollowers is not a function at /home/gksdudxkr/junier/index.js:148:31 라는 에러가 나옵니다 어떻게 해야할까요?
- 해결됨React로 NodeBird SNS 만들기
함수형 컴포넌트의 클래스화
안녕하세요! 강의 듣고 응용하여 토이프로젝트 진행중인 학생입니다. 해당 강의에서 (7-18. 폴더 구조와 _error.js) next/app의 App을 가져와 class를 감싸주지 않고 그냥 함수형 컴포넌트 방식으로 진행해도 문제는 없지만 혹시 문제가 발생한다면 클래스로 변환해봐라 하셨었는데 _document.js 적용 후에 가끔 이유없이 새로고침 되는 문제가 발생합니다. 경고문에 Container를 더이상 사용하지 말라는 말도 있고, (이렇게 되면 next/app에서 가져온 무언가로 감싸지 않고 진행하는데 이래도 괜찮은건지 모르겠습니다 ㅠㅠ) 제로초님께서 강의 중 하신 말씀도 있고 해서 혹시 하는 마음에 _app.js를 클래스 형태로 변환해보고자 합니다. 변환을 하고 보니 일단은 문제없이 동작하긴 하지만 클래스형 컴포넌트가 익숙하지 않아 제대로 바꾼 것인지 고민이 되어 질문 드립니다! 변환 전, 변환 후 코드를 덧글로 달겠습니다! 한번 확인해주시면 감사하겠습니다 ㅠㅠ
- 미해결React로 NodeBird SNS 만들기
isServer error 에러가 나왔습니다 ㅠㅠ
antd 가 v4 여서 아이콘을 넣어주려고 아래와 같은 커맨드를 넣었었습니다. yarn add @ant-design/compatible 그 이후에 갑자기 이런 에러가 나왔어요. Unhandled Runtime Error TypeError: Cannot read property 'isServer' of undefined To set up the editor integration, add something like REACT_EDITOR=atom to the .env.local file in your project folder and restart the development server. https://github.com/minch1025/Nodebird_kwon 현재 수업은 6-13까지 마친 상태이구요 앤트디 아이콘 넣기 전까지는 동영상과 같이 정상적으로 돌아갔었습니다. 깃 확인 부탁드려요 ㅠㅠㅠ.....
- 해결됨React로 NodeBird SNS 만들기
req에 대한 질문입니다.
상당히 기초적인 질문인 것 같은데요, req.user req.params req.body 이런것들이 좀 헷갈립니다. 크롬 개발자도구에서 보면 response는 preview로 내용이 보이는데 1. req에 대한 정보는 안보이더라구요.. Headers 탭에서 Request Headers를 보면 위에 언급한 3가지가 없습니다. 2. 모든 req에 대한 정보는 백엔드에서 console.log로만 확인할 수 있나요?? 3. req.user같은것을 생성한적이 없는 것 같은데 어디서 발생한건지 잘모르겠습니다. 혹시 관련 링크라도 있으면 부탁드립니다
- 해결됨React로 NodeBird SNS 만들기
패스워드 input 폼에 한글을 입력해도 영문으로 입력되고자 한다면
안녕하세요! 강의 듣고 토이프로젝트 진행중인 학생입니다. 따라가던 중 궁금한 점이 생겨 질문드립니다! 보통 사이트에서 로그인 시 기본이 영어로 되어있던, 한글로 되어있던 한영전환 없이 기본이 영어로 입력되도록 하던데 이런것은 자바스크립트로 하나하나 전환하는 코드를 짜야 가능한걸까요? 찾아보니 익플 브라우저에선 스타일에서 ime-mode 적용하면 영어만 입력되도록이 가능하다는 말이 있던데 혹시 익플 외 타브라우저에도 이런게 가능한 방법이 없는지... 실무에선 어떤 식으로 처리하시는지를 여쭤보고 싶습니다!
- 미해결React로 NodeBird SNS 만들기
서버사이드렌더링문제
안녕하세요 현재 강의를 기반으로 프로젝트를 하나 진행중에 있습니다.한가지 문제가있는데 예를들어 처음 index주소가 localhost:3000이고 이 주소로 접속해서 다른 페이지로 넘어갈때 getInitialProps가 잘작동하는데 바로 localhost:3000/a 여기로 한번에 접속하거나 새로고침 할시에는 getInitialProps가 작동을안해 useSelector로 값을 가져올시에 null값을 갖게 됩니다. 이를 해결할 방법이있을까요?
- 미해결React로 NodeBird SNS 만들기
req.user.id undefined에러
로그인을 하고 새로고침을 하였을 때, 로그인이 유지되는 것으로 보아 req.user.id가 있는 걸로 확인 되어지는데 post를 작성할 때 req.user.id가 undefined으로 나온다는 것은 passport의 deserializeUser이 문제인 건 가요? 또 혹시나 하여 백엔드 서버가 새로고침이 이루어 지는 건가 싶어 확인을 해보았지만 전혀 그런건 없네요.. 현재 ch5입니다ㅎ.. 혹시 다른 방법으로 시도 할 만한 게 있을까요?
- 미해결React로 NodeBird SNS 만들기
Cannot read property 'getState' of undefined 에러 어떻게 해결하나요...ㅠㅠ
Cannot read property 'getState' of undefined TypeError: Cannot read property 'getState' of undefined at C:\Users\MiRcomputer\Documents\GitHub\react-nodebird\front\node_modules\react-redux\lib\components\Provider.js:31:18 at Object.useMemo (C:\Users\MiRcomputer\Documents\GitHub\react-nodebird\front\node_modules\react-dom\cjs\react-dom-server.node.development.js:1239:19) at useMemo (C:\Users\MiRcomputer\Documents\GitHub\react-nodebird\front\node_modules\react\cjs\react.development.js:1521:21) at Provider (C:\Users\MiRcomputer\Documents\GitHub\react-nodebird\front\node_modules\react-redux\lib\components\Provider.js:30:42) at processChild (C:\Users\MiRcomputer\Documents\GitHub\react-nodebird\front\node_modules\react-dom\cjs\react-dom-server.node.development.js:3043:14) at resolve (C:\Users\MiRcomputer\Documents\GitHub\react-nodebird\front\node_modules\react-dom\cjs\react-dom-server.node.development.js:2960:5) at ReactDOMServerRenderer.render (C:\Users\MiRcomputer\Documents\GitHub\react-nodebird\front\node_modules\react-dom\cjs\react-dom-server.node.development.js:3435:22) at ReactDOMServerRenderer.read (C:\Users\MiRcomputer\Documents\GitHub\react-nodebird\front\node_modules\react-dom\cjs\react-dom-server.node.development.js:3373:29) at renderToString (C:\Users\MiRcomputer\Documents\GitHub\react-nodebird\front\node_modules\react-dom\cjs\react-dom-server.node.development.js:3988:27) at render (C:\Users\MiRcomputer\Documents\GitHub\react-nodebird\front\node_modules\next\dist\next-server\server\render.js:83:16) at Object.renderPage (C:\Users\MiRcomputer\Documents\GitHub\react-nodebird\front\node_modules\next\dist\next-server\server\render.js:419:16) at Function.getInitialProps (C:\Users\MiRcomputer\Documents\GitHub\react-nodebird\front\.next\server\static\development\pages\_document.js:293:19) at Object.loadGetInitialProps (C:\Users\MiRcomputer\Documents\GitHub\react-nodebird\front\node_modules\next\dist\next-server\lib\utils.js:59:29) at Object.renderToHTML (C:\Users\MiRcomputer\Documents\GitHub\react-nodebird\front\node_modules\next\dist\next-server\server\render.js:423:36) at async DevServer.renderToHTMLWithComponents (C:\Users\MiRcomputer\Documents\GitHub\react-nodebird\front\node_modules\next\dist\next-server\server\next-server.js:651:26) at async DevServer.renderToHTML (C:\Users\MiRcomputer\Documents\GitHub\react-nodebird\front\node_modules\next\dist\next-server\server\next-server.js:798:28)구글링 해봐도 답을 못찾겠어서 질문 드려요....어디가 잘못됐는지 도통 모르겠네요 .. ㅠhttps://github.com/pym7857/react-nodebird/tree/master/front3-4 장 까지 코드는 모두 깃허브에 올렸습니다..어디가 잘못됐을까요 제로초님... ㅠㅠㅠㅠㅠㅠㅠ
- 미해결React로 NodeBird SNS 만들기
include where
강의 도중에 둘의 차이점을 말씀하셨는데 잘 이해가 가질 않습니다. 제로초님 노드 교과서를 보는데도 이해가 잘 안되네요 ㅠ 1번 코드를 보면 post들에 대해서 where로 바로 id 를 특정해서 post를 가져오는 것으로 이해를 했습니다. 그런데 그렇게 따지고 보면 2번에서도 hashtag로 모든 post들 사이에서 해당하는 경우를 where로 같은 위치에서 특정해도 되는 것 아닌가요? 무엇을 잘 구별해야 한다는 말씀이신지 이해가 안갑니다. 1. router.get('/:id/posts', async (req, res, next) => { try { const posts = await db.Post.findAll({ where: { UserId: parseInt(req.params.id, 10), RetweetId: null, }, include: [{ model: db.User, attributes: ['id', 'nickname'], } 2. router.get('/:tag', async (req, res, next) => { try { const posts = await db.Post.findAll({ include: [{ model: db.Hashtag, where: { name: decodeURIComponent(req.params.tag) }, }, { model: db.User, attributes: ['id', 'nickname'], },
- 해결됨React로 NodeBird SNS 만들기
post를 작성하고 form 을 제출할때마다 페이지가 새로고침이 됩니다..
제로초님 어제오늘 해보고 있는데, 코드 비교해도 문제점을 잘모르겠고 시간이 너무 지체되는것 같아서 질문드립니다.. 코드는 깃헙에 올렸습니다. 혹시 봐주실 수 있을까요? 현재 6-3까지 학습한 상태입니다. (모두 ch1 안에 있습니다.) https://github.com/stefan-CHO/react-sns-tweeter 현상 : form을 제출시에(post를 만들면) 페이지가 새로고침이 됩니다. 에러는 아래와 같습니다. (이것도 순식간에 새로고침되면서 떳다가 사라져서 잡기가 힘들었습니다 ㅠ), 새로고침된 후에는 추가된 포스트가 정상적으로 load되기는 하는데요, 새로고침된다는게 큰 문제인것 같습니다.. components/postform.js에 onFinish를 onSubmit으로 바꾸고 event.preventDault()를 했을때는 아예 form제출도 되지 않아 이 문제는 아닌것같고, 다른 form은 새로고침이 발생안하는데 이것만 그렇네요.. query의 post.User.id 에 parseInt를 추가했는데, 이부분은 추가하던 안하던 똑같았습니다. 아래는 새로고침이 되는 과정에서 잠깐 떳다가 사라지는 console 메세지 입니다. ``` postcard.js:62 Uncaught TypeError: Cannot read property 'id' of undefined at PostCard (postcard.js:62) at renderWithHooks (react-dom.development.js:14803) at updateFunctionComponent (react-dom.development.js:17034) at beginWork (react-dom.development.js:18610) at HTMLUnknownElement.callCallback (react-dom.development.js:188) at Object.invokeGuardedCallbackDev (react-dom.development.js:237) at invokeGuardedCallback (react-dom.development.js:292) at beginWork$1 (react-dom.development.js:23203) at performUnitOfWork (react-dom.development.js:22154) at workLoopSync (react-dom.development.js:22130) at performSyncWorkOnRoot (react-dom.development.js:21756) at react-dom.development.js:11089 at unstable_runWithPriority (scheduler.development.js:653) at runWithPriority$1 (react-dom.development.js:11039) at flushSyncCallbackQueueImpl (react-dom.development.js:11084) at flushSyncCallbackQueue (react-dom.development.js:11072) at batchedUpdates$1 (react-dom.development.js:21862) at Object.notify (Subscription.js:19) at Subscription.notifyNestedSubs (Subscription.js:92) at Subscription.handleChangeWrapper (Subscription.js:97) at Object.dispatch (redux.js:222) at e (<anonymous>:1:40553) at redux-saga-core.esm.js:1410 at dispatch (redux.js:638) at io-6de156f3.js:133 at redux-saga-core.esm.js:472 at exec (redux-saga-core.esm.js:31) at flush (redux-saga-core.esm.js:87) at asap (redux-saga-core.esm.js:46) at runPutEffect (redux-saga-core.esm.js:468) at runEffect (redux-saga-core.esm.js:1204) at digestEffect (redux-saga-core.esm.js:1271) at next (redux-saga-core.esm.js:1161) at currCb (redux-saga-core.esm.js:1251) index.js:1 The above error occurred in the <PostCard> component: in PostCard (at pages/index.js:22) in Home (created by NodeBird) in div (created by Context.Consumer) in Col (at AppLayout.js:63) in div (created by Context.Consumer) in Row (at AppLayout.js:59) in AppLayout (created by NodeBird) in Provider (created by NodeBird) in NodeBird (created by withRedux(NodeBird)) in withRedux(NodeBird) in Container (created by AppContainer) in AppContainer React will try to recreate this component tree from scratch using the error boundary you provided, Container. index.js:1 Warning: Container: Error boundaries should implement getDerivedStateFromError(). In that method, return a state update to display an error message or fallback UI. in Container (created by AppContainer) in AppContainer index.js:1 GET http://localhost:3060/%3Canonymous%3E 404 (Not Found) index.js:1 GET http://localhost:3060/%3Canonymous%3E 404 (Not Found) ```
- 미해결React로 NodeBird SNS 만들기
질문입니다.
CSR와 SSR의 의미를 공부해보면서 느낀게, 우리 프로젝트의 정확한 아키텍쳐가 어떤지에 대해서 이해가 잘 가지않습니다.. 궁금한 것과 질문이 많아서 최대한 대답하기 쉽게 번호를 먹여서 적었습니다. 바쁘신 제로초님께 대답을 잘 들어보고싶어 꽤 오랜시간 고민하며 작성했네요 ㅠ 바쁘시겠지만 답변부탁드립니다.. 1. 서버가 모든 페이지를 그려서 던져주는 것이 SSR 이라고 하셨고 우리는 SRR 프레임워크인 NEXT를 쓰니 우리 프로젝트는 2번째 구조가 맞나요? 2. 본 프로젝트에서 CSR과 SRR의 의미에 대해서 생각을 해보았는데 혹시 이 것이 맞는지요? 2-1. 만일 우리 프로젝트가 CSR이라면 CSR 에서는 프론트 서버(CRA), 벡 엔드서버(익스프레스)로 구성된다고 할때, 브라우저가 요청을 보내면 프론트 서버는 브라우저의 요청을 처리한 후 브라우저에게 필요한 HTML, JS, CSS, 기타 정적파일(이미지, 비디오..)를 보내준다. 그리고 브라우저는 이를 해석해서 렌더링한다 2-2. 본 프로젝트의 경우 SSR 에서는 프론트 서버(NEXT), 벡 엔드서버(익스프레스)로 구성된다고 할 때, 브라우저가 요청을 보내면 프론트 서버가 온갖 처리를 다 한후에 최종적으로는 HTML과 기타 정적파일(이미지, 비디오..)만을 보내게 된다. HTML을 받은 브라우저는 이를 화면에 띄운다. 본인이 렌더링하진 않는다. 3. 저는 SSR이 HTML만을 결국엔 보내게 된다는 것을 이해했는데 사실 리액트를 통한 프로젝트를 할 때 구글 개발자 도구 network tab을 보면 그렇지가 않은 것 같습니다. index.js(next의 경우) 또는 0.chunk.js(cra의 경우)라는 파일과 잡다한 것들도 같이 보게 됩니다. 즉 html과 js와 css는 어디갔느냐 이 말입니다.. 위에 있는 index.js, 0.chunck.js과 같은 파일이 html과 js와 css를 하나로 통합한 파일인 겁니까? 이 과정에서 리액트가 하는 역할을 무엇이죠? 4. 생각해보면 SSR이 더 손해라는 생각이 들어요. 물론 APP의 특성에 따라 다르겠지만, CSR은 첫 로딩의 패널티가 있지만, 그 후에는 더 빠르고 좋은 사용자 경험을 주는 것 같거든요. NEXT를 쓰면 매번 요청을 보내면 서버의 상황에 따라서 굉장히 느릴 수도 있고, 올때까지 오매불망 기다려야 하는 문제가 있습니다. NEXT는 그러면 그런 문제에 대해서는 어떤 대책을 내놓고 있죠 ? 혹시 첫 페이지를 로딩한 후 부터는 CSR을 적용하는 방식도 가능한가요? 5. 마지막으로 제가 그린 그림이 있는데요 ( 아래첨부) 여기에서 노란색 박스에 대한 질문이 해결이 안됩니다.. ㅠ 요청에 대한 응답으로 SSR과 CSR에서 보내는 것이 리액트를 사용했을 때와 사용하지 않았을 때의 차이와 그것을 브라우저에서 해석하는 방법에 대한 답을 얻어 볼 수 있을까요? 양질의 강의 항상 감사드립니다. 어렵지만 매일 성장하는 기분이 들어서 좋습니다. 긴 글 읽어주셔서 감사합니다.
- 미해결React로 NodeBird SNS 만들기
pageProps를 리턴할때 { }로 다시 감싸는 이유?
Component.getIntialProps에서 리턴할때 이미 { tag: context.params.tag} 이렇게 감싸서 리턴해주잖아요? 근데 그걸 갖고 와서 _app.js에서 getInitialProps에서 마지막에 다시 pageProps를 리턴할때 { pageProps } 이렇게 다시 또 감싸서 리턴하는 이유가 뭔가요? 그냥 return pageProps로 하닌깐, 원하는 결과가 안나오던데.. 콘솔로 찍어봐도 이유를 잘모르겠습니다.
- 미해결React로 NodeBird SNS 만들기
axios.default.baseURL로 설정한것은 ``(backticks)를 사용하면 무시되나요?
ch6에서 front에서 1. function loadMainPostsAPI() { return axios.get('/posts'); } 2. function loadHashtagPostsAPI(tag) { return axios.get(`/hashtag/${tag}`);} 위 두가지의 주소의 차이가 ''(single quote)이랑 ``(backticks)를 사용하는건데, 위에 /posts는 default.baseURL로 설정한 주소에다가 상대주소로 연결이되는 거잖아요?? 그래서 backend쪽으로 연결되는거고 2번인 hashtag/${tag}의 경우는 3060 포트로 설정한 프론트의 express서버로 연결된다고 이해하고 있는데요, 질문] ``을 사용하면 default.baseURL이 무시가 되고, server.js의 server.listen에 포트를 상대주소로 갖고가는건가요? 비록 ``이 template literal이라고 하지만, ``이나 '' 둘다 string값 아닌가해서 혼동이 됩니다. 혹시 제가 잘못이해하고 있는부분이 있으면 알려주세요
- 해결됨React로 NodeBird SNS 만들기
ch6로 옮길때 질문
1. ch6로 옮기는건 그냥 챕터별로 파일나누려고 하는거고 실무에서는 이렇게 안나누죠?? 2. ch5 => ch6로 옮기시는 과정이 궁금해요. 영상에서는 이미 파일은 다 옮겨져있고, npm i 만 하시는 것 같던데, 파일 복사는 커맨드로 하신건가요, 아니면 탐색기열어서 그냥 복붙하시는건가요?? chapter폴더 옮기는 과정이 궁금합니다.
- 해결됨React로 NodeBird SNS 만들기
addHashtags와 addHashtag의 차이점?
질문이 두가지 있습니다. 1. s를 붙인것과 붙이지 않은것의 결과가 같은데 어떤차이가 있나요? 2. "models add get method in sequelize"라고 구글에서 검색해보는데 내용이 어딨는지를 잘모르겠습니다. 혹시 이 매서드에 해당하는 용어가 뭔가요?
- 미해결React로 NodeBird SNS 만들기
req.params.id
nodejs에 req.params.id가 요청이 id값이면 req.params.id를 쓸수가있잖아요? 하지만 url이 req.params.id가 아닌 경우에 id값을 얻고싶으면 어떻게 해야하나요? 강의에서는 '/' get에서 댓글을 잘 했지만 ejs 템플릿엔진으로 '/'에 게시물을 만들고 거기에 댓글을 하려니 어떻게 클라이언트에 댓글을 뿌려야할지 잘 모르겠네요.
- 해결됨React로 NodeBird SNS 만들기
addHashtags(result.map(r=>r[0]) 이 부분이 잘 이해가 안되요
models 만들때 Hashtag 는 만들었는데, {as: Hashtags}라고 만든게 없었던거(?) 같아서요. result.map(r=>r[0]) 이부분을 보면 해쉬태그를 3개만들었을 때 이렇게 나오더라구요. console.log(result); 결과값 [object SequelizeInstance:Hashtag],true,[object SequelizeInstance:Hashtag],true,[object SequelizeInstance:Hashtag],true 이게 addHashtags.( map의 리턴값) 으로 Hashtags에 들어가는 거 같은데 mysql에 보면 관련된걸 못찾겠어서 헷갈리고 있습니다. Hashtags(근데 이건 mysql상에서는 Hashtag에 s가 붙고 첫글자 대문자로 바뀌면서 만들어진 Hashtags라는 이름이고 {as: Hashtags} 이거랑 다른거 같은데) 에 보면 태그들은 잘 들어갔거든요.. 제가 헷갈리는 부분이 설명되었나 모르겠습니다..
- 미해결React로 NodeBird SNS 만들기
그룹의 게시글의 댓글 질문합니다 ///////
https://www.inflearn.com/questions/33679 전에 답변주신 덕분에 ㅠㅠ ♡.. LOAD_MAIN_POSTS_REQUEST 게시물로드하기 성공했어요~! 그룹에 속한 게시물로 구조를 바꾸어준 후, 댓글 불러오기 LOAD_COMMENTS_REQUEST에 네트워크탭에 Request URL 에 전과 같은 undefined 오류가 나는 것을 확인했습니다 코드수정 후, 네트워크탭에서 성공의 200표시가 떳습니다.! 그런데 리덕스 데브툴즈에는 LOAD_COMMENTS_FAILURE가 뜨고 화면에서도 댓글이 보이지않았어요... 타입에러인 것을 확인했습니다, 강의하신 mainPosts의 data구조를 (어느그룹에 속한 게시물인지 데이터를보내기위해) data에 gpostId와 content로 나누어놨었어요 그래서인지 findIndex함수가 작동하지 않는것을 확인하고, 리듀서에서 mainPosts의 배열을 뽑아내기위해 ----> mainPosts.content로 수정했습니다. < post.js / reducers/ front > // 댓글 불러오기 case LOAD_COMMENTS_SUCCESS: { // console.log("state.mainPosts.content",state.mainPosts.content); const postIndex = state.mainPosts.content.findIndex(v => v.id === action.data.postId); // console.log("postIndex",postIndex); const post = state.mainPosts[postIndex]; // console.log("post",post); const Comments = action.data.comments; // console.log("Comments",Comments); const mainPosts = [...state.mainPosts.content]; // console.log("mainPosts",mainPosts); mainPosts[postIndex] = { ...post, Comments }; // console.log("new : ",mainPosts[postIndex]); return { ...state, mainPosts, }; } reducer / console.log ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// 이렇게 수정해주니 리덕스 데브툴즈에서도 LOAD_COMMENTS_SUCCESS 가 떳고 네트워크탭에서도 GET 방식으로 댓글이 잘 받아와지는 것을 확인할수있었어요.! 그런데 화면에서는 다른화면으로 넘어가서 원하는 결과가 나오지 않아요...ㅠㅠ 오류또한 발견핧수없었습니다. ^ 결론 : 댓글버튼을 클릭하면 dispatch로 LOAD_COMMENTS_REQUEST가 실행되고 컴포넌트<ContentForm> 에서 { post } 프롭값에 db.Comment 테이블에서 Comments 배열이 불러와졌었는데,, post를 콘솔로 확인해보면 Comments 배열이 불러와지지 않아요,,,, post.Comments로 결과를 화면에 나타나게 했는데 값이 불려와지지 않는게,, 왜그런지 알고싶습니다.ㅠㅠ /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// < post.js / sagas / front > // 댓글 불러오기 function loadCommentsAPI(postId) { return axios.get(`/post/${postId}/comments`); } function* loadComments(action) { try { const result = yield call(loadCommentsAPI, action.data); yield put({ type: LOAD_COMMENTS_SUCCESS, data: { postId: action.data, comments: result.data, }, }); } catch (e) { console.error(e); yield put({ type: LOAD_COMMENTS_FAILURE, error: e, }); } } function* watchLoadComments() { yield takeLatest(LOAD_COMMENTS_REQUEST, loadComments); } < ContentForm.js / Component / front > const ContentForm = ({post}) => { const [commentFormOpened, setCommentFormOpened] = useState(false); const [commentText, setCommentText ] = useState(''); const { me } = useSelector(state => state.user); const { commentAdded, isAddingComment, mainPosts } = useSelector(state => state.post); const dispatch = useDispatch(); const liked = me && post.Likers && post.Likers.find(v => v.id === me.id); //댓글창토글 const onToggleComment = useCallback(() => { setCommentFormOpened(prev => !prev); if (!commentFormOpened) { // 댓글창 켤때 불러오기 dispatch({ type: LOAD_COMMENTS_REQUEST, data: post.id, }); } }, []); // 댓글 const onChangeComment = useCallback((e) => { setCommentText(e.target.value); }, []); // 댓글올리기 사이클 const onSubmitComment = useCallback((e) => { e.preventDefault(); if(!me){ return alert('로그인이 필요합니다.'); } return dispatch({ type: ADD_COMMENT_REQUEST, data:{ postId: post.id, content: commentText, }, }); }, [me && me.id, commentText]); // 댓글 성공시, 빈텍스트로 useEffect(() => { setCommentText(''); },[commentAdded === true]); // 댓글삭제하기 const onRemoveComments = useCallback(userId => () => { alert('댓글을 삭제하시겠습니까?'); if(me.id === post.User.id) dispatch({ type: REMOVE_COMMENT_REQUEST, data: userId, }); }); // 댓글 변수선언 var listIndex; // 게시글 삭제 const onRemovePost = useCallback(userId => () => { if(me.id === post.User.id) alert('게시물을 삭제하시겠습니까?'); dispatch({ type: REMOVE_POST_REQUEST, data: userId, }); if(me.id !== post.User.id) alert('다른 사용자의 게시물은 삭제할 수 없습니다.'); }); // 좋아요 토글 const onToggleLike = useCallback(() => { if (!me) { return alert('로그인이 필요합니다!'); } if (liked) { // 좋아요 누른 상태 dispatch({ type: UNLIKE_POST_REQUEST, data: post.id, }); } else { // 좋아요 안 누른 상태 dispatch({ type: LIKE_POST_REQUEST, data: post.id, }); } }, [me && me.id, post && post.id, liked]); return( <> <div className="postbox"> <div className="contBox"> <p>{post.User.nickname} 님의 게시물 - 좋아요 : {post.Likers.length } </p> <PostImages images={post.Images} /> <div>{post.content}</div> </div> <div className="btnsbox"> <button type="button" className="commentBtn" value={commentFormOpened} onClick={onToggleComment} /> { liked ? <button type="button" className="likeBtnred" onClick={onToggleLike} /> : <button type="button" className="likeBtnline" onClick={onToggleLike} /> } <button type="button" className="removeBtn" onClick={onRemovePost(post.id)} /> {commentFormOpened===true && <form className="commentbox" onSubmit={onSubmitComment}> <textarea className="comment" value={commentText} onChange={onChangeComment} /> <button type="primary" htmltype="submit" className="combtn" loading={isAddingComment} >COMMENT</button> </form> } {/* 댓글올라갈부분 */} {commentFormOpened===true && ( <div style={{display:"inline-block", width:"100%"}}> <p style={{marginLeft:"10px"}}>{commentAdded ? '댓글' + post.Comments.length : '댓글'+ '0'}</p> <div className="comline"></div> {console.log("mainPosts.content???: ",mainPosts.content,"post???: ",post)} {(()=>{ if(post.Comments){ listIndex = post.Comments.map((el)=> ( <li style={{listStyle:"none", display:"inline-block", clear:"both"}} > {console.log("el",el)} {el.User.nickname} : {el.content} { el.UserId === me.id ? <button type="button" className="remove" onClick={onRemoveComments(post.id)} > REMOVE </button> : "" } </li> ) ) } return( <ul> {listIndex} </ul> ); })()} </div> ) } </div> </div> </> ); }; ContentForm.propTypes={ post: PropTypes.shape({ User: PropTypes.object, content: PropTypes.string, createdAt: PropTypes.string, }), }; export default ContentForm; < post.js / routes / back > // 댓글불러오기 router.get('/:id/comments', async (req, res, next) => { try { const post = await db.Post.findOne({ where: { id: req.params.id } }); if (!post) { return res.status(404).send('포스트가 존재하지 않습니다........'); } const comments = await db.Comment.findAll({ where: { PostId: req.params.id, }, order: [['createdAt', 'ASC']], include: [{ model: db.User, attributes: ['id', 'nickname'], }], }); res.json(comments); } catch (e) { console.error(e); next(e); } });
- 해결됨React로 NodeBird SNS 만들기
1:41초에 로그인,로그아웃 대문자관련해서
https://docs.microsoft.com/en-us/dotnet/standard/design-guidelines/capitalization-conventions 마소 convention보면 Pascal, camel의 경우 logIn이라는말은 안쓰고 logOn, logOff라고 되어있네요, Not이 쓰지말라는 의미같은데 logIn, logOut이라고 되어있습니다. 로그인자체를 쓰지말라는건지 logIn 이 형태로 쓰지말라는건지는 잘 모르겠으나, 제가 이해한 의미가 맞다면 login은 login으로 쓰라는 것 같은데 제로초님은 현재 어떻게 쓰시나요?