게시글 삭제 직후 db에서는 바로 삭제가 되는데 브라우저에서 redux devtools로 state를 보면 mainPosts에 반영이 안되어있어요. 새로고침을 해야만 게시글이 사라져요. 어디에 문제가 있는건지 감이 안오네요

db는 생성했는데 영상에 나오는 것처럼 mySQL workbench에서 생성된 데이터베이스를 어떻게 띄우는지 모르겠어요 ㅜ

제로초님 궁금한게있어서 문의드립니다. styled-components 사용해서 react를 개발하려면  기존에 디자이너가 디자인을 해주고 그걸 마크업(퍼블리셔)가 html과 css파일로 주는 방식으로 업무를 진행하고있는데, styled-components를 이용하는 회사들은 마크업 업무를 프론트 개발자들이 다 하게 되는건가요? 실무에서는 업무롤이 어떻게되어서 진행되는지 궁금합니다.

저는 antd이게 이만한데 왜케크죠???ㅋㅋ.. 혹시 이거 정상인가여? 아님 제가뭐 잘못한건가요??

서버사이드 렌더링을 가능케하는 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은 있는거죠??

안녕하세요, 처음에 로그인하고 프로필로 들어가면 에러가 안나는데, 프로필페이지에서 새로고침을하면 이런 에러가뜹니다. 팔로워 팔로잉 없을때 오류인줄알고 한명씩 넣어봐도 똑같이 뜨네요,, 그래서 제로초님 코드 복붙해봐도 그대로인거 보면 코드오류는 아닌거같은데 혹시 프로필페이지 에서 새로고침시 오류뜨는거 이거 왜그럴까요..??

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> ); }

안녕하세요 제로초님 강의를 다 듣고 개인 프로젝트를 하고 있는 사람입니다. 궁금한게 하나 있는데 SSR 페이지로 간 후에 뒤로가기 하면 스크롤 위치가 초기화되던데 이거 막는방법이 있나요? SSR 페이지가 아니면 스크롤이 그 위치 그대로 있더라고요 항상 SSR 페이지 갔다가 뒤로가기 하면 스크롤이 최상단으로 초기화되서 그런데 혹시 막을 수 있는 방법 있을까요?ㅜ

안녕하세요 제로초님! 질문있습니다ㅠㅠ 프론트와 백서버 둘 다 https 적용 후, 로그인을 시도하면 저런 식으로 주소에 이메일과 비밀번호가 생기면서 로그인이 되지 않습니다. 무엇을 잘 못 한 건지 예상이 가지 않아서 어디서부터 확인해야 할지 몰라 글을 남깁니다ㅠㅠ 기를 이용해주세요.

현영님 vue, react 프레임워크를 사용하지 않고 바닐라 자바스크립트로 Nodebird 를 만드는 강좌 같은 건 안나오나요!?

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)

개인 토이 프로젝트를 하나 하고 있는데요,  혹시 next.js에서 도메인 라우팅 하는 방법이 있나요? 문제가 뭐냐면 제가 만든 토이 프로젝트가 있는데  http://www.hubfoodlink.com 으로 접속해서 해당 정보를 클릭하면 리엑트 컴포넌트 모달창이 띄워지는데,  http://hubfoodlink.com 으로 접속하면 접속은 되는데 정보 클릭 시 리엑트 컴포넌트 모달창이 안뜨고 An unexpected error has occurred. 라고 떠서 문제가 발생되네요 ㅠ  아니면 http://hubfoodlink.com 접속시 www을 붙여서 http://www.hubfoodlink.com접속이 되게 하는 방법이 있을까요? 물론 강의와 관련없는 질문이긴한데 몇일간 찾아보고 고민해봐도 해결되지 않아서 염치불구하고  질문을 올려봅니다.   죄송합니다 ㅠ

안녕하세요. 제로초님 _app.js의 props로 들어오는 두 가지 중에 하나는 영상에서 설명해주신 Component는 pages폴더 안에 있는 페이지를 가져오는거라면, 두번 째 props로 들어오는 pageProps에 대해서도 혹시 설명해주실 수 있을까요? 공식문서에서는 데이터를 가져오는 방법이라고 번역해서 봤는데 이 부분은 없어도 되는 건가요? 제로초님 깃허브에서 NodeBird Toolkit버전에서는 pageProps가 들어가있더라구요. 그래서 일단 따라해봤고, 내용 정리하려고 하는데 찾아봐도 정확한 역할을 모르겠네요...

