React로 NodeBird SNS 만들기
React로 NodeBird SNS 만들기
수강정보
(51개의 수강평)
911명의 수강생
공개하지 않은 강의입니다.
지식공유자 : 조현영
111회 수업 · 총 23시간 39분 수업
기간 : 평생 무제한 시청
수료증 : 발급 강의
수강 난이도 : 중급이상
조동훈 프로필

할인 쿠폰 사용이 안되는되요 (848-f9af83f183e3) 조동훈 2일 전
강의와 관련있는 질문을 남겨주세요.• 강의와 관련이 없는 질문은 지식공유자가 답변하지 않을 수 있습니다. (사적 상담, 컨설팅, 과제 풀이 등)• 질문을 남기기 전, 비슷한 내용을 질문한 수강생이 있는지 먼저 검색을 해주세요. (중복 질문을 자제해주세요.)• 서비스 운영 관련 질문은 인프런 우측 하단 ‘문의하기’를 이용해주세요. (영상 재생 문제, 사이트 버그, 강의 환불 등) 질문 전달에도 요령이 필요합니다.• 지식공유자가 질문을 좀 더 쉽게 확인할 수 있게 도와주세요.• 강의실 페이지(/lecture) 에서 '질문하기'를 이용해주시면 질문과 연관된 수업 영상 제목이 함께 등록됩니다.• 강의 대시보드에서 질문을 남길 경우, 관련 섹션 및 수업 제목을 기재해주세요. • 수업 특정 구간에 대한 질문은 꼭 영상 타임코드를 남겨주세요! 구체적인 질문일수록 명확한 답을 받을 수 있어요.• 질문 제목은 핵심 키워드를 포함해 간결하게 적어주세요.• 질문 내용은 자세하게 적어주시되, 지식공유자가 답변할 수 있도록 구체적으로 남겨주세요.• 정확한 질문 내용과 함께 코드를 적어주시거나, 캡쳐 이미지를 첨부하면 더욱 좋습니다. 기본적인 예의를 지켜주세요.• 정중한 의견 및 문의 제시, 감사 인사 등의 커뮤니케이션은 더 나은 강의를 위한 기틀이 됩니다. • 질문이 있을 때에는 강의를 만든 지식공유자에 대한 기본적인 예의를 꼭 지켜주세요. • 반말, 욕설, 과격한 표현 등 지식공유자를 불쾌하게 할 수 있는 내용은 스팸 처리 등 제재를 가할 수 있습니다. 

1
이주호 프로필

nodejs mvc 패턴 이주호 22일 전
안녕하세요. 제로초님 다름이 아니라 nodejs폴더 구조를 보면 mvc 폴더 구조가 아닌거같아서요. routes는 그냥 말 그데로 routes인데 그 routes가 컨트롤러 역할을 하는거같은데 다른 프로젝트 폴더 구조를 보면 query는 model폴덜에 따로 빼서 하고 routes js 코드는 routes/controller 폴더 만들어서 거기에다가 이젠 코드를 짜고 routes는 const User = require('./controller/login');  ex: routes.get('/', User.login); 이런식으로하던데 일부러 복잡해 지실까봐 안하신건가요? 아니면 지금 제로초님 방식도 mvc패턴 방식인가요??

4
Jun Mr. 프로필

사용하고 보니, 람다 구성이 궁금합니다! Jun Mr. 1달 전
현재는 back 아래에  lambda 폴더에 index 로 사용이 되었는데, 만약 함수가 여러개 사용이 된다면 lambda 폴더 아래 함수명 폴더 아래 index.js 를 놓고 수정시나, 생성시 각각의 폴더에서 동일하게 사용하나요?

1
김로인 프로필

