안녕하세요 제로초님!게시글을 작성하게되면 아래와 같이 성공했다고 응답도 잘 도착하지만 id가 undefined이라고 오류가 납니다.제가 어느 부분을 놓치고 있는건가요??

안녕하세요 제로초님 middleware.js를 사용하여로그인했을때와 하지않았을 때의 경우를 나눠놓으셨자나요!그 강좌를 듣고 코드를 그대로 작성하고 로그인을 진행해보는데올바른 이메일과 비밀번호를 입력해도 이 알림이 뜹니다.. 로그인도 실패로 응답하구요.. 어떤 부분이 문제일 가능성이 높을까요??

궁금한거 있으면 일단 ChatGPT에 검색해서 보고 있는데"NestJS의 Passport 통합에서는 PassportModule의 설정을 사용하여 Passport 초기화 및 세션 관리를 추상화합니다. 즉, PassportModule을 사용하면 내부적으로 passport.initialize()는 처리됩니다.그러나 passport.session()과 관련하여서는 다르게 동작합니다. passport.session() 미들웨어는 세션을 관리하기 위해 필요한 작업을 수행합니다. 이 미들웨어는 사용자의 요청마다 Passport를 통해 세션에서 사용자 정보를 복원하는 역할을 합니다. NestJS에서 세션 기반 인증을 사용할 때는 passport.session() 미들웨어를 수동으로 추가해주어야 합니다.따라서, 당신의 질문에 답하면, NestJS에서 passport.initialize()는 PassportModule을 사용함으로써 내부적으로 처리되지만, passport.session()은 명시적으로 추가해주어야 합니다.즉, app.use(passport.session())는 필요하며, app.use(passport.initialize())는 PassportModule 사용시에는 필요하지 않습니다."라고 하더군요. app.use(passport.initialize())는 필요가 없나요?

강좌에서처럼 me(내 정보 불러오는 상태변수) 변수를 통해 로그인 유지를 하고특정 페이지에서 비로그인 사용자를 차단할경우useEffect(() => { if(!me){ redirects(); } },[])이런식으로 로직을 짤수가 있는데문제가 브라우저 url로 접속할 경우 초기 me 의 상태가 null 이기 때문에 로그인을 한 상태더라도리다이렉트가 되는 문제가 있었습니다. 물론 ssr을 이용하면 이 문제가 해결은 되지만csr만 이용하는 선에서 리다이렉트가 정상적으로 작동하도록 하고 싶은데 어떻게 하면 좋을까요?

다름이 아니라 제로초님의 로그인 문제 해결하기 챕터를 보다가Posts.length관련 오류 해결하는 강의를 보는데제로초님의 redux화면이랑 저의 화면이랑 구성이 좀 다른 것 같아서 문의드립니다.제로초님의 화면은 위 사진처럼 me라는 객체로 나와서 확인하기 쉬운데제 화면은 아래처럼 그냥 데이터 라고 나오고 있습니다..어느 부분을 수정해야하는지 잘 모르겠어서 질문드립니다.

컴파일은 오류 없이 잘 되는데, 폼에서 짹짹(게시)버튼을 눌러도 글 작성이 되지 않습니다개발자도구에서 나타나는 오류입니Incorrect use of <label for=FORM_ELEMENT>The label's for attribute doesn't match any element id. This might prevent the browser from correctly autofilling the form and accessibility tools from working correctly.To fix this issue, make sure the label's for attribute references the correct id of a form field. PostCard가 작성되지 않는데 코드에서 오류를 못 찾겠어서 질문합니다! 의심스러운 부분들만 올려봅니다..post.js 코드입니다const ADD_POST = 'ADD_POST'; export const addPost = { type: ADD_POST } const reducer = (state = initialState, action) => { switch (action.type) { case ADD_POST: { return { ...state, mainPosts: [dummyPost, ...state.mainPosts], postAdded: true, }; }; default: { return { ...state, }; }; } }; PostForm.js 코드입니다const PostForm = () => { const { imagePaths } = useSelector((state) => state.post); const dispatch = useDispatch(); const imageInput = useRef(); const [text, setText] = useState(''); const onChangeText = useCallback((e) => { setText(e.target.value); }, []); const onSubmit = useCallback(() => { dispatch(addPost); setText('') }, []); return ( <Form style={{ margin: '10px 0 20px' }} encType="multipart/form-data" onFinish={onSubmit}> <Input.TextArea value={text} onChange={onChangeText} maxLength={140} placeholder='새로운 글 작성' /> <div> <input type="file" multiple hidden ref={imageInput} /> <Button onClick={onClickImageUpload}>이미지 업로드</Button> <Button type="primary" style={{ float: 'right' }} htmlType="submit">게시</Button> </div> <div> {imagePaths?.map((v) => ( <div key={v} style={{ display: 'inline-block' }}> <img scr={v} style={{ width: '200px' }} alt={v} /> <div> <Button>제거</Button> </div> </div> ))} </div> </Form> ) };  pages/index.js 코드입니다const Home = () => { const { isLoggedIn } = useSelector((state) => state.user); const { mainPosts } = useSelector((state) => state.post); return ( <AppLayout> {isLoggedIn && <PostForm />} {mainPosts.map((post) => <PostCard key={post.id} post={post} />)} </AppLayout> );

