월 17,600원
5개월 할부 시다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
Next.js 스크롤 관련 질문 드립니다.
Next로 블로그를 만드는 프로젝트를 진행하고 있습니다. 이게 메인 페이지인데, 다른 페이지를 갔다가 다시 메인페이지로 돌아오면 스크롤이 유지가 안되고 가장 맨 위로 이동하는 문제가 발생합니다. redux + redux-saga로 메인페이지에 다음과 같이 작성했는데 문제되는 부분이 있나요?
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
Next.js 11버전 + next-redux-wrapper: ^7.0.2 버전 을 적용했을때 console.log / warning 질문
안녕하세요 현영님 질문드립니다.!Next.js 11버전과 next-redux-wrapper: ^7.0.2버전을 적용했을때 이러한 console 워닝이 발생했는데 검색했을때 원하는 해답을 찾지 못해서 질문드립니다.SSR은 제로초님께서 wapper 7 버전 업로드시 코드작성하라는 부분 그대로 작성했습니다. export const getServerSideProps = wrapper.getServerSideProps((store) => async ({ req }) => { const cookie = req ? req.headers.cookie : ''; axios.defaults.headers.Cookie = ''; if (req && cookie) { axios.defaults.headers.Cookie = cookie; } store.dispatch({ type: LOAD_MY_INFO_REQUEST, }); store.dispatch({ type: LOAD_POSTS_REQUEST, }); store.dispatch(END); await store.sagaTask.toPromise(); });
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
next.config.js가 잘 작동되지 않는 것 같습니다.
locale의 용량을 줄이기 위해 const withBundleAnalyzer = require('@next/bundle-analyzer')({ enabled: process.env.ANALYZE === 'true',});module.exports = withBundleAnalyzer({ compress: true, webpack(config, { webpack }) { const prod = process.env.NODE_ENV === 'production'; return { ...config, mode: prod ? 'production' : 'development', devtool: prod ? 'hidden-source-map' : 'eval', plugins: [ ...config.plugins, new webpack.ContextReplacementPlugin(/moment[/\\]locale$/, /^\.\/ko$/), ], }; },}); 를 root/front/ 에 next.config.js 라는 이름으로 작성했습니다. (깃허브 https://github.com/ZeroCho/react-nodebird/blob/master/ch7/front/next.config.js 에서 가져온 소스 입니다) 하지만 아래 스크린샷과 같이 locale의 모든 언어팩이 가져와지고 있습니다. 제가 무엇을 놓치고 있는 것일까요..? ㅠㅠ
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
emotion SSR 적용 질문있습니다!
안녕하세요 현영님! styled-components 대신에 emotion 사용해서 실습하고 있는데, emotion 공식문서에서 10버전 이상부터는 next에서 SSR 적용이 된다고 나와있는데요. (현재 11버전 사용중입니다.) 그렇다면, pages/_document.js의 코드에서 import React from "react"; import Document, { Html, Head, Main, NextScript } from "next/document"; // import {ServerStyleSheet} from "styled-components" export default class MyDocument extends Document { static async getInitialProps(ctx) { // const sheet = new ServerStyleSheet(); const originalRenderPage = ctx.renderPage; try { // ctx.renderPage = () => // originalRenderPage({ // enhanceApp: App => props => sheet.collectStyles(<App {...props} />) // }); const initialProps = await Document.getInitialProps(ctx); return { ...initialProps, styles: ( <> {initialProps.styles} {/* {sheet.getStyleElement()} */} </> ) }; } catch (err) { console.error(err); } finally { // sheet.seal(); } } render() { return ( <Html> <Head /> <body> <script src="https://polyfill.io/v3/polyfill.min.js?features=default%2Ces2015%2Ces2016%2Ces2017%2Ces2018%2Ces2019" /> <Main /> <NextScript /> </body> </Html> ); } } styled-components 관련 부분만 제외하고 입력하면 될까요?
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
TypeError: Cannot read property 'getState' of undefined 에러 질문
웹게임 강좌에서 배운 내용과 이번 강의를 들으면서 배운 내용을 토대로 반응속도를 체크하는 웹사이트를 개인 프로젝트겸 제작해보고 있었습니다. 그런데 아래와 같은 오류가 계속해서 발생합니다. 구글링을 해보니 보통 pages/_app.js에서 오타가 나면 발생한다는데... 잘 모르겠습니다. 아래는 제 _app.js입니다. import React from 'react'; import PropTypes from 'prop-types'; import 'antd/dist/antd.css'; import Head from 'next/head'; import Helmet from 'react-helmet'; import wrapper from '../store/configureStore'; const App = ({ Component }) => { return ( <> <Helmet> <link rel="preconnect" href="https://fonts.googleapis.com" /> <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin /> <link href="https://fonts.googleapis.com/css2?family=Jua&display=swap" rel="stylesheet" /> </Helmet> <Head> <meta charSet="utf-8"/> <title>반응속도체크</title> </Head> <Component /> </> ); }; App.propTypes = { Component: PropTypes.elementType.isRequired, } export default wrapper.withRedux(App); 만약 위 코드에서 wrapper.withRedux(App)이 아니라 export default App; 으로 써줄 경우에는 위 사진과 같은 에러가 발생합니다 store/configureStore.js는 ReactBird 코드를 그대로 갖다써서 오타는 없는 것 같습니다.
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
13분 정도부터 설명하시는 내용중에 takeLatest("LOG_IN_REQUEST", logIn) 이부분이요
삭제된 글입니다
- 해결됨[리뉴얼] React로 NodeBird SNS 만들기
github에 있는 ch5 코드를 실행시키니까 the server responded with a status of 500 에러가 뜹니다
안녕하세요 제로초님. 현제 제로초님 코드를 따라서 공부를 하다가 기존에 따라서 하던거는 실수가 너무 많아서 github에 있는 ch5코드부터 다시 시작하려고 받아서 실행시키는데요 자꾸 에러가 뜹니다. backend에 있는 config 설정에서 db 비밀번호는 제가 String으로 직접 입력했고요, 그리고 backend에서 npx sequelize db:create도 실행했습니다. // const dotenv = require('dotenv'); // dotenv.config(); 위에처럼 dotenv는 주석처리 했습니다. config 설정 외에는 바꾼게 없는데, 제가 뭐 빠뜨린게 있을까요?
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
hydrate
20강 21강 듣고 있는데요. 제가 강의를 보면서 타입스크립트로 만들면서 보고 있어요. 그러면서 제로초님이 ts-nodebird하신게 있어서 깃헙에서 코드도 참고하고 있는데 ts-nodebird에서는 리듀서를 살펴보면 hydrate 가 없어서요. ts에서는 필요가 없는 부분인가요??
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
제로초님 저도 Unknown column 'Users.content' in 'field list' 에러 문의 드려요
저도 로그인시에 success가 되지 않고 Unknown column 'Users.content' in 'field list'와 같은 에러가 뜨는데 다른분이 질문 남기신거 보니까 models/user.js 에 content 없나요? 라고 말씀해주신 부분이 있는데 해당 파일에 content가 들어가는 부분이 있나요? ㅠ 제로초님 깃허브 들어가서 소스코드를 봐도 content 부분은 없는데... 그리고 디이 테이블 다 삭제하고 다시 테이블 생성 후 서버 실행 해도 같은 오류가 나옵니다. 어느 부분을 보면 좋을지 알려주세요..!
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
_app.js 파일을 작성하고 실행시켰는데 App 이 정의되지 않았다고 에러가 뜹니다
ReferenceError: App is not defined 라고 에러가 뜨는데 이유는 무엇일까요...?
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
로그인 시도중 에러 발생
import produce from '../util/produce'; export const initialState = { followLoading: false, // 팔로우 시도중 followDone: false, followError: null, unfollowLoading: false, // 언팔로우 시도중 unfollowDone: false, unfollowError: null, logInLoading: false, // 로그인 시도중 logInDone: false, logInError: null, logOutLoading: false, // 로그아웃 시도중 logOutDone: false, logOutError: null, signUpLoading: false, // 회원가입 시도중 signUpDone: false, signUpError: null, changeNicknameLoading: false, // 닉네임 변경 시도중 changeNicknameDone: false, changeNicknameError: null, me: null, signUpData: {}, loginData: {}, }; export const LOG_IN_REQUEST = 'LOG_IN_REQUEST'; export const LOG_IN_SUCCESS = 'LOG_IN_SUCCESS'; export const LOG_IN_FAILURE = 'LOG_IN_FAILURE'; export const LOG_OUT_REQUEST = 'LOG_OUT_REQUEST'; export const LOG_OUT_SUCCESS = 'LOG_OUT_SUCCESS'; export const LOG_OUT_FAILURE = 'LOG_OUT_FAILURE'; export const SIGN_UP_REQUEST = 'SIGN_UP_REQUEST'; export const SIGN_UP_SUCCESS = 'SIGN_UP_SUCCESS'; export const SIGN_UP_FAILURE = 'SIGN_UP_FAILURE'; export const CHANGE_NICKNAME_REQUEST = 'CHANGE_NICKNAME_REQUEST'; export const CHANGE_NICKNAME_SUCCESS = 'CHANGE_NICKNAME_SUCCESS'; export const CHANGE_NICKNAME_FAILURE = 'CHANGE_NICKNAME_FAILURE'; export const FOLLOW_REQUEST = 'FOLLOW_REQUEST'; export const FOLLOW_SUCCESS = 'FOLLOW_SUCCESS'; export const FOLLOW_FAILURE = 'FOLLOW_FAILURE'; export const UNFOLLOW_REQUEST = 'UNFOLLOW_REQUEST'; export const UNFOLLOW_SUCCESS = 'UNFOLLOW_SUCCESS'; export const UNFOLLOW_FAILURE = 'UNFOLLOW_FAILURE'; export const ADD_POST_TO_ME = 'ADD_POST_TO_ME'; export const REMOVE_POST_OF_ME = 'REMOVE_POST_OF_ME'; // const dummyUser = (data) => ({ // ...data, // nickname: 'xodnd2378', // id: 1, // Posts: [{ id: 1 }], // Followings: [{ nickname: '강태웅' }, { nickname: 'ktw2378' }, { nickname: 'xodndxnxn' }], // Followers: [{ nickname: '강태웅' }, { nickname: 'ktw2378' }, { nickname: 'xodndxnxn' }], // }); export const loginRequestAction = (data) => ({ type: LOG_IN_REQUEST, data, }); export const logoutRequestAction = () => ({ type: LOG_OUT_REQUEST, }); const reducer = (state = initialState, action) => produce(state, (draft) => { switch (action.type) { case FOLLOW_REQUEST: draft.followLoading = true; draft.followError = null; draft.followDone = false; break; case FOLLOW_SUCCESS: draft.followLoading = false; draft.me.Followings.push({ id: action.data }); draft.followDone = true; break; case FOLLOW_FAILURE: draft.followLoading = false; draft.followError = action.error; break; case UNFOLLOW_REQUEST: draft.unfollowLoading = true; draft.unfollowError = null; draft.unfollowDone = false; break; case UNFOLLOW_SUCCESS: draft.unfollowLoading = false; draft.me.Followings = draft.me.Followings.filter((v) => v.id !== action.data); draft.unfollowDone = true; break; case UNFOLLOW_FAILURE: draft.unfollowLoading = false; draft.unfollowError = action.error; break; case LOG_IN_REQUEST: draft.logInLoading = true; draft.logInError = null; draft.logInDone = false; break; case LOG_IN_SUCCESS: draft.logInLoading = false; draft.me = action.data; draft.logInDone = true; break; case LOG_IN_FAILURE: draft.logInLoading = false; draft.logInError = action.error; break; case LOG_OUT_REQUEST: draft.logOutLoading = true; draft.logOutError = null; draft.logOutDone = false; break; case LOG_OUT_SUCCESS: draft.logOutLoading = false; draft.logOutDone = true; draft.me = null; break; case LOG_OUT_FAILURE: draft.logOutLoading = false; draft.logOutError = action.error; break; case SIGN_UP_REQUEST: draft.signUpLoading = true; draft.signUpError = null; draft.signUpDone = false; break; case SIGN_UP_SUCCESS: draft.signUpLoading = false; draft.signUpDone = true; break; case SIGN_UP_FAILURE: draft.signUpLoading = false; draft.signUpError = action.error; break; case CHANGE_NICKNAME_REQUEST: draft.changeNicknameLoading = true; draft.changeNicknameError = null; draft.changeNicknameDone = false; break; case CHANGE_NICKNAME_SUCCESS: draft.me.nickname = action.data.nickname; draft.changeNicknameLoading = false; draft.changeNicknameDone = true; break; case CHANGE_NICKNAME_FAILURE: draft.changeNicknameLoading = false; draft.changeNicknameError = action.error; break; case ADD_POST_TO_ME: draft.me.Posts.unshift({ id: action.data }); break; // return { // ...state, // me: { // ...state.me, // Posts: [{ id: action.data }, ...state.me.Posts], // }, // }; case REMOVE_POST_OF_ME: draft.me.Posts = draft.me.Posts.filter((v) => v.id !== action.data); break; // return { // ...state, // me: { // ...state.me, // Posts: state.me.Posts.filter((v) => v.id !== action.data), // }, // }; default: break; } }); export default reducer; 로그인을 시도할 경우, length나 find가 undefined 라고 나옵니다. 더미데이터를 사용하다가 reducers/user.js의 LOG_IN_SUCCESS를 더미데이터를 사용하지 않고action.data를 받아서 사용한 이후로 해당 오류가 계속해서 발생합니다. me.Posts나 me.Followings 등이 null이기 때문에 나오는 오류인 것 같은데 혹시 해결방법이 있을까요?
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
로그인 후 session cookie가 전달되지 않는 것 같습니다.
안녕하세요 제로초님, 강의를 듣고 응용하여 저만의 서비스를 만드는 중입니다. 현재 간단하게 EC2에 올려서 테스트를 하는 중입니다. 서버는 80번 포트로 클라이언트는 3000번 포트로 구동되고 있습니다. 프론트 사가 쪽에서 withCredentials true로 설정해둔 상태입니다. 로그인 시 잘 되고 유저 정보도 받아 오는데 그 이후에 로그인이 유지되어야 진행되는 요청에서 계속 401에러가 발생합니다. session 내부에 cookie : { httpOnly: true, sameSite: 'none', secure: true } 넣고 테스트 해보았었는데 그때도 위처럼 동작하며 제대로 수행되지 않았습니다. 전부 로컬에서 실행시켰을 때는 잘 돌아갔는데 EC2에 올리고 나니 문제가 발생해서;; 조금 당황스럽습니다. 혹시 짐작가는 부분이 있다면 알려주시겠습니까?
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
map 내에서 고차함수 질문드립니다.
onRemoveImage를 고차함수로 생성하는 이유가, 원래 1번과 같았던 함수를 2번처럼 바꿨기 때문인가요?? 1. <Button onClick={()=>onRemoveImage(i)}>제거</Button> 2. <Button onClick={onRemoveImage(i)}>제거</Button>
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
도메인 사지 않고 ip로 cookie 연결방법
안녕하세요, 배포단계에서 도메인 사지 않고 IP 주소로 cookie 허용 해보려고 하는데, session 안 cookie의 domain에 ip 주소를 넣어봐도 cookie가 공유되지 않습니다. 혹시 어떻게 backend와 frontend 서버를 연결 할 수 있을까요?
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
multer 용량제한
안녕하세요. multer limits 에서 설정된 값보다 더 큰 이미지를 올리면 에러가 나야하는 거 맞나요? 제가 사용자에게 지정된 크기 이상의 이미지를 올리면 경고를 보내주려고 하는데 limit 1MB 설정하고 1.3MB 짜리 이미지를 올렸는데 왜 network 탭에는 아래 사진과 같이 사이즈가 자동으로 변환(465B) 돼서 올라가는지 모르겠습니다. 참고로 람다 적용안했습니다. routes/profile.js const upload = multer({ storage: multerS3({ s3: new AWS.S3(), bucket: 'react-profiler2-s3', key(req, file, cb) { cb(null, `original/${Date.now()}_${path.basename(file.originalname)}`); }, }), limit: { fileSize: 1 * 1024 * 1024 },});... router.post('/image', isLoggedIn, upload.single('image'), async (req, res, next) => { console.log('req.file🔥🔥🔥🔥🔥🔥🔥🔥🔥', req.file); console.log('req.file.location🔥🔥🔥🔥🔥🔥🔥🔥🔥', req.file.location); try { if (!req.file) { return res.json('defaultProfile.jpeg'); } res.json(req.file.location); } catch (error) { console.error(error); res.json('이미지 최대 용량은 ~MB 입니다.'); }});
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
wildcard 인증서
안녕하세요. 현재 프론트 https://도메인 백엔드 http://api.도메인 두 개를 인증받았는데 http://www.도메인 까지만 추가로 인증을 받고 싶은데요. 와일드 카드 방식이 어려워 보여서 그런데 프론트에서 기존에 했던 방식대로 한번 더 등록해도 상관없을까요?
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
실무에서 styled-components 업무
제로초님 궁금한게있어서 문의드립니다. styled-components 사용해서 react를 개발하려면 기존에 디자이너가 디자인을 해주고 그걸 마크업(퍼블리셔)가 html과 css파일로 주는 방식으로 업무를 진행하고있는데, styled-components를 이용하는 회사들은 마크업 업무를 프론트 개발자들이 다 하게 되는건가요? 실무에서는 업무롤이 어떻게되어서 진행되는지 궁금합니다.
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
TypeError: Cannot read property 'suppressHydrationWarning' of null
안녕하세요. 현재 강의까지 진행했는데 이런 증상이 나타나요. 이유가 뭔지 못찾겠어요 ㅠ
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
next.config.js 설정 문제
next.config.js 파일입니다. .svg 등의 이미지 파일의 확장자가 필요하여 아래와 같이 설정하였습니다. 참조 사이트: https://tomboy90.medium.com/next-js-url-loader-%EC%82%AC%EC%9A%A9-e2acf4898b7b const withAssetsImport = require('next-assets-import'); module.exports = withAssetsImport({ urlLoaderOptions: { rules: [ { test: /\.(png|jpg|gif|mp4)$/i, use: [ { loader: 'url-loader', options: { limit: 8192, }, }, ], }, ], }, }); 여기에서 const withBundleAnalyzer = require('@next/bundle-analyzer')({ enabled: process.env.ANALYZE === 'true', }); module.exports = withBundleAnalyzer({ distDir: '.next', webpack(config, { webpack }) { const prod = process.env.NODE_ENV === 'production'; const plugins = [ ...config.plugins, new webpack.ContextReplacementPlugin(/moment[/\\]locale$/, /^\.\/ko$/), ]; return { ...config, mode: prod ? 'production' : 'development', devtool: prod ? 'hidden-source-map' : 'eval', plugins, }; }, }); 강의에서 알려주신 이것도 같이 적용하고싶은데, 여러 방법을 시도해봤으나 둘중에 하나만 적용이 되고있는 상태입니다. 어떤식으로 접근을 하면 좋을까요?
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
useEffect에서 componentDidUpdate기능만 사용하는 법
안녕하세요 제로초님. 프론트 수정 중에 막히는 부분이 생겨 질문 드립니다. 회원가입 할 때 비밀번호 input이 변경 될 때마다 유효성 검사를 하려하는데 , 아래처럼 작성하면 렌더링 하자마자 setCheckMsg('일치합니다')가 실행되어서 초기값을 넣지 못하더라구요. state가 변경될 때만 useEffect가 작동하게 할 수 있나요?