수강이 제한됩니다.
다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- React로 NodeBird SNS 만들기
안녕하세요 제로초님
삭제된 글입니다
- 미해결React로 NodeBird SNS 만들기
제로초님
제로초님 안녕하세요 오늘은 코드 관련 질문은 아니고 제가 제로초님 강의 뭐 몹엑스나 노드나 다 봤는데 최근에 타입스크립트로 앱개발 하시는게 나왔더라구여 근데 제가 아직 타입스크립트를 시작을 못했는데 지금 나온 타입스크립트 앱개발을 봐도 자바스크립트 지식으로 따라갈수 있을지 아니면 타입스크립트 기초강좌 부터 봐야 할지 해서 질문 남깁니다!
- 미해결React로 NodeBird SNS 만들기
새로고침 로그인 풀림 문제.
aws 배포 이후 cors 와 cookie 도메인 설정으로 드디어 로그인 유지가 가능하였습니다. 하지만, 새로고침만 하면, 로그인이 풀립니다.. 다시 다른 페이지 누르면 또 로그인이 되구요.. 확인해보니, 새로고침시 ssr 통해 유저 정보를 받아올때 이상하게 req.isAuthenticated() 이부분에서 false가 떨어집니다.. 새로고침 하는 순간만 그러는데 왜그럴까요 ㅠ 참고로, aws 배포 서버만 그런 현상이고, 같은 소스로 로컬에서 테스트 하듯 새로고침 하면 로그인이 풀리지 않고 잘 됩니다.. 뭔가 쿠키 문제일까요.. 쿠키 정보를 확인해보면, 잘 들어가 있네요..(백, 프론트 양쪽모두..) ㅠㅠ 무엇이 문제일까요 정말 ㅠㅠ
- 미해결React로 NodeBird SNS 만들기
안녕하세요. 강의 너무 감사합니다
혹시 나중에 도커를 사용하게되면 pm2 대신 다른 것을 사용하나요?? 도커를 사용하면 실무에서 아래와 같이 실행해도 상관없죠!? "start": "cross-env NODE_ENV=production node index.js", 추가적으로, 중간에 cpu 나 메모리 확인, 로그 확인은 실무로 도커 사용했을때 어떤식으로 확인하나요~~??
- 미해결React로 NodeBird SNS 만들기
제로초님
제로초님 안녕하세요 궁금 한게 있어 질문 남깁니다. 웹팩에서 빌드를 하면 dev모드인 상태에서 prd로 바꿔줘서 node_env가 바뀌는 건가요? 웹팩을 다시 듣고 있는데 헷갈리더라구여
- 해결됨React로 NodeBird SNS 만들기
안녕하세요 ssr 관련 질문드립니다
안녕하세요 홈화면에 진입 시, ssr로 데이터를 가져오는 게 있습니다. ssr 자체는 잘 적용이 됩니다. 하지만, 1초 정도 ? 홈화면에 html만 출력되는게 눈에 보입니다 그 다음에 리액트 컴포넌트를 통해서 렌더링이 되구요. 초기 렌더링 시에, html이 잠시 보이는 것을 막을 수 있는 방법이 있나요?
- 해결됨React로 NodeBird SNS 만들기
안녕하세요 ssr 관련 질문드립니다
아래에 withRedux 관련하여 질문드렸던 수강생입니다 ssr을 사용하는 컴포넌트에서 '새로고침'같은 느낌이 나서, 이와 관련한 키워드로 구글링을 했습니다. ssr의 단점으로 새로고침처럼 매번 전체페이지를 랜더링하는 방식으로 필요없는 부분을 포함하여 전체페이지를 갱신하므로 비효율적인 부분이 있음 위와같은 문구를 봤습니다. 이것 때문에 redux state들의 초기화나 props로 내려준 것에 대한 데이터가 다 없어지는 거지 않나, 라고 생각을 했습니다. 만약, 제 생각이 맞고, 전체 페이지가 갱신이 안되어야 하는 상황이라면, ssr을 사용하지 않는 방법 뿐일까요? ( 제가 만들고 있는 것은 제 개인 블로그로써, 제가 쓴 글이 검색엔진에서 읽혔으면 좋겠는데, 문제가 되는 컴포넌트에 들어가는 순간, 모든게 다 초기화가 되버려서, 해당 컴포넌트에서 다시 데이터를 가져올 건 가져오게 하고, 못 가져오는 것은 그냥 놔두고 있습니다. )
- 미해결React로 NodeBird SNS 만들기
웹스톰 에디터 수정 질문
안녕하세요 강의 4-8 사가패턴과 Q&A 부분 2:17초 부근에서 export const LOG_OUT_REQUEST = 'LOG_OUT_REQUEST' 줄을 여러줄 복제하시고LOG_OUT_REQUEST 에서 REQUEST 부분을 마우스로 선택하시고 수정하시니 변수명 옆의 값도 동시에 수정되어지셨는데요이거 어떻게 하신 건지 알 수 있을까요?
- 미해결React로 NodeBird SNS 만들기
안녕하세요 withRedux관련 질문드립니다
안녕하세요 현재 개인 프로젝트를 하고 있습니다. 스택은 노드버드 스택과 같습니다. 게시판 화면에서 게시글을 클릭하면, 화면이 게시글로 이동합니다. 이 때, 뒤로가기를 누르면 게시판 화면이 텅 비게 나옵니다. 콘솔을 열어서 확인해 보니, 게시판에서 게시글들이 있는 리스트에서는 아래와 같은 콘솔이 찍혔습니다 게시글도 정상적으로 나옵니다. 하지만, 게시글에서 브라우저의 뒤로가기 버튼을 누르니까 위에 콘솔이 다시 새로 나오고, 전부 텅 비게(undefined) 나옵니다. 또한, 제가 리덕스에서 state를 끌고 오는 게 하나 있습니다. 이거는 게시판에서부터 가지고 오는 state입니다. 이것도 뒤로가기를 하면서 초기화가 됩니다. (그냥 느낌이 '새로고침'을 한 번 누른 거 같았습니다) 이거는 어떤 문제점으로 인해 발생하는 건가요?
- 해결됨React로 NodeBird SNS 만들기
제로초님 문의드립니다^^ 파라미터 있는 dispatch할 액션생성자 함수는 () 를 붙여야 되는건가요?
제로초님 ^^ 명강의 잘듣고 있습니다.. 다름이 아니라요 현재 3-6장 react-redux 훅 사용하기 강의 듣고있습니다. 그런데 아래와 같은 에러가 발생해서요 그래서 이전 제로초님 질문답변 확인한 결과 loginAction은 함수라고 하셨는데요 아마도 파라미터가 있어서 그런거같은데요 그 질문답변에서는 파라미터를 넣으라고 하셨는데 전그냥 () 마 붙이니깐 되더라구요 그런데 강의내용에서는 그런에러가 없이 통과된거같아서요 파라미터 있는 dispatch할 액션생성자 함수는 () 를 붙여야 되는건가요? 참고로 제 소스를 에러 아래에 첨부합니다 (강의 주석이 많아서 죄송합니다) Error: Actions must be plain objects. Use custom middleware for async actions. ▶ 3 stack frames were collapsed. (anonymous function) ./pages/index.js:30 27 | }, 28 | }); */ 29 | //2th방법)> 30 | dispatch(loginAction); //Error: Actions must be plain objects. Use custom middleware for async actions. | ^ 31 | //dispatch(loginAction()); 32 | dispatch(logoutAction); //useState내 setState역할 33 | },[]) import React, { useEffect } from 'react'; import PostForm from '../components/PostForm'; import PostCard from '../components/PostCard'; import { useDispatch, useSelector } from 'react-redux'; //useDispatch : 리덕스 action type 실행 //useSelector : 리덕스 state 가져옴 //import user, { LOG_IN, LOG_OUT } from '../reducers/user'; //user 리듀서에서 LOG_IN 이라는 액션타입을 불러온다 import { loginAction, logoutAction } from '../reducers/user'; //2th방법) const Home = () => { //컴포넌트가 첫번째로 렌더링 될때 액션도 dispatch가 실행된다 const dispatch = useDispatch(); useEffect(() => { //리액트 리덕스가 훅을 지원하지 않다가 추가적으로 지원하게 됨 /* dispatch({ type: LOG_IN, //액션타입 data: { nickname: '홍길동', }, }); dispatch({ type: LOG_OUT, //액션타입 data: { nickname: '홍길동', }, }); */ //2th방법) dispatch(loginAction); //Error: Actions must be plain objects. Use custom middleware for async actions. //dispatch(loginAction()); dispatch(logoutAction); //useState내 setState역할 },[]) //구조분해 //const { user, isLoggedIn } = useSelector(state => state.user); //user 는 user 모듈, 리듀서의 별칭 === reducer > index.js 내 combineReducers({리듀서1, 리듀서2}) //리렌더링 성능최적화를 고려해서 세부분리시킴 => 구조분해 필요없음 {} 제거시켜야함 const user = useSelector(state => state.user.user); const isLoggedIn = useSelector(state => state.user.isLoggedIn); const { mainPosts } = useSelector(state => state.post); //비구조 할당 {상태값1, 상태값2} = useSelector(state => state.리듀서별칭); //useState === useSelector //리덕스 state를 컴포넌트내에서 사용하는 방법 //1th방법) //{user.user ? <div> 로그인 했습니다: {user.nickname}</div> : <div>로그아웃 했습니다</div>} //user 모듈,리듀서 별칭 + user 객체 return ( <div> {user ? <div> 로그인 했습니다: {user.nickname}</div> : <div>로그아웃 했습니다</div>} {isLoggedIn && <PostForm />} {mainPosts.map((c) => { return ( <PostCard key={c} post={c} /> ); })} </div> ); }; export default Home;
- 해결됨React로 NodeBird SNS 만들기
useEffect 데이터보내기
강의를 들으면서 useEffect에 인자값을 넘기면 더 줄어질거같아서요. 그래서 useEffect에 데이터 인자값을 넘길수있나요??
- 미해결React로 NodeBird SNS 만들기
강의를 모두 완료한 수강생으로써 질문 있습니다!
자바 스프링처럼 한프로젝트 내 클라이언트와 서버가 모두 공존하여 작동하는 구성이 아닌, react와 node 는 백 서버와 프론트가 구분이 되어 서버자체도 별도로 구성되어 작동을 하는데, 나중에 과부하에 대한 개념이 살짝 혼란이 와서 질문 드립니다. node의 경우 서버가 렌더링 한다는 개념이다보니, 추후 로드밸런싱이나 클러스터링에 대한 병렬 처리 대비책이 필수로 필요로 하지만, 리액트와 같이 브라우저가 렌더링을 하며 따로 프론트 서버가 있을 경우 과부하의 개념 과 추후 프론트에 대한 병렬 처리 개념이 감이 오질 않습니다. react도 nginx 로 연결하여 구성하기도 하는데, 추후 많은 요청이 필요하게 된 경우 어떻게 구성하게 되는지 궁금하네요.
- 해결됨React로 NodeBird SNS 만들기
제로초님 진심 으로 안풀려서 문의드립니다...
제로초님 노드 도서도 구매했고 동영상강의 수강중인 개발자입니다. 다름이 아니오라 3-4. 리덕스와 리엑트 연결하기 강좌 듣고 실습하는데 에러가 발생해서요 아래와 같은 에러인데요 기존 다른 질문답변 조회해 보니 버전이 안맞고 next 버전이 9.대가 아니라는데 저는 제로초님 git에서 소스 최근에 받아보니 9.대였거든요 도무지 해결이 안되어서 문의드립니다. 최근 설정파일 소스라도 알려주심 안될까요? 어떻게 해결해야 하는지요???? _app.js 코드내용은 다음과 같습니다 import React from 'react'; import Head from 'next/head'; import PropTypes from 'prop-types'; //import 'antd/dist/antd.css'; import AppLayout from '../components/AppLayout'; import { Provider } from 'react-redux'; import reducer from '../reducers' import withRedux from 'next-redux-wrapper' import {createStore} from 'redux'; //import wrapper from '../store/configureStore'; const NodeBird = ({ Component, store }) => { return ( <Provider store={store}> <Head> <title>NodeBird</title> </Head> <AppLayout> <Component /> </AppLayout> </Provider> ); }; NodeBird.propTypes = { Component: PropTypes.elementType.isRequired, store: PropTypes.object, }; export default withRedux((initialState, options) => { const store = createStore(reducer, initialState); //state와 리듀서가 합쳐있는게 store //차후 커스터마이징 return store; })(NodeBird); //withRedux 고차컴포넌트, 기존컴포넌트의 기능확장 //export default wrapper.withRedux(NodeBird); //모든 페이지에 공통으로 들어가기 때문에 레이아웃역할을 한다 //리액트와 리덕스 연결하는 코드 작성 => 모든 컴포넌트가 _app.js내 리덕스 state 공유 //NEXT 에서는 리액트에 리덕스 적용하는 방법 //npm i next-redux-wrapper 실행 package.json 입니다 { "name": "react-nodebird-front", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "dev": "next -p 3061", "build": "next build", "start": "next start" }, "author": "ZeroCho", "license": "MIT", "dependencies": { "@ant-design/icons": "^4.2.1", "antd": "^4.3.0", "axios": "^0.19.2", "faker": "^4.1.0", "immer": "^7.0.1", "next": "^9.4.4", "next-redux-saga": "^4.1.2", "next-redux-wrapper": "^6.0.1", "prop-types": "^15.7.2", "react": "^16.13.1", "react-dom": "^16.13.1", "react-redux": "^7.2.0", "react-slick": "^0.26.1", "redux": "^4.0.5", "redux-devtools-extension": "^2.13.8", "redux-saga": "^1.1.3", "shortid": "^2.2.15", "styled-components": "^5.1.1" }, "devDependencies": { "babel-eslint": "^10.1.0", "eslint": "^7.1.0", "eslint-config-airbnb": "^18.1.0", "eslint-plugin-import": "^2.20.2", "eslint-plugin-jsx-a11y": "^6.2.3", "eslint-plugin-react": "^7.20.0", "eslint-plugin-react-hooks": "^4.0.4", "nodemon": "^2.0.4", "webpack": "^4.43.0" } } Server Error TypeError: Cannot read property 'getState' of undefined This error happened while generating the page. Any console logs will be displayed in the terminal window. Call Stack <unknown> file:///D:/react-nodebird-master/ch3/front/node_modules/react-redux/lib/components/Provider.js (31:18) Object.useMemo file:///D:/react-nodebird-master/ch3/front/node_modules/react-dom/cjs/react-dom-server.node.development.js (1239:19) useMemo file:///D:/react-nodebird-master/ch3/front/node_modules/react/cjs/react.development.js (1521:21) Provider file:///D:/react-nodebird-master/ch3/front/node_modules/react-redux/lib/components/Provider.js (30:42) processChild file:///D:/react-nodebird-master/ch3/front/node_modules/react-dom/cjs/react-dom-server.node.development.js (3043:14) resolve file:///D:/react-nodebird-master/ch3/front/node_modules/react-dom/cjs/react-dom-server.node.development.js (2960:5) ReactDOMServerRenderer.render file:///D:/react-nodebird-master/ch3/front/node_modules/react-dom/cjs/react-dom-server.node.development.js (3435:22) ReactDOMServerRenderer.read file:///D:/react-nodebird-master/ch3/front/node_modules/react-dom/cjs/react-dom-server.node.development.js (3373:29) renderToString file:///D:/react-nodebird-master/ch3/front/node_modules/react-dom/cjs/react-dom-server.node.development.js (3988:27) Object.renderPage file:///D:/react-nodebird-master/ch3/front/node_modules/next/dist/next-server/server/render.js (50:851)
- 미해결React로 NodeBird SNS 만들기
제로초님~
제로초님 안녕 하세요 궁금 한게 있어서 글을 남깁니다. axios나 saga로 비동기 처리를 할때 일정 시간 이후 까지도 데이터가 안들어 왔을때 비동기를 종료 해주는 방법이 있을까 해서 글을 남깁니다.
- 미해결React로 NodeBird SNS 만들기
제로초님~
제로초님 안녕 하세요 우선 추석 잘 보내시고 복 많이 받으세요 !ㅎㅎ 다름이 아니라 이런 부분 어떻게 안뜨게 하는지 해서 글을 남깁니다!
- React로 NodeBird SNS 만들기
리액트 노드버드 할인 쿠폰을 가지고 있는데 혹시
삭제된 글입니다
- 해결됨React로 NodeBird SNS 만들기
검색기능
제로초님 안녕하세요. 다름이 아니라 프로튼의 검색기능 같은경우애는 프론트에서 처리하는게 낫나요?? 백엔드에서 처리하는게 낫나요?? 제가 알기론 검색이 너무 많아지면 메모리 때문에 프론트애 문제가 생긴다고 검색은 백엔드 query에서 해야된다고 알거든요. 이게 맞나요??
- 미해결React로 NodeBird SNS 만들기
안녕하세요 ssr 관련 질문드립니다
안녕하세요 next 과 mobx로 게시판을 만들고 있으며, 일전에 ssr 문제로 인해 질문을 남긴 적이 있습니다. 현재는 ssr이 적용이 된 상태 같습니다. 다만, 이게 진짜 ssr 이 된 것인지 긴가민가하여 확인을 받고자 질문을 드립니다. 제 처음 게시판의 상태는, 1번 게시글을 클릭하고, 게시글 내용을 본 다음, 뒤로가기를 하여 2번 게시글을 클릭합니다. 이 때, 분명 2번 게시글 페이지(동적 라우팅)로 이동하지만, 1초 정도? 1번 게시글의 내용이 보였다가 2번 게시글로 바뀝니다. 이 후에, ssr을 적용 후에는, 1번 게시글을 클릭 후, 게시글 내용을 확인 한 뒤, 뒤로 가기를 눌러서 2번 게시글을 눌렀을 떄, 바로 2번 게시글로 보입니다. 1번 게시글이 1초 정도 보였다가 2번 게시글이 보이는 현상이 사라졌습니다. ssr이 제대로 적용 된 거라고 보면 될까요?
- 미해결React로 NodeBird SNS 만들기
multer 서버 업로드
안녕하세요. 제로초님 multer 강좌 잘봤습니다. 다름이 아니라 원래 이미지 서버는 따로 두고 관리를 하잖아요? 하지만 multer는 done(null, 'uploade/image'); 이렇게하면 자기 폴더 안에 uploade/image 폴더를 찾아 업로드를 하는거잖아요?? 그러면 서버가 따로있으면 그 서버에 uploade/image 폴더 이렇게 넣어야하는데 그러면 아래처럼 앞에 서버 주소를 넣어줘야하나요? => 128.131.0.135/uploade/image 이렇게요 만약 이렇게된다쳐도 그러면 서버에 들어가면 user, 비밀번호를 넣어줘야하는거 아닌가요?? db 서버에 연결하는것처럼요.. 아니면 image서버를 따로두면 multer 못사용하는건가요? const uploade = multer({ storage: multer.diskStorage({ destination(req, file, done) { if (file.mimetype === "image/jpeg" || file.mimetype === "image/jpg" || file.mimetype === "image/png") { done(null, '서버주소/uploade/image'); } else { done(null, '서버주소/uploade/file'); } }, filename(req, file, done) { const ext = path.extname(file.originalname); const basename = path.basename(file.originalname, ext); done(null, basename + new Date().valueOf() + ext); } }), });
- 미해결React로 NodeBird SNS 만들기
안녕하세요 제로초님^^! 질문이 있습니다.
안녕하세요. 제로초님의 강의를 듣고 개인적으로 프로젝트를 만들고 있는 한 학생?입니다. 프로젝트는 거의 끝을 향해 달려가고 있지만 한달동안 고민했던 문제가 아직도 해결되지 않아서 이렇게 질문올립니다.! 1) 폰트사이즈 이런식으로 모바일화면에서 폰트사이즈를 작게하고 싶은데 저의 프로젝트에서 chrome모바일로 보면 최소 폰트사이즈가 8px라서 텍스트가 넘칩니다. 어떻게 하면 좋을까요? 2) 저의 프로젝트에 날짜마다 데이터를 조회할 수 있게 하는 기능이 있습니다. 요청올 때 마다 매번 DB에 해당 날짜를 조회하는게 불필요한 것 같아서 전역변수 var에 최근 10일의 데이터를 담아놓는데 괜찮은 방법인가요? 데이터는 'node-schedule'을 써서 1시간마다 데이터가 업데이트 되며 현재 22개의 전역변수가 선언되어있습니다. 3) const express = require('express'); async function Test(X){ }; router.post('/', async(req , res , next) =>{ await Test(X) }) 이런식으로 모든 함수들을 최상단으로 뺏는데 router안에 함수를 선언하는 것과 위로 함수를 빼는 것과 차이가 있나요? 감사합니다.!