안녕하세요 제로초님.강의 잘 보았습니다.유저가 http request를 보냈을 때 해당 요청에 대한 로깅을 하려고 하는데 남겨야하는 정보에대한 고민이 있어 문의드립니다.한번의 요청에는 수업시간에 기재해주신 정보 이외에 여러정보가 있는걸로 알고있습니다.header(jwt token정보 등), body, param, query, response body 등 여러정보중 어떤 것을 로그에 포함해서 남겨주는게 좋을지 가늠이 되지 않아서 조언을 구하고 싶습니다!

req.logout을 호출할때 콜백함수가 필요하다 라고 나옵니다.req#logout requires a callback function이런식으로요 제 코드는 제로초님 코드처럼 적어놨는데 제가 이해하는 콜백함수라는게 라우터 부분이라고 생각이 드는데 어떻게 수정을 해야할지 감이 안잡힙니다 ㅜㅜ const express = require('express'); const bcrypt = require('bcrypt'); const passport = require('passport'); const { isLoggedIn, isNotLoggedIn } = require('./middlwares') const { User, Post } = require('../models'); const router = express.Router(); 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:["id","nickname","email"], attributes: { exclude:["password"] }, // 나머지 정보 include:[{ model:Post }, { model: User, as: "Followings", }, { model: User, as: "Followers", }] }) // post 팔로워 팔로잉 정보 비밀번호 제거 return res.status(200).json(fullUserWithoutPassword) }) })(req,res,next) }) router.post("/", isNotLoggedIn, async (req, res, next) => { try { const exUser = await User.findOne({// 중복이 됫는지아닌지. where:{ email:req.body.email, } }) if(exUser){ return res.status(403).send("이미 사용중인 아이디입니다.") } const hashedPassword = await bcrypt.hash(req.body.password, 12) await User.create({ email:req.body.email, nickname: req.body.nickname, password: hashedPassword, }) // res.setHeader("Access-Control-Allow-Origin","http://localhost:3000") res.status(201).send("회원가입이 완료되셨습니다.") // 201은 생성이 잘됫다. } catch (error) { console.error(error) next(error)// 에러가 난거를 브라우저에 알려준다. statsus:500 } }) router.post('/logout', (req, res) => { req.logout(); req.session.destroy(); res.send('ok'); }); module.exports = router

