173만명의 커뮤니티!! 함께 토론해봐요.
해결됨
[리뉴얼] React로 NodeBird SNS 만들기
이게 대체 무슨 에러인지 모르겠습니다... 검색도해보고에러메시지에서시킨대로도해봤는데 아무리해도없어지지가않아요ㅠㅜ 도와주십숑..
해결됨
[리뉴얼] React로 NodeBird SNS 만들기
제로초 강사님, 책과 강의 잘보고 있습니다. 감사합니다. 넥스트 12가 나왔는데... 러스트 컴퍼일러 등 다른 기능과~~ 서버 컴포넌트가 나왔다고 하네요 ( getServerSideProps or getStaticProps 요거 필요없다고 함) 어떻게 생각하시나요? 넉스트보다 좋나요??
해결됨
[리뉴얼] React로 NodeBird SNS 만들기
안녕하세요 설치가 다른댓글처럼 404가떠서 다른 댓글에 남기신 https://www.zerocho.com/category/NodeJS/post/5ef450a5701d8a001f84baeb 이거보고 프론트,백 설치했는데요 / etc / nginx / nginx . conf 여기 안에 include / etc / nginx / sites - enabled /*; 이라는 문구가 있으면 nginx.conf말고 vim /etc/nginx/sites-enabled/default 들어가서 그대로 적으면 되는건가요? 서버가 이상한거보니까 제가 뭔가 잘못이해한거같은데 vim /etc/nginx/sites-enabled/default 여기에 그대로 적는게 아닌가요.. 첫번째사진이 처음상태고 두번째로 제가 제로초님 블로그 보고 바꾼상태입니다. sudo service nginx start를 하고 status 는 이상태입니다,, 프론트는 위같은 에러가뜨면서 헤더만뜨고 아무것도안뜨고 백서버는 sudo service nginx start이거하면 아무 말 없이 실행되고 welcome to nginx 인데 백도 지금 잘못된상태인가요? 배포까지는 여태까지 뜨는 에러들 진짜 몇일동안 혼자 다 해결했는데 https적용 이거는 뭐가문제인지를 모르겠어서 질문합니다..
해결됨
[리뉴얼] React로 NodeBird SNS 만들기
안녕하세요 빌드시 메모리 부족으로 계속 빌드가 멈추는데요 구글링해서 옵션도 다 붙여보고 해도 똑같네요,, 질문글들을 보니까 .next를 서버에 전송하여 실행하라는 답글을 봤습니다. 이부분이 잘 이해가 안가서요. 혹시 .next폴더는 용량이 크니까 커밋푸시로는 안올라가니까 lfs를 사용해서? 깃헙에 올려하는것 같던데 이런식으로 올리고 ubuntu에서 그냥 git clone하라는 말씀 맞나요?
미해결
[리뉴얼] React로 NodeBird SNS 만들기
안녕하세요 인피니트 스크롤 적용 중 이상한 점이 하나 있어서 질문드립니다. f12누르고 개발자 모드 킨 상태로 redux 툴로 action을 체크하는 상태에서 스크롤을 맨 밑으로 내리면 제로초님처럼 LOAD_POSTS_REQUEST를 보내고 SUCCESS까지 동작하는데 문제는 스크롤이 계속 맨 밑에 머물러서 REQUEST SUCCESS를 계속 반복합니다. 즉 한번 맨 밑으로가면 스크롤이 다시 올라오지 않고 그 상태에서 REQUEST, SUCCESS를 5번 반복합니다. 그런데 개발자모드를 키지않고 테스트하면 제로초님처럼 정상작동합니다. 이거는 별 문제가 아닌건가요? (코드도 깃허브참고해서 똑같이 했습니다.)
미해결
[리뉴얼] React로 NodeBird SNS 만들기
npm run build하면 이런 에러가뜨는데 도통ㅇ 머가문젠지 모르겠습니다..ㅠㅠ stringify 를 쓰면 나는 에러같은데 저는 안쓰고있는데 이러네요..
미해결
[리뉴얼] React로 NodeBird SNS 만들기
export const getServerSideProps = wrapper . getServerSideProps ( async ( context ) => { context . store . dispatch ({ type : LOAD_USER_REQUEST , }) context . sotre . dispatch ({ type : LOAD_POSTS_REQUEST , }) context . store . dispatch ( END ) await context . sotre . sagaTask . toPromise () }) 위 코드를 실행했을 때 dispatch of undefined라는 오류가 뜹니다. configureStore.js 에서 store와 dispatch의 log를 찍어보면 잘 나오는데 왜 저런 오류가 뜨는걸까요? redux의 전은 6이에요.
미해결
[리뉴얼] React로 NodeBird SNS 만들기
이번 강의에 해쉬 태그 등록을 위한 코드들 const hashtags = ~~~ 부분과 if(hashtags) { } 요거를 추가하면은 500에러가 떠요. 왜 이럴까요? const express = require ( 'express' ) const multer = require ( 'multer' ) const path = require ( 'path' ) const fs = require ( 'fs' ) const { Post , Image , Comment , User , Hashtag } = require ( '../models' ) const { isLoggedIn } = require ( './middlewares' ) const router = express . Router () try { fs . accessSync ( 'uploads' ) } catch ( error ) { console . log ( 'uploads 폴더가 없으므로 생성합니다.' ) fs . mkdirSync ( 'uploads' ) } // multer 셋팅 const upload = multer ({ storage : multer . diskStorage ({ destination ( req , file , done ) { done ( null , 'uploads' ) }, filename ( req , file , done ) { const ext = path . extname ( file . originalname ) // 확장자 추출(.png) const basename = path . basename ( file . originalname , ext ) // 이름 추출(제로초) done ( null , basename + '_' + new Date (). getTime () + ext ) // 이름_1518123131.png }, }), limits : { fileSize : 20 * 1024 * 1024 }, // 20MB }) // 게시글 작성 router . post ( '/' , isLoggedIn , upload . none (), async ( req , res , next ) => { try { // const hashtags = req.body.content.math(/#[^\s#]+/g) const post = await Post . create ({ content : req . body . content , UserId : req . user . id , }) // if(hashtags) { // const result = await Promise.all(hashtags.map((tag) => Hashtag.findOrCreate({ // where: { name: tag.slice(1).toLowerCase() }, // }))); // 결과 [[노드, true], [리액트, true]] // await post.addHashtags(result.map((v) => v[0])); // } if ( req . body . image ) { if ( Array . isArray ( req . body . image )) { // 이미지 여러개면 image: [경로.png, 경로.png] const images = await Promise . all ( req . body . image . map (( image ) => Image . create ({ src : image }))) await post . addImages ( images ) } else { // 이미지 하나만 올리면 image: 경로.png const image = await Image . create ({ src : req . body . image }) await post . addImages ( image ) } } const fullPost = await Post . findOne ({ where : { id : post . id }, include : [{ model : Image , }, { model : Comment , include : [{ model : User , // 댓글 작성자 attributes : [ 'id' , 'nickname' ], }] }, { model : User , // 게시글 작성자 attributes : [ 'id' , 'nickname' ], }, { model : User , // 좋아요 누른 사람 as : 'Likers' , attributes : [ 'id' ], }] }) res . status ( 201 ). json ( fullPost ) } catch ( error ) { console . error ( error ) next ( error ) } }) router . post ( '/:postId/comment' , isLoggedIn , async ( req , res , next ) => { try { const post = await Post . findOne ({ where : { id : req . params . postId } }) if ( ! post ) { // 게시글 존재하는지 확인 return res . status ( 403 ). send ( '존재하지 않는 게시글입니다.' ) } const comment = await Comment . create ({ content : req . body . content , PostId : parseInt ( req . params . postId ), UserId : req . user . id , }) const fullComment = await Comment . findOne ({ where : { id : comment . id }, include : [{ model : User , attributes : [ 'id' , 'nickname' ] }] }) res . status ( 201 ). json ( fullComment ) } catch ( error ) { console . error ( error ) next ( error ) } }) // 좋아요 누르기 router . patch ( '/:postId/like' , isLoggedIn , async ( req , res , next ) => { // PATCH /post/1/like try { const post = await Post . findOne ({ where : { id : req . params . postId }}) if ( ! post ) { return res . status ( 403 ). send ( '게시글이 존재하지 않습니다.' ) } await post . addLikers ( req . user . id ) res . json ({ PostId : post . id , UserId : req . user . id }) } catch ( error ) { console . error ( error ) next ( error ) } }) // 좋아요 취소 router . delete ( '/:postId/like' , isLoggedIn , async ( req , res , next ) => { // DELETE /post/1/like try { const post = await Post . findOne ({ where : { id : req . params . postId }}) if ( ! post ) { return res . status ( 403 ). send ( '게시글이 존재하지 않습니다.' ) } await post . removeLikers ( req . user . id ) res . json ({ PostId : post . id , UserId : req . user . id }) } catch ( error ) { console . error ( error ) next ( error ) } }) // 게시글 삭제 router . delete ( '/:postId' , isLoggedIn , async ( req , res , next ) => { // DELETE /post/10 try { await Post . destroy ({ where : { id : req . params . postId , UserId : req . user . id , }, }) res . status ( 200 ). json ({ PostId : parseInt ( req . params . postId , 10 ) }) } catch ( error ) { console . error ( error ) next ( error ) } }) // 이미지 업로드 router . post ( '/images' , isLoggedIn , upload . array ( 'image' ), ( req , res , next ) => { console . log ( req . files ) res . json ( req . files . map (( v ) => v . filename )) }) module . exports = router
해결됨
[리뉴얼] React로 NodeBird SNS 만들기
게시글 삭제 직후 db에서는 바로 삭제가 되는데 브라우저에서 redux devtools로 state를 보면 mainPosts에 반영이 안되어있어요. 새로고침을 해야만 게시글이 사라져요. 어디에 문제가 있는건지 감이 안오네요
해결됨
[리뉴얼] React로 NodeBird SNS 만들기
db는 생성했는데 영상에 나오는 것처럼 mySQL workbench에서 생성된 데이터베이스를 어떻게 띄우는지 모르겠어요 ㅜ
미해결
[리뉴얼] React로 NodeBird SNS 만들기
제로초님 궁금한게있어서 문의드립니다. styled-components 사용해서 react를 개발하려면 기존에 디자이너가 디자인을 해주고 그걸 마크업(퍼블리셔)가 html과 css파일로 주는 방식으로 업무를 진행하고있는데, styled-components를 이용하는 회사들은 마크업 업무를 프론트 개발자들이 다 하게 되는건가요? 실무에서는 업무롤이 어떻게되어서 진행되는지 궁금합니다.
해결됨
[리뉴얼] React로 NodeBird SNS 만들기
저는 antd이게 이만한데 왜케크죠???ㅋㅋ.. 혹시 이거 정상인가여? 아님 제가뭐 잘못한건가요??
해결됨
[리뉴얼] React로 NodeBird SNS 만들기
서버사이드 렌더링을 가능케하는 Next.js가 브라우저 <-> 프론트서버 <-> 백엔드서버 이처럼 동작한다고 하셨는데 첫 렌더링시에 백엔드에서 데이터를 가져와 이를 가공해서 프론트서버에서 HTML을 만들어 브라우저로 넘겨주는거로 알고 있는데 여기서 궁금한 점은, Next.js가 React.js 기반이자나요. 그럼 첫 렌더링만 저렇게 만들어서 가져오고, 이후 해당 페이지에서 이루어지는 동작은 React.js처럼 브라우저와 백엔드서버로 데이터 교환을 통해 이루어지나요?? 1. React.js의 경우 하나의 HTML을 던져주고 백엔드와 데이터 교환을 하면서 페이지를 구성하는데 그렇다면 Next.js의 경우는, 로그인 페이지에 접근하면 Login.html 어드민 페이지에 접속하면 Admin.html을 프론트서버에서 만들어서 던져주는 건가요? 2. HTML을 만들어서 던져주고 해당 페이지 안에서는 CSR처럼 백엔드와의 데이터교환을 통해 변화된 부분만을 갈아끼우는건가요? 3. 그게 아니라면 아예 페이지에 접속할때 모든 페이지에 대한 정보를 담아 HTML을 던져주고 이후의 동작은 CSR처럼 동작하는건가요? 4. SSR이 로딩을 없애기에 적합하다고 하셨는데, 브라우저와 백엔드 사이에서 데이터 교환을 통해 페이지를 구성하는 CSR은 로딩이 있고, 프론트엔드와 백엔드서버 사이에서 데이터 교환을 해서 브라우저에 가공된 페이지를 전달하는 SSR은 없는 이유가 궁금한데요. 둘다 데이터 교환이 이루어지고 페이지를 구성한다는 점에서 시간이 걸릴텐데 왜 SSR은 없고 CSR은 있는거죠??
해결됨
[리뉴얼] React로 NodeBird SNS 만들기
안녕하세요, 처음에 로그인하고 프로필로 들어가면 에러가 안나는데, 프로필페이지에서 새로고침을하면 이런 에러가뜹니다. 팔로워 팔로잉 없을때 오류인줄알고 한명씩 넣어봐도 똑같이 뜨네요,, 그래서 제로초님 코드 복붙해봐도 그대로인거 보면 코드오류는 아닌거같은데 혹시 프로필페이지 에서 새로고침시 오류뜨는거 이거 왜그럴까요..??
해결됨
[리뉴얼] React로 NodeBird SNS 만들기
next.js에 swr, typescript를 이용해 노드버드 실습을 해보다가 서버사이드 렌더링에 대해 궁금한 게 생겼습니다. 사용자가 만약 로그인을 한 상태일 때, 서버사이드 렌더링을 해서 컴포넌트에 사용자 정보를 넣어준 상태로 페이지가 보여지도록 하고 싶은데요. 강의에서는 pages/index.js에서 리덕스를 이용하여 LOAD_MY_REQUEST 액션을 dispatch 한 뒤, components/AppLayout.js 에서 useSelector로 me 값을 가져 오면 사용자 정보가 담겨진 채로 AppLayout.js 컴포넌트가 랜더링 됩니다. swr을 적용해서 동일하게 구현해보려고 하는데요. swr에서는 page/index.js에서 서버사이드에서 로그인한 사용자 정보롤 가지고 오더라도, components/AppLayout.js에서 useSWR을 사용하면 처음 [로그아웃] 상태일 때의 화면이 잠깐 나오고, [로그인]상태일 때의 모습으로 변합니다. 혹시 swr을 이용해서 pages/index.js에서 서버사이드 렌더링으로 가지고 왔던 값을 components/AppLayout.js에도 페이지 렌더링 초기에 값을 함께 전달해주는 방법은 없을까요? 제가swr을 이용해 아래처럼 적용해봤는데, 다른 방법이 있을까요? pages/index.tsx export const getServerSideProps : GetServerSideProps = async function ({ req }) { const cookie : string = req ? req . headers . cookie : '' ; if ( cookie ) { const data = await fetcher . get ( '/user' , { cookie }); if ( data ) { return { props : { userProps : data }, }; } } return { props : { userProps : null }, }; }; function Index ({ userProps }: InferGetServerSidePropsType < typeof getServerSideProps >) { const { data : user } = useSWR < IUser >( '/user' , fetcher . get , { initialData : userProps }); return < AppLayout > { user ? user . nickname : '로그인해주세요' } </ AppLayout > ; } components/AppLayout.tsx function AppLayout () { const { data : user } = useSWR < IUser >( '/user' , fetcher . get ); return ( < div css = { userNavStyle } > { user ? ( <> < Profile image = { user . profile } size = '40px' /> </> ) : ( < Link href = '/login' > < a href = '' className = 'login' > 로그인 </ a > </ Link > ) } </ div > ); }
미해결
[리뉴얼] React로 NodeBird SNS 만들기
안녕하세요 제로초님 강의를 다 듣고 개인 프로젝트를 하고 있는 사람입니다. 궁금한게 하나 있는데 SSR 페이지로 간 후에 뒤로가기 하면 스크롤 위치가 초기화되던데 이거 막는방법이 있나요? SSR 페이지가 아니면 스크롤이 그 위치 그대로 있더라고요 항상 SSR 페이지 갔다가 뒤로가기 하면 스크롤이 최상단으로 초기화되서 그런데 혹시 막을 수 있는 방법 있을까요?ㅜ
미해결
[리뉴얼] React로 NodeBird SNS 만들기
안녕하세요 제로초님! 질문있습니다ㅠㅠ 프론트와 백서버 둘 다 https 적용 후, 로그인을 시도하면 저런 식으로 주소에 이메일과 비밀번호가 생기면서 로그인이 되지 않습니다. 무엇을 잘 못 한 건지 예상이 가지 않아서 어디서부터 확인해야 할지 몰라 글을 남깁니다ㅠㅠ 기를 이용해주세요.
해결됨
[리뉴얼] React로 NodeBird SNS 만들기
현영님 vue, react 프레임워크를 사용하지 않고 바닐라 자바스크립트로 Nodebird 를 만드는 강좌 같은 건 안나오나요!?
미해결
[리뉴얼] React로 NodeBird SNS 만들기
next-redux-wrapper가 7.0.0 버전으로 업데이트되면서 수정사항이 생겼습니다. 에러 Server Error TypeError: nextCallback is not a function 해결 방법(변경사항) version 6.0.2 > const getServerSideProps = wrapper.getServerSideProps(async (context) => { context.store.dispatch(~~~); context.store.dispatch(END); await store.sagaTask.toPromise(); }); version 7.0.0 > const getServerSideProps = wrapper.getServerSideProps( (store) => async ({ req, res, ...etc }) => { store.dispatch(~~~); store.dispatch(END); await store.sagaTask.toPromise(); } ); 추가적으로 동적라우팅 (강의 : 다이나믹 라우팅) 할 때도 (req, res, ...etc) > (req, res, params, ...etc) 로 수정하시면 됩니다. next-redux-wrapper 참고 자료(getServerSideProps) (https://github.com/kirill-konshin/next-redux-wrapper#getserversideprops) 변경사항 (https://github.com/kirill-konshin/next-redux-wrapper#upgrade-from-6x-to-7x)
미해결
[리뉴얼] React로 NodeBird SNS 만들기
개인 토이 프로젝트를 하나 하고 있는데요, 혹시 next.js에서 도메인 라우팅 하는 방법이 있나요? 문제가 뭐냐면 제가 만든 토이 프로젝트가 있는데 http://www.hubfoodlink.com 으로 접속해서 해당 정보를 클릭하면 리엑트 컴포넌트 모달창이 띄워지는데, http://hubfoodlink.com 으로 접속하면 접속은 되는데 정보 클릭 시 리엑트 컴포넌트 모달창이 안뜨고 An unexpected error has occurred. 라고 떠서 문제가 발생되네요 ㅠ 아니면 http://hubfoodlink.com 접속시 www을 붙여서 http://www.hubfoodlink.com접속이 되게 하는 방법이 있을까요? 물론 강의와 관련없는 질문이긴한데 몇일간 찾아보고 고민해봐도 해결되지 않아서 염치불구하고 질문을 올려봅니다. 죄송합니다 ㅠ
