수강이 제한됩니다.
다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 미해결React로 NodeBird SNS 만들기
aws
aws cpu 용량이 넘어서 인스턴스 중지후 유형변경을하고 다시 프론트 서버를 돌리는데 ip주소로 접속하면 접속이 안됩니다. 무슨이유인가요?
- 해결됨React로 NodeBird SNS 만들기
특정 페이지에서 새로고침 시 LOAD_USER_REQUEST를 실행하지 않는 문제
안녕하세요! 강의 듣고 토이프로젝트 진행중인 학생입니다. SSR을 통해 데이터를 프론트에서 미리 가져와주는 작업을 진행중입니다. page/index.js의 경우 해당 페이지에 로그인 후 새로고침을 하면 app.js에서 계속해서 me 데이터를 가져와주어 문제가 없는데 page/user.js 페이지를 만들어서 작업중인데 해당 페이지는 링크를 타고 그대로 들어가면 문제가 없으나 새로고침 시 me데이터가 아예 사라지는 문제가 있습니다. 콘솔로그 찍어보니 LOAD_USER_REQUEST가 실행은 되는것 같은데 제대로 값을 불러내지 못하는것 같습니다. 어느 부분이 잘못된 것인지 저 나름대로 코드를 비교해보았으나 갈피를 잡지 못하여 질문 드립니다 ㅠㅠ 덧글로 파일 코드 작성해보겠습니다! 도움 주시면 감사하겠습니다 ㅠㅠ
- 미해결React로 NodeBird SNS 만들기
테이블간의 부모 자식관계
https://www.inflearn.com/questions/33032 이어서 질문 드립니다.. "개발자그룹"을 클릭하면 그그룹의 id에 업로드한 게시물을 로드되게 하고 싶은데요~ 게시물 올리기와 로드하기 기능이 둘다 안되고 별다른 에러메세지 없이 업로드하는 폼만 나옵니다. 1. 댓글처럼 테이블간의 부모 자식관계가 있으면 불변성을 확보해 주어야 하나요? 2.별부분의 로직이 "부모가 되는 Gpost 테이블의 id가 있는 테이블 Post중 title 이 일치하는 게시물을 찾아라" 가 맞나요? ☆☆☆ <post.js/routes> // 게시물 올리기 route : http://localhost:3060/post/100/개발자 router.post('/:id/:title', isLoggedIn, upload.none(), async (req, res, next) => { // POST /api/post : 게시글올리기라우터 try { const gpost = await db.Gpost.findOne({ // 부모가되는 그룹포스트가있는지 where: { id: req.params.id }, include: [{ model: db.Post, as: 'Posts', attributes: ['id'], where: { title : decodeURIComponent(req.params.title) }, //☆☆☆ }], }); if (!gpost) { return res.status(404).send('포스트가 존재하지 않습니다.'); } const newPost = await db.Post.create({ content: req.body.content, UserId: req.user.id, GpostId: gpost.id, // 어떤 그룹에 속해있는지 }); await gpost.addPost(newPost.id); 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, attributes: ['id', 'nickname'], },{ model: db.Image, },{ model:db.User, as:"Likers", attributes:['id'], }], }); res.json(fullPost); } catch (e) { console.error(e); next(e); } }); <post.js/routes> // 게시물'들' 불러오기 router.get('/:id/:title', async (req, res, next) => { // GET /api/posts try { const gpost = await db.Gpost.findOne({ where: { id: req.params.id }, include: [{ model: db.Post, as: 'Posts', attributes: ['id'], where: { title : decodeURIComponent(req.params.title) }, }], }); if (!gpost) { return res.status(404).send('포스트가 존재하지 않습니다.'); } const posts = await db.Post.findAll({ where: { GpostId: req.params.id, }, order: [['createdAt', 'ASC']], include: [{ model: db.User, attributes: ['id', 'nickname'], },{ model: db.Image, },{ model: db.User, through: 'Like', as:'Likers', attributes:['id'], }], order: [['createdAt', 'DESC']], }); res.json(posts); } catch (e) { console.error(e); next(e); } });
- 해결됨React로 NodeBird SNS 만들기
백앤드 서버
아래와 같은 에러가 나오고, 백앤드 서버 접속시 사이트를 찾지 못합니다.
- 해결됨React로 NodeBird SNS 만들기
front 서버에서 next 빌드할때 웹팩 에러가 발생합니다..ㅠ.ㅠ
front 서버에서 npm run build 로 next 빌드를 할때 아래와 같은 에러가 발생합니다 ///////////////////////////////////////////////////////////// root@ip-172-31-16-162:/home/ubuntu/testAWS/front# npm run build > react-nodebird-front@1.0.0 build /home/ubuntu/testAWS/front > cross-env ANALYZE=true next build Creating an optimized production build ... Webpack Bundle Analyzer saved report to /home/ubuntu/testAWS/front/.next/analyze/server.html Failed to compile. ./node_modules/@ant-design/icons/lib/dist.js 5:6 Module parse failed: 'import' and 'export' may only appear at the top level (5:6) You may need an appropriate loader to handle this file type. | // 加载script标签会阻塞js执行,antd部分组件(如表格)无法在一轮循环内完成完整的渲染,故延时 | setTimeout(function(){ > import(/* webpackChunkName: "antd-icons" */'!!./dist.js').then(function(allIcons) { | AutoReloadIcon.load(allIcons); | }); > Build error occurred Error: > Build failed because of webpack errors at Object.build [as default] (/home/ubuntu/testAWS/front/node_modules/next/dist/build/index.js:192:15) npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! react-nodebird-front@1.0.0 build: `cross-env ANALYZE=true next build` npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the react-nodebird-front@1.0.0 build script. npm ERR! This is probably not a problem with npm. There is likely additional logging output above. npm ERR! A complete log of this run can be found in: npm ERR! /root/.npm/_logs/2020-04-28T22_17_04_628Z-debug.log /////////////////////////////////////////////////// next.config.js 를 삭제하여 기본값으로 next 빌드를 할때는 문제없이 빌드가 되는데 왜 next.config.js로 웹팩 옵션을 추가할때는 왜 안되는지 모르겠습니다 ..ㅠ.ㅠ
- 미해결React로 NodeBird SNS 만들기
6-3 강좌를 getInitialProps 관련 문의드립니다.
윗 부분이 제가 한거고 아랫부분이 강사님 강좌 내용인데요 제가 한 캡쳐 오른쪽 아래에 console.log 부분 Component, router에 대한 받아오는 값이 저는 달라서 문의 드립니다. 어떤 것이 틀린 건지 잘 모르겠어서 문의 드립니다. 답변 부탁드릴게요
- 미해결React로 NodeBird SNS 만들기
강의 중 해쉬태그 검색을 위한 /hashtag/:tag 부분 질문!!
6-5 Link 컴포넌트 고급 사용법, 3:48 부분에 <PostCard> 컴포넌트의 <Card.Meta>의 <Link href={`/hashtag/${v.slice(1)}`} key={v} ><a>{v}</a></Link> 이 부분이 동영상 강의 흐름상에서 편집되어있네요. 입력한 해쉬태그를 누르면 해당 해쉬태그만 검색하는 부분인데, 이게 req.params.tag 로 넥스트 서버에 전달되서 getInitialProps로 해당 Hashtag 컴포넌트에서 받아가지고, 이 tag로 디스패치한 후 서버요청하는 부분이잖아요. 근데 여기서 첫번째 단계인 /hashtag/:tag 의 파라미터 부분에 입력하는 /${v.slice(1)} 이 강의 흐름에서 빠져있어요. 이미 다른분이 지적하셨는지, 아니면 제가 못보고 지나친건지 모르겠지만, 다른 분들 참고하시라고 올립니당 이게 깃헙 소스 코드에도 6장 최종 코드만 올라가 있다보니, 깃헙에도 해당 내용이 없기도 하구요. 그럼 좋은 강의 감사드리며 빠이~
- 미해결React로 NodeBird SNS 만들기
index.js에서 PostCard에 key props질문입니다.
깃헙 코드에 ch4/front/pages/index.js에 import React from 'react'; import { useSelector } from 'react-redux'; import PostForm from '../components/PostForm'; import PostCard from '../components/PostCard'; const Home = () => { const { isLoggedIn } = useSelector(state => state.user); const { mainPosts } = useSelector(state => state.post); return ( <div> {isLoggedIn && <PostForm />} {mainPosts.map((c) => { return ( <PostCard key={c} post={c} /> ); })} </div> ); }; export default Home; 이렇게 되어있는데요. PostCard 컴포넌트에 key값이 있는건 index.js내에 카드가 여러개 생길때 key값때문에 넣은게 맞나요? PostCard 컴포넌트 내부에서는 post props만 사용하던데
- 미해결React로 NodeBird SNS 만들기
댓글 삭제 관련 싸이클 다시 질문합니다 ㅠㅠ
댓글 달린걸 확인해보니까 제로초님이 생각하신 댓글 삭제랑 제가 생각하는게 좀 다른 것 같아서 ㅠㅠ 다시 여쭤봅니다. <화면> 화면에 이렇게 각 댓글마다 삭제 버튼을 만들어주었습니다. <saga> <reducer> immer을 사용한 문법이 좀 헷갈려 그 전 문법으로 다시 변경했습니다. 여쭤볼 점은 제 생각에는 action이 발생할 때 각 post의 comment의 개별 아이디를 지워주면 되지 않을까라고 생각하는데 imagePaths remove나 unlike post를 참고하면서 만들었는데, 해결이 되지 않습니다 ㅠㅠ 오류메세지는 DELETE /api/post/48(포스트 아이디)/comment 404 13.547 ms - 35 이렇게 발생합니다 ㅠㅠ
- 해결됨React로 NodeBird SNS 만들기
데이터베이스 만드는 질물
제로초님 백엔드와 sns만들기 강의를 수강하고 있는 학생입니다 데이터베이스를 만들때 마이그레이션으로 만드는 방법하고 백엔드 강의에서와 sns강의에서 만드는 방법이 각각 다른데 어떤 방법이 최신이고 더 효율적인 방법일까요?
- React로 NodeBird SNS 만들기
부모가있는 동적페이지 백엔드 질문
삭제된 글입니다
- 미해결React로 NodeBird SNS 만들기
npm run dev시 Browerlist 에러가 발생합니다.
3.24초에 하신 것처럼 npm run dev를 했더니 Browerslist: caniuse-lite is outdated. Please run next command 'npm update'라는 에러가 발생합니다. 구글 검색을 해봐도 의견은 분분한데 마땅한 해결책을 안보이네요. 어떻게 하면 좋을까요?
- 해결됨React로 NodeBird SNS 만들기
front ch4 깃 내용에서 질문
github 소스코드를 보면 , reducers/user.js에 export const LOG_OUT_REQUEST = 'LOG_OUT_REQUEST'; export const LOG_OUT_SUCCESS = 'LOG_OUT_SUCCESS'; export const LOG_OUT_FAILURE = 'LOG_OUT_FAILURE'; 가 있습니다. reducer부분에는 request로만 등록되어있고, 또 로그아웃은 saga에서 사용하지 않는것 같은데, 일부러 login이랑 맞추려고 의도적으로 success랑 failure을 넣으신건지, 아니면 복붙하다가보니 정리가 덜 된 부분인지 알고 싶습니다.
- 미해결React로 NodeBird SNS 만들기
login 제너레이터에서 put앞에 yield를 안쓴다면에 대한 질문
안녕하세요, function* login() { try { yield delay(2000); yield put({ type: LOG_IN_SUCCESS }); } catch (e) { yield put({ type: LOG_IN_FAILURE }); } } 위 코드에서 put앞에 yield를 쓰지 않을 경우, 로그인 버튼을 누르면 REQUEST 무한대기 상태에 빠집니다. (loading 아이콘 뱅글뱅글 돌아가면서) 위 코드와 같이 yield를 추가해줬을때는 제대로 동작을 하는데요. 코드 동작여부와 별개로 궁금하여 질문드립니다. yield를 쓰지않았을때 무한로딩이 되는 이유가 뭘까요 yield가 마지막에 없더라도 put이 실행되어야한다고 생각했는데, 어느부분을 제가 잘못생각하고 있을까요?
- 미해결React로 NodeBird SNS 만들기
createdAt저장한 DB시간 질문입니다
회원 가입하면 DB에 createdAt저장한 시간하고 실제 가입한 시간이 상이합니다. 몇초가 아닌 몇 시간 차이가 나는데 이건 어디서 확인하고 수정해야 하나요?
- 해결됨React로 NodeBird SNS 만들기
spread 문법에 대한 질문
현재 state 를 덮어쓸때 사용할 수 있는 spread문법에 대해서 헷갈리는 부분이 있어 질문드립니다. let arr={ user:[{ id: "", pass:0}] } const dummy = { id:"cho" } var arr2 = { user: [ ] } arr2. user = { ...arr.user, dummy} console.log(arr2) 를 콘솔에서 돌려봤을때, 의도는 id, pass가 arr이고 거기에 dummy id가 덮어씌워지게 하고싶은데, 그냥 어레이가 추가가 되어버리는데, 어디가 잘못된걸까요? mainPost = [...state.mainPost] 내용보다가 해본건데, 제가 뭘 잘못쓴건지 잘 모르겠습니다... arr2. user = { ...arr.user[0], dummy}으로 바꿔도 원하는 결과가 안나오네요.
- 해결됨React로 NodeBird SNS 만들기
mainPosts에 어레이를 쓰는이유가?
mainPosts 에 array내부에 object가 하나만 있는건데, array로 쓰시는 이유가 내용을 전부 object로만 표시하기 위해서 인가요? curly brace를 연속으로 쓰지 못하기 때문에 쓰는거로 이해하면 될까요?
- 해결됨React로 NodeBird SNS 만들기
제목에 &A라고 되어있어요
제목에 &가 아니고 html code가 들어가있네요. QnA로 바꾸시는게 어떨까해서 말씀드립니다. 처음에 보고 뭔가했거든요ㅎㅎ
- React로 NodeBird SNS 만들기
프로필 인피니트 스크롤링 숙제 관련 질문입니다.
삭제된 글입니다
- 해결됨React로 NodeBird SNS 만들기
put 앞에 yield 쓰는것 질문
좀 바보같은 질문일수도 있는데.. loop안에 take, delay , put앞에 모두 yield를 써야하는 이유가 뭘까요 예를 들면 function* generator(){ yield console.log(1); yield console.log(2); yield console.log(3); yield console.log(4); } 여기서 제가 1~4까지 출력을 하고 싶다면 next를 네번해야하는건데 function* generator(){ yield console.log(1); // take처럼 대기하는 시점이 여기라치면 console.log(2); console.log(3); yield console.log(4); } 이렇게 하면 next 두번에 1~4까지 다 출력되는 거 잖아요. 만약 take, put 과 같은게 루프 한번에 들어가있으면, 루프 한바퀴의 첫부분과 마지막 부분인 take와 put에만 yield를 써주면 문제되는 상황이 있나요? delay 앞에도 써주는 이유가 뭔지 궁금합니다.