묻고 답해요
147만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
순위 정보를
불러오고 있어요
-
미해결[리뉴얼] React로 NodeBird SNS 만들기
이미지 업로드에 관해 질문이 있습니다.
제가 지금 블로그에서 에디터로 이미지를 합해서 백에다가 데이터를 보내고 잇는데 제로초님이 말씀하신데로 해봣는데 이미지의 소스는 imges라는 테이블에 정상적으로 들어가는데문제는 post에<p>이미지 </p><p><img src=">"http://localhost:3065/KakaoTalk_20240122_212009014_01_1707401883946.jpg"></p>이런식으로 이미지가 들어가게 되는데 에디터라서 이렇게 들어가게 되는게 맞는지 아닌지 궁금합니다...용량이 걱정이 되서요 ㅠㅠ이미지로 보여드리면 이런데 원래 에디터안에 들어가는 이미지 같은경우는 텍스트랑 같이 db에 저장시키는게 맞는지 궁금합니다.
-
미해결따라하며 배우는 리액트 A-Z[19버전 반영]
오류메세지는 확인했는데 어떻게 고쳐야 할지 모르겠습니다 ㅠ
TODO앱을 클래스앱에서 컴포넌트 함수형 으로 바꾸는과정에서 뭔가 문제가 생겼는지 아니면 이전부터 문제가 있었는지는 모르겠는데 이런오류가 뜨면서 되지않네요 ㅠㅠ 리액트 초짜라 뭘 어떻게 바꿔야할지 모르겠습니다 ㅠㅠ 답변부탁드립니다 감사합니다 ㅠㅠ위에 문제가 된다고 하는 6행 74행 사진입니다 ㅠㅠ
-
해결됨[리뉴얼] React로 NodeBird SNS 만들기
새로 고침 시 로그인이 유지되지 않는 버그가 발생합니다!(쿠키 존재O)
안녕하세요 제로초님!AWS에 배포하기 및 카카오톡 공유하기 강의까지 끝마친 수강생 입니다!저는 윈도우 10, 크롬 브라우저, VSCode, MySQL 8버전을 사용하고 있습니다.로그인 후 새로 고침을 하면 로그인이 유지되지 않고 풀려 버리는 버그가 발생하여질문을 올리게 되었습니다! 이 문제는 쿠키가 있음에도 발생합니다!이 버그로 인해 총 2가지 상태에 이릅니다.1. 완전히 로그인을 한 상태에서 새로 고침을 하면 쿠키는 남아있으나 로그인이 유지되지 않습니다.2. 완전히 로그인이 된 상태에서 프로필 페이지로 이동하면 로그인이 풀리며 홈페이지로 돌아옵니다.새로 고침 후 로그인이 풀리는 문제가 발생한 시점에서다시 로그인을 하려고 하면 로그인 유무 검사(로그인하지 않은 사용자만 접근 가능) 메시지가 뜹니다.로그인 후 로그아웃을 하면 해당 문제가 발생하지 않습니다.해당 에러를 임시로 해결하는 방법을 찾았습니다.프론트 페이지와 백엔드 페이지 애플리케이션 탭에서 쿠키를 지우면 다시 로그인을 진행할 수 있습니다. 하지만 말 그대로 임시로 해결하는 것 뿐이라 로그인 후 새로 고침을 하면아까와 똑같이 로그인이 풀려버립니다.문제를 해결하기 위해 페이지에서 콘솔 탭과 네트워크 탭, 애플리케이션 탭의 쿠키 쪽을 확인하였습니다.프론트 콘솔 탭 확인해당 에러 주소로 들어가 보았지만 외계어로 적혀있어 다른 곳을 먼저 확인해보기로 했습니다.프론트 네트워크 탭 확인401 Unauthorized 에러를 네트워크 탭에서 확인 했습니다.Headers 탭에 적힌 쿠키와 Cookies 탭에 적힌 쿠키는 똑같았습니다!프론트 쿠키 존재 확인로그인 후 로그아웃을 진행하면 쿠키가 남아있습니다. 백엔드 쿠키 존재 확인백엔드 페이지도 프론트 쪽과 똑같이 쿠키가 잘 들어가 있음을 확인하였습니다.페이지 쪽을 전부 확인한 뒤, 우분투 백엔드 pm2 monit을 확인해보니사용자 로그인 쪽에서 401 에러가 나고 있었습니다.sudo npx pm2 logs --err --lines 200 명령어로 에러 로그를 확인하였으나관련 에러는 찾지 못하였습니다.문제를 해결하기 위해 잘못 적은 코드가 있는지 검사하였습니다.아래는 가장 의심되는 코드들 입니다!리듀서, 사가, 라우터, 로그인 검사, 서버사이드 렌더링 순으로 작성하였습니다.front/reducers/user.js나의 사용자 정보 불러오기 리듀서const reducer = (state = initialState, action) => { return produce(state, (draft) => { switch (action.type) { /* 나의 사용자 정보 불러오기 요청 리듀서 */ case LOAD_MY_INFO_REQUEST: draft.loadMyInfoLoading = true; draft.loadMyInfoError = null; draft.loadMyInfoDone = false; break; /* 나의 사용자 정보 불러오기 성공 리듀서 */ case LOAD_MY_INFO_SUCCESS: draft.loadMyInfoLoading = false; draft.me = action.data; draft.loadMyInfoDone = true; break; /* 나의 사용자 정보 불러오기 실패 리듀서 */ case LOAD_MY_INFO_FAILURE: draft.loadMyInfoLoading = false; draft.loadMyInfoError = action.error; break;로그인 리듀서. . . /* 로그인 요청 리듀서 */ case LOG_IN_REQUEST: draft.logInLoading = true; draft.logInError = null; draft.logInDone = false; break; /* 로그인 성공 리듀서 */ case LOG_IN_SUCCESS: draft.logInLoading = false; draft.me = action.data; // 로그인 성공 시 실제 사용자 데이터 draft.logInDone = true; break; /* 로그인 실패 리듀서 */ case LOG_IN_FAILURE: draft.logInLoading = false; draft.logInError = action.error; break; front/sagas/user.js나의 사용자 정보 불러오기 사가// loadMyInfo 실행 시 서버에 loadMyInfoAPI 요청 function loadMyInfoAPI() { return axios.get('/user'); } // LOAD_MY_INFO 액션이 실행되면 loadMyInfo 함수 실행 function* loadMyInfo(action) { /* 요청 성공 시 LOAD_MY_INFO_SUCCESS 액션 디스패치 */ try { const result = yield call(loadMyInfoAPI, action.data); yield put({ type: LOAD_MY_INFO_SUCCESS, data: result.data, }); /* 요청 실패 시 LOAD_MY_INFO_FAILURE 액션 디스패치 */ } catch (err) { console.error(err); yield put({ type: LOAD_MY_INFO_FAILURE, error: err.response.data, // 실패 결과 }); } }로그인 사가// logIn 실행 시 서버에 logInAPI 요청 function logInAPI(data) { return axios.post('/user/login', data); } // LOG_IN_REQUEST 액션이 실행되면 logIn 함수 실행 function* logIn(action) { /* 요청 성공 시 LOG_IN_SUCCESS 액션 디스패치 */ try { const result = yield call(logInAPI, action.data); yield put({ type: LOG_IN_SUCCESS, data: result.data, // 성공 결과 : 서버로부터 사용자 정보를 받아옴 }); /* 요청 실패 시 LOG_IN_FAILURE 액션 디스패치 */ } catch (err) { console.error(err); yield put({ type: LOG_IN_FAILURE, error: err.response.data, // 실패 결과 }); } }back/routes/user.js브라우저 새로 고침 시 나의 사용자 정보를 복구하는 라우터나의 사용자 정보를 복구하는 라우터는 user 라우터들 중에서 제일 위에 위치합니다!// 브라우저 새로고침 시 나의 사용자 정보를 복구하는 라우터 router.get('/', async (req, res, next) => { // GET /user // req.headers 안에 쿠키가 들어있다. console.log(req.headers, "req.headers 안에는 쿠키가 들어있다."); try { /* (로그인해서) 사용자 정보가 있다면 */ if (req.user) { /* (비밀번호를 제외한) 모든 사용자 정보를 가져오는 함수 */ const fullUserWithoutPassword = await User.findOne({ where: { id: req.user.id }, attributes: { exclude: ['password'] }, // 모델 가져오기 include: [{ /* 나의 게시글 */ model: Post, attributes: ['id'], // id 데이터만 가져오기 }, { /* 나의 팔로잉 */ model: User, as: 'Followings', attributes: ['id'], }, { /* 나의 팔로워 */ model: User, as: 'Followers', attributes: ['id'], }] }); // 200번대 에러 출력 res.status(200).json(fullUserWithoutPassword); /* (로그아웃해서) 사용자 정보가 없다면 */ } else { // 아무것도 보내지 않기 res.status(200).json(null); } /* 에러 캐치 */ } catch (error) { console.error(error); next(error); } });로그인 라우터// 로그인 라우터 : 사용자 로그인 전략 실행 router.post('/login', isNotLoggedIn, (req, res, next) => { /* '로컬', (서버 에러, 성공 객체, 클라이언트 에러)가 전달 */ passport.authenticate('local', (err, user, info) => { // done에서 넣은 값들이 순서대로 전달되는 곳 /* 서버 에러 */ 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, attributes: ['id'], // id 데이터만 가져오기 }, { /* 나의 팔로잉 */ model: User, as: 'Followings', attributes: ['id'], }, { /* 나의 팔로워 */ model: User, as: 'Followers', attributes: ['id'], }] }); /* (비밀번호를 제외한) 모든 사용자 정보를 프론트로 넘기기 */ return res.status(200).json(fullUserWithoutPassword); }); })(req, res, next); // 미들웨어 커스터마이징 });back/routes/middlewares.js로그인 검사// (로그인 안했을 때) 로그인 유무 검사 exports.isNotLoggedIn = (req, res, next) => { if (!req.isAuthenticated()) { next(); } else { res.status(401).send('로그인하지 않은 사용자만 접근 가능합니다.'); } }; 문제 해결을 위해 노드버드 커뮤니티에서 저와 비슷한 에러가 발생한 수강생 분이 계셨습니다!https://www.inflearn.com/questions/368573/%EB%A1%9C%EA%B7%B8%EC%9D%B8-%EC%A7%88%EB%AC%B8-%EB%A1%9C%EA%B7%B8%EC%9D%B8%ED%95%98%EC%A7%80-%EC%95%8A%EC%9D%80-%EC%82%AC%EC%9A%A9%EC%9E%90%EB%A7%8C-%EC%A0%91%EA%B7%BC%EC%9D%B4-%EA%B0%80%EB%8A%A5%ED%95%A9%EB%8B%88%EB%8B%A4해당 글에서 제로초님은 쿠키가 있는 걸로 봐서 이미 로그인이 된 상태인데프론트에서 자신이 로그인 되었다는 것을 인식하지 못하고 있으며,해당 getServerSideProps 쪽에 문제가 있다고 힌트를 주셨습니다!제로초님의 노드버드Ch7 user/[id].jshttps://github.com/ZeroCho/react-nodebird/blob/master/ch7/front/pages/user/[id].jsfront/pages/user/[id].js강의를 진행하며 깃허브와 약간은 다른 코드가 있습니다.// 서버사이드 렌더링(SSR) : getServerSideProps 사용 /* 사용자 컴포넌트보다 먼저 실행, 매개변수 context 안에 store가 들어있다. */ export const getServerSideProps = wrapper.getServerSideProps(async (context) => { /* 변수 cookie에 모든 cookie 정보 저장 */ const cookie = context.req ? context.req.headers.cookie : ''; /* 쿠키를 안 써서 요청 보낼 때는 서버에서 공유하고 있는 쿠키를 제거하기 */ axios.defaults.headers.Cookie = ''; /* 서버일 때, 그리고 쿠키가 있을 때만 서버로 쿠키 전달하기 */ if (context.req && cookie) { // 실제로 쿠키를 써서 요청을 보낼 때만 잠깐 쿠키를 넣어 놓는다. axios.defaults.headers.Cookie = cookie; } /* 처음에 화면을 로딩하면 특정 사용자의 게시글 불러오기 요청 액션 객체 디스패치 */ context.store.dispatch({ type: LOAD_USER_POSTS_REQUEST, data: context.params.id, // 또는 context.query.id로 useRouter에 접근 가능 }); /* 처음에 화면을 로딩하면 나의 사용자 정보 불러오기 요청 액션 객체 디스패치 */ context.store.dispatch({ type: LOAD_MY_INFO_REQUEST, }); /* 처음에 화면을 로딩하면 다른 사용자 정보 불러오기 요청 액션 객체 디스패치 */ context.store.dispatch({ type: LOAD_USER_REQUEST, data: context.params.id, // 또는 context.query.id로 useRouter에 접근 가능 }); /* 나의 사용자 정보, 다른 사용자 정보 불러오기, 여러 게시글 불러오기 요청(REQUEST)이 성공(SUCCESS)으로 바뀔 때까지 기다리기 */ context.store.dispatch(END); await context.store.sagaTask.toPromise(); console.log('getState', context.store.getState().post.mainPosts); return { props: {} }; });리듀서, 사가, 그리고 해당 서버사이드 렌더링 쪽을 점검해보았으나 잘못된 점을 찾지 못하여 질문 남깁니다..어떻게 하면 사용자(나)의 로그인이 유지되게 할 수 있을까요? 혹시 힌트 키워드라도 주실 수 있을까요?긴 질문 글 읽어주셔서 감사합니다 제로초님 항상 강의 잘 보고 있습니다!
-
해결됨[리뉴얼] React로 NodeBird SNS 만들기
백엔드 MySQL에서 Drop Database 후 DB 생성 시 table이 생성되지 않습니다!
안녕하세요 제로초님!AWS에 배포하기 및 카카오톡 공유하기 강의까지 끝마친 수강생 입니다!사전에 back 폴더 이미지 모델에서 이미지 문자열 길이를 수정하였습니다.백엔드 루트 MySQL에서 react-nodebird DB 삭제 후react-nodebird DB를 다시 만들어도 table이 재생성 되지 않아 질문 드립니다!DB를 삭제한 이유는 에러 로그 확인 시 아래 문제가 발생했기 때문입니다.이상하게도 두 에러 메시지 모두 DB와 Table이 존재하는 상태일 때 발생하였습니다.Error: Unknown database 'react-nodebird'DatabaseError [SequelizeDatabaseError]: Table 'react-nodebird.테이블명'문제를 해결하기 위해 제로초님의 섹션6 프론트 서버 배포하기 강의 14:00 와똑같은 방법으로 해결하려 하였습니다. 그러나 해결되지 않았습니다.react-nodebird DB를 지우기 전 테이블 상태DROP DATABASE 후 CREATE DATABASE react-nodebird DB 생성.백엔드 루트 경로에 npx sequelize db:create 명령어 입력 및 성공똑같이 테이블이 생성되지 않는 문제가 발생한 다른 수강생 분의 질문 글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=685995문제를 해결하기 위해 다른 방법을 찾던 중 같은 문제가 발생한 분을 찾았습니다!위 글에서 제로초 님께서는 테이블만 따로 재생성 하라고 하셨습니다.구글링 해보니 table을 만들기 위해서는 각 컬럼을 정의하는스키마를 작성하여 table을 만드는 방법이 많았습니다.강의에서는 나오지 않은 방법이라 함부로 시도하진 않았습니다...어떻게 하면 다시 table만 따로 생성할 수 있을까요?질문 글 읽어주셔서 감사합니다!
-
미해결[리뉴얼] React로 NodeBird SNS 만들기
좋아요 기능 구현
제로초님의 코드대로 한다라고 하면 게시물 데이터를 받을때 프론트쪽에 postId와 userId를 보내고 프론트에서 계산을 해야하던데 백엔드에서 이 게시물을 로그인한 유저가 좋아요를 눌럿는지 안눌엇는지에 대한 데이터를 바로 내주고 싶어서 이렇게 짜봣는데 자꾸 에러가 납니다.게시물에 대한 코드는 이거구요 const express = require("express") const { Post, Sequelize, User, Like } = require("../models") const router = express.Router() router.get("/",async(req,res,next)=>{ try { const posts = await Post.findAll({ // where:{ // id:lastId // }, limit: 10, // DESC 최신순 ASC 오래된순 order:[["createdAt","DESC"]], // 다른사람도 좋아요를 햇는지를 보여주는데 의미 없어보임 // include: [{ // model: User, // 좋아요 누른 사람 // as: 'Liked', // required: false, // attributes: ['id'], // through: { // attributes: [] // }, // }], attributes:[ "id", "content", "title", "createdAt", // 만든사람 [Sequelize.literal("(SELECT `nickName` FROM `Users` WHERE `Users`.`id` = `Post`.`userId`)"), "nickName"], // 이미지 소스 [Sequelize.literal("(SELECT `src` FROM `Images` WHERE `Images`.`postId` = `Post`.`id`)"), "src"], [ Sequelize.literal(` (SELECT CASE WHEN COUNT(*) FROM Liked WHERE Liked.PostId = Post.id AND Liked.UserId =: userId END) AS isLiked `), "isLiked" ], ], raw: true, }) res.status(201).send(posts) } catch (error) { console.error(error) next(error) } }) module.exports = router 에러는 이렇게 나고 있습니다.sqlState: '42000', sqlMessage: "You have an error in your SQL syntax; check the manual that corresponds to your MySQL server version for the right syntax to use near 'FROM Liked\n" + ' WHERE Liked.PostId = Post.id\n' + " ' at line 3",대체 뭐가 문제인건지도 감이 안잡히네요 ㅠㅠ
-
미해결Redux vs MobX (둘 다 배우자!)
context api, redux를 혼용하는건 별로일까요?
웹게임이 여러개 있으면서 일부는 사용자 간에 대전도 가능한 경우서버와 주고받는 데이터(대전 게임의 진행 데이터 포함)는 redux로 관리하고, 1인용 게임 등 다른 곳에서 사용할 일이 없는 게임의 데이터들은 context api로 관리하려고 하는데 적절한가요?
-
미해결따라하며 배우는 리액트 A-Z[19버전 반영]
creactStore질문이요
미들웨어에서 rootReducer 하나만 넣었을 땐 문제 없는데 2번째 인자 넣을때부터 에러가 계속 나는데 이유를 모르겠습니다.
-
미해결[리뉴얼] React로 NodeBird SNS 만들기
Amazon S3에서 파일 업로드 시 "Unzipped size must be smaller than 262144000 bytes" 에러가 발생합니다!
안녕하세요! 제로초님!! [리뉴얼] React로 NodeBird SNS 만들기섹션 6. AWS에 배포하기: Lambda로 이미지 리사이징 하기 강의까지 수강한 수강생 입니다!Lambda로 이미지 리사이징 강의의 20:00분 까지 그대로 잘 진행하고 있었습니다!그런데 Amazon S3에서 파일 업로드 시 아래 사진과 같은 에러가 발생합니다!"Unzipped size must be smaller than 262144000 bytes""압축 해제된 크기는 262144000바이트보다 작아야 합니다."해당 문제를 해결하기 위해 구글링 해보니serverless로 '/nodemodules' 같이 용량이 큰 것들을package exclude로 제외 시키는 것 같습니다!혹시 방법을 아시면 공유 부탁 드립니다!질문 글 읽어주셔서 감사합니다! 항상 강의 잘 보고 있습니다.+++ 혹시 모르니 저의 런타임 설정과 버킷 사진을 같이 첨부합니다!제로초님이 사용하신 Node.js 12.x가 항목에 없어서 Node.js 20.x을 사용하였습니다.
-
미해결[리뉴얼] React로 NodeBird SNS 만들기
EC2로 배포하니까 express-session에 저장한 데이터가 사라집니다.
로컬에서는 세션의 데이터가 안 사라지는데 EC2로 배포하니까 세션에 저장한 데이터가 사라집니다. app.use( session({ secret: process.env.SESSION_SECRET!, resave: false, saveUninitialized: false, store: MongoStore.create({ mongoUrl: process.env.DATABASE_URL }), cookie: { httpOnly: true, secure: true, domain: ".example.shop", }, }) ); 예를 들어 아래와 같이 코드를 작성하면app.get("/apple", (req, res) => { (req.session as any).apple = "apple"; console.log("apple", req.session); res.send("apple"); }); app.get("/banana", (req, res) => { console.log("banana", req.session); res.send("banana"); });/apple 에서는 세션에 apple이 저장되어 보이는데 /banana 에서 세션을 조회하면 쿠키 말고는 아무 것도 없습니다. 근데 mongodb에서 session 확인하면 저장은 잘되어 있습니다. 제가 뭘 놓친 걸까요?
-
미해결[리뉴얼] React로 NodeBird SNS 만들기
swr 사용 후 다른 탭에서 다른 아이디로 로그인하면 데이터가 잘못 옵니다. 도와주세요ㅜ
안녕하세요 제로초님. 덕분에 많은 것을 배우고 있습니다. 정말 감사합니다.그런데 최근 혼자 해결하기 어려운 문제가 있어 질문하게되었습니다.redux를 useSWR로 대체하였는데 그 후 다른 탭에서 다른 아이디로 로그인하면 로그인한 계정의 데이터가 아닌 다른 탭 계정의 데이터가 불러와지는 문제가 발생합니다. 캐시 문제 때문인 것 같은데 어떻게 설정해야 문제를 해결할 수 있을지 잘 모르겠습니다. 힌트가 될만한 내용을 알려주시면 정말 정말 감사하겠습니다. 부탁드립니다ㅜㅜㅜ
-
미해결[리뉴얼] React로 NodeBird SNS 만들기
source map 관련해서 질문드립니다.
현재 next ^13.5.6 버전 사용중입니다.next.config.js 설정에서 devtool hidden-source-map 설정이 ^13.5.6 버전에서도 필요할까요? 아래 공식문서 보면 productionBrowserSourceMaps 설정이 동일한 역할을 하는것같은데 맞을까요?development 에서는 true 라서 source map이 보여지고 build시 자동으로 false가 되어서 hidden-source-map이 적용되는것같은데 그럼 ^13.5.6 버전에서는 따로 hidden-source-map 설정 안해도 되는걸까요?https://github.com/vercel/next.js/blob/v13.5.6/docs/02-app/02-api-reference/05-next-config-js/productionBrowserSourceMaps.mdx
-
미해결[리뉴얼] 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
-
미해결따라하며 배우는 리액트 A-Z[19버전 반영]
중첩 라우트
그럼 중첩 라우트는 인클루드 개념 인거겠네요?
-
미해결[리뉴얼] 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); } }
주간 인기글
순위 정보를
불러오고 있어요