제로초님 김로인 1달 전
제로초님 안녕하세요 오늘은 코드 관련 질문은 아니고 제가 제로초님 강의 뭐 몹엑스나 노드나 다 봤는데  최근에 타입스크립트로 앱개발 하시는게 나왔더라구여 근데 제가 아직 타입스크립트를 시작을 못했는데  지금 나온 타입스크립트 앱개발을 봐도 자바스크립트 지식으로  따라갈수 있을지 아니면 타입스크립트 기초강좌 부터 봐야 할지 해서 질문 남깁니다!

1
Jun Mr. 프로필

새로고침 로그인 풀림 문제. Jun Mr. 1달 전
aws 배포 이후 cors 와 cookie 도메인 설정으로 드디어 로그인 유지가 가능하였습니다. 하지만, 새로고침만 하면, 로그인이 풀립니다..  다시 다른 페이지 누르면 또 로그인이 되구요.. 확인해보니, 새로고침시 ssr 통해 유저 정보를 받아올때 이상하게 req.isAuthenticated() 이부분에서 false가  떨어집니다.. 새로고침 하는 순간만 그러는데 왜그럴까요 ㅠ 참고로, aws 배포 서버만 그런 현상이고, 같은 소스로 로컬에서 테스트 하듯 새로고침 하면 로그인이 풀리지 않고 잘 됩니다.. 뭔가 쿠키 문제일까요.. 쿠키 정보를 확인해보면, 잘 들어가 있네요..(백, 프론트 양쪽모두..) ㅠㅠ 무엇이 문제일까요 정말 ㅠㅠ

1
Jun Mr. 프로필

안녕하세요. 강의 너무 감사합니다 Jun Mr. 1달 전
혹시 나중에 도커를 사용하게되면 pm2 대신 다른 것을 사용하나요?? 도커를 사용하면 실무에서 아래와 같이 실행해도 상관없죠!? "start": "cross-env NODE_ENV=production node index.js", 추가적으로, 중간에 cpu 나 메모리 확인, 로그 확인은 실무로 도커 사용했을때 어떤식으로 확인하나요~~??

1
김로인 프로필

제로초님 김로인 1달 전
제로초님 안녕하세요 궁금 한게 있어 질문 남깁니다. 웹팩에서 빌드를 하면 dev모드인 상태에서 prd로 바꿔줘서  node_env가 바뀌는 건가요? 웹팩을 다시 듣고 있는데 헷갈리더라구여

1
devsn 프로필

안녕하세요 ssr 관련 질문드립니다 devsn 1달 전
안녕하세요 홈화면에 진입 시, ssr로 데이터를 가져오는 게 있습니다. ssr 자체는 잘 적용이 됩니다. 하지만, 1초 정도 ? 홈화면에 html만 출력되는게 눈에 보입니다 그 다음에 리액트 컴포넌트를 통해서 렌더링이 되구요. 초기 렌더링 시에, html이 잠시 보이는 것을 막을 수 있는 방법이 있나요?

2
devsn 프로필

안녕하세요 ssr 관련 질문드립니다 devsn 1달 전
아래에 withRedux 관련하여 질문드렸던 수강생입니다 ssr을 사용하는 컴포넌트에서 '새로고침'같은 느낌이 나서, 이와 관련한 키워드로 구글링을 했습니다. ssr의 단점으로 새로고침처럼 매번 전체페이지를 랜더링하는 방식으로 필요없는 부분을 포함하여 전체페이지를 갱신하므로 비효율적인 부분이 있음 위와같은 문구를 봤습니다. 이것 때문에 redux state들의 초기화나 props로 내려준 것에 대한 데이터가 다 없어지는 거지 않나, 라고 생각을 했습니다. 만약, 제 생각이 맞고, 전체 페이지가 갱신이 안되어야 하는 상황이라면, ssr을 사용하지 않는 방법 뿐일까요? ( 제가 만들고 있는 것은 제 개인 블로그로써, 제가 쓴 글이 검색엔진에서 읽혔으면 좋겠는데, 문제가 되는 컴포넌트에 들어가는 순간, 모든게 다 초기화가 되버려서, 해당 컴포넌트에서 다시 데이터를 가져올 건 가져오게 하고, 못 가져오는 것은 그냥 놔두고 있습니다. )