안녕하세요. 노드버드 강의 보면서 제가 맡은 프로그램을 짜보고 있습니다. 다름이 아니라, mysql 디비에서 라우팅해서 관련 데이터가 포스트맨으로 넘어오는거까지 확인이 되었는데요, 프론트엔드 부분에서 statusView 페이지에서 관련 데이터 받아와서 뿌리는 테스트 코드를 작성해봤는데, 아무런 반응이 없습니다. 테스트 코드는 다음과 같습니다. 크롬창에서 localhost:3000/statusView 들어가보면 Hello Town1 List만 나오고 console.log(test) 이부분은 undefined로 나옵니다. getInitialProps가 동작을 했다면 console.log('aaaaaa')가 나왔어야 하는데 이건 출력이 안되더군요. 참고로, 백앤드 서버는 실행한 상태에서, 새로 폴더를 만들어서 react, react-dom, next  만 설치한 상태에서 pages 폴더를 만들고 statusView 페이지에 위에 코드를 넣어보니 이때는 또 데이터가 잘 넘어 옵니다. 어디서 부터 디버깅을 해야할지 막막해서 두서없지만 질문 올립니다. 

sagas/index.js의 axios default url을 localhost 나 혹은 api.nodebird-hyun.shop 으로 바꾸면 ssr 로그인 유지가 안되요 axios.defaults.baseURL = 'http://127.0.0.1:3065'; // ssr 로그인 유지 o // axios.defaults.baseURL = 'http://localhost:3065'; ssr 로그인 유지 x // axios.defaults.baseURL = 'http://api.nodebird-hyun.shop'; ssr 로그인 유지 x 로그인 시점에서 쿠키가 생성은 되는거 같은데 application 탭을 열어보면 없는데 이유가 무엇일까여? 알려주시면 감사여

안녕하세요 제로초님! 궁금한 부분이 있어 질문 드립니다. 회원가입할 때  개발자도구 network 탭에서 해당 요청의 request payload를 보면 회원가입할 때 입력했던 정보를 그대로 확인할 수 있는데요, 혹시 이거 노출시키지 않도록 설정할 수 있나요? 가령 비밀번호는 암호화 한다는가하는 방법으로요. 실제 실무에서는 이 부분이 보안상 문제가 될 거 같은데, 실무에서는 어떻게 처리하는지 궁금합니다. :) 감사합니다!

안녕하세요 front에서 내용을 수정하고 ec2에서 git pull하고 npm run build과정에서 자꾸 먹통이 나는데 무슨 문제일까요?? 제가 했던 순서는 제로초님 말대로 그냥 로컬 : git commit -am " ~comit msg"              git push origin master에서 git에 등록한 후 ubuntu 접속: sudo git pull                            sudo npm run build 아래의 캡처본과 같이 여기서 자꾸 동작이 멈추게 되네요... pm2 kill하고도 해봤고 pm2를 그대로 실행시킨 상태에서도 해도 똑같네요... 어딜 고쳐야하는 걸까요? (로컬에서 npm run build하면 제대로 작동하고 위의 경우에도 인스턴스 중지 후 다시 재시작해서 build하면 제대로 작동해요)

안녕하세요,  redux devtools 로 확인해보면 요청이 두번씩가는데  도데체 이유를 모르겠습니다..ㅠㅠ 코드도 동일하고  throttle 5000도 동일하게 적용했는데 왜그럴까요.. throttle을 설정했는데 요청이 두번갈수가 있나요?

안녕하세요. 쿠키 관련 질문이 있습니다. front에서 axios로 보낼 때 withcredentials: true 를 해주고 backend에서도 cors에서 credentials : true를 해주었기 때문에 로컬에서 프론트와 백엔드를 같이 돌릴 경우에는 쿠키 공유 문제가 없습니다. 그런데 백엔드를 aws EC2에 두고 프론트 엔드를 로컬에서 돌릴 경우 쿠키가 공유되지 않습니다.  원인은 samesite 정책 때문이고 해결하려면 backend에서 쿠키를 보낼 때 samesite=none과 secure:true를 같이 적용해줘야 한다는 걸 알았습니다.  이를 해결하려면 결국 https 적용을 위해 nginx로 프록시를 만들어 줘야 하는데 다른 방법이 있을까요? 간단한 방법은 로컬에서 계속 테스트 하다가 배포관련 수업에서 하는 것 처럼 도메인을 같이 등록하면 되긴 하지만 이런 경우에도 해결하는 방법이 있는지 궁금합니다.

안녕하세요, 제로초님 강의 잘 보고 있습니다. 예전에 유튜브에 리덕스 툴킷영상이 올라갔던걸로 기억하고, 봐야지... 하고 있었는데 없어졌네요?? 영상에 문제가 있어서 내리셨나요??