월 17,600원
5개월 할부 시다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 해결됨[리뉴얼] React로 NodeBird SNS 만들기
Unhandled Runtime Error 로그인이 왜 안될까요?
import React, { useCallback, useState } from 'react'; import { Form, Input, Button } from 'antd'; import Link from 'next/link'; import styled from 'styled-components'; const ButtonWrapper = styled.div` margin-top: 10px; `; // const ButtonStyle = styled(Button)` // color: red; // background-color: green; // `; const FormWrapper = styled(Form)` padding: 10px; `; const LoginForm = ({ setIsLoggedIn }) => { const [id, setId] = useState(''); const [password, setPassword] = useState(''); const onchangeId = useCallback((e) => { setId(e.target.value); }, []); const onchangePassword = useCallback((e) => { setPassword(e.target.value); }, []); // const style = useMemo(() => ({ marginTop: 10 }), []); // 스타일컴포넌트 쓰기 싫을떄 const onSubmitForm = useCallback(() => { console.log(id, password); console.log(setIsLoggedIn); setIsLoggedIn(true); }, [id, password]); return ( <FormWrapper onFinish={onSubmitForm}> <div> <label htmlFor="user-id">아이디</label> <br /> <Input name="user-id" value={id} onChange={onchangeId} required /> </div> <div> <label htmlFor="user-password">비밀번호</label> <br /> <Input name="user-password" type="password" value={password} onChange={onchangePassword} required /> </div> <ButtonWrapper> {/* style={style} */} <Button type="primary" htmlType="submit" loading={false}> 로그인 </Button> <Link href="/signup"> <a> <Button>회원가입</Button> </a> </Link> </ButtonWrapper> </FormWrapper> ); }; export default LoginForm;
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
NEXT 11버전 한번 체크해 보신다고 하셨는데 혹시 그대로 사용해도 문제 없을까요???
답변해주시면 감사하겠습니다!!
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
node -v v10.7.0도 가능할까요
npm version 은 6.1.0 으로 같은 6번전같은데 제가 지금 node version 이 10.7.0 인데 이 버전으로 따라해도 문제없을까요?
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
로그인 쿠키
안녕하세요. 로컬에서 작업 후 https 적용한 ec2 로 에서 테스트 중인데요. 쿠키가 생성된 것은 맞는 거 같은데 application 탭에는 쿠키가 없네요ㅠㅠ 그래서 소셜 로그인을 한 후에도 쿠키 공유가 되지 않고 있는 것 같습니다.. deserialize 가 실행이 안되는데 쿠키가 전달이 안되어서 그런 거겠죠? 오늘 오전부터 이것때문에 헤매는데 어느 부분이 문제인지 잘 찾아지지가 않네요 back/app.js if (process.env.NODE_ENV === 'production') { app.enable('trust proxy'); app.use(morgan('combined')); app.use(hpp()); app.use(helmet({ contentSecurityPolicy: false })); app.use( cors({ origin: frontUrl, credentials: true, }), );} else { app.use(morgan('dev')); app.use( cors({ origin: true, credentials: true, }), );}... app.use('/', express.static(path.join(__dirname, 'uploads')));app.use(express.json()); app.use(express.urlencoded({ extended: true })); app.use(cookieParser(process.env.COOKIE_SECRET));app.use( session({ saveUninitialized: false, resave: false, secret: process.env.COOKIE_SECRET, cookie: { httpOnly: true, secure: true, domain: process.env.NODE_ENV === 'production' && '.filer.pro', }, }),);
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
import 시에 index.js 생략..??
제로초님 강의듣다가 질문 드립니다. store 파일에 reducer파일 import하실 때, import reducer from "../reducers"; 이렇게 코딩하면 import reducer from "../reducers/index.js" 요렇게 되는 건가요?? 저는 지금까지 후자처럼 코딩해서 뒤에 index.js가 생략가능한건지 궁금합니다. 만약, index.js가 아닌 hello.js 이면 생략하면 안되는 건가요???
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
retrun {type:"블라블라", data}
제로초님 강의듣다가 궁금해서 질문 올립니다. action creator 코딩하실 때, return문에 { type: "CHANGE_NICKNAME", data } 이렇게 하시는 이유가 있으신가요? { type: "CHANGE_NICKNAME", data: data } 이게 맞는 문법 아닌가용??
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
throttle
throttle이 밀리초동안에 계속해서 요청을 보내도 하나의 요청만 서버로 보내준다로 이해했는데 맞나요??
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
getFollower의 데이터
getFollowers,getFollowings 의 데이터를 이용해서 친구추천 기능을 만들어 보려고 합니다. getFollowers의 데이터 내의 id를 서버에서 접근할 수 있도록 코딩을 작성하려는데 followers.id 이런 식으로는 접근이 불가능한 것 같습니다. 혹시 접근법이 있을까요?
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
개인 프로젝트와 관련해 질문 드립니다!
로초 선생님! 웹 게임 강의랑 노드, 노드버드 강의를 다 듣고 나서 간단하게 반응속도를 체크해서 순위를 매겨주는 반응속도 체크 웹사이트를 제작하고 있었습니다. 그런데 모바일에서 푸터와 관련한 문제가 발생했는데 아무리 구글링을 해도 명확하게 해결되지 않아 강의와 직접적인 관련은 없지만 실례를 무릅쓰고 이렇게 질문 드립니다..! 웹에서는 푸터를 비롯해 모든게 정상적으로 출력됩니다. 그런데 모바일에서 작동을 하면 이런 식으로 푸터와 컨텐츠가 겹치는 문제가 발생합니다. 문제점은 2가지로 보입니다. 1. 컨텐츠가 푸터를 밀어내지 못한다. 2. 모바일 홈버튼과 인터넷 버튼까지 height로 취급해서 푸터가 위로 올라간다. 그런데 이게 html/css이면 조금만 손대면 해결 가능할 듯한데 아무래도 React와 styled-components를 이용하다보니 정말 헷갈리네요 ㅠㅠ http://3.36.55.148/ 사이트 주소는 위와 같고, footer는 아래와 같습니다. export const Footer = styled.div` width: 100%; height: 50px; background: black; position: absolute; bottom: 0; `; Applayout을 손보면 될 것 같은데 쉽사리 해결이 안되네요. AppLayout은 아래와 같습니다. import React from 'react'; import PropTypes from 'prop-types'; import { faHandPointUp } from "@fortawesome/free-solid-svg-icons"; import { faGithub, faInstagram, faFacebook } from '@fortawesome/free-brands-svg-icons'; import Link from 'next/link'; import { Header, Wrapper, Center, Style, A, Footer, Github, Instagram, Facebook, Ul, Li } from './styles'; const AppLayout = ({ children }) => ( <div> <div> <Header> <Wrapper icon={faHandPointUp} /> <Center> <Link href="/"><A>반응속도 테스트</A></Link> <Style> By Taewoong </Style> </Center> </Header> <div> <div style={{ position: 'relative' }}>{children}</div> <Footer> <Ul> <Li> <a href="https://github.com/Taewoong1378" target="_blank" rel="noreferrer noopener"> <Github icon={faGithub} /> </a> </Li> <Li> <a href="https://www.instagram.com/tae_coding/" target="_blank" rel="noreferrer noopener"> <Instagram icon={faInstagram} /> </a> </Li> <Li> <a href="https://www.facebook.com/profile.php?id=100008233455158" target="_blank" rel="noreferrer noopener"> <Facebook icon={faFacebook} /> </a> </Li> </Ul> </Footer> </div> </div> </div> ); AppLayout.propTypes = { children: PropTypes.node.isRequired, }; export default AppLayout; https://github.com/Taewoong1378/ResponseCheck_Site_ErrorFix 명확한 해결방법이 아니더라도 추상적으로라도 알려주시면 직접 해결보도록 하겠습니다 :) 올해 처음 코딩에 입문한 뒤, 약 2~3달 전부터 제로초 선생님 강의를 듣기 시작했는데 앞선 5~6개월보다 제로초 선생님 강의를 들은 2~3달이 실력 성장에 훨씬 더 많은 도움이 된 것 같습니다. 코딩하는게 점점 재밌어지는 것 같습니다ㅎㅎ IT 산업기능요원을 준비하고 있고, 조만간 몇몇 회사들에 지원할 듯한데 좋은 결과 있으면 자랑하러 오겠습니다! 항상 좋은 강의 제공해주셔서 감사합니다 ㅎㅎ
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
다른페이지에 갔다가 메인 페이지로 돌아왔을때 로딩이 여러번되는 문제 질문입니다..!
안녕하세요 제로초님... 저도 Minsub Yoon 님과 같은 질문입니다.. 다른 페이지 (프로필 페이지 등)에 들어갔다가 다시 메인화면으로 돌아왔을때 같은 포스트가 중복돼서 나오는 문제입니다.. 제로초님이 LOAD_POSTS_REQUEST에서 lastId가 없는 경우에는 mainPosts를 []로 초기화해주면 됩니다. 라고 답변해주셨던데 reducer에서 LOAD_POSTS_REQUEST 일때 구현해주면 되는 코드인가요..?ㅠㅠ 제가 한시간 넘게 코드를 짜봤는데도 어떻게 구현하면 좋을지 코드가 생각이 안납니다... lastId는 ADD_COMMENT_SUCCESS 에서 PostId 처럼 가져오면 되는걸까요...? 더 힌트를 주시면 감사할거같습니다...
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
안녕하세요 제로초님...게시글 lastId로 불러올때 질문입니다(무한스크롤)
제가 제로초님 강의를 듣고 따로 프로젝트를 만들고 있는데 무한 스크롤 목록을 보여줄때 where에 조건이 하나 더 붙어야 한다면 어떻게 해주어야하나요?? 제가 만드는 프로젝트는 사용자가 쓴 게시글만 목록에 뿌려주는 형식으라, where에 조건이 하나 더 들어가는데요... 초기 로딩될때는 잘 나오지만 게시글이 무한스크롤 되게끔 스크롤링하면 밑에 게시글이 나오지 않아서 질문드립니다... router.get('/', async (req, res, next) => { // GET /categories try { const where = {}; if (parseInt(req.query.lastId, 10)) { // 초기 로딩이 아닐 때 where.id = { [Op.lt]: parseInt(req.query.lastId, 10) }; console.log(where); } console.log('라스트 아이디?', parseInt(req.query.lastId, 10)); const categories = await PostCategory.findAll({ where: { MemberId: req.query.memberId }, limit: 9, order: [ ['createdAt', 'DESC'], // 게시글 내림차순 ], include: [ { model: Member, }, { model: Attachment, }, ], }); // 모든 게시물 가져온다 // console.log(categories); res.status(200).json(categories); } catch (error) { console.error(error); next(error); } }); 제가 작성한 코드입니다. 내가 쓴 게시글만 불러오고 싶어서 memberId를 쿼리값으로 불러왔습니다.. GET /categories?lastId=0&memberId=1 200 처음 렌더링할땐 이렇게 라스트 아이디 값과 멤버 아이디 값을 잘 불러오는데, 스크롤을 내리면 GET /categories?lastId=7&memberId=undefined 200 6.896 ms - 2 이렇게 멤버 아이디 값이 undefined가 나오는 것 같습니다ㅠㅠ if (parseInt(req.query.lastId, 10)) { // 초기 로딩이 아닐 때 // lastid 가 parseInt(req.query.lastId, 10)보다 작은... where.id = { [Op.lt]: parseInt(req.query.lastId, 10) }; console.log(where); } 여기에서 where.id 에 멤버 아이디를 안넣어줘서 그런건가 싶어 멤버 아이디를 넣어줬는데 그래도 500 에러가 뜨네요ㅠㅠ 혹시 여기 where.id 값에 memberid 값을 넣는 방법이 무엇일까요...? 시퀄라이즈 다중 where 처리..이런식으로 구글링해도 확실한 답을 못찾겠어서 질문드립니다ㅠㅠ
- 해결됨[리뉴얼] React로 NodeBird SNS 만들기
mySQL workbench
db는 생성했는데 영상에 나오는 것처럼 mySQL workbench에서 생성된 데이터베이스를 어떻게 띄우는지 모르겠어요 ㅜ
- 해결됨[리뉴얼] React로 NodeBird SNS 만들기
안녕하세요 제로초님 프론트쪽 우분투에 배포할때 문제 질문드립니다.
안녕하세요 제로초님 먼저 백쪽은 작업이 다 잘됐고 프론트쪽에서 AWS에 프론트 IP주소 로 들어갔을때 아무런 화면이 나오지않고 에러가 발생하는 상황입니다. 혹시 이런상황에서는 어떻게해야할까요? <인스턴스 화면입니다.> -> back의 퍼블릭 IP주소로들어가면 hello express가 잘나옵니다. <Front 우분투에서 npx pm2 start npm -- start 를 입력한 터미널> + scripts < 최종 문제 화면입니다. > front 인스턴스에 퍼블릭 IP주소로 들어갔을때 화면입니다. 빌드 성공후 우분투에서 npx pm2 start npm -- start를 입력한 상황입니다 (강의에 나오는대로 백에서 cors도 http://13.124.217.22) 설정했습니다
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
저희 서비스 로그인과 passport 로그인의 차이가 무엇이죠?
passport 모듈을 통해 저희 서비스 로그인을 하는 거 아닌가요?
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
Warning 뜨는거 관련하여 질문드립니다.
AppLayout 컴포넌트에서 LoginForm 와 UserProfile 에props로 setState 함수를 전달하면서 로그인 시 warning이 발생합니다. state 초기값을 boolen 형이 아닌 number 형으로 0 혹은 1로 검사시에도 이런 현상이 발생합니다. 왜그런건가요... ?
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
LOAD_POSTS_FAILURE 발생
안녕하세요! 다름이 아니라 강의를 들으며 코드를 작성하는데 게시글들을 로드하는데 있어서 계속해서 LOAD_POSTS_FAILURE가 되면서 500 상태코드의 서버에러가 발생합니다. 에러메세지를 보면 Post.findAll이 정의되지 않는다고하는데, Post가 비어있어서 finAll이 작동하지 않는 것 같습니다. 하지만 db 상으로 보면 posts 테이블이 잘 채워져있는데 왜 에러가 발생하는지 모르겠습니다ㅠㅠ 관련 코드 올려놓겠습니다. routes/posts.js const express = require('express'); const { Post, Image, User, Comment } = require('../models'); const router = express.Router(); router.get('/', async (req, res, next) => { // GET /posts try{ const posts = await Post.findAll({ limit: 10, order: [ ['createdAt', 'DESC'], [Comment, 'createdAt', 'DESC'] ], include: [{ model: User, attributes: ['id', 'nickname'], }, { model: Image, }, { model: Comment, include: [{ model: User, attributes: ['id', 'nickname'], }], }, { mode: User, as: 'Likers', attributes: ['id'], }], }); console.log(posts); res.status(200).json(posts); } catch (error) { console.error(error); next(error); } }); module.exports = router; reducers/post.js import produce from '../util/produce'; export const initialState = { mainPosts: [], imagePaths: [], hasMorePosts: true, likePostLoading: false, likePostDone: false, likePostError: null, unlikePostLoading: false, unlikePostDone: false, unlikePostError: null, loadPostsLoading: false, loadPostsDone: false, loadPostsError: null, addPostLoading: false, addPostDone: false, addPostError: null, removePostLoading: false, removePostDone: false, removePostError: null, addCommentLoading: false, addCommentDone: false, addCommentError: null, }; export const LIKE_POST_REQUEST = 'LIKE_POST_REQUEST'; export const LIKE_POST_SUCCESS = 'LIKE_POST_SUCCESS'; export const LIKE_POST_FAILURE = 'LIKE_POST_FAILURE'; export const UNLIKE_POST_REQUEST = 'UNLIKE_POST_REQUEST'; export const UNLIKE_POST_SUCCESS = 'UNLIKE_POST_SUCCESS'; export const UNLIKE_POST_FAILURE = 'UNLIKE_POST_FAILURE'; export const LOAD_POSTS_REQUEST = 'LOAD_POSTS_REQUEST'; export const LOAD_POSTS_SUCCESS = 'LOAD_POSTS_SUCCESS'; export const LOAD_POSTS_FAILURE = 'LOAD_POSTS_FAILURE'; export const ADD_POST_REQUEST = 'ADD_POST_REQUEST'; export const ADD_POST_SUCCESS = 'ADD_POST_SUCCESS'; export const ADD_POST_FAILURE = 'ADD_POST_FAILURE'; export const REMOVE_POST_REQUEST = 'REMOVE_POST_REQUEST'; export const REMOVE_POST_SUCCESS = 'REMOVE_POST_SUCCESS'; export const REMOVE_POST_FAILURE = 'REMOVE_POST_FAILURE'; export const ADD_COMMENT_REQUEST = 'ADD_COMMENT_REQUEST'; export const ADD_COMMENT_SUCCESS = 'ADD_COMMENT_SUCCESS'; export const ADD_COMMENT_FAILURE = 'ADD_COMMENT_FAILURE'; export const addPost = (data) => ({ type: ADD_POST_REQUEST, data, }); export const addComment = (data) => ({ type: ADD_COMMENT_REQUEST, data, }); // 이전 상태를 액션을 통해 다음 상태로 만들어내는 함수(불변성은 지키면서) const reducer = (state = initialState, action) => produce(state, (draft) => { switch (action.type) { case LIKE_POST_REQUEST: draft.likePostLoading = true; draft.likePostDone = false; draft.likePostError = null; break; case LIKE_POST_SUCCESS: { const post = draft.mainPosts.find((v) => v.id === action.data.PostId); post.Likers.push({ id: action.data.UserId }); draft.likePostLoading = false; draft.likePostDone = true; break; } case LIKE_POST_FAILURE: draft.likePostLoading = false; draft.likePostError = action.error; break; case UNLIKE_POST_REQUEST: draft.unlikePostLoading = true; draft.unlikePostDone = false; draft.unlikePostError = null; break; case UNLIKE_POST_SUCCESS: { const post = draft.mainPosts.find((v) => v.id === action.data.PostId); post.Likers.filter((v) => v.id !== action.data.UserId); draft.unlikePostLoading = false; draft.unlikePostDone = true; break; } case UNLIKE_POST_FAILURE: draft.unlikePostLoading = false; draft.unlikePostError = action.error; break; case LOAD_POSTS_REQUEST: draft.loadPostsLoading = true; draft.loadPostsDone = false; draft.loadPostsError = null; break; case LOAD_POSTS_SUCCESS: draft.loadPostsLoading = false; draft.loadPostsDone = true; draft.mainPosts = draft.mainPosts.concat(action.data); draft.hasMorePosts = draft.mainPosts.length < 50; break; case LOAD_POSTS_FAILURE: draft.loadPostsLoading = false; draft.loadPostsError = action.error; break; case ADD_POST_REQUEST: draft.addPostLoading = true; draft.addPostDone = false; draft.addPostError = null; break; case ADD_POST_SUCCESS: draft.addPostLoading = false; draft.addPostDone = true; draft.mainPosts.unshift(action.data); break; case ADD_POST_FAILURE: draft.addPostLoading = false; draft.addPostError = action.error; break; case REMOVE_POST_REQUEST: draft.removePostLoading = true; draft.removePostDone = false; draft.removePostError = null; break; case REMOVE_POST_SUCCESS: draft.removePostLoading = false; draft.removePostDone = true; draft.mainPosts = draft.mainPosts.filter((v) => v.id !== action.data); break; case REMOVE_POST_FAILURE: draft.removePostLoading = false; draft.removePostError = action.error; break; case ADD_COMMENT_REQUEST: draft.addCommentLoading = true; draft.addCommentDone = false; draft.addCommentError = null; break; case ADD_COMMENT_SUCCESS: { const post = draft.mainPosts.find((v) => v.id === action.data.PostId); post.Comments.unshift(action.data); draft.addCommentLoading = false; draft.addCommentDone = true; break; } case ADD_COMMENT_FAILURE: draft.addCommentLoading = false; draft.addCommentError = action.error; break; default: break; } }); export default reducer; sagas/post.js import axios from 'axios'; // import shortId from 'shortid'; import { all, delay, fork, put, takeLatest, throttle, call } from 'redux-saga/effects'; import { ADD_COMMENT_FAILURE, ADD_COMMENT_REQUEST, ADD_COMMENT_SUCCESS, ADD_POST_FAILURE, ADD_POST_REQUEST, ADD_POST_SUCCESS, LIKE_POST_FAILURE, LIKE_POST_REQUEST, LIKE_POST_SUCCESS, // generateDummyPost, LOAD_POSTS_FAILURE, LOAD_POSTS_REQUEST, LOAD_POSTS_SUCCESS, REMOVE_POST_FAILURE, REMOVE_POST_REQUEST, REMOVE_POST_SUCCESS, UNLIKE_POST_FAILURE, UNLIKE_POST_REQUEST, UNLIKE_POST_SUCCESS, } from '../reducers/post'; import { ADD_POST_TO_ME, REMOVE_POST_OF_ME } from '../reducers/user'; function likePostAPI(data) { // data: post.id return axios.patch(`/post/${data}/like`); } function* likePost(action) { try { const result = yield call(likePostAPI, action.data); yield put({ type: LIKE_POST_SUCCESS, data: result.data, // PostId, UserId }); } catch (err) { console.error(err); yield put({ type: LIKE_POST_FAILURE, data: err.response.data, }); } } function unlikePostAPI(data) { return axios.delete(`/post/${data}/like`); // return axios.patch(`/post/${data}/unlike`); 도 가능 } function* unlikePost(action) { try { const result = yield call(unlikePostAPI, action.data); yield put({ type: UNLIKE_POST_SUCCESS, data: result.data, }); } catch (err) { console.error(err); yield put({ type: UNLIKE_POST_FAILURE, data: err.response.data, }); } } function loadPostsAPI(data) { return axios.get('/posts', data); } function* loadPosts(action) { try { const result = yield call(loadPostsAPI, action.data); yield put({ type: LOAD_POSTS_SUCCESS, // data: generateDummyPost(10), data: result.data, }); } catch (err) { console.error(err); yield put({ type: LOAD_POSTS_FAILURE, data: err.response.data, }); } } function addPostAPI(data) { return axios.post('/post', { content: data }); } function* addPost(action) { try { const result = yield call(addPostAPI, action.data); yield put({ type: ADD_POST_SUCCESS, data: result.data, }); yield put({ type: ADD_POST_TO_ME, data: result.data.id, }); } catch (err) { console.error(err); yield put({ type: ADD_POST_FAILURE, data: err.response.data, }); } } function removePostAPI(data) { return axios.delete('/api/post', data); } function* removePost(action) { try { // const result = yield call(removePostAPI, action.data); yield delay(1000); yield put({ type: REMOVE_POST_SUCCESS, data: action.data, }); yield put({ type: REMOVE_POST_OF_ME, data: action.data, }); } catch (err) { console.error(err); yield put({ type: REMOVE_POST_FAILURE, data: err.response.data, }); } } function addCommentAPI(data) { return axios.post(`/post/${data.postId}/comment`, data); } function* addComment(action) { try { const result = yield call(addCommentAPI, action.data); yield put({ type: ADD_COMMENT_SUCCESS, data: result.data, }); } catch (err) { yield put({ type: ADD_COMMENT_FAILURE, data: err.response.data, }); } } function* watchLikePost() { yield takeLatest(LIKE_POST_REQUEST, likePost); } function* watchUnlikePost() { yield takeLatest(UNLIKE_POST_REQUEST, unlikePost); } function* watchLoadPosts() { yield throttle(5000, LOAD_POSTS_REQUEST, loadPosts); } function* watchAddPost() { yield takeLatest(ADD_POST_REQUEST, addPost); } function* watchRemovePost() { yield takeLatest(REMOVE_POST_REQUEST, removePost); } function* watchAddComment() { yield takeLatest(ADD_COMMENT_REQUEST, addComment); } export default function* postSaga() { yield all([ fork(watchLikePost), fork(watchUnlikePost), fork(watchAddPost), fork(watchLoadPosts), fork(watchRemovePost), fork(watchAddComment), ]); }
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
git에서 소스 코드 다운받아서 참고 하려고하는데요.
git 소스는 class로 시퀄라이즈 모델을 생성하신거 같은데 이부분은 이후 강좌에 나오는건가요?
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
HYDRATE 액션이 실행되면 Client에서 보관하고있던 state값들이 다날아갑니다.
Client에서 기존에 보관하고있던 값들을 그대로 유지하면서 서버사이드랜더링때 받아온값을 합칠수있는 방법이있을까요?
- 해결됨[리뉴얼] React로 NodeBird SNS 만들기
development 환경으로 next build
안녕하세요 제로초님! development 환경으로 next build를 하려고 하는데요! package.json에 정의해놓은 대로 npm run build:dev 명령어를 입력해도 Loaded env from {프로젝트경로}/.env.production 가 출력되면서 프로덕션 환경으로 빌드됩니다. 해결 방법이 궁금합니다! "scripts": { "dev": "next -p 3000", "build:dev": "cross-env ANALYZE=true NODE_ENV=development next build", "build:prod": "cross-env ANALYZE=true NODE_ENV=production next build", "start:dev": "cross-env ANALYZE=true NODE_ENV=development next start -p 3000", "start:prod": "cross-env ANALYZE=true NODE_ENV=production next start -p 3000" }, const withPlugins = require('next-compose-plugins'); const withBundleAnalyzer = require('@next/bundle-analyzer')({ enabled: process.env.ANALYZE === 'true', }); const withImages = require('next-images'); module.exports = withPlugins( [ [ withBundleAnalyzer, { compress: true, webpack(config) { const prod = process.env.NODE_ENV === 'production'; return { ...config, mode: prod ? 'production' : 'development', devtool: prod ? 'hidden-source-map' : 'eval', plugins: [...config.plugins], }; }, }, ], [ withImages, { inlineImageLimit: false, }, ], ], { webpack(config) { return { ...config, }; }, }, );
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
질문 있습니다!!
npm run dev를 실행해서 서버를 열었는데, The default export is not a React component in page: "/" 라는 에러 메세지가 떴습니다 어떻게 해결해야 하나요...?