묻고 답해요
131만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결Slack 클론 코딩[백엔드 with NestJS + TypeORM]
로그로 남겨야하는 항목을 어디까지로 해야할까요?
안녕하세요 제로초님.강의 잘 보았습니다.유저가 http request를 보냈을 때 해당 요청에 대한 로깅을 하려고 하는데 남겨야하는 정보에대한 고민이 있어 문의드립니다.한번의 요청에는 수업시간에 기재해주신 정보 이외에 여러정보가 있는걸로 알고있습니다.header(jwt token정보 등), body, param, query, response body 등 여러정보중 어떤 것을 로그에 포함해서 남겨주는게 좋을지 가늠이 되지 않아서 조언을 구하고 싶습니다!
-
해결됨[리뉴얼] React로 NodeBird SNS 만들기
로그아웃시 req logout의 콜백함수 에러가 납니다...
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
-
미해결[리뉴얼] React로 NodeBird SNS 만들기
post 추가 시 오류
안녕하세요 제로초님다름이 아니라 로그인 후 포스트를 추가할 때 에러가 발생하는데혼자 해결하려고 노력해봤지만 해결을 아직 하지 못하여 질문드립니다.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안에 아무것도 들어있지 않아서 나타나는 오류같은데 잘 모르겠습니다.
-
해결됨[리뉴얼] React로 NodeBird SNS 만들기
<StopOutLined> 이 exported 되지 않는 오류
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> )} /> ) };
-
해결됨Slack 클론 코딩[백엔드 with NestJS + TypeORM]
login Cookie 전송에 관해 질문이 있습니다.
현재 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를 받아 사용할때 어떻게 처리하는게 올바른 방법인가요?
-
미해결MERN 스택으로 만드는 지도서비스(+ TypeScript)
지도가 두개가 열리는 것 같습니다
보시면 하나의 지도 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);
-
미해결[개정3판] Node.js 교과서 - 기본부터 프로젝트 실습까지
AWS 배포 서버 관련 문의드립니다....
혹시 서버가 2개가 생성된 이유가 뭘까요..?
-
미해결[개정3판] Node.js 교과서 - 기본부터 프로젝트 실습까지
SSH 콘솔 sql 설치 오류문의합니다.
sudo dpkg -i mysql-apt-config_0.8.23-1>_all.deb를 입력하면 error가 발생하는데.. 어떻게 해결할 수 있을까요..?
-
해결됨[리뉴얼] React로 NodeBird SNS 만들기
포스트 트윗 시 게시글이 추가되지 않고, 요청 무한로딩에 걸립니다. TypeError: Cannot read properties of undefined (reading 'data')
안녕하세요 제로초님현재 섹션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, // 실패 결과 }); } } 강의 잘 보고 있습니다!항상 정성스러운 답변 남겨주셔서 감사합니다 제로초님!
-
미해결Slack 클론 코딩[백엔드 with NestJS + TypeORM]
서버에 여러명이 동시 접속 시 잘못된 개인정보 전송 오류
안녕하세요 제로초님~ 금일 질문드리고자 하는 내용은 제 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
-
미해결[리뉴얼] React로 NodeBird SNS 만들기
정말 렌덤하게 403(Forbiden Error) 가 뜹니다.
안녕하세요! 람다하고 nginx 까지 적용했는데, 정말 렌덤하게 403 error 가 뜹니다.몇몇 이미지는 처음 업로드 할때 403 error 가 나지만 새로고침을 하면 업로드가 되어 있었습니다.1MB에 png 이미지는 resizing 이 되지 안고 새로고침을 해도 403에러가 납니다.람다 모니터링 메세지를 봤는데 이렇게 나옵니다.혹시 제가 resize 폴더에 너무 많은 이미지를 저장해서 나는 오류일까요? 감사합니다.
-
해결됨Slack 클론 코딩[백엔드 with NestJS + TypeORM]
개발환경과 배포환경시 다른 의존성을 주입하는 예제
질문보다는 코드 리뷰에 가까운데 강의 내용중에 나온 테스트 코드와 실제 배포시 다르게 적용할 경우 예제를 작성해 보았습니다.이해한 내용이 맞는지 또는 보안이나 수정할 만한 내용이 있는지 알려주시면 감사합니다.//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(); } }
-
해결됨Slack 클론 코딩[백엔드 with NestJS + TypeORM]
의존성 주입시 객체가 반복적으로 생성될 수 있다고 했는데 해결방법이 어떻게 되는건가요?
강의 내용중 어떤것들은 DI 때마다 객체가 생성될수가 있고그럴 경우 웹소캣 객체같은 경우 문제가 생길수 있다고 하셧는데Nest 에서 그것을 해결하기 위해 자동으로 Module 단에서 Provider에 추가시 자동으로 객체를 하나만 만든후 재사용하여 (싱글톤과 유사하게 작동) 등을 통해 해결을 해주는것인지아니면 직접 해당 Class에서 싱글톤으로 생성을 해줘야 하는건지 궁금합니다.
-
미해결[리뉴얼] React로 NodeBird SNS 만들기
front 서버에서 npm run build error.
프로트 서버에서 config.js안에 있는 주소 바꿔주고 npm run build 했는데 계속 빌드가 안됩니다.용량이 너무 커서 서버가 멈춘것일까요? 다른 분 질문 한것을 보니까 이럴경우 로컬에서 빌드를 하고 git push 할때 .next 파일도 같이 보내주는 경우를 봤는데, 이렇게 해도 상관 없나요?아니면 다른 부분에서 이슈가 있어서 빌드가 안되는 것일까요?음...터미널을 닫고 ec2서버 다시 연결하려는데, 연결이 안되고 계속 저기 상태에서 연결이 안되네요...서버에 이상이 생긴걸까요?감사합니다.
-
미해결[리뉴얼] React로 NodeBird SNS 만들기
pm2 status 에러
s3 설정을 하고 나서, 서버 도메인을 새로고침하고, pm2 리스트를 봤는데, status에 errored라고 뜹니다.pm2를 kill하고 다시 시작했는데, 처음에는 아무 이상없고, 도메인에 접속하고 list를 찍어보면 Status 가 Errored 라고 바뀌어 있네요ㅜㅜ어디쪽에서 errored가 발생한것일까요? 감사합니다.
-
미해결[리뉴얼] React로 NodeBird SNS 만들기
DROP DATABASE 후에 테이블 다시 생성하는 과정에 대한 질문.
안녕하세요! DROP DATABASE 후에 테이블을 다시 생성하는 과정을 반복했는데, use my-memories-back(제 데이터베이스 이름.)을 입력하니까 ERROR 1049 (42000): Unknown database 'my-memories-back'가 뜹니다.한가지 걸리는 것은 DROP DATABASE할때, root 권한으로 mysql 접속해서 했는데, 이것이 문제가 있을까요?음.. 그리고 이건 Back end server pm2 list 인데,Access denied for user 'root'@'localhost'라는 에러가 뜨는데, 이것이 테이블을 다시생성 하는것에 문제가 될 수 있을것이라고 생각이 드는데, 어떤가요? 항상 감사합니다 :)
-
미해결Slack 클론 코딩[백엔드 with NestJS + TypeORM]
서비스 배포 관련 궁금한 부분이 있어 질문드립니다.
서비스 배포 관련 궁금한 부분이 있어 질문드립니다. 1. 현재 ubuntu 에 nginx 와 pm2 설치 해서 nestjs를 테스트 진행하고 있는데 특별한 이상은 없어 보이는데실제 서비스에도 pm2를 사용하게 안전성에 문제가 없는지 궁금 합니다. 2. 검색을 하다보니 Bun 1.0 이 있던데 이거 실제 서비스에 사용할수 있는지 궁금합니다.
-
미해결[리뉴얼] React로 NodeBird SNS 만들기
verticalAlign이 제대로 안먹어서 "N개의 사진 더보기" 의 위치가 이상하게 나올경우.
<> <div> // img 태그의 스타일에도 버티컬얼라인 미들 추가해주면 정상적으로 나옵니다. <img role="presentation" style={{ verticalAlign: 'middle' }} width="50%" src = {images[0].src} alt={images[0].src} onClick={onZoom} /> <div role="presentation" style={{ display: 'inline-block', width: '50%', textAlign: 'center', verticalAlign: 'middle' }} onClick={onZoom} > <PlusOutlined /> <br /> {images.length - 1 }개의 사진 더보기 </div> </div> </>사용 환경 Antd 5
-
미해결[리뉴얼] React로 NodeBird SNS 만들기
npx sequelize db:create 오류
비밀번호를 바꾼후에 npx sequelize db:create를 실행했는데,Unexpected token '(' 이라는 에러가 뜹니다.보통 이런경우 타이포 error 일것 같아서 파일을 살펴 봤는데 별다른 오타는 없었습니다.다른곳을 살펴봐야할 부분이 있을까요?감사합니다.
-
미해결[개정3판] Node.js 교과서 - 기본부터 프로젝트 실습까지
9장 추가과제 (캐싱)
안녕하세요9장 추과과제 중 캐싱까지 만들었는데문제는 회원정보가 업데이트가 되었을때캐싱으로 인해 화면에서 데이터가 바로 바뀌지 않는데어떤 방법으로 해야할지 감이 잡히지 않아서요힌트좀 주시면 감사하겠습니다..