월 17,600원
5개월 할부 시다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 해결됨[리뉴얼] React로 NodeBird SNS 만들기
reducers/user.js 에서 에러발생합니다.
온라인 강좌 보면서 한글자 한글자 그대로 따라했는데도 안되네요 github주소 가서 -> revised > user.js파일 참고하려고 하니 인프런 강좌에서 가르쳐주시는거랑 코드가 달라서 다른오류가 나더라구요. github 강좌별로 제대로 참고할수 잇는 코드가 잇으면 좋겠습니다. 온라인 강좌에서 reduce -> saga , saga -> reduce계속 왔다갔다 하면서 따라치려고 했는데 계속 오류나네요 도와주세요 https://github.com/ZeroCho/react-nodebird/blob/revised/ch4/front/reducers/user.js
- 해결됨[리뉴얼] React로 NodeBird SNS 만들기
로그인이 안됩니다.
Redux-saga 강의 듣던중 로그인1초후에 된다고 강의중에 말씀하시는데 저는 아예 로그인이 안됩니다. 콘솔창 올립니다. 어디부터 손을 대야하는걸까요??
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
nodemon 실행
nodemon 잘 설치했는데 작동이 안됩니다.. node app 은 정상적으로 되구요, nodemon app 은 안됩니다. 찾아보니 환경변수 문제 같은데 어캐해야하는지 몰라서 질문드립니다..
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
eslint 빨간줄
eslintrc 설정 이후에 파일 전부 맨 첫째줄에 저렇게 조그만 빨간줄이 뜨는데 원인이 뭘까요? 동작은 정상적으로 하고 console 창에도 에러표시가 안나 원인을 모르겠네요 ㅠ
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
PID 제거 관련 질문이 있습니다.
back에서 발견된 문제점 1. 브라우저에서 pm2 kill이 된 상태인데도 정상적으로 서버가 켜져있습니다. 2. 모니터링을 해보면 이미 사용중인 포트라고 합니다. 프론트도 마찬가지 입니다. lsof -i tcp:80 또는 lsof -i tcp:3065 또는 lsof -i tcp:3060으로 조회 후 사용중인 PID를 kill -9 했습니다. 그런데 지워도 지워도 끝이 없습니다. 계속 생성되고 위와 같이 에러가 계속 생깁니다... 그리고 하나더... aplication tap에 cookie가 없습니다..새로고침하면 로그인 또한 계속해서 풀립니다.. 프론트 백 back/app.js if (process.env.NODE_ENV === 'production') { server.use(morgan('combined')); server.use(hpp()); server.use(helmet()); server.use( cors({ origin: 'https://coding-factory.site', credentials: true, }) ); } else { server.use(morgan('dev')); // 프론트에서 백엔드로 어떤 요청을 보냈는가 확인 server.use( cors({ origin: true, credentials: true, }) ); } server.use(cookieParser(process.env.COOKIE_SECRET)); server.use( session({ secret: process.env.COOKIE_SECRET, resave: false, saveUninitialized: false, // proxy: true, // nginx express session cookie cookie: { httpOnly: true, secure: true, domain: process.env.NODE_ENV === 'production' && '.coding-factory.site', }, }) ); // 세션 활성화 saga/index.js // sagas/index.js import { all, fork } from 'redux-saga/effects'; import axios from 'axios'; import userSaga from './user'; import postSaga from './post'; import { backURL } from '../config/config'; axios.defaults.baseURL = backURL; axios.defaults.withCredentials = true; export default function* rootSaga() { yield all([fork(userSaga), fork(postSaga)]); }
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
SignatureDoesNotMatch: The request signature we calculated does not match the signature you provided. Check your key and signing method.
이미지 업로드 중 에러가 발생하여 질문드립니다. 제가 잘못된 정보를 제공했다고 하는 것 같은데 도저히 무엇이 잘못인지를 모르겠습니다...ㅠㅠㅠ 버킷 권한도 잘 설정한 것 같고 .env 파일과 vim으로도 액세스 키 복사하였는데도 그렇습니다.... 코드도 그대로 한 것 같은데 무엇이 문제일까요? AWS.config.update({ accessKeyId: process.env.S3_ACCESS_KEY_ID, secretAccessKey: process.env.S3_SECRET_ACCESS_KEY, region: "ap-northeast-2", }); const upload = multer({ storage: multerS3({ s3: new AWS.S3(), bucket: "react-nodebird-aws-s3", key(req, file, cb) { cb( null, `original/${Date.now()}_${path.basename(file.originalname)}` ); }, }), // 크기 제한을 지정 limits: { fileSize: 20 * 1024 * 1024 }, // 20MB }); router.post( "/images", isLoggedIn, upload.array("image"), async (req, res, next) => { // req.files 는 `image` 라는 파일정보를 배열로 가지고 있음. res.json(req.files.map((v) => v.location)); } ); 에러 검색했을 때 액세스 키에 /나 %가 포함되어 그럴 수 있다하여 그 부분도 확인해보았으나 그대로입니다ㅜㅜㅜ
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
faker 이미지
faker 이미지가 이런식으로 나오는거면 컴터 사양문제일까요??
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
redux 설치 후에 자꾸 internal server error가 뜨네요 ㅜㅜ
이런 에러가 뜨는데 구글링해서 봐도 어떤 부분이 문제가 되는지 잘 모르겠습니다.. ㅜㅜ ▼ configureStore.js import {createWrapper} from 'next-redux-wrapper' import { createStore } from 'redux'; import reducer from '../reducers/' const configureStore = () =>{ const store = createStore(reducer); store.dispatch({ // 얘를 디스패치 하는 순간 // type과 data가 reducer로 전달이 되고, // 다음 state로 바뀌게 됨. type : 'CHANGE_NICKNAME', data : 'jihani' }) return store } const wrapper = createWrapper(configureStore,{ debug : process.env.NODE_ENV === 'development', }); export default wrapper ▼ reducers/index.js import { HYDRATE } from "next-redux-wrapper" const initialState = { // 이걸 작성하려면 초기데이터 구조를 어느정도 잡아놓고 있어야 함. user : { isLoggedIn : false, user : null, signUpData : {}, loginData : {}, }, post : { mainPosts : [], } } export const loginAction = (data) =>{ return { type : 'LOG_IN', data } } export const logoutAction = () =>{ return { type : 'LOG_OUT', } } // 1. state를 바꾸고 싶을 때마다 action을 만들고, // 만들어진 action을 dispatch할 수 있게 된다. ===> 이 말의 뜻은..?! // const changeNickname = { // type : 'CHANGE_NICKNAME', // data : 'jihani' // } // 3. aync action creater // // 2. 매번 state값을 바꿔줄 수도 있는 부분은 // 함수로 뽑아내서 동적데이터 집어넣어서 처리할 수 있음! // action creater const changeNickname = (data) =>{ return { type : 'CHANGE_NICKNAME', // 데이터는 동적으로 처리하기 data, } } changeNickname('Jiphago') StorageEvent.dispatch(changeNickname('쟈니쟈니')) // (이전상태, 액션) => 다음 상태 const rootReducer = (state = initialState, action) =>{ switch(action.type){ case HYDRATE : return { ...state, ...action.payload } case 'LOG_IN' : { return { ...state, user : { ...state.user, isLoggedIn : true, user : action.data, } }; } case 'LOG_OUT' : { return { ...state, user : { ...state.user, isLoggedIn : false, user : null } } } default : return state } } export default rootReducer;
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
cookie 공유 질문있습니다.
1. 로그인 후 새로고침을 하면 로그인이 풀립니다. 프론트 백 2. 브라우저 개발자도구의 application 탭 확인결과 프론트와 백에 Cookie가 있지 않습니다. if (process.env.NODE_ENV === 'production') { server.use(morgan('combined')); server.use(hpp()); server.use(helmet()); server.use( cors({ origin: 'http://www.coding-factory.site', credentials: true, }) ); } else { server.use(morgan('dev')); // 프론트에서 백엔드로 어떤 요청을 보냈는가 확인 server.use( cors({ origin: true, credentials: true, }) ); } ... server.use('/', express.static(path.join(__dirname, 'uploads'))); server.use(express.json()); server.use(express.urlencoded({ extended: true })); server.use(cookieParser(process.env.COOKIE_SECRET)); server.use( session({ secret: process.env.COOKIE_SECRET, resave: false, saveUninitialized: false, // proxy: true, // nginx express session cookie cookie: { httpOnly: true, secure: false, domain: process.env.NODE_ENV === 'production' && '.coding-factory.site', }, }) ); // 세션 활성화 server.use(passport.initialize()); // passport 구동 server.use(passport.session()); // 세션 연결 요청은 잘가며 로그인 시 유저의 정보도 reducer의 state에 잘 담깁니다. 허나 새로고침시 로그인이 풀리고 모든 것이 리셋 됩니다. backURL설정도 확인 결과 문제가 없습니다... 무엇이 문제인지 파악하기가 힘든데 ... 조언 주실수 있을까요? 로그인 시 networt 확인 결과 무슨 경고 창이 뜹니다. 찾아봤지만 해결을 못하고 있습니다...
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
리덕스의 동작원리가 조금 헷갈립니다
useSelector((state)=>state.user.isLoggedIn)의 코드가 잘 이해가 가지 않아서 질문합니다. 동작은 잘됩니다. 하지만 동작이 왜 되는지 잘모르겠습니다. 왜냐하면 state를 import하지 않아서 위 코드에서 state를 어디서 읽어오는지를 아무리 생각해도 잘 모르겠습니다. 나름대로 이유를 생각해봤을때는 _app.js파일에 wrapper.withRedux로 감싸놓아 모든파일에 적용된게 아닐까 생각이 드는데 wrapper.withRedux의 역할도 정확히 모르겠습니다.. 위에 질문과 wrapper.writRedux의 역할을 설명해주실수 있으실까요?
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
제로초님,
제로초님, npm run dev를 쳐서 로컬서버를 실행했는데 Internal Server Error 라고 뜨고 페이지가 안나옵니다ㅠㅠ 혹시 어떤것때문인지 알려주실 수 있으실까요?
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
이미지 업로드 버튼 정상작동
Redux > 더미데이터와 포스트폼 만들기 강좌보면서 그대로 따라했는데 제 컴퓨터에서는 이미지업로드 버튼이 작동이 안되네요 도와주세요
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
페이지 이동시 로그인 문제
안녕하세요 현재 팔로우강의까지 완강했는데 로그인후 홈에서 버튼클릭 클릭으로 페이지 이동은 로그인이 유지되는데, 이동된 페이지에서 새로고침(또는url로 이동시)하면 유저정보가 사라져서 로그아웃이후 로직들이 실행되는데, 이런 것은 앞으로의 강의에서 해결되는지 궁금합니다. 아니면 앞에서 놓친부분있는지해서 질문드립니다. (이동된 페이지에서 다시 메인주소로 이동하면 유저정보 불로오긴합니다. 대신 다른 페이지에서 유저정보를 사용할수 없어...) 감사합니다. 현재상황 ... (로그인후 url주소로 회원가입 페이지 접속가능=>안되게 해놨는데 유저정보가 없어서 접속이 되는 것 같습니다. 회원가입 페이지에서 홈으로 이동하면 다시 유저정보 정상적으로 블러와서 잘 작동 됩니다. )
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
postcss plugin 에 관한 오류가 나타납니다 ㅜ
전 강좌에서 캐루셀 설정후에 npm run dev를 통하여 확인해보려 하는데 ready - started server on 0.0.0.0:3060, url: http://localhost:3060 Unknown error from PostCSS plugin. Your current PostCSS version is 8.4.5, but autoprefixer uses 6.0.23. Perhaps this is the source of the error below. error - ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[2].oneOf[7].use[1]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[2].oneOf[7].use[2]!./node_modules/antd/dist/antd.css BrowserslistError: Unknown browser query `dead` at Array.reduce (<anonymous>) 이러한 에러가 뜹니다 ㅜ 구글링해서 계속 찾아보고있는 중인데 도대체 무슨이유인지 모르겠습니다 ㅜㅜㅜ 부탁으려요
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
프론트 서버가 에러 때문에 실행이 안돼요
탄력적 아이피로 접속했는데 계속 로딩 중이다가 An unexpected error has occurred 라고 뜨네요. 아래가 에러 로그입니다. /root/.pm2/logs/npm-error.log last 15 lines: 0|npm | at processTicksAndRejections (internal/process/task_queues.js:95:5) 0|npm | The above error occurred in task loadPosts 0|npm | created by takeLatest(LOAD_POSTS_REQUEST, loadPosts) 0|npm | created by watchLoadPosts 0|npm | created by postSaga 0|npm | created by rootSaga 0|npm | Tasks cancelled due to error: 0|npm | userSaga 0|npm | TypeError: Cannot read property 'data' of undefined 0|npm | at loadPosts (/home/ubuntu/react_nodebird/front/.next/server/pages/_app.js:356:27) 0|npm | at loadPosts.throw (<anonymous>) 0|npm | at next (/home/ubuntu/react_nodebird/front/node_modules/@redux-saga/core/dist/redux-saga-core.prod.cjs.js:1071:32) 0|npm | at currCb (/home/ubuntu/react_nodebird/front/node_modules/@redux-saga/core/dist/redux-saga-core.prod.cjs.js:1196:7) 0|npm | at /home/ubuntu/react_nodebird/front/node_module s/@redux-saga/core/dist/redux-saga-core.prod.cjs.js:347:5 0|npm | at processTicksAndRejections (internal/process/task_queues.js:95:5) 게시물 불러오는 과정에서 에러가 난 것 같은데 인덱스 사가에서 axios.defaults.baseURL = backUrl; 이거도 추가했는데 무엇이 문제인지를 모르겠네요...
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
리액트 빌드/배포 이후 새로고침
강사님 안녕하세요. 최근에 구매하고 강의 잘 듣고 있습니다.한가지 궁금한 점이 있는데 해결법을 찾지 못하고 있어 문의드립니다.아직 Next 를 이용하지는 않고 있고, 리액트에 코드스플릿으로 개발을 하고 있는데요. 리액트는 소스빌드하고나면 chunk 파일의 이름이 랜덤하게 변경이 되고이러한 chunk 파일들의 목록은 manifest.json 에서 관리가 되고 있는 듯 한데요.소스빌드/배포를 다시 하게 되면 서버에서 chunk 파일들이 모두 새로운 이름으로 다시 생성되다보니배포 이전에 접속한 화면에서 코드스플릿이 일어날 시, chunk 파일을 서버에서 찾지 못하는 현상이 발생하는 것 같습니다. 이럴 때, 새로고침을 해야만 증상을 해결할 수 있는 거 같은데요.혹시 새로고침을 하지 않고도 코드스플릿이 빌드/배포 이후에도 가능하게 할 수 있는 방법이 있을까요?
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
lastId 질문
안녕하세요 제로초님 강의를 계속 반복해서 보고있는데.. lastId를 통해 서버에서 조회해서 값을 보내주는 로직은 이해하였습니다! 그런데 문득 궁금한것이 조회하였을때 lastId에 해당하는 게시물이 db에 삭제된 경우 어떻게 처리를 해주어야 할지 감이 안잡힙니다. 여러 사용자가 있는 사이트인경우 흔히 일어날수 있는 경우일거같은데 .. 답이 떠오르지가 않네요 ㅠㅠ
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
npm start 시 오류가 납니다.
root@ip-172-31-43-165:/home/ubuntu/react_nodebird/back# npm start > react-nodebird-back@1.0.0 start /home/ubuntu/react_nodebird/back > node app internal/modules/cjs/loader.js:905 throw err; ^ Error: Cannot find module './dialects/mysql/data-types' Require stack: - /home/ubuntu/react_nodebird/back/node_modules/sequelize/dist/lib/data-types.js - /home/ubuntu/react_nodebird/back/node_modules/sequelize/dist/lib/utils.js - /home/ubuntu/react_nodebird/back/node_modules/sequelize/dist/lib/sequelize.js - /home/ubuntu/react_nodebird/back/node_modules/sequelize/dist/index.js - /home/ubuntu/react_nodebird/back/models/index.js - /home/ubuntu/react_nodebird/back/routes/post.js - /home/ubuntu/react_nodebird/back/app.js at Function.Module._resolveFilename (internal/modules/cjs/loader.js:902:15) at Function.Module._load (internal/modules/cjs/loader.js:746:27) at Module.require (internal/modules/cjs/loader.js:974:19) at require (internal/modules/cjs/helpers.js:101:18) at Object.<anonymous> (/home/ubuntu/react_nodebird/back/node_modules/sequelize/dist/lib/data-types.js:648:20) at Module._compile (internal/modules/cjs/loader.js:1085:14) at Object.Module._extensions..js (internal/modules/cjs/loader.js:1114:10) at Module.load (internal/modules/cjs/loader.js:950:32) at Function.Module._load (internal/modules/cjs/loader.js:790:12) at Module.require (internal/modules/cjs/loader.js:974:19) { code: 'MODULE_NOT_FOUND', requireStack: [ '/home/ubuntu/react_nodebird/back/node_modules/sequelize/dist/lib/data-types.js', '/home/ubuntu/react_nodebird/back/node_modules/sequelize/dist/lib/utils.js', '/home/ubuntu/react_nodebird/back/node_modules/sequelize/dist/lib/sequelize.js', '/home/ubuntu/react_nodebird/back/node_modules/sequelize/dist/index.js', '/home/ubuntu/react_nodebird/back/models/index.js', '/home/ubuntu/react_nodebird/back/routes/post.js', '/home/ubuntu/react_nodebird/back/app.js' ] } npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! react-nodebird-back@1.0.0 start: `node app` npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the react-nodebird-back@1.0.0 start script. npm ERR! This is probably not a problem with npm. There is likely additional logging output above. npm ERR! A complete log of this run can be found in: npm ERR! /root/.npm/_logs/2022-02-16T13_55_05_438Z-debug.log -------------------------- 데이터타입을 못 찾는다길래 models 파일들 상단에 있는 const DataTypes = require("sequelize"); 이 부분이 잘못 됐나 해서 시퀄라이즈랑 시퀄라이즈-cli도 다시 설치했는데 안돼서 다른 문제인 듯 싶은데 도저히 모르겠네요ㅠㅠ
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
질문이있습니다.
안녕하세요 질문이 있습니다. 1. redux-saga 에서 async/await은 사용못하나요? 2. 그리고 컴포넌트에서 dispatch(리듀서에있는 함수명()) 할때 무슨 원리로 sagas에도 같이 전달되는건가요? 예를들어 dispatch(loginAction()) 하면 그 함수는 리듀서에있는 함수로 보내지는건 이해가가는데 redux-sagas에 로직적으로 상세하게 어떻게 들어가는지 모르겠어요...
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
post 의 PropTypes 검사에서 createAt 는 무엇인가요?
post 의 PropTypes 검사에서 다른 객체나 속성들은 알겠는데 createAt 객체?는 무엇인가요? 영상을 제대로 못본건지 코드에서 못본거같아서요 그리고 제가 me.id 란게 이해가 안가네요ㅠ create action 으로 받은 action.data 의 형태가 {id, password} 인데 만약 받은 아이디 비번이 jin, 0305 라면 data 를 받아올 때도 { jin, 0305 } 형태가 아닌 { id: jin, password: 0305 } 형태로 들어오는 것인가요?