2
홍길동 프로필

웹스톰 에디터 수정 질문 홍길동 1달 전
안녕하세요 강의 4-8 사가패턴과 Q&A 부분 2:17초 부근에서  export const LOG_OUT_REQUEST = 'LOG_OUT_REQUEST' 줄을 여러줄 복제하시고LOG_OUT_REQUEST  에서 REQUEST 부분을 마우스로 선택하시고 수정하시니 변수명 옆의 값도 동시에 수정되어지셨는데요이거 어떻게 하신 건지 알 수 있을까요? 

1
devsn 프로필

안녕하세요 withRedux관련 질문드립니다 devsn 1달 전
안녕하세요 현재 개인 프로젝트를 하고 있습니다. 스택은 노드버드 스택과 같습니다. 게시판 화면에서 게시글을 클릭하면, 화면이 게시글로 이동합니다. 이 때, 뒤로가기를 누르면 게시판 화면이 텅 비게 나옵니다. 콘솔을 열어서 확인해 보니, 게시판에서 게시글들이 있는 리스트에서는 아래와 같은 콘솔이 찍혔습니다 게시글도 정상적으로 나옵니다. 하지만, 게시글에서 브라우저의 뒤로가기 버튼을 누르니까 위에 콘솔이 다시 새로 나오고, 전부 텅 비게(undefined) 나옵니다. 또한, 제가 리덕스에서 state를 끌고 오는 게 하나 있습니다. 이거는 게시판에서부터 가지고 오는 state입니다. 이것도 뒤로가기를 하면서 초기화가 됩니다. (그냥 느낌이 '새로고침'을 한 번 누른 거 같았습니다) 이거는 어떤 문제점으로 인해 발생하는 건가요?

6
manhattansky73 프로필

제로초님 문의드립니다^^ 파라미터 있는 dispatch할 액션생성자 함수는 () 를 붙여야 되는건가요? manhattansky73 1달 전
제로초님 ^^ 명강의 잘듣고 있습니다.. 다름이 아니라요 현재 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;

2
이주호 프로필

useEffect 데이터보내기 이주호 1달 전
강의를 들으면서 useEffect에 인자값을 넘기면 더 줄어질거같아서요. 그래서 useEffect에 데이터 인자값을 넘길수있나요??

8
Jun Mr. 프로필

강의를 모두 완료한 수강생으로써 질문 있습니다! Jun Mr. 1달 전
자바 스프링처럼 한프로젝트 내 클라이언트와 서버가 모두 공존하여 작동하는 구성이 아닌, react와 node 는 백 서버와 프론트가 구분이 되어 서버자체도 별도로 구성되어 작동을 하는데, 나중에 과부하에 대한 개념이 살짝 혼란이 와서 질문 드립니다. node의 경우 서버가 렌더링 한다는 개념이다보니, 추후 로드밸런싱이나 클러스터링에 대한 병렬 처리 대비책이 필수로 필요로 하지만, 리액트와 같이 브라우저가 렌더링을 하며 따로 프론트 서버가 있을 경우 과부하의 개념 과 추후 프론트에 대한 병렬 처리 개념이 감이 오질 않습니다. react도 nginx 로 연결하여 구성하기도 하는데, 추후 많은 요청이 필요하게 된 경우 어떻게 구성하게 되는지 궁금하네요.

1
manhattansky73 프로필

제로초님 진심 으로 안풀려서 문의드립니다... manhattansky73 1달 전
제로초님 노드 도서도 구매했고 동영상강의 수강중인 개발자입니다. 다름이 아니오라 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)

4
지식공유자 되기
많은 사람들에게 배움의 기회를 주고,
경제적 보상을 받아보세요.
지식공유참여
기업 교육을 위한 인프런
“인프런 비즈니스” 를 통해 모든 팀원이 인프런의 강의들을
자유롭게 학습하는 환경을 제공하세요.
인프런 비즈니스