월 17,600원
5개월 할부 시다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
회원가입 중복관련 질문있습니다.
회원가입을 성공시키고 나서 다시들어가면 라우팅이 메인화면에 가져서 회원가입을 하면 signUpDone이 true가 되었다가 false로 변경시켯는데 여기서 같은 아이디로 가입을 하게되면 제로초님이 403에러 뜨게 하신거 처럼 백엔드 작업을 해놓고 같은 아이디로 가입을 햇는데 403에러까지는 정상적으로 나오는데 403에러면 rejected가 실행이 되야 되는거 같은데 fulfilled가 실행이 됩니다. 콘솔 화면에는 정상적으로 에러가 낫다라는게 나오는데도요... 이유를 알수 잇을까 싶습니다.콘솔에 나오는 것은 아래 이미지구제 리덕스툴킷 코드는 아래와 같습니다.import { createAsyncThunk,createSlice } from "@reduxjs/toolkit"; import * as I from "types" import { authAxios, baseAxios } from "utils/instance"; interface UserInitialState { // 회원가입 signUpLoding: boolean; signUpDone: boolean; signUpError: null | undefined | string; resetSignUpDone: boolean; } const initialState: UserInitialState = { // 회원가입 signUpLoding: false, signUpDone: false, signUpError: null, resetSignUpDone: false, }; // 회원가입 export const signUp = createAsyncThunk("user/signup", async (data:I.SignUp) => { const response = await baseAxios.post("/user", data); return response; }); const UserReducer = createSlice({ name: "user", initialState, reducers: { resetSignUpDone:(state)=>{ state.signUpDone = false } }, extraReducers: (builder) => builder // 회원가입 .addCase(signUp.pending, (draft) => { draft.signUpLoding = true; draft.signUpError = null; draft.signUpDone = false; }) .addCase(signUp.fulfilled, (draft) => { draft.signUpLoding = false; draft.signUpDone = true; }) .addCase(signUp.rejected, (draft, action) => { draft.signUpLoding = false; draft.signUpDone = false; draft.signUpError = action.error.message; }), }); export const { resetSignUpDone } = UserReducer.actions; export default UserReducer
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
라우팅관련질문입니다.
회원가입에 성공을 한다 라고 하면 메인페이지로 이동하게 되는데 이상태에서 다시 회원가입페이지로 들어가려고 하면 signUpDone이라는 애가 true를 기억을 하고 잇어서 회원가입페이지에 머무는것이 아니라 다시 메인페이지로 들어가지는데 처음에 회원가입성공을 시키고 나서 signUpDone의 값을 다시 초기화 시켜야 되는거겟죠?
- 해결됨[리뉴얼] React로 NodeBird SNS 만들기
mysql짜는데 고민이 잇습니다.
제가 강의를 보면서 블로그를 만들고 잇는데 회원가입시에는 이미지를 않넣고 회원수정할때 이미지를 추가하는 형식으로 작업을 하려고 하는데 이때 models에서 const User = sequelize.define("User", { email:{ type: DataTypes.STRING(30), // 필수값 allowNull:false, // 중복되면 안되는 값 unique:true, }, name: { type: DataTypes.STRING(20), allowNull: false, }, nickName: { type: DataTypes.STRING(20), allowNull: false, unique: true, }, password: { type: DataTypes.STRING(60), allowNull: false, }, profileImage: { type: DataTypes.STRING(200), allowNull: true, }, profileImage를 저렇게 추가하는게 맞는건지 아니면 associate에서 관계짜서 테이블을 짜는건지 궁금합니다.
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
가비아 도메인 연결 후 프론트 주소 페이지가 응답하지 않습니다! "MyDocument.getInitialProps()" should resolve to an object. But found "undefined" instead.
안녕하세요! 제로초님!! [리뉴얼] React로 NodeBird SNS 만들기섹션 6. AWS에 배포하기: 도메인 연결하기 강의까지 수강한 수강생 입니다!가비아 도메인 연결 후 프론트 주소 페이지가 응답이 되지 않아 질문 글을 올립니다!※ 질문 글이 굉장히 깁니다! 항상 강의 잘 보고 있습니다!! ※ 아래 사항을 먼저 확인한 후에 질문을 올렸습니다!1. 저의 경우 도메인을 'nodebird.xyz'로 설정하였습니다.(프론트 : http://nodebird.xyz, 백엔드 : http://api.nodebird.xyz)2. 가비아 네임서버 자리에 Route 53의 nodebird.xyz 네임서버를 순서대로 입력하였습니다!3. 윈도우 서비스의 MySQL 서비스를 실행한 상태입니다.4. 백엔드 주소는 접속이 되어 'hello express'가 화면에 표시됨을 확인하였습니다!5. npm은 6.14.18 버전, node는 v14.21.3 입니다.6. about.js 파일은 잠시 다른 곳으로 옮겨두었습니다.7. 프론트와 백엔드의 인스턴스와 탄력적 IP가 각각 한 쌍으로 연결되어 있으며,바뀐 인스턴스로 우분투 프론트 서버와 백엔드 서버에서 작업하였습니다!(프론트 탄력적 IP : 52.78.52.73 백엔드 탄력적 IP : 43.201.232.110)8. 에러 발생을 막기 위해 sudo npx pm2 kill 명령어로 pm2을 지우고s앞에 sudo를 붙여 git pull, start, reload, list, monit 순으로 작업하였습니다.(메모리 부족으로 빌드만 로컬 프론트에서 진행하였습니다.)9. 프론트, 백엔드 모두 sudo npx pm2 list 명령어를 터미널에 입력했을 때status가 online인 걸 확인하였습니다. 아래는 이전 강의인 프론트 서버 배포하기 강의까지 진행했을 때 프론트 페이지 모습입니다!콘솔 쪽에 아래와 같은 에러도 나고, CSS도 깨지지만 페이지 자체는 접속이 가능했습니다!다음 강의를 진행하며 해결할 수도 있었기에 넘어갔습니다.Failed to load resource: the server responded with a status of 404 (Not Found)(리소스를 로드하지 못했습니다. 서버가 404(찾을 수 없음)의 상태로 응답했습니다,This page failed to load a stylesheet from a URL.이 페이지는 URL에서 스타일시트를 로드하지 못했습니다.that cookie was blocked because it's domain attribute was invalid.해당 쿠키의 도메인 특성이 잘못되었기 때문에 차단되었습니다.)도메인을 연결하기 위해 로컬 프론트, 로컬 백엔드 주소 부분을 nodebird.xyz 도메인으로 수정하였습니다.하지만 도메인 수정 후 아래처럼 프론트 페이지가 응답하지 않습니다!문제를 해결하기 위해 첫 번째로 콘솔 로그부터 확인하였습니다.아래는 리덕스와 네트워크 탭 사진입니다.Failed to load resource: the server responded with a status of 404 (Not Found)(리소스를 로드하지 못했습니다. 서버가 404(찾을 수 없음)의 상태로 응답했습니다,F12를 눌러 개발자 도구를 키면 화면이 매우 빠른 속도로 계속 깜빡이며개발자 도구 화면이 계속 닫혀 정상적인 확인이 어려웠습니다.리덕스 탭은 위의 창을 닫아도 계속 뜹니다. 계속 페이지가 새로 고침 되는 것으로 추정합니다. 문제를 해결하기 위해 우분투 프론트 터미널을 확인하였습니다.TypeError: Cannot read property 'find' of undefined 에러와MyDocument.getInitialProps() undefined 에러 두 개를 확인하였습니다. 더 정확한 에러 확인을 위해 우분투 프론트 터미널에'sudo npx pm2 logs --err --lines 50' 명령어를 입력하였습니다.Error: "MyDocument.getInitialProps()" should resolve to an object.But found "undefined" instead. 오류: "MyDocument.getInitialProps()"가 개체로 확인되어야 합니다.대신 "undefined"가 발견되었습니다.(화면 좌측을 보시면 .next 일부 모듈이 git add가 가능한 상태임을 확인할 수 있습니다..gitignore 파일에 .next를 쓰고, 캐시를 지워도 해결이 되지 않아 일단은 그대로 두었습니다!) MyDocument.getInitialProps 문제를 해결하기 위해커뮤니티와 구글링을 통해 아래 사이트를 참고하였습니다.노드버드 커뮤니티https://www.inflearn.com/questions/154677/error-quot-mydocument-getinitialprops-quot-gt-undefined스택 오버플로우 사이트https://stackoverflow.com/questions/61967960/getinitialprops-should-resolve-to-an-object-but-found-undefined-instead노드버드 커뮤니티에 같은 에러가 발생한 수강생 분 글을 토대로제로초님의 노드버드 깃허브 (Ch6, Ch7, http 등)를 확인하였습니다. 아래는 가장 의심되는 코드입니다!front/config/config.js// 실제 백엔드 주소 내보내기 export const backUrl = 'http://api.nodebird.xyz'; back/config/config.js// 모건(morgan) : 요청과 응답에 대한 정보를 콘솔에 기록하는 모듈 /* ---------- 배포 모드일 환경일 때 설정 ---------- */ if (process.env.NODE_ENV === 'production') { // combined : 로그가 자세해져서 실제 해당 접속자의 IP를 알 수 있다. app.use(morgan('combined')); // hpp : Express의 중복 이름 파라미터 공격을 방어한다. app.use(hpp()); // helmet : HTTP 헤더를 자동 설정을 통해 외부 공격으로부터 보호한다. app.use(helmet()); // 미들웨어 연결 app.use(cors({ /* 배포용에서는 실제 프론트 주소에서 요청했을 때만 CORS 허용하기 */ origin: 'http://nodebird.xyz', /* 사용자 인증이 필요한 쿠키 전달 허용하기 */ credentials: true, })); /* ---------- 개발 모드 환경일 때 설정 ---------- */ } else { // dev : 백엔드 디버깅 app.use(morgan('dev')); // 미들웨어 연결 app.use(cors({ /* 개발용에서는 요청을 보낸 주소의 요청만 CORS 허용하기 */ origin: true, /* 사용자 인증이 필요한 쿠키 전달 허용하기 */ credentials: true, })); }; . . . // 쿠키와 세션 미들웨어 연결 app.use(cookieParser(process.env.COOKIE_SECRET)); app.use(session({ saveUninitialized: false, resave: false, secret: process.env.COOKIE_SECRET, /* ---------- 쿠키 옵션(Cookie Option) ---------- */ cookie: { httpOnly: true, // true로 설정 시 JS로 쿠키에 접근하지 못하도록 막는다. secure: false, // https 적용 시 true로 설정할 예정 /* 쿠키의 도메인이 배포 환경이면 도메인 앞에 '.'을 붙이기 */ // 점을 붙이면 api.nodebird.xyz와 nodebird.xyz 사이에서 쿠키 공유가 된다. domain: process.env.NODE_ENV === 'production' && '.nodebird.xyz' }, })); front/pages/_document.js// 서버사이드 렌더링(SSR) : getInitialProps 사용 export default class MyDocument extends Document { static async getInitialProps(ctx) { const sheet = new ServerStyleSheet(); const originalRenderPage = ctx.renderPage; /* ---------- React 렌더링 로직을 동기적으로 실행 ---------- */ try { ctx.renderPage = () => originalRenderPage({ /* enhanceApp으로 원래 app기능에 document 기능에다가 stylesheet가 styled-component들을 서버사이드 렌더링할 수 있게 해준다. */ enhanceApp: (App) => (props) => sheet.collectStyles(<App {...props} />) }); // 부모 'getInitialProps'를 실행(이제 사용자 정의 'renderPage'가 포함된다.) const initialProps = await Document.getInitialProps(ctx); return { ...initialProps, styles: ( <> {initialProps.styles} {sheet.getStyleElement()} </> ), }; /* ---------- 에러 캐치 ---------- */ } catch (error) { console.error(error); /* ---------- try 블록이 종료되면 무조건 실행 ---------- */ } finally { sheet.seal(); } } 제가 입력한 코드에 문제가 있지 않을까 추측하여노드버드 깃허브와 제 코드를 비교하였으나 해결책을 찾지 못하였습니다...어떻게 하면 도메인 연결 후 프론트 페이지를 응답하게 만들 수 있을까요?혹시 관련 키워드가 있다면 알려주실 수 있을까요?질문 글이 많이 김에도 끝까지 읽어주셔서 감사합니다 제로초님!++++혹시 모르니 네임 서버 상태도 같이 올립니다!아래는 저의 Route 53, Gabia 네임서버 현재 상태입니다!
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
어드민 설정할 때 localhost 안되는 문제
질문1) 선생님 forestadmin 에서 host를 localhost로치니까 Database must be publicly accessible. 이렇게뜨면서 다음으로 안넘어가는데요, 그럼 백엔드랑, mysql host를 바꾼다음에 foreast에서 바꾼 것과 맞춰줘야 하나요?, 아니면 그냥 localhost1 이렇게 기존 host와 다른이름을 써도 되나요?, 질문2forest에 나온 명령어를 ch7에 입력하셨는데 그러면 저는 react-nodebird안에 prepare가 아닌 다른 폴더를 새로 추가해서 명령어 입력 하면 될까요?
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
foreastadmin
선생님 안녕하세요foreast에서 프로젝트 세팅할 때 수업영상에 안나온 부분을 체크해야 다음 화면으로 넘어갈 수 있어서요!검색해봤는데 이렇게나와있는데 TLS mode에서 requireTLS선택하고 connect via SSH 활성화 안하는거 맞는지 궁금합니다 Prefer TLS (TLS 선호): 이 옵션은 서버가 TLS를 지원하면 TLS를 사용하고, TLS를 지원하지 않으면 암호화되지 않은 연결로 대체합니다. 보안이 중요한 운영 환경에서는 일반적으로 권장되지 않습니다. 이는 필요한 보안 수준을 제공하지 못할 수 있기 때문입니다.Disable TLS (TLS 비활성화): 이 옵션은 TLS를 사용하지 않고 암호화되지 않은 연결만을 사용합니다. 개발이나 테스트 환경에서는 문제가 되지 않을 수 있으나, 민감한 정보를 다루거나 외부에 노출되는 운영 환경에서는 매우 위험할 수 있습니다.Require TLS (TLS 필수): 이 옵션은 TLS 연결만을 요구하며, TLS를 지원하지 않는 서버와는 연결을 시도하지 않습니다. 보안이 중요한 데이터를 다루거나, 개인 정보 보호 규정을 준수해야 하는 운영 환경에서 권장됩니다.
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
nginx 후 Front(502 Bad Gateway), back(welcome to nginx) 라고만 나오는 문제
안녕하세요 선생님 front, back nginx 한 뒤로둘다 https라고 바뀌고 인증서도 있긴한데,Front(502 Bad Gateway)라고 나오고back(welcome to nginx) 라고만 나오는 상태입니다.(설치는 Nginx Ubuntu20보고 했습니다https://certbot.eff.org/instructions?ws=nginx&os=ubuntufocal&tab=standard)문제1)그래서 첫번째 문제로 back에서 sudo npx pm2 logs --err --lines 200를 해보았을 땐 아래와 같은 경고가 나왔습니다.0|app | Warning: connect.session() MemoryStore is not 0|app | designed for a production environment, as it will leak 0|app | memory, and will not scale past a single process.질문1)찾아보니까 express-session 미들웨어의 기본 메모리 저장소(MemoryStore)를 사용할 때 MemoryStore가 개발 환경에서는 적합하지만, 실제 프로덕션 환경에서는 메모리 누수 문제와 단일 프로세스 제한으로 인해 적합하지 않아 프로덕션 환경에서는 Redis, MongoDB 등의 세션 저장소를 사용하라는데, 그럼 front 화면이 나오는건지 궁금합니다,, 문제2)그리고 두번째 문제로 back에서 tail /var/log/nginx/error.log를 했을 땐 아래와 같은 에러가 나왔습니다. ubuntu@ip-172-31-12-59:~/react_nodebird/back$ tail /var/log/nginx/error.log 2024/01/24 12:19:54 [warn] 420260#420260: conflicting server name "api.luckyhaejin.com" on 0.0.0.0:80, ignored 2024/01/24 12:19:54 [notice] 420260#420260: signal process started질문2)찾아보니 Nginx 설정 파일 내에서 api.luckyhaejin.com이라는 서버 이름(server name)이 80 포트에서 두 번 이상 선언되었음을 나타내는 에러라는데 어떤 부분이 잘못되었는지 잘 모르겠어서 어딜 확인하면 좋을지 문의 드립니다. 질문3)강의에서 Ubuntu서버만 바꿔주고 로컬은 바뀌는 부분 이없는거같아서 Ubuntu서버에서만 바꿔줬는데, 그럼 로컬에도 Ubuntu에 설치한 것 다 포함해서 코드까지 다 바꿔준 뒤 Ubuntu에서 git pull 다시 해줘야할까요,,? 현재 설정된 내용)front=> /etc/nginx/nginx.conf => server관련(글을 옮겨적으니까 들여쓰기 해서 정리 한게 코드가 전부 합쳐져서 사진으로 올립니닷,,)front/pacakage.json에서 start부분에 3060 잘 되어있음front => /etc/nginx/nginx.conf front/config/config.js에서 backUrl설정 잘 되어있음back => /etc/nginx/nginx.confback => app.js(사진이 보기 편하실거같아서 코드랑 둘다올려욧)const express = require('express'); const cors = require('cors'); const session = require('express-session'); const cookieParser = require('cookie-parser'); const passport = require('passport'); const dotenv = require('dotenv'); const morgan = require('morgan'); const postRouter = require('./routes/post'); const postsRouter = require('./routes/posts'); const userRouter = require('./routes/user'); const hashtagRouter = require('./routes/hashtag'); const db = require('./models'); const passportConfig = require('./passport'); const path = require('path'); const hpp = require('hpp'); const helmet = require('helmet'); dotenv.config(); const app = express(); db.sequelize.sync() .then(() => { console.log('DB 연결 성공'); }).catch(console.error); passportConfig(); if(process.env.NODE_ENV === 'production'){ app.use(morgan('combined')); app.use(hpp()); app.use(helmet()); app.use(cors({ origin: 'https://luckyhaejin.com', credentials: true })); } else { app.use(morgan('dev')); } 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, //일단 false로 하고 https적용할 땐 ture domain: process.env.NODE_ENV = 'production' && '.luckyhaejin.com' //도메인 사용할 경우 }, })); app.use(passport.initialize()); app.use(passport.session()); app.get('/', (req, res) =>{ res.send('hello express'); }); app.use('/posts', postsRouter); app.use('/post', postRouter); app.use('/user', userRouter); app.use('/hashtag', hashtagRouter); app.listen(3065, () => { console.log('서버 실행 중'); }); back => /etc/nginx/nginx.conf사용중인 Os) macOS
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
이미지 업로드와 관련하여 코드 변경해도 되는지
안녕하세요 선생님 이미지 업로드와 관련한 질문 사항인데요, 도메인 연결 후 이미지 업로드시 이미지가 화면에 안뜨고, 서버에서 아래와 같은 타입 에러가 발생해서 에러 원인을 검색해보았는데, 버전을 2에서 3으로 업그레이드 한 뒤 코드를 수정한 뒤 이미지는 화면에 떴는데, 게시글이 안올라가서 보니까 이미지 Url길이가 너무 길어서 발생한 문제인것 같아서 image테이블에 src컬럼 길이 1000으로 변경하니까 에러가 해결되긴 했는데, 이렇게 변경해도 될까욧?백엔드 에러로그)0|app | Please migrate your code to use AWS SDK for JavaScript (v3). 0|app | For more information, check the migration guide at https://a.co/7PzMCcy 0|app | (Use `node --trace-warnings ...` to show where the warning was created) 0|app | TypeError: this.client.send is not a function 0|app | at _Upload.__uploadUsingPut (/home/ubuntu/react_nodebird/back/node_modules/@aws-sdk/lib-storage/dist-cjs/index.js:217:53) 0|app | at _Upload.__doConcurrentUpload (/home/ubuntu/react_nodebird/back/node_modules/@aws-sdk/lib-storage/dist-cjs/index.js:280:29) 0|app | at process.processTicksAndRejections (node:internal/process/task_queues:95:5) 0|app | at async Promise.all (index 0) 0|app | at async _Upload.__doMultipartUpload (/home/ubuntu/react_nodebird/back/node_modules/@aws-sdk/lib-storage/dist-cjs/index.js:366:5) 0|app | at async _Upload.done (/home/ubuntu/react_nodebird/back/node_modules/@aws-sdk/lib-storage/dist-cjs/index.js:190:12)문의1)back/package.json 버전 => aws-sdk 2버전에서 aws-sdk/client-s3 3버전으로 업그레이드{ "name": "react-nodebird-back", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "start": "cross-env NODE_ENV=production pm2 start app.js" }, "author": "luckyhaejin", "license": "ISC", "dependencies": { "@aws-sdk/client-s3": "^3.496.0", "aws-sdk": "^2.1538.0", "bcrypt": "^5.1.1", "cookie-parser": "^1.4.6", "cors": "^2.8.5", "cross-env": "^7.0.3", "dotenv": "^16.3.1", "express": "^4.18.2", "express-session": "^1.17.3", "helmet": "^7.1.0", "hpp": "^0.2.3", "morgan": "^1.10.0", "multer": "^1.4.5-lts.1", "multer-s3": "^3.0.1", "mysql2": "^3.6.5", "passport": "^0.7.0", "passport-local": "^1.0.0", "pm2": "^5.3.0", "sequelize": "^6.35.2", "sequelize-cli": "^6.6.2" }, "devDependencies": { "nodemon": "^2.0.22" } } 수정한 후 post.js 이미지 관련 코드const express = require('express'); const {Post, Image, Comment, User, Hashtag} = require('../models'); const {isLoggedIn} = require('./middlewares'); const router = express.Router(); const multer = require('multer'); const path = require('path'); const fs = require('fs'); const multerS3 = require('multer-s3'); // const AWS = require('aws-sdk'); try { fs.accessSync('uploads'); } catch(error) { console.error('uploads폴더가 없으므로 생성합니다.'); fs.mkdirSync('uploads'); } // AWS.config.update({ // accessKeyId: process.env.S3_ACCESS_KEY_ID, // secretAccessKey: process.env.S3_SECRET_ACCESS_KEY, // region: 'ap-northeast-2', // }); const { S3Client } = require('@aws-sdk/client-s3'); const s3Client = new S3Client({ credentials: { 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(), s3: s3Client, bucket: 'react-saga-nodebird-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'),(req, res, next) => { //POST /post/images res.json(req.files.map((v) => v.location)); }); 게시글 업로드시 에러 로그)Error 0|app | at Query.run (/home/ubuntu/react_nodebird/back/node_modules/sequelize/lib/dialects/mysql/query.js:52:25) 0|app | at /home/ubuntu/react_nodebird/back/node_modules/sequelize/lib/sequelize.js:315:28 0|app | at process.processTicksAndRejections (node:internal/process/task_queues:95:5) 0|app | at async MySQLQueryInterface.insert (/home/ubuntu/react_nodebird/back/node_modules/sequelize/lib/dialects/abstract/query-interface.js:308:21) 0|app | at async Image.save (/home/ubuntu/react_nodebird/back/node_modules/sequelize/lib/model.js:2490:35) 0|app | at async Image.create (/home/ubuntu/react_nodebird/back/node_modules/sequelize/lib/model.js:1362:12) 0|app | at async /home/ubuntu/react_nodebird/back/routes/post.js:60:31 { 0|app | name: 'SequelizeDatabaseError', 0|app | parent: Error: Data too long for column 'src' at row 1 0|app | at Packet.asError (/home/ubuntu/react_nodebird/back/node_modules/mysql2/lib/packets/packet.js:728:17) 0|app | at Execute.execute (/home/ubuntu/react_nodebird/back/node_modules/mysql2/lib/commands/command.js:29:26) 0|app | at Connection.handlePacket (/home/ubuntu/react_nodebird/back/node_modules/mysql2/lib/connection.js:481:34) 0|app | at PacketParser.onPacket (/home/ubuntu/react_nodebird/back/node_modules/mysql2/lib/connection.js:97:12) 0|app | at PacketParser.executeStart (/home/ubuntu/react_nodebird/back/node_modules/mysql2/lib/packet_parser.js:75:16) 0|app | at Socket.<anonymous> (/home/ubuntu/react_nodebird/back/node_modules/mysql2/lib/connection.js:104:25) 0|app | at Socket.emit (node:events:518:28) 0|app | at addChunk (node:internal/streams/readable:559:12) 0|app | at readableAddChunkPushByteMode (node:internal/streams/readable:510:3) 0|app | at Readable.push (node:internal/streams/readable:390:5) { 0|app | code: 'ER_DATA_TOO_LONG', 0|app | errno: 1406, 0|app | sqlState: '22001', 0|app | sqlMessage: "Data too long for column 'src' at row 1", 0|app | sql: 'INSERT INTO `images` (`id`,`src`,`createdAt`,`updatedAt`) VALUES (DEFAULT,?,?,?);', 0|app | parameters: [ 0|app | 'https://react-saga-nodebird-s3.s3.ap-northeast-2.amazonaws.com/original/1705984124288_%C3%A1%C2%84%C2%89%C3%A1%C2%85%C2%B3%C3%A1%C2%84%C2%8F%C3%A1%C2%85%C2%B3%C3%A1%C2%84%C2%85%C3%A1%C2%85%C2%B5%C3%A1%C2%86%C2%AB%C3%A1%C2%84%C2%89%C3%A1%C2%85%C2%A3%C3%A1%C2%86%C2%BA%202024-01-23%20%C3%A1%C2%84%C2%8B%C3%A1%C2%85%C2%A9%C3%A1%C2%84%C2%92%C3%A1%C2%85%C2%AE%2012.20.36.png', 0|app | '2024-01-23 04:33:31', 0|app | '2024-01-23 04:33:31' 0|app | ] 0|app | }, 0|app | original: Error: Data too long for column 'src' at row 1 0|app | at Packet.asError (/home/ubuntu/react_nodebird/back/node_modules/mysql2/lib/packets/packet.js:728:17) 0|app | at Execute.execute (/home/ubuntu/react_nodebird/back/node_modules/mysql2/lib/commands/command.js:29:26) 0|app | at Connection.handlePacket (/home/ubuntu/react_nodebird/back/node_modules/mysql2/lib/connection.js:481:34) 0|app | at PacketParser.onPacket (/home/ubuntu/react_nodebird/back/node_modules/mysql2/lib/connection.js:97:12) 0|app | at PacketParser.executeStart (/home/ubuntu/react_nodebird/back/node_modules/mysql2/lib/packet_parser.js:75:16) 0|app | at Socket.<anonymous> (/home/ubuntu/react_nodebird/back/node_modules/mysql2/lib/connection.js:104:25) 0|app | at Socket.emit (node:events:518:28) 0|app | at addChunk (node:internal/streams/readable:559:12) 0|app | at readableAddChunkPushByteMode (node:internal/streams/readable:510:3) 0|app | at Readable.push (node:internal/streams/readable:390:5) { 0|app | code: 'ER_DATA_TOO_LONG', 0|app | errno: 1406, 0|app | sqlState: '22001', 0|app | sqlMessage: "Data too long for column 'src' at row 1", 0|app | sql: 'INSERT INTO `images` (`id`,`src`,`createdAt`,`updatedAt`) VALUES (DEFAULT,?,?,?);', 0|app | parameters: [ 0|app | 'https://react-saga-nodebird-s3.s3.ap-northeast-2.amazonaws.com/original/1705984124288_%C3%A1%C2%84%C2%89%C3%A1%C2%85%C2%B3%C3%A1%C2%84%C2%8F%C3%A1%C2%85%C2%B3%C3%A1%C2%84%C2%85%C3%A1%C2%85%C2%B5%C3%A1%C2%86%C2%AB%C3%A1%C2%84%C2%89%C3%A1%C2%85%C2%A3%C3%A1%C2%86%C2%BA%202024-01-23%20%C3%A1%C2%84%C2%8B%C3%A1%C2%85%C2%A9%C3%A1%C2%84%C2%92%C3%A1%C2%85%C2%AE%2012.20.36.png', 0|app | '2024-01-23 04:33:31', 0|app | '2024-01-23 04:33:31' 0|app | ] 0|app | }, 0|app | sql: 'INSERT INTO `images` (`id`,`src`,`createdAt`,`updatedAt`) VALUES (DEFAULT,?,?,?);', 0|app | parameters: [ 0|app | 'https://react-saga-nodebird-s3.s3.ap-northeast-2.amazonaws.com/original/1705984124288_%C3%A1%C2%84%C2%89%C3%A1%C2%85%C2%B3%C3%A1%C2%84%C2%8F%C3%A1%C2%85%C2%B3%C3%A1%C2%84%C2%85%C3%A1%C2%85%C2%B5%C3%A1%C2%86%C2%AB%C3%A1%C2%84%C2%89%C3%A1%C2%85%C2%A3%C3%A1%C2%86%C2%BA%202024-01-23%20%C3%A1%C2%84%C2%8B%C3%A1%C2%85%C2%A9%C3%A1%C2%84%C2%92%C3%A1%C2%85%C2%AE%2012.20.36.png', 0|app | '2024-01-23 04:33:31', 0|app | '2024-01-23 04:33:31' 0|app | ] 0|app | } models/image -> src컬럼 길이 200에서 1000으로 변경 const DataTypes = require('sequelize'); const {Model} = DataTypes; module.exports = class Image extends Model { static init(sequelize) { return super.init({ //id가 기본적으로 들어있다 src: { type:DataTypes.STRING(1000), allowNull:false }, },{ modelName: 'Image', tableName: 'images', charset: 'utf8', collate: 'utf8_general_ci', sequelize }); } static associate(db) { db.Image.belongsTo(db.Post); } }
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
질문)도메인 연결 후 주소에 추가된 물음표
안녕하세요 선생님 도메인 연결을 했는데, 처음에 Front 도메인을 입력한 뒤 ?가 붙는 원인을 어떻게 알 수 있는지 궁급합니다. 도메인 연결 후 login후 Network => Headers-> RequestURL, Access-Control-Allow-Orign, SetCookie, Application->Cookies에는 도메인주소와 쿠키가 있고, 백엔드 도메인 입력시에는 물음표 안생깁니다. 둘다 화면은 잘 나옵니다.백엔드 도메인 입력시)프론트 도메인 입력시)로그인시 network, application)
- 해결됨[리뉴얼] React로 NodeBird SNS 만들기
크롬에서 프론트 서버 구동 시 프론트 IP 주소 페이지 응답이 안됩니다!
안녕하세요! 제로초님[리뉴얼] React로 NodeBird SNS 만들기 강의의섹션 6. AWS에 배포하기: 프론트 서버 배포하기 강의를 진행 중인 수강생 입니다!우분투 프론트 서버는 구동이 되지만 프론트 IP 주소 사이트가 페이지 응답이 되지 않아 질문 올립니다!'로컬 리소스를 로드할 수 없습니다' 에러가 콘솔에 출력 되었지만 새로 고침을 하면서 없어졌습니다!Not allowed to load local resource: chrome-error://chromewebdata/#buttons사전에 아래 사항을 정확히 확인 후 질문을 올립니다!1. EC2 프론트 서버와 백엔드 인스턴스 상태는 잘 실행 중이며,프론트 퍼블릭 IPv4가 틀리지 않았는지 확인하였습니다.2. 로컬 프론트 경로에서 npm run build를 하였습니다.-> 저의 경우 우분투 프론트 서버에서 npm run build를 하면 메모리가 부족해 멈춤 현상이 나타납니다.-> 그래서 .next를 Git LFS로 관리하였고, 로컬 프론트에서 빌드에 성공하였습니다.3. 윈도우 서비스에서 MySQL 서비스를 실행한 상태입니다.4. 우분투 백엔드 서버 실행에 성공한 상태입니다!5. 로컬 프론트 경로에서 node_module과 .next를 삭제했다가 npm i와 build를 통해 다시 만들었습니다.6. about.js는 잠시 바탕 화면으로 옮겼습니다.우분투 프론트 서버에 아래 명령어를 순서대로 입력하였습니다.(우분투 프론트 서버의 경우 sudo를 붙이지 않아도 되었습니다.)sudo git pull>>> 메모리 부족 문제로 npm run build는 로컬 프론트에서 진행하고 아래 작업을 마저 진행했습니다. <<<sudo npx pm2 reload allnpx pm2 start npm -- startsudo npx pm2 monit우분투 프론트 서버가 실행된 상태입니다.우분투 백엔드 서버에 아래 명령어를 순서대로 입력하였습니다.sudo git pullsudo npx pm2 reload allsudo npx pm2 monit우분투 백엔드 서버가 실행된 상태입니다.back/app.js실제 프론트 서버 주소의 CORS 요청을 허용하였습니다.cors 요청 주소들을 변수로 빼서 작성하였습니다. // 로컬 프론트 서버, 노드버드 닷컴, 실제 프론트 서버 URL IP 주소 요청만 허용 const corsOkUrl = ['http://localhost:3000', 'nodebird.com', 'http://52.79.86.100' ]; . . . // 미들웨어 연결 app.use(cors({ /* 특정 url에서 요청했을 때만 cors 허용 */ origin: corsOkUrl, /* 사용자 인증이 필요한 쿠키 전달 허용 */ credentials: true, })); . . . // http://54.180.201.249 : 실제 백엔드 서버 URL IP 주소인 80번 포트로 서버 실행 app.listen(80, () => { console.log('서버 실행 중!'); }); back/config/config.js실제 백엔드 주소가 들어가는 부분 코드에 모두 'backUrl'을 변수로 넣어주었습니다.// 실제 백엔드 서버 URL IP 주소 내보내기 export const backUrl = 'http://54.180.201.249'; front와 back의 package.json이 문제를 해결하기 위해 먼저 노드버드 커뮤니티를 살펴보았습니다.https://www.inflearn.com/course/lecture?courseSlug=%EB%85%B8%EB%93%9C%EB%B2%84%EB%93%9C-%EB%A6%AC%EC%95%A1%ED%8A%B8-%EB%A6%AC%EB%89%B4%EC%96%BC&unitId=49016&category=questionDetail&tab=community&q=164898저와 비슷하게 프론트 서버 구동에 성공하였으나 페이지 응답이 되지 않는 작성자 분이 계셨습니다.글과 똑같이 우분투 프론트 서버 터미널에서 ctrl+c로 sudo npx pm2 monit을 끄고pm2 list를 입력하면 status가 errored 임을 확인할 수 있었습니다.보안 그룹에서 http 80번 포트가 열려있음에도 status는 errored 였습니다.Not allowed to load local resource 에러 해결,우분투 프론트 서버 페이지 응답 등의 키워드로 검색하였으나이미지 외부 경로 지정하기 관련 글들만 있어 방법이 맞는지 의심스럽습니다...프론트 서버 구동 시 어떻게 하면 페이지 응답이 안되는 문제를 해결할 수 있을까요?질문 글이 많이 김에도 끝까지 읽어주셔서 감사합니다제로초님 강의 항상 잘 보고 있습니다!
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
이미지 업로드 안되는 문제
선생님 안녕하세요도메인 대신 탄력적 ip2개를 front, back인스턴스에 연결해서 사용중인데요, 로그인이 되지 않았습니다.라는 메세지가 뜨며 이미지 업로드가 안되서 안되 상황입니다. isAuthenticated가 false가 되는 원인을 알고 이 문제를 해결하고 싶어 문의드립니다. 사용중인 ip)back13.209.144.99front13.125.122.77현재 화면)monit에 uploadImages관련 상태 결과 falseerrorlog 전체)에러로그 일부)0|npm | cause: Error: socket hang up 0|npm | at connResetException (node:internal/errors:787:14) 0|npm | at Socket.socketOnEnd (node:_http_client:519:23) 0|npm | at Socket.emit (node:events:530:35) 0|npm | at endReadableNT (node:internal/streams/readable:1696:12) 0|npm | at process.processTicksAndRejections (node:internal/process/task_queues:82:21) { 0|npm | code: 'ECONNRESET' 0|npm | } 0|npm | } 0|npm | TypeError: Cannot read properties of undefined (reading 'data') 0|npm | at loadMyInfo (/home/ubuntu/react_nodebird/front/.next/server/pages/_app.js:531:27) 0|npm | at loadMyInfo.throw (<anonymous>) 0|npm | at next (/home/ubuntu/react_nodebird/front/node_modules/@redux-saga/core/dist/redux-saga-core.prod.cjs.js:1070:32) 0|npm | at currCb (/home/ubuntu/react_nodebird/front/node_modules/@redux-saga/core/dist/redux-saga-core.prod.cjs.js:1195:7) 0|npm | at /home/ubuntu/react_nodebird/front/node_modules/@redux-saga/core/dist/redux-saga-core.prod.cjs.js:346:5 0|npm | at process.processTicksAndRejections (node:internal/process/task_queues:95:5) 0|npm | The above error occurred in task loadMyInfo 0|npm | created by takeLatest(LOAD_MY_INFO_REQUEST, loadMyInfo) 0|npm | created by watchLoadMyInfo 0|npm | created by userSaga 0|npm | created by rootSaga 0|npm | Tasks cancelled due to error: 0|npm | postSaga 0|npm | TypeError: Cannot read properties of undefined (reading 'data') 0|npm | at loadMyInfo (/home/ubuntu/react_nodebird/front/.next/server/pages/_app.js:531:27) 0|npm | at loadMyInfo.throw (<anonymous>) 0|npm | at next (/home/ubuntu/react_nodebird/front/node_modules/@redux-saga/core/dist/redux-saga-core.prod.cjs.js:1070:32) 0|npm | at currCb (/home/ubuntu/react_nodebird/front/node_modules/@redux-saga/core/dist/redux-saga-core.prod.cjs.js:1195:7) 0|npm | at /home/ubuntu/react_nodebird/front/node_modules/@redux-saga/core/dist/redux-saga-core.prod.cjs.js:346:5 0|npm | at process.processTicksAndRejections (node:internal/process/task_queues:95:5)질문1)이미지 업로드시 isAuthenticated가 false가 되는 원인이 뭘까요?질문2)도메인 안쓰고 탄력적 ip 2개 연결해서 쓰면 쿠키가 전달이 안되서 이미지 업로드는 못하나요?질문3)이 부분에 문제가 있을까요?if(process.env.NODE_ENV === 'production'){ app.use(morgan('combined')); app.use(hpp()); app.use(helmet()); app.use(cors({ origin: 'http://13.125.122.77', credentials: true, })); } else { app.use(morgan('dev')); } app.use(cors({ origin: ['http://localhost:3060', 'http://13.125.122.77'], credentials:true }));app.use(session({ saveUninitialized: false, resave: false, secret: process.env.COOKIE_SECRET, cookie: { httpOnly: true, //자바스크립트로 접근하지못하게 secure: false, //일단 false로 하고 https적용할 땐 ture // domain: process.env.NODE_ENV = 'production' && '.nodebirdcom' //도메인 사용할 경우 }, }));back/app.js 전체const express = require('express'); const cors = require('cors'); const session = require('express-session'); const cookieParser = require('cookie-parser'); const passport = require('passport'); const dotenv = require('dotenv'); const morgan = require('morgan'); const postRouter = require('./routes/post'); const postsRouter = require('./routes/posts'); const userRouter = require('./routes/user'); const hashtagRouter = require('./routes/hashtag'); const db = require('./models'); const passportConfig = require('./passport'); const path = require('path'); const hpp = require('hpp'); const helmet = require('helmet'); dotenv.config(); const app = express(); db.sequelize.sync() .then(() => { console.log('DB 연결 성공'); }).catch(console.error); passportConfig(); if(process.env.NODE_ENV === 'production'){ app.use(morgan('combined')); app.use(hpp()); app.use(helmet()); app.use(cors({ origin: ['http://nodebird.com', 'http://13.125.122.77'], credentials: true, })); } else { app.use(morgan('dev')); } app.use(cors({ origin: ['http://localhost:3060', 'http://nodebird.com', 'http://13.125.122.77'], 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: false, //일단 false로 하고 https적용할 땐 ture // domain: process.env.NODE_ENV = 'production' && '.nodebirdcom' //도메인 사용할 경우 }, })); app.use(passport.initialize()); app.use(passport.session()); app.get('/', (req, res) =>{ res.send('hello express'); }); app.use('/posts', postsRouter); app.use('/post', postRouter); app.use('/user', userRouter); app.use('/hashtag', hashtagRouter); app.listen(80, () => { console.log('서버 실행 중'); }); routes/post 일부const express = require('express'); const {Post, Image, Comment, User, Hashtag} = require('../models'); const {isLoggedIn} = require('./middlewares'); const router = express.Router(); const multer = require('multer'); const path = require('path'); const fs = require('fs'); const multerS3 = require('multer-s3'); const AWS = require('aws-sdk'); try { fs.accessSync('uploads'); } catch(error) { console.error('uploads폴더가 없으므로 생성합니다.'); fs.mkdirSync('uploads'); } 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-saga-nodebird-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'),(req, res, next) => { //POST /post/images res.json(req.files.map((v) => v.location)); });middlewares.jsexports.isLoggedIn = (req, res, next) => { if(req.isAuthenticated()) { next(); } else { res.status(401).send('로그인이 필요합니다.'); } }front에 img src에서 backUrl 지워줌시도해본 것)cors리소스 공유에 아래 내용을 넣어서 실행해보기도 하고 없는 상태에서도 실행해보았지만 상태코드는 401에 이미지 업로드 실패back/package.json 일부"scripts": { "test": "echo \"Error: no test specified\" && exit 1", "start": "cross-env NODE_ENV=production pm2 start app.js" },front/package.json 일부"scripts": { "dev": "npx browserslist@latest --update-db && NODE_OPTIONS=--openssl-legacy-provider next -p 3060", "build": "cross-env ANALYZE=true NODE_ENV=production next build", "start": "cross-env NODE_ENV=production next start -p 80", "lint": "eslint ." },
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
도메인 대신 탄력적 ip연결 후, 프론트 ip가 연결이 안되는 문제
상황)도메인 연결하면 돈이 나간대서 탄력적 ip만 연결헤줘도 원래 로그인까지 화면은 잘 나왔었는데요, s3연결하기부터 따라하기 전에 강의를 보았는데 prepare에 레파지토리 한개만 연결하길래, 기존에 front, back 경로에 레파지토리를 각각 만들어서 커밋중이여가지고 기존 레파지토리를 다 지우고 초기화한 다음 새 레파지토리와 새 인스턴스를 연결해서 s3까지 따라했거든요. 그런데 그 뒤로 back ip는 화면에 hello express라고 잘 나오는데 front탄력적 ip를 입력하니까 화면이 연결이 안되는 상황입니다. (DB 테이블 대소문자 잘 되어있습니다, env는 ubuntu에도 비밀 엑세스키까지 4가지 똑같이 입력해놓았습니다, S3에 나오는 내용까지 설치는 완료한 상태입니다. img관련 코드에서 backUrl 지워주었습니다. ubuntu에서도 git pull, npm i , npm run build해주었습니다.) 질문)프론트 ip가 화면에 안나오는데 log와 콘솔에 아무것도 안떠서, 이럴 때 화면이 안나오는 원인과 해결방법이 어떻게 되는지 궁금합니다. 질문)보안자격증명의 액세스키에 선생님거는 리전, 서비스가 나와있는데 제거는 코드에 작성한 내용과 연결이 안되서 N/A라고 나오는게 맞나요?시도해본 것)back에서 배포용일 때 if문에 도메인 주소를 빼고 실행해보기도 하고, 도메인 주소 대신 origin front 탄력적 ip를 넣어서 실행도 해보았지만 연결이 되지 않았습니다.if(process.env.NODE_ENV === 'production'){ app.use(morgan('combined')); app.use(hpp()); app.use(helmet()); // app.use(cors({ // origin: 'http://nodebird.com', // credentials: true, // })); } else { app.use(morgan('dev')); }작성한 코드 일부) app.jsconst express = require('express'); const cors = require('cors'); const session = require('express-session'); const cookieParser = require('cookie-parser'); const passport = require('passport'); const dotenv = require('dotenv'); const morgan = require('morgan'); const postRouter = require('./routes/post'); const postsRouter = require('./routes/posts'); const userRouter = require('./routes/user'); const hashtagRouter = require('./routes/hashtag'); const db = require('./models'); const passportConfig = require('./passport'); const path = require('path'); const hpp = require('hpp'); const helmet = require('helmet'); dotenv.config(); const app = express(); db.sequelize.sync() .then(() => { console.log('DB 연결 성공'); }).catch(console.error); passportConfig(); if(process.env.NODE_ENV === 'production'){ app.use(morgan('combined')); app.use(hpp()); app.use(helmet()); // app.use(cors({ // origin: 'http://nodebird.com', // credentials: true, // })); } else { app.use(morgan('dev')); } app.use(cors({ origin: ['http://localhost:3060', 'http://nodebird.com', 'http://13.125.122.77'], 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: false, //일단 false로 하고 https적용할 땐 ture // domain: process.env.NODE_ENV = 'production' && '.nodebirdcom' //도메인 사용할 경우 // }, })); app.use(passport.initialize()); app.use(passport.session()); app.get('/', (req, res) =>{ res.send('hello express'); }); app.use('/posts', postsRouter); app.use('/post', postRouter); app.use('/user', userRouter); app.use('/hashtag', hashtagRouter); app.listen(80, () => { console.log('서버 실행 중'); }); routes/post.jsconst express = require('express'); const {Post, Image, Comment, User, Hashtag} = require('../models'); const {isLoggedIn} = require('./middlewares'); const router = express.Router(); const multer = require('multer'); const path = require('path'); const fs = require('fs'); const multerS3 = require('multer-s3'); const AWS = require('aws-sdk'); try { fs.accessSync('uploads'); } catch(error) { console.error('uploads폴더가 없으므로 생성합니다.'); fs.mkdirSync('uploads'); } 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-saga-nodebird-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'),(req, res, next) => { //POST /post/images res.json(req.files.map((v) => v.location)); });backUrl남아있는 부분 config.jsexport const backUrl = 'http://13.209.144.99';profile.jsimport { backUrl } from '../config/config'; const Profile = () => { const { data: followersData, error:followerError } = useSWR(`${backUrl}/user/followers?limit=${followersLimit}`, fetcher); const { data: followingsData, error:followingError } = useSWR(`${backUrl}/user/followings?limit=${followingsLimit}`, fetcher); export default Profile;sagas/indeximport { backUrl } from '../config/config'; axios.defaults.baseURL = backUrl;back/package.json{ "name": "react-nodebird-back", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "start": "cross-env NODE_ENV=production pm2 start app.js" }, "author": "luckyhaejin", "license": "ISC", "dependencies": { "aws-sdk": "^2.1538.0", "bcrypt": "^5.1.1", "cookie-parser": "^1.4.6", "cors": "^2.8.5", "cross-env": "^7.0.3", "dotenv": "^16.3.1", "express": "^4.18.2", "express-session": "^1.17.3", "helmet": "^7.1.0", "hpp": "^0.2.3", "morgan": "^1.10.0", "multer": "^1.4.5-lts.1", "multer-s3": "^3.0.1", "mysql2": "^3.6.5", "passport": "^0.7.0", "passport-local": "^1.0.0", "pm2": "^5.3.0", "sequelize": "^6.35.2", "sequelize-cli": "^6.6.2" }, "devDependencies": { "nodemon": "^2.0.22" } } front/package.json{ "name": "react-nodebird-front", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "dev": "npx browserslist@latest --update-db && NODE_OPTIONS=--openssl-legacy-provider next -p 3060", "build": "cross-env ANALYZE=true NODE_ENV=production next build", "start": "cross-env NODE_ENV=production next start -p 80", "lint": "eslint ." }, "author": "luckyhaejin", "license": "ISC", "dependencies": { "@ant-design/icons": "^4.2.1", "@next/bundle-analyzer": "^14.0.4", "antd": "^4.2.1", "axios": "^1.6.2", "babel-plugin-styled-components": "^2.1.4", "cross-env": "^7.0.3", "eslint-config-airbnb": "^19.0.4", "immer": "^10.0.3", "moment": "^2.30.1", "next": "^9.5.5", "next-redux-wrapper": "^6.0.2", "pm2": "^5.3.0", "prop-types": "^15.8.1", "react": "^16.14.0", "react-dom": "^16.14.0", "react-redux": "^7.2.9", "react-slick": "^0.29.0", "redux": "^4.2.1", "redux-devtools-extension": "^2.13.9", "redux-saga": "^1.3.0", "saga": "^4.0.0-alpha", "shortid": "^2.2.16", "styled-components": "^6.1.1", "swr": "^2.2.4" }, "devDependencies": { "babel-eslint": "^10.1.0", "eslint": "^8.56.0", "eslint-plugin-import": "^2.29.1", "eslint-plugin-jsx-a11y": "^6.8.0", "eslint-plugin-react": "^7.33.2", "eslint-plugin-react-hooks": "^4.6.0", "faker": "^5.5.3" } } 사용중인OS) macOS
- 해결됨[리뉴얼] React로 NodeBird SNS 만들기
백엔드 root 서버에서 npx sequelize db:create을 하면 command not found: sequelize이 뜹니다.
안녕하세요! 제로초님[리뉴얼] React로 NodeBird SNS 만들기 강의의섹션 6. AWS에 배포하기: 우분투에 MySQL 설치하기 까지 진행한 수강생 입니다! 저는 windows 10을 사용하고 있으며, 윈도우 서비스에서 MySQL을 실행한 상태입니다.아마존의 front와 back 인스턴스가 잘 실행되고 있음을 확인하였습니다.사전에 AWS 우분투 프론트와 백엔드 서버 두 곳 모두 node와 npm을 설치하였습니다.node 버전은 v14.21.3, npm 버전은 6.14.18을 설치하였습니다.AWS 우분투 백엔드 서버와 root 서버에서 MySQL 8 버전을 완전 삭제한 후 재설치 하였습니다.(원래 우분투 백엔드 서버에만 설치해야 하는데 루트 경로에 설치하는 바람에 재설치를 진행하였습니다!) 사진과 같이 백엔드 root 서버 터미널에 npx sequelize db:create을 입력하면command not found: sequelize (sequalize 명령을 찾을 수 없습니다.)가 뜹니다. 문제를 해결하기 위해서 첫 번째로 sequelize와 sequelize-cil이back 폴더에 제대로 설치가 되어있는지 확인했습니다.아래 사진과 같이 back 폴더의 package.json 파일에서 시퀄라이즈 잘 설치되어 있음을 확인하였습니다. 두 번째로, 우분투 리눅스 루트 command not found: sequelize,npx sequelize db:create command not found: sequelize 해결시퀄라이즈 command not found 해결등등의 command not found: sequelize 관련 키워드를 구글링 하고,노드버드 강의 커뮤니티 글을 보던 중npx sequelize db:create 대신 sudo npx sequelize db:create 사용하는 방법을 찾았습니다.sudo를 사용해 npx sequelize db:create을 시도하였으나여전히 sequelize 명령어가 없다고 뜹니다.어떻게 하면 백엔드 root 서버에서 npx sequelize db:create을 성공할 수 있을까요?혹시 관련 키워드나 힌트를 주실 수 있나요?항상 강의 열심히 듣고 있습니다. 긴 글 읽어주셔서 감사합니다 제로초님!
- 해결됨[리뉴얼] React로 NodeBird SNS 만들기
AWS ubuntu 프론트 서버에서 npm run build 가 되지 않습니다!
안녕하세요! 제로초님[리뉴얼] React로 NodeBird SNS 만들기 강의의섹션 6. AWS에 배포하기: 우분투에 노드 설치하기 까지 진행한 수강생 입니다!우분투에 노드 설치하기 강의와 다음 강의인 우분투에 MySQL 설치하기 강의에서도AWS 우분투 프론트 서버에서 npm run build가 성공했음을 확인하지 못하여 질문 글 올립니다!사전에 강의를 진행하면서 AWS 우분투 프론트와 백엔드 서버 두 곳 모두 node와 npm을 설치하였습니다.node 버전은 v14.21.3, npm 버전은 6.14.18을 설치하였습니다.제로초님 강의와 다르게 react-nodebird에 prepare 폴더는 만들지 않습니다.그래서 react-nodebird 폴더 아래에 바로.git, front, back, .gitignore, react-nodebird.pem 파일이 위치해 있습니다. npm run build 를 진행하기 전 우분투 프론트 서버 인스턴스 연결 주소를 정확히 입력하였습니다.ubuntu 프론트 서버에서 git pull과 npm i를 한 다음, npm run build를 진행하였으나빌드가 되지 않고, 에러가 나타났습니다.에러 전체를 번역 후 읽어보니 눈에 띄는 부분은 다음과 같았습니다.Error occurred prerendering page "/about".Read more: https://err.sh/next.js/prerender-error페이지 "/about"을(를) 미리 렌더링하는 동안 오류가 발생했습니다.자세한 내용: https://err.sh/next.js/prerender-errorTypeError: Cannot read property 'data' of undefined유형 오류: 정의되지 않은 속성 '데이터'를 읽을 수 없습니다about을 렌더링하는 동안 오류가 발생했다는 메시지를 확인하고,정적 페이지인 about.js의 getStaticProps를 의심했지만에러 메시지에는 getStaticProps 코드 언급이 없어서 함부로 의심하는 걸 멈췄습니다.https://nextjs.org/docs/messages/prerender-error에러 메시지에 있는 next 사이트를 확인했으나 제 미숙함으로 문제를 해결할 방법을 찾지 못했습니다. npm ERR! This is probably not a problem with npm. There is likely additional logging output above.npm ERR! 이것은 아마도 npm의 문제가 아닐 것입니다. 위에 추가적인 로깅 출력이 있을 것 같습니다.npm ERR! 이 실행의 전체 로그는 다음에서 확인할 수 있습니다:npm ERR! /home/ubuntu/.npm/_logs/2024-01-17T18_39_56_370Z-debug.logvscode 에서 debug.log를 클릭했으나 No match results가 뜨며 로그를 확인할 수 없었습니다. 문제를 해결하기 위해 커뮤니티를 확인하던 중 똑같은 aws 빌드 문제가 발생한 질문 글을 발견하였습니다.-- 해당 질문글 링크 --https://www.inflearn.com/course/lecture?courseSlug=%EB%85%B8%EB%93%9C%EB%B2%84%EB%93%9C-%EB%A6%AC%EC%95%A1%ED%8A%B8-%EB%A6%AC%EB%89%B4%EC%96%BC&unitId=49013&category=questionDetail&tab=community&q=254338해당 질문 글에서 제로초님은 npm i를 다시 하거나styled-components 버전 문제일 가능성을 알려주셨습니다.강의와 똑같이 styled-components ^5.1.1 버전을 사용하고 있음을 확인하였고,다시 우분투 프론트 서버에서 npm install를 한 후, 빌드를 시도해보았으나상단 에러와 똑같은 문제가 발생했습니다.vsCode를 완전히 껐다가 키고, 우분투 인스턴스를 잠시 중시 후 재부팅 해보았음에도같은 문제가 발생하였습니다.node react AWS 구동 방법, AWS E2U 배포, AWS 빌드 문제 npm 관련 키워드를 검색하면서 npm을 실행할 때 종속성이나 캐시 문제 발생이 원인이지 않을까 짐작했습니다.그래서 로컬 front 경로에서 아래 네 가지 작업을 진행하였습니다.(사전에 node_modules 폴더, package.lock.json 파일, .next를 삭제하기 전에로컬 프론트에서 npm run dev, npm run build, npm start 스크립트를 실행해서버가 성공적으로 연결됨을 확인하였습니다.)로컬 front 경로1. node_modules 폴더 삭제2. package.lock.json 삭제3. .next 삭제4. npm cache clean --force 로 npm 캐시 삭제네 가지 작업을 진행한 후 로컬 front에서 다시 npm install을 하여 node_modules과 package.lock.json을 생성하였습니다.다시 aws 우분투 프론트 서버로 돌아와 node, npm이 정상적으로 설치되었음을 확인하고git pull, npm i 를 하고, npm run build를 했지만 문제는 해결되지 않았습니다!어떻게 하면 AWS ubuntu 프론트 서버 경로에서 npm run build를 성공할 수 있을까요?혹시 관련 키워드나 힌트를 주실 수 있나요?aws를 처음 사용해서 미숙함에 질문 글이 많이 길어졌습니다.항상 강의 열심히 듣고 있습니다. 긴 글 읽어주셔서 감사합니다 제로초님!
- 해결됨[리뉴얼] React로 NodeBird SNS 만들기
EC2 pem 키를 사용해서 원격에 있는 서버로 접근할 때 WARNING: UNPROTECTED PRIVATE KEY FILE! 문제가 발생합니다!
안녕하세요! 제로초님! 노드버드 섹션6 EC2 생성하기 강의까지 수강한 수강생 입니다!아래 수강생 분과 동일한 문제가 발생하여 구글링과 다른 분들의 질문 글을 보며해결하려 했으나 그러지 못하여 질문을 올리게 되었습니다!항상 친절한 답변을 해주셔서 감사합니다!(강의 항상 잘 보고 있어요!) 같은 문제가 발생한 수강생 분의 질문https://www.inflearn.com/course/lecture?courseSlug=%EB%85%B8%EB%93%9C%EB%B2%84%EB%93%9C-%EB%A6%AC%EC%95%A1%ED%8A%B8-%EB%A6%AC%EB%89%B4%EC%96%BC&unitId=49012&tab=community&category=questionDetail&q=152537키의 권한을 바꾸는 방법 참고https://wookim789.tistory.com/34SSH은 22번 포드, HTTP는 80번 포트, HTTPS는 443번 포트로 강의와 동일하게 진행하였습니다.폴더를 하나 더 들어가야 하는 불편함 때문에 강의와 똑같이 prepare 폴더는 만들지 않고,노드버드 폴더 아래에 바로 front, back 폴더가 위치하도록 하였습니다.vs 터미널에서 발생한 문제 메시지를 번역하니 다음과 같았습니다.경고: 보호되지 않는 개인 키 파일react-nodebird.pem'에 대한 권한이 너무 열려 있습니다.다른 사람이 개인 키 파일에 액세스할 수 없어야 합니다. 이 개인 키는 무시됩니다.로드 키 "react-nodebird.pem": 잘못된 권한ubuntu@ec2-13-125-253-222.ap-northeast-2.compute.amazonaws.com : 권한이 거부되었습니다 같은 문제가 발생한 수강생 분의 글을 읽고 vs 터미널이 아닌 git bash를 사용했습니다.이 때 문제를 해결하신 수강생 분과는 다른 메시지가 나타났습니다.(문제를 해결하신 수강생 분의 git bash 상태)(저의 git bash 상태)응용프로그램에 대한 확장 보안 유지관리가 활성화되지 않았습니다.Expanded Security Maintenance for Applications is not enabled.빨간 선은 개인 정보라 부득이하게 블러 처리하였습니다. ssh -i "react-nodebird.pem" ubuntu@ec2-13-125-253-222.ap-northeast-2.compute.amazonaws.com의심이 들어 다시 vs code 터미널의 노드버드 폴더 경로에 위 명령어를 붙여 넣었으나WARNING: UNPROTECTED PRIVATE KEY FILE! 문제가 계속 발생합니다.어떻게 해야 이 문제를 해결할 수 있는지 도움을 구하고 싶습니다!저 또한 답변만 기다리지 않고 계속 해결 방안을 모색하겠습니다!긴 질문 글 읽어주셔서 감사합니다.
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
팔로잉, 팔로워 목록은 잘 불러왔으나 콘솔에 Warning: Failed prop type: The prop `data` is marked as required in `FollowList`, but its value is `undefined`. 에러가 발생합니다!
안녕하세요 제로초님!! 해당 강의 영상을 끝까지 수강한 수강생 입니다!항상 강의 영상 잘 보고 있습니다. 복잡한 질문에도 친절히 답해주셔서 감사합니다~! 첫 번째 에러를 번역해보니 'FollowList'에 prop 'data'가 필요한 것으로 표시되어 있지만 값은 'undefined'입니다. 라고 뜹니다.문제가 생긴 profile.js 에서 console.log(data)를 해보니 역시 data가 undefined 가 나옵니다.FollowList.js의 data가 profile.js로 전달이 되지 않은 것인가요? 만약 그렇다면 어디를 봐야 하는지 힌트 부탁 드립니다!(data의 프롭타입은 배열입니다!)https://github.com/ZeroCho/react-nodebird/blob/master/ch6/front/pages/profile.js질문을 올리기 전에 제로초님 깃허브를 꼼꼼히 참고하고 스스로 구글링 해보았지만 해결이 어려워 질문 올립니다!포기하지 않고 끝까지 완강을 목표로 하겠습니다! 아래 사진은 상단 이미지에서 잘린 에러 전체입니다.감사합니다!
- 해결됨[리뉴얼] React로 NodeBird SNS 만들기
https 적용 후에 이미지 주소에서 에러가 발생합니다.
http일 때는 문제가 없었는데 https 적용 후에 문제가 발생합니다.강의에서 알려주신 대로 하면 에러가 나와서 제로초 님 블로그 보고 cerbot이랑 nginx 설치했습니다.아래 코드만 강의와 다르게 했습니다.sudo snap install certbot --classic sudo apt-get install nginxsudo certbot --nginxhttps://www.zerocho.com/category/NodeJS/post/5ef450a5701d8a001f84baeb 에러 내용은 다음과 같습니다.https 적용 전https://abc.s3.ap-northeast-2.amazonaws.com/original/1705127046450_china.jpg https 적용 후https://abc/https:/abc.s3.ap-northeast-2.amazonaws.com/original/1705127046450_china.jpghttp://abc/ 이 부분을 없애는 방법을 알고 싶습니다. nginx.conf는 아래와 같습니다.server { // 실제로는 구매한 도메인 넣었습니다. server_name abc; location / { proxy_set_header HOST $host; proxy_pass http://127.0.0.1:3000/; proxy_redirect off; } }server { // 실제로는 구매한 도메인 넣었습니다. server_name api.abc; location / { proxy_set_header HOST $host; proxy_pass http://127.0.0.1:3000/; proxy_redirect off; } }
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
swr를 사용했을 때 팔로잉, 팔로워 목록을 불러오지 못 하고, 리스트에 limit이 안됩니다!
안녕하세요 제로초님! 노드버드 섹션5 swr 사용해보기 강의까지 진행한 수강생 입니다!항상 질문에 답해주셔서 감사합니다. 올려주신 강의도 잘 보고 있습니다!구글링과 제로초님의 노드버드 깃허브를 꼼꼼히 살펴보았으나 제 지식 부족으로 인하여 질문 올립니다..!swr 라이브러리를 사용 후, 로그인한 다음 프로필 페이지에 가면콘솔 에러가 발생하며, 팔로잉, 팔로워 목록이 없는 문제가 발생합니다.때문에 더 보기 버튼을 클릭해도 더 불러오지 못 했습니다!에러 메시지를 번역하니 다음과 같았습니다.리덕스 탭과 네트워크 탭에서는 에러를 발견하지 못하였습니다!리덕스 탭에서는 해당 사용자의 팔로잉, 팔로워 정보가 들어가 있었고,네트워크 탭에서는 팔로잉, 팔로워 limit이 잘 불러와 집니다.의심이 들어 백엔드 터미널을 확인해보니 팔로잉, 팔로워 목록 limit이 안되고 있었습니다!GET /user/followers?limit=3 401GET /user/followings?limit=3 401에러가 난 코드를 포함해 가장 의심되는 코드를 올립니다!프로필 페이지 profile.js팔로워, 팔로잉 불러오기 구조분해 할당 부분의 ${}코드가 자꾸 깨져서 이 부분만 사진으로 올리겠습니다..!// 실제로 주소 가져오기 : 데이터를 가져오는 API를 호출하는 fetcher 함수 const fetcher = (url) => axios.get(url, { withCredentials: true }).then((result) => result.data ); // 프로필 컴포넌트(사용자 정의 태그) const Profile = () => { // 프로필 페이지에서 로그아웃한 상태일(me가 없을 때)때 메인 페이지로 이동 useEffect(() => { if (!(me && me.id)) { Router.push('/'); } }, [me && me.id]); // 팔로워 목록 더 불러오기 콜백 함수 const loadMoreFollowers = useCallback(() => { setFollowersLimit((prev) => prev + 3); // 기존 limit보다 3 올려주기 }, []); // 팔로잉 목록 더 불러오기 콜백 함수 const loadMoreFollowings = useCallback(() => { setFollowingsLimit((prev) => prev + 3); // 기존 limit보다 3 올려주기 }, []); // 로그인 하지 않은 상태일(me가 없을)때 프로필 페이지로 이동 막기 if (!me) { return '내 정보 로딩중...'; }; /* 팔로워 에러 or 팔로잉 에러 둘 중 하나가 에러났을 때 에러 콘솔하기 */ // Hook은 항상 모두 다 실행되어야 하기에 return은 Hook보다 위에 위치할 수 없다. if (followerError || followingError) { console.error(followerError || followingError); return <div>팔로워/팔로잉 로딩 중 에러가 발생합니다.</div>; } return ( <> <Head> <title>내 프로필 | NodeBird</title> </Head> <AppLayout> {/* ---------- 닉네임 수정 폼 ---------- */} <NicknameEditForm /> {/* ---------- 팔로잉 목록 ---------- */} console.log(followingsData); <FollowList header="팔로잉" data={followingsData} onClickMore={loadMoreFollowings} // SWR에서의 로딩 : 팔로잉 데이터와 팔로잉 에러가 없을 때 loading={!followingsData && !followingError} /> {/* ---------- 팔로워 목록 ---------- */} <FollowList header="팔로워" data={followersData} onClickMore={loadMoreFollowers} // SWR에서의 로딩 : 팔로워 데이터와 팔로워 에러가 없을 때 loading={!followersData && !followerError} /> </AppLayout> </> ); };user.js(백엔드 팔로워, 팔로잉 라우터)// 팔로워 라우터 router.get('/followers', isLoggedIn, async (req, res, next) => { // GET /user/followers try { /* 나를 찾는 함수 */ const user = await User.findOne({ where: { id: req.user.id }}); /* ---------- 만약 내가 없다면 400번대 에러 출력 ---------- */ if (!user) { res.status(403).send('없는 사람을 찾으려고 하시네요?'); } /* 사용자 팔로워 목록 가져오기 */ // limit을 올려주면 그 limit만큼 더 가져오도록 하기 const followers = await user.getFollowers({ limit: parseInt(req.query.limit, 10), }); /* 팔로워 목록을 프론트로 넘기기 */ res.status(200).json(followers); /* ---------- 에러 캐치 ---------- */ } catch (error) { console.error(error); next(error); } }); // 팔로잉 라우터 router.get('/followings', isLoggedIn, async (req, res, next) => { // GET /user/followings try { /* 나를 찾는 함수 */ const user = await User.findOne({ where: { id: req.user.id }}); /* ---------- 만약 내가 없다면 400번대 에러 출력 ---------- */ if (!user) { res.status(403).send('없는 사람을 찾으려고 하시네요?'); } /* 사용자 팔로잉 목록 가져오기 */ // limit을 올려주면 그 limit만큼 더 가져오도록 하기 const followings = await user.getFollowings({ limit: parseInt(req.query.limit, 10), }); /* 팔로잉 목록을 프론트로 넘기기 */ res.status(200).json(followings); /* ---------- 에러 캐치 ---------- */ } catch (error) { console.error(error); next(error); } });FollowList.js// 팔로우 리스트 컴포넌트(사용자 정의 태그) const FollowList = ({ header, data, onClickMore, loading }) => { . . . return ( <List /* 더보기 버튼 */ loadMore={( <div style={{ textAlign: 'center', margin: '10px 0px' }}> <Button onClick={onClickMore} loading={loading}>더 보기</Button> </div> )} . . . /> ); };
- 해결됨[리뉴얼] React로 NodeBird SNS 만들기
isLoggedIn추가 후 로그아웃 안되는 문제 발생
안녕하세요 선생님상황)req.logout안에 콜백 함수넣어서 로그아웃이 잘 되고 있었는데, isLoggedIn추가 후 상태코드 401이 뜨고 preview에는 로그인이 필요합니다가 뜨며 로그아웃 안되는 상황입니다. network로그인 했을 때로그아웃 했을 때network로그아웃 했을 때preview redux로그인 했을 때로그아웃 했을 때시도해본것)로그인 후 세션정보 콘솔 출력router.post('/login', isNotLoggedIn, (req, res, next)=> { passport.authenticate('local',(err, user, info) => { if(err) { console.error(err); return next(err); } if(info) { return res.status(401).send(info.reason); } return req.login(user,async(loginErr)=> { if(loginErr) { console.error(loginErr); return next(loginErr); } console.log('로그인 후 세션 정보:', req.session); //생략 }); })(req, res, next); }); //POST /user/loginuser.js의 logout에서 에러 발생시 출력 => 출력 xrouter.post('/logout', isLoggedIn, (req, res) => { req.logout((err) => { if (err) { console.error(err); return res.status(500).send('로그아웃 중 오류가 발생했습니다.'); } res.send('ok'); req.session.destroy(); }); });Middlewares에서 req.isAuthenticated()확인 => 결과 falseexports.isLoggedIn = (req, res, next) => { console.log('로그인 상태 확인:', req.isAuthenticated()); if(req.isAuthenticated()) { next(); } else { res.status(401).send('로그인이 필요합니다.'); } }질문)req.isAuthenticated가 false로 나와서 로그아웃이 안되는데 원인과 해결방법이 궁금합니다. 혹시 로그인하면 이것을 true가 되게 바꾸는 방법이 있나요?req.isAuthenticated()작성한 코드) UserProfileimport React, {useCallback} from 'react'; import {useDispatch, useSelector} from 'react-redux'; import {Card, Avatar, Button} from 'antd'; import styled from 'styled-components'; import {logoutRequestAction} from '../reducers/user'; const ButtonWrapper = styled(Button)` display: block; margin-left: auto; margin-right: auto; ` const UserProfile = () => { const dispatch = useDispatch(); const { me, logOutLoading } = useSelector((state) => state.user); const onLogout = useCallback(()=>{ dispatch(logoutRequestAction()); }, []); return ( //생략 <ButtonWrapper onClick={onLogout} loading={logOutLoading}>로그아웃</ButtonWrapper> ); } export default UserProfile;reducers/userimport {produce} from 'immer'; export const initialState = { logOutLoading: false,//logout시도중 logOutDone: false, logOutError: null, } 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 logoutRequestAction = () => { return { type: LOG_OUT_REQUEST } } const reducer = (state = initialState, action) => produce(state, (draft) => { switch(action.type){ case LOG_OUT_REQUEST: draft.logOutLoading = true; draft.logOutDone = false; draft.logOutError = null; 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; default: break; } }); export default reducer;sagas/userimport axios from 'axios'; import { all, call, delay, fork, put, takeLatest } from 'redux-saga/effects'; import { LOG_OUT_FAILURE, LOG_OUT_REQUEST, LOG_OUT_SUCCESS, } from '../reducers/user'; function logOutAPI(){ return axios.post('/user/logout'); } function* logOut() { try{ yield call(logOutAPI); yield put({ type: LOG_OUT_SUCCESS, }); } catch(err) { yield put({ type: LOG_OUT_FAILURE, error: err.response.data }); } } function* watchLogOut(){ yield takeLatest(LOG_OUT_REQUEST, logOut); } export default function* userSaga() { yield all ([ fork(watchLogOut), ]) }routes/user.jsconst express = require('express'); const bcrypt = require('bcrypt'); const {User, Post} = require('../models'); const router = express.Router(); const passport = require('passport'); const {isLoggedIn, isNotLoggedIn} = require('./middlewares'); router.post('/login', isNotLoggedIn, (req, res, next)=> { passport.authenticate('local',(err, user, info) => { if(err) { console.error(err); return next(err); } if(info) { return res.status(401).send(info.reason); } return req.login(user,async(loginErr)=> { if(loginErr) { console.error(loginErr); return next(loginErr); } const fullUserWithoutPassword = await User.findOne({ where: {id: user.id}, attributes:{ exclude:['password'] }, include: [{ model: Post }, { model: User, as:'Followings', }, { model: User, as:'Followers' }] }) return res.status(200).json(fullUserWithoutPassword); }); })(req, res, next); }); //POST /user/login //생략 const {isLoggedIn, isNotLoggedIn} = require('./middlewares'); router.post('/logout', isLoggedIn, (req, res) => { req.logout(() => { req.session.destroy(); res.send('ok'); }); });routes/middlewaresexports.isLoggedIn = (req, res, next) => { if(req.isAuthenticated()) { next(); } else { res.status(401).send('로그인이 필요합니다.'); } } exports.isNotLoggedIn = (req, res, next) => { if(!req.isAuthenticated()){ next(); } else { res.status(401).send('로그인 하지 않은 사용자만 접근이 가능합니다.'); } }passport/indexconst passport = require('passport'); const local = require('./local'); const { User } = require('../models'); module.exports = () => { passport.serializeUser((user,done) => { done(null,user.id);//첫번째 인자 에러, 두번째 인자 성공(쿠키와 묶어줄 user아이디만 저장) }); passport.deserializeUser(async(id, done) => { try { const user = await User.findOne({where:{id}}) done(null,user); } catch(error) { console.error(error); done(error); } }); local(); };passport/localconst passport = require('passport'); const {Strategy:LocalStrategy} = require('passport-local'); const bcrypt = require('bcrypt'); const {User} = require('../models'); const express = require('express'); const router = express.Router(); router.post('/login', passport.authenticate('local')); module.exports = () => { passport.use(new LocalStrategy({ usernameField: 'email', passwordField: 'password', }, async(email, password, done) => { try { const user = await User.findOne({ where:{email} }); if(!user) { return done(null, false, {reasone: '존재하지 않는 이메일입니다!'}) } const result = await bcrypt.compare(password, user.password); if(result) { return done(null, user);//성공에 사용자 정보 넘겨줌 } return done(null, false, {reason:'비밀번호가 틀렸습니다.'}); } catch(error) { return done(error); } })); } 사용 하는 OS )mac설치 버전)back{ "name": "react-nodebird-back", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "author": "luckyhaejin", "license": "ISC", "dependencies": { "bcrypt": "^5.1.1", "cookie-parser": "^1.4.6", "cors": "^2.8.5", "dotenv": "^16.3.1", "express": "^4.18.2", "express-session": "^1.17.3", "mysql2": "^3.6.5", "passport": "^0.7.0", "passport-local": "^1.0.0", "sequelize": "^6.35.2", "sequelize-cli": "^6.6.2" }, "devDependencies": { "nodemon": "^2.0.22" } }
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
Error: Too many keys specified; max 64 keys allowed (인덱스 관련 에러)
안녕하세요 선생님 상황)백엔드 서버 실행시 인덱스를 64개까지 만들 수 있다는 에러가 발생했습니다. 시도해본 것)인덱스 삭제 명령어를 찾아보았는데 인덱스 명을 붙여줘야해서 한개씩 지울 수 있는 상황입니다.alter table `Users` drop index `email_15` 질문) 혹시 Users테이블에 email 컬럼에 대한 인덱스 전체를 한번에 지울 수 있는 방법이 있을까요?