안녕하세요 제로초님다름이 아니라 로그인 후 포스트를 추가할 때 에러가 발생하는데혼자 해결하려고 노력해봤지만 해결을 아직 하지 못하여 질문드립니다.reducers/post.jsimport shortId from "shortid"; import { produce } from "immer"; import faker from "faker"; export const initialValue = { mainPosts: [], //이미지업로드 할떄 이미지경로들이 여기 들어간다. imagePaths: [], hasMorePost: true, //true면 가져올 시도를 해라. (스크롤 했을 때) loadPostsLoading: false, loadPostsDone: false, loadPostsError: null, //게시글 추가가 완료되었을때 TRue addPostLoading: false, addPostDone: false, addPostError: null, removePostLoading: false, removePostDone: false, removePostError: null, addCommentLoading: false, addCommentDone: false, addCommentError: null, }; //가짜 데이터 export const generateDummyPost = (number) => Array(number) .fill() .map(() => ({ id: shortId.generate(), User: { id: shortId.generate(), nickname: faker.name.findName(), }, content: faker.lorem.paragraph(), //아무 문장, Images: [ { src: "https://image.utoimage.com/preview/cp872722/2022/12/202212008462_500.jpg", }, ], Comments: [ { User: { id: shortId.generate(), nickname: faker.name.findName(), }, content: faker.lorem.sentence(), }, ], })); export const LOAD_POSTS_REQUEST = "LOAD_POSTS_REQUEST"; export const LOAD_POSTS_SUCCESS = "LOAD_POSTS_SUCCESS"; export const LOAD_POSTS_FAILURE = "LOAD_POSTS_FAILURE"; export const ADD_POST_REQUEST = "ADD_POST_REQUEST"; export const ADD_POST_SUCCESS = "ADD_POST_SUCCESS"; export const ADD_POST_FAILURE = "ADD_POST_FAILURE"; export const REMOVE_POST_REQUEST = "REMOVE_POST_REQUEST"; export const REMOVE_POST_SUCCESS = "REMOVE_POST_SUCCESS"; export const REMOVE_POST_FAILURE = "REMOVE_POST_FAILURE"; export const ADD_COMMENT_REQUEST = "ADD_COMMENT_REQUEST"; export const ADD_COMMENT_SUCCESS = "ADD_COMMENT_SUCCESS"; export const ADD_COMMENT_FAILURE = "ADD_COMMENT_FAILURE"; export const addPost = (data) => ({ type: ADD_POST_REQUEST, data, }); export const addComment = (data) => ({ type: ADD_COMMENT_REQUEST, data, }); //리듀서란 이전 상태를 액션을 통해 다음 상태로 만들어내는 함수(단, 불변성은 지키면서) //draft는 불변성 상관없이 바꾸면 immer가 알아서 불변성있게 만들어준다. const reducer = (state = initialValue, action) => produce(state, (draft) => { switch (action.type) { //게시글 추가 case ADD_POST_REQUEST: draft.addPostLoading = true; draft.addPostDone = false; draft.addPostError = null; break; case ADD_POST_SUCCESS: draft.addPostLoading = false; draft.addPostDone = true; draft.mainPosts.unshift(action.data); draft.imagePaths = []; //unshift란 배열의 맨 앞에다가 추가하는 함수 break; case ADD_POST_FAILURE: draft.addPostLoading = false; draft.addPostError = action.error; break; //게시글 불러오기 case LOAD_POSTS_REQUEST: draft.loadPostsLoading = true; draft.loadPostsDone = false; draft.loadPostsError = null; break; case LOAD_POSTS_SUCCESS: draft.loadPostsLoading = false; draft.loadPostsDone = true; draft.mainPosts = action.data.concat(draft.mainPosts); //concat은 두개 이상의 배열을 합칠 때 사용 //action.data에는 더미데이터들이 들어있고 draft.mainPosts는 원래 데이터 draft.hasMorePost = draft.mainPosts.length < 50; //50개보다 적으면 불러와야함 break; case LOAD_POSTS_FAILURE: draft.loadPostsLoading = false; draft.loadPostsError = action.error; break; //댓글 추가 case ADD_COMMENT_REQUEST: draft.addCommentLoading = true; draft.addCommentDone = false; draft.addCommentError = null; break; case ADD_COMMENT_SUCCESS: //immer버전 (너무 간단함) const post = draft.mainPosts.find( (v) => v.id === action.data.postId ); //해당 게시글 찾기 post.Comments.unshift(dummyComment(action.data.content)); draft.addCommentLoading = false; draft.addCommentDone = true; //댓글 넣어주기 break; //immer를 안 쓴 부분 // const postIndex = state.mainPosts.findIndex( // (v) => v.id === action.data.postId // ); // const post = { ...state.mainPosts[postIndex] }; // post.Comments = [ // dummyComment(action.data.content), // ...post.Comments, // ]; //얕은 복사 // const mainPosts = [...state.mainPosts]; // mainPosts[postIndex] = post; //댓글 추가하는 부분 너무어려움.. // //불변성을 지키다 보니 가독성이 너무 안좋음 // return { // ...state, // mainPosts, // addCommentLoading: false, // addCommentDone: true, // }; case ADD_COMMENT_FAILURE: draft.addCommentLoading = false; draft.addCommentError = action.error; break; //게시글 삭제 case REMOVE_POST_REQUEST: draft.removePostDone = false; draft.removePostLoading = true; draft.removePostError = null; break; case REMOVE_POST_SUCCESS: draft.removePostLoading = false; draft.removePostDone = true; draft.mainPosts = draft.mainPosts.filter( (v) => v.id !== action.data ); break; case REMOVE_POST_FAILURE: draft.removePostLoading = false; draft.removePostError = action.error; break; default: break; } }); export default reducer;여기서 Images안에 아무것도 들어있지 않아서 나타나는 오류같은데 잘 모르겠습니다.

import { List, Button, Card } from 'antd';import { StopOutLined } from '@ant-design/icons';로 임포트를 했는데도 불구하고 프로필창을 열면 다음과 같은 에러가 납니다터미널에는 에러메시지도 뜨고요error - ./components/FollowList.jsAttempted import error: 'StopOutLined' is not exported from '@ant-design/icons'.  npm i antd antd 와 npm install @ant-design/icons --save-dev로 다시 설치해봤는데 해결되지 않았습니다 package.json 에서 확인한 버전입니다 "antd": "^5.10.2", "@ant-design/icons": "^5.2.6",  FollowList.js 에서 의심스러운 부분입니다import { List, Button, Card } from 'antd'; import { StopOutLined } from '@ant-design/icons'; const FollowList = ({header, data}) => { return ( <List renderItem={(item) => ( <List.Item style={{ marginTop: 20 }}> <Card actions={[<StopOutLined key="stop" />]}> <Card.Meta description={item.nickname} /> </Card> </List.Item> )} /> ) };

현재 Sleact 프로젝트를 Nestjs로 백앤드 개발을 완료하여 개인 도메인으로 배포중 이고 현재 Sleact 프론트단을 Vite 와 React-query 를 이용해서 다시 제작중에 Login의 쿠키가 정상적으로 넘어 오지 않는 에러가 있었습니다.해당 에러는 배포중인 api는 개인 도메인이고 프론트 단은 localhost 여서 sameSite 에러가 발생 한거였는데아래와 같이 secure: true 설정을 하게되면 Api 서버는 https 이고 localhost 는 http 여서 실패하게되고 cookie: { httpOnly: true, sameSite: 'none', secure: true, },아래와 같이 secure: false 설정을 하게되면 인용구 문구가 뜨면서 실패하게 됩니다. cookie: { httpOnly: true, sameSite: 'none', secure: false , },samesite none 속성은 있지만 samesite=none 을 사용하는데 필요한 secure 속성은 없으므로 set-cookie 헤더를 통해 쿠키를 설정하려는 시도가 차단되었습니다현재는 api를 localhost로 추가로 실행하여 front 단에서 현재 개발환경에 따라 dev 일때는 localhost 개발 단에서는 개인도메인으로 요청하도록 해서 해결햇는데, localhost 에서 배포된 api를 받아 사용할때 어떻게 처리하는게 올바른 방법인가요?

보시면 하나의 지도 div에 두개가 열리는 것 같습니다.실제로 지도가 두개가 열려 서로 level이 달라 겹치는 모습입니다. 뒷장의 지도에는 마커가 표기되지 않습니다.아래는 맵과 관련된 코드들입니다.mern_client/src/components/common/Map/index.tsximport React, { useEffect } from 'react'; interface MapProps { width: string; height: string; initMap?: (map: naver.maps.Map) => void; } function Map({width, height, initMap}: MapProps) { useEffect(() => { const mapOptions = { center: new naver.maps.LatLng(37.3595704, 127.105399), zoom: 10 }; const map = new naver.maps.Map('map', mapOptions); if (initMap){ initMap(map); } }, []); return <div id="map" style={{width, height}}></div>; } export default Map; mern_client/src/components/MapContainer.tsximport { useSetAtom } from "jotai"; import React from 'react'; import Map from './common/Map'; import { mapAtom } from "../atoms/map"; function MapContainer() { const setMap = useSetAtom(mapAtom); const initMap = (map: naver.maps.Map) => { setMap(map); naver.maps.Event.addListener(map, 'click', () => { console.log("맵 클릭"); }); }; return <Map width="100%" height='100%' initMap={initMap}/> }; export default MapContainer; mern_client/src/atoms/map.tsimport { atom } from 'jotai'; export const mapAtom = atom<naver.maps.Map | null>(null);

혹시 서버가 2개가 생성된 이유가 뭘까요..?

sudo dpkg -i mysql-apt-config_0.8.23-1>_all.deb를 입력하면 error가 발생하는데.. 어떻게 해결할 수 있을까요..?

안녕하세요 제로초님현재 섹션3 redux-saga 연동하기 - 게시글, 댓글 saga 작성하기 영상의 Warning: Encountered two children with the same key, 2. 에러 해결까지 수강한 학생입니다!로그인 후 포스트 폼에 글을 입력 후 트윗하기 버튼을 누르는 순간 콘솔 창에 에러가 발생했습니다.redux-devtools로 포스트 추가 액션의 변화를 살펴보니ADD_POST_SUCCESS 포스트 추가 성공 액션이 실행되고 있지 않았습니다! 콘솔에 있는 에러 메시지 번역은 다음과 같았습니다.번역을 읽고 data가 undefined이며, addPost에 이상이 있음을 확인했고,컴포넌트 폴더의 PostForm.js와 reducers/post.js, sagas/post.js를 코드를 확인했습니다.https://github.com/ZeroCho/react-nodebird/blob/master/ch4/front/components/PostForm.js제로초님의 깃허브 챕터4와 구글 검색을 참고 후 가장 의심되는 코드 부분을 올립니다!※ 관련 없는 코드는 . . . 으로 요약 표시하였습니다. components/PostForm.js가독성을 위해 setText는 setPostText로, text는 postText로 바꾸어 코딩했습니다.// reducer 포스트 추가 요청 액션 불러오기 import { addPost } from '../reducers/post'; // 포스트 폼 컴포넌트(사용자 정의 태그) const PostForm = () => { const dispatch = useDispatch(); const [postText, onChangePostText, setPostText] = useInput(''); const { imagePaths, addPostLoading, addPostDone } = useSelector((state) => state.post); /* ----- 포스트 추가 완료 시 포스트 폼 글자 지우기 ----- */ useEffect(() => { if (addPostDone) { setPostText(''); } }, [addPostDone]); /* ----- 포스트 폼 제출 시 포스트 카드 추가 ----- */ const onSubmitForm = useCallback(() => { dispatch(addPost(postText)); }, [postText]); // const onSubmitForm = useCallback(() => { // dispatch({ // type: ADD_POST_REQUEST, // data: addPost, // }); // }, [postText]); return ( <Form . . . /> <Input.TextArea id="post-form" value={postText} onChange={onChangePostText} maxLength={140} placeholder="어떤 신기한 일이 있었나요?" /> . . . {/* ---------- 포스트 작성 버튼 ---------- */} <Button type="primary" style={{ float: 'right' }} htmlType="submit" loading={addPostLoading} > 트윗하기 </Button> </div> </Form> ); }; reducers/post.js// ShortId 라이브러리 불러오기 import shortId from 'shortid'; // 중앙 데이터 저장소(기본 state) export const initialState = { /* ---------- 메인 포스트 더미 데이터 ---------- */ mainPosts: [{ . . . }], /* ---------- 이미지 업로드 시 경로 저장 ---------- */ imagePaths: [], /* ---------- 포스트 추가 시도 중, 완료, 에러 ---------- */ addPostLoading: false, addPostDone: false, addPostError: null, } // 포스트 추가 액션 : 요청, 성공, 실패 export const ADD_POST_REQUEST = 'ADD_POST_REQUEST'; export const ADD_POST_SUCCESS = 'ADD_POST_SUCCESS'; export const ADD_POST_FAILURE = 'ADD_POST_FAILURE'; // 포스트 추가 요청 액션 생성함수(action creator) export const addPost = (data) => ({ type: ADD_POST_REQUEST, data, }); // 포스트 더미 데이터 const dummyPost = (data) => ({ id: shortId.generate(), content: data, User: { id: 1, nickname: '다랑', }, Images: [], Comments: [], }); // 리듀서(reducer) : (이전 상태, 액션) => 다음 상태 const reducer = (state = initialState, action) => { switch (action.type) { /* ----- 포스트 추가 요청 리듀서 ----- */ case ADD_POST_REQUEST: return { addPostLoading: true, addPostDone: false, addPostError: null, }; /* ----- 포스트 추가 성공 리듀서 ----- */ case ADD_POST_SUCCESS: return { ...state, mainPosts: [dummyPost(action.data), ...state.mainPosts], addPostLoading: false, addPostDone: true, // 사용자 더미 데이터 me: dummyUser(action.data), }; /* ----- 포스트 추가 실패 리듀서 ----- */ case ADD_POST_FAILURE: return { addPostLoading: false, addPostError: action.error, }; default: return state; } }; sagas/post.js// Saga 이펙트 불러오기 import { all, fork, call, takeLatest, put, delay } from 'redux-saga/effects'; // Axios 라이브러리 불러오기 import axios from 'axios'; // reducer 포스트 추가, 답글 추가 액션 불러오기 import { ADD_POST_REQUEST, ADD_POST_SUCCESS, ADD_POST_FAILURE, } from '../reducers/post'; // addPost 실행 시 서버에 addPostAPI 요청 function addPostAPI(data) { return axios.post('/api/post', data) } // ADD_POST_REQUEST 액션이 실행되면 addPost 함수 실행 function* addPost(action) { try { // const result = yield call(addPostAPI, action.data); /* ----- 요청 성공 시 ADD_POST_SUCCESS 액션 디스패치 ----- */ yield delay(1000); yield put({ type: ADD_POST_SUCCESS, data: action.data, // 성공 결과 }); } catch (err) { /* ----- 요청 실패 시 ADD_POST_FAILURE 액션 디스패치 ----- */ yield put({ type: ADD_POST_FAILURE, error: err.response.data, // 실패 결과 }); } } 강의 잘 보고 있습니다!항상 정성스러운 답변 남겨주셔서 감사합니다 제로초님!

안녕하세요 제로초님~ 금일 질문드리고자 하는 내용은 제 ec2 에 띄워둔 nest.js 서버에 여러명이 동시에 접속 시, 서버의 오작동에 관한 내용입니다.nest.js 로 개발을 하면서 여러 사람이 서버에 동시에 로그인을 하면, 로그인한 당사자가 아닌 다른 사람의 회원정보가 나타나는 버그를 발견했습니다. 그래서 인터셉터를 사용하여 사용자에게 응답을 보내기 전 한번 더 검증을 진행하는 방식으로 해결을 했지만, 여러 의문점들을 해결하지 못하여 질문드립니다.1. 인터셉터를 사용하여 위 문제를 해결한 것이 올바른 접근 방식일까요? 팀원들에게 물어보니 인터셉터를 적용한 후에 위 같은 현상이 사라졌다고는 합니다.2. 이러한 문제가 나타나는 이유가 무엇일까요? 제 예상으로는 Node.js 가 싱글스레드라서 여러 요청이 한번에 몰려오면 비동기 부분이 꼬여서 나타나는 문제일까 생각했습니다. 그런데 챗지피티에게 물어보니 오히려 싱글스레드, 싱글톤이면 꼬일 일이 없다고 해서 더 혼란스럽네요. ============================================깃허브 저장소 컨트롤러 부분 : https://github.com/fog-of-war/dev-be/blob/dev/src/users/users.controller.ts#L63서비스 부분 : https://github.com/fog-of-war/dev-be/blob/dev/src/users/users.service.ts#L72가드 부분 : https://github.com/fog-of-war/dev-be/blob/dev/src/auth/guard/at.guard.ts#L13전략 부분 : https://github.com/fog-of-war/dev-be/blob/fff2d70af55ba51d1b3649006774b4d2aec7d566/src/auth/strategy/at.strategy.ts#L12인터셉터 부분 : https://github.com/fog-of-war/dev-be/blob/dev/src/common/interceptor/user-sub-check.interceptor.tsGetCurrentUser 데코레이터 부분 : https://github.com/fog-of-war/dev-be/blob/dev/src/auth/decorator/get-current-user-id.decorator.ts#L4============================================아래의 글은 제가 해결해보면서 적은 블로그 글입니다. ### 1. 로그로 찍어보기일단 로그로 어떻게 된 일인지 확인해봤다.```ts@UseGuards(ATGuard) @Controller("users") export class UsersController {   constructor(     private userService: UsersService,     private logger: LoggerService   ) {}   /** 나의 정보 가져오기/ 마이페이지, 메인페이지 사용 */   @Get("me")   async getMe(@GetCurrentUserInfo() user) {     // 1. 여기선 user_id : 3 으로 출력되나     this.logger.log("1️⃣ 1. 자신의 회원정보 호출한 사람 ", user["sub"]);     const result = await this.userService.findUserById(user["sub"]);     // 2. 여기선 user_id : 2 의 정보를 출력 후 user_id : 3 에게 응답     this.logger.log("2️⃣2. 자신의 회원정보 호출 결과", result);     return result;   } }user_id :  3 이 'users/me' 요청을 했을때 1️⃣ 로그에서는 정상적으로 요청한 사람의 정보를 출력했다.그러나 서비스 계층 비즈니스 로직을 지난 뒤인 2️⃣ 로그에서는 user_id : 2 의 정보를 출력했다.엑세스토큰 소유자의 것이 아닌 동시에 접속한 다른 사람의 정보를 전달한 것이다.혼자 로컬에서 여러 계정으로 로그인해가며 작업을 할 땐 이런 현상이 없었기에, Node.js 의 싱글스레드 방식 때문이 아닐까 예상했다.### 2. 비슷한 사례 찾아보기"로그인하면 다른 사람 정보가"···리디, 개인정보 유출 사고[https://v.daum.net/v/20230329083313717](https://v.daum.net/v/20230329083313717)올리브영 개인정보 노출 사건, 무슨 일이 일어났을까?[https://www.boannews.com/media/view.asp?idx=114594](https://www.boannews.com/media/view.asp?idx=114594)리디북스의 경우 CDN 서버 캐시 설정 오류, 올리브영의 경우 CDN 오류 였다고 한다. 현재 내 서버는 CDN 방식을 사용하지 않고 있다.올리브영, 아직 조사 중이라 상세 내용 공개 어려워그러면서 “CDN(콘텐츠 배포 네트워크)에서 일시적인 오류가 발생해 일부 고객들의 정보가 노출된 것”이라고 설명했다. CDN이 엉키면 사용자가 특정 콘텐츠를 요청했을 때, 엉뚱한 결과가 출력되는데, 바로 그런 일이 일어났다는 것이다.Open AI 의 경우 Redis 라이브러리 버그[https://www.clien.net/service/board/news/17984872](https://www.clien.net/service/board/news/17984872)클리앙의 경우 Redis 라이브러리 버그[https://www.clien.net/service/board/annonce/17922106](https://www.clien.net/service/board/annonce/17922106) Open AI 와 클리앙의 경우 레디스 라이브러리 버그로 발생했다고 한다. 하지만 내 서버에 레디스를 설치하기 전에도 해당 버그는 발생했었다. 정확한 원인이 파악되었습니다.저희가 서버에서 세션을 저장하고 있는 redis(일종의 메모리db)가 한계수치 이상의 부하를 받으면 인덱스가 깨지는 현상이 발생한다고 합니다.국내 대형 쇼핑몰 두곳에서 최근 유사한 증상이 있어 관련자들에게 문의해본 바 저희와 같은 증상이었습니다.  이번의 여러 조치 중 redis 통신 최적화 작업도 진행하였기에  다시 재발되지 않을 것입니다.더 줄일 수 있는 요소가 있으므로  추가적인 작업을 진행할 예정입니다.### 3. 해결 방안클라이언트에게 데이터를 돌려보내기 전에 한 번 더 검증을 진행하기로 했다.들어오는 모든 요청을 인터셉터가 먼저 확인하고, 해당 엔드포인트가 Access Token 을 사용하는 메서드라면 user_id 를 originalUserSub 라는 변수에 기록해둔다.그리고 응답을 반환하기 전, 반환 값에 들어있는 user_id 와 originalUserSub 의 동일 여부를 검증한다.만약 검증을 통과하지 못한다면 해당 요청을 무효화하고 다시 실행하게끔 로직을 구성했다.import { Injectable, NestInterceptor, ExecutionContext, CallHandler } from '@nestjs/common'; import { Observable } from 'rxjs'; import { switchMap } from 'rxjs/operators'; import { LoggerService } from '../../logger/logger.service'; @Injectable() export class UserSubCheckInterceptor implements NestInterceptor {   constructor(private readonly logger: LoggerService) {}   intercept(context: ExecutionContext, next: CallHandler): Observable<any> {     const request = context.switchToHttp().getRequest();     const user = request.user;     const originalUserSub = request.user.sub;     return next.handle().pipe(       switchMap(async (data) => {         if (user['sub'] && data.user_id) {           if (data.user_id && originalUserSub !== undefined && data.user_id !== originalUserSub) {             // user["sub"] 값이 변경되었으므로 해당 메서드를 다시 호출합니다.             this.logger.log("UserSubCheckInterceptor : user['sub'] 가 동일하지 않습니다 " + originalUserSub +  "!==" + data.user.user_id)             return await next.handle().toPromise();           }         }         return data;       }),     );   } }https://github.com/fog-of-war/dev-be/blob/dev/src/common/interceptor/user-sub-check.interceptor.ts 

안녕하세요!  람다하고 nginx 까지 적용했는데, 정말 렌덤하게 403 error 가 뜹니다.몇몇 이미지는 처음 업로드 할때 403 error 가 나지만 새로고침을 하면 업로드가 되어 있었습니다.1MB에 png 이미지는 resizing 이 되지 안고 새로고침을 해도 403에러가 납니다.람다 모니터링 메세지를 봤는데 이렇게 나옵니다.혹시 제가 resize 폴더에 너무 많은 이미지를 저장해서 나는 오류일까요? 감사합니다.

질문보다는 코드 리뷰에 가까운데 강의 내용중에 나온 테스트 코드와 실제 배포시 다르게 적용할 경우 예제를 작성해 보았습니다.이해한 내용이 맞는지 또는 보안이나 수정할 만한 내용이 있는지 알려주시면 감사합니다.//app.service.ts import { Injectable } from '@nestjs/common'; export interface IAppService { getSecret(): string; } @Injectable() export class AppService implements IAppService { getSecret(): string { return '실제 배포 환경'; } } @Injectable() export class Test_AppService implements IAppService { getSecret(): string { return '개발 테스트 환경'; } } //app.module.ts import { Module } from '@nestjs/common'; import { AppController } from './app.controller'; import { AppService, Test_AppService } from './app.service'; import { ConfigModule } from '@nestjs/config'; @Module({ imports: [ConfigModule.forRoot({ isGlobal: true })], controllers: [AppController], providers: [ { provide: 'AppService', useClass: process.env.NODE_ENV === 'production' ? AppService : Test_AppService, }, ], }) export class AppModule {} //app.controller.ts import { Controller, Get, Inject } from '@nestjs/common'; import { IAppService } from './app.service'; @Controller() export class AppController { constructor(@Inject('AppService') private readonly appService: IAppService) {} @Get() getHello(): string { return this.appService.getSecret(); } }

강의 내용중 어떤것들은 DI 때마다 객체가 생성될수가 있고그럴 경우 웹소캣 객체같은 경우 문제가 생길수 있다고 하셧는데Nest 에서 그것을 해결하기 위해 자동으로 Module 단에서 Provider에 추가시 자동으로 객체를 하나만 만든후 재사용하여 (싱글톤과 유사하게 작동) 등을 통해 해결을 해주는것인지아니면 직접 해당 Class에서 싱글톤으로 생성을 해줘야 하는건지 궁금합니다.

프로트 서버에서 config.js안에 있는 주소 바꿔주고 npm run build 했는데 계속 빌드가 안됩니다.용량이 너무 커서 서버가 멈춘것일까요? 다른 분 질문 한것을 보니까 이럴경우 로컬에서 빌드를 하고 git push 할때 .next 파일도 같이 보내주는 경우를 봤는데, 이렇게 해도 상관 없나요?아니면 다른 부분에서 이슈가 있어서 빌드가 안되는 것일까요?음...터미널을 닫고 ec2서버 다시 연결하려는데, 연결이 안되고 계속 저기 상태에서 연결이 안되네요...서버에 이상이 생긴걸까요?감사합니다.