#미들웨어

개인 프로젝트 피드백 부탁드립니다!! (Next.js + firebase)

안녕하세요! 휴학 중에 개인 프로젝트 한번 만들어봤습니다! 아직 감이 잘 안 잡히다보니 chatGPT에 꽤나 의존했던 것 같습니다. 폴더 구조와 ssr, csr 사용 부분에서 피드백을 받고자 합니다! 또, containers 폴더 안 create 폴더에 있는 RouteChangeListener.tsx를 사용하여 퀴즈를 만들거나 푸는 도중에 현재 페이지를 벗어나려는 움직임을 감지하면 alert 창이 나오도록 설정하였습니다. 제가 생각해봤을 때 페이지가 이동했다가 다시 돌아오는 부분이 비효율적이라고 생각이 들어서 미들웨어나 다른 방법을 통해 해결할 수 있는지 여쭤보고 싶습니다. 감사합니다! 프로젝트 설명 : 퀴즈를 만들고 풀 수 있는 웹페이지 만들어봤습니다! vercel로 배포하였고, PWA 사용하여 모바일에서도 다운로드 가능하게 했습니다! 웹 앱 둘다 가능하지만 웹으로 봐주시는 것을 권장드립니다~!! 프로젝트 기술 스택: Next.js, react-query, zustand, firebase 테스트 아이디: 123@naver.com 테스트 비밀번호: 123123 GitHub 주소 : https://github.com/kmj0973/donquiz Vercel 배포 주소 : https://donquiz.vercel.app/ 따끔한 피드백 주시면 감사드리겠습니다!! 감사합니다!!

Next.js SSR을 언제 사용하는게 좋을까요?

현업에서 Next.js 사용할 때, 인증 처리를 미들웨어에서 처리한다면 SSR을 어떤 상황에서 자주 사용하나요? SSG와 동적인 데이터들은 클라이언트 사이드에서 호출해서 불러오는게 매번 페이지를 만드는 것보다 낫지 않을까 라는 생각에 SSR을 더 안사용하려고 하는것 같아서 질문남겨봅니다!!

Next.js 미들웨어

Vercel를 사용하지 않고 배포해서 Next.js (v13.4)의 미들웨어를 사용해보았는데 잘 작동하지만 공식 문서에서는 edge runtime에서만 가능하다라고 나와있는데 추후에는 vercel를 사용하지 않고 Next.js를 배포한다면 미들웨어는 사용할 수 없는건가요?! 관련 히스토리에 대해 알고 싶습니다. 감사합니다! https://nextjs.org/docs/pages/building-your-application/routing/middleware#runtime

Nextjs app router middleware + token 여부에 따른 리다이렉트

안녕하세요, next.js로 팀 프로젝트 진행 중 궁금한 것이 생겨 질문드립니다. next.js의 middleware.ts를 이용하여 모든 라우터에 접근할 때마다 유저 인증 토큰을 확인 후, 토큰이 없으면 /login 페이지로, 토큰이 있다면 원하는 페이지로 이동할 수 있도록 처리하길 원합니다. 유저 토큰은 로그인 시, access token을 body로 내려 받아 전역 utils 파일에 클래스 형태로 저장하고 있고, refresh token은 쿠키로 내려 받아 필요할 때마다 토큰 재발급 요청을 보낼 수 있도록 설계하고 있어요. 그런데 middleware.ts에서 전역으로 관리하는 토큰에 접근이 불가능한 것 같더라구요.. accessToken을 쿠키로 관리하지 않으면 미들웨어에서 토큰에 접근하는 방법이 아예 없는 것일까요? 아니면 제가 뭔가 단단히 착각하고 있는 것이라면 도움을 요청하고 싶습니다! 감사합니다🙇‍♂️

nextJS 에서 안전하게 token 처리하기

nextjs에서 nextAuth 쓰지않고 안전하게 token 처리하는 완벽한 예시가 있는지 알고싶습니다. 사이드 프로젝트중에 여러 시도를 해봤는데 정답을 못찾겠습니다. 일단 axios 인터셉트로 ssr이나 csr이나 모두 토큰을 헤더에 담아서 보내는 것을 목표로 하고 있습니다. 1. 상태관리 라이브러리를 사용한다. 당연히 ssr 환경에서는 불가하니 탈락 2. 그냥 쿠키를 사용한다 보안 문제가 있으니 탈락. 3. http only 쿠키를 사용한다. csr 환경에서 접근할 수 없으니 탈락. 대안으로 생각해본 방법들은 1. 모든 api를 server action을 랩핑해서 미들웨어처럼 사용하고 http only 쿠키 이용하기 2. 쿠키와 상태관리 모두 값을 넣어두고 두가지 다 관리하면서 서버와 클라이언트 컴포넌트에서 각각 제어하기 하지만 두가지 방법은 너무 번거롭고 버그 양산일 것 같습니다. 많은 분들께 여쭤봤을 때는 그냥 쿠키를 사용하고 보안은 어느정도 포기한다는데 다른 방법이 있을까요?

스프링 강의를 nestjs로 이해하면서 들어도 될까요?

안녕하세요 코딩 2년차 공부 중인 초보 학생입니다 바로 본론드리면 nestjs기본 베이스 상태에서 스프링기반 강의를 들어도 문제가 없을까요? 저는 자바 모릅니다 ts는 알고 있습니다 온라인강사님은 스프링에 대해서 kafka나 쿠버네틱스에 대해서 말씀하시는데 저는 그것을 네스트js로 실습하려고합니다 강의는 결제 전에 미리보기가 안되서 맛보기가 어렵더라구여 ㅜ.ㅜ 제가 아래에 제가 무엇을 공부했는지 적어보겠습니다 기본적인 게시판 구성이나 비디오 다운로드 정도 만들어보았습니다 네스트는 익스프레스와 달리 DI로 서비스를 여기저기서 모듈러 익스포트해서 쉽게 불러올 수 있는게 정말 인상적이었습니다 nestjs의 데코레이션을 추가하여 코드를 간결하게 하고 마치 익스프레스의 미들웨어처럼요! 데이터를 가로채서 원하는 쿼리스트링으로 조작할 수 있는 것도 새로웠습니다 익스프레스보다 훨씬 편하다는 생각을 지울 수가 없더라구여 ------ 인터넷에서 대용량처리 방법에 대한 광고를 확인했었는데 kafka, elesticsearch? 그리고 쿠버네틱스... 이러한 것들에 대한 도전도 해보고 싶습니다 하지만 죄다 스프링에서만 강의를 찍으시더라고요 스프링코드를 보는데 왠지 네스트와 비슷하다는 느낌을 받았거든요 네스트 게시판 비디오 rest api 정도 듣고 Kafka를 스프링 강의 기반으로 강의하는 영상 봐도 좋을까요? 미리보기가.안되서 두렵네요 지금 그냥 계속 게시판 복습만 하고 있습니다.. 국내 한국어 네스트 강의가 게시판이나 기본적인 restapi 밖에 없는 것 같습니다 공식문서는.너무 어렵구요 강의 토대로 공식문서 읽으면 빠르게.읽힐텐데 초보자니까 개척해서 nestjs kafka 도큐가 엄두가.안납니다 Msa 만드는게 제 꿈입니다 ㅜ.ㅜ ㅜ.ㅜ

Next.js app router의 쿠키값을 어떻게 세팅해야 할까요?

Next.js app router에서 쿠키로 JWT로그인을 사용 하고 있습니다. 서버는 백엔드 api 서버가 별도로 존재하는 상황입니다. 현재 인증 기반 api를 호출을 할 때, 만약 해당 accessToken이 만료가 됐다면 재발급을 해주는 백엔드 api를 통해 새로운 accessToken을 브라우저에 업데이트하는 로직을 구현하려고 했습니다. 클라이언트 컴포넌트에서는 전혀 문제가 없었습니다. 어차피 set-cookie를 백엔드에서 해주면 알아서 브라우저에 반영이 되니까요. 근데 문제는 서버 컴포넌트에서 동일한 요청을 하는 경우입니다. 동일하게 재발급 요청을 보낸 다음 set-cookie를 백엔드에서 해줘도 어차피 서버 컴포넌트에서 api를 쐈던것이기 때문에 그 반환값이 서버 컴포넌트로 오게 되고, 이는 브라우저에 반영이 안 되는데요ㅠ 혹시 이럴 경우에는 어떻게 처리를 하는게 좋을까요? 미들웨어나 라우트 핸들러를 사용하려 해도 그 방법을 도저히 모르겠네요

Nginx, Express 연결 후 프론트에서 이미지 파일 전송시 408 Error

안녕하세요. 혼자 해보던 도중 도저히 해결이 되지 않아 문의드립니다. - 서버 설계 - 현재 저는 Express앱을 AWS EC2 인스턴스에 NGINX를 설치한 후 proxy_pass에 express앱이 구동중인 port를 연결하여 사용하고 있습니다. 이 과정에서 ALB를 통해 ACM을 연동하여 HTTPS 프로토콜이 사용가능하게 설정까지 하였습니다. 이미지 파일업로드는 multer-s3를 이용해 s3버킷과 연결하여 업로드 되는 방식입니다. - 문제상황 - 로그인과 기본적인 CRUD는 문제없이 되는데, 프론트에서 이미지 파일(multipart/form-data)을 서버로 전송하면 504 오류가 출력됩니다. 1. nginx의 access.log에는 해당 uri의 상태코드가 408이라 출력됩니다. 2. nginx의 error.log에는 readv() failed (104: Connection reset by peer) while reading upstream가 출력됩니다. 3. 개발자도구의 console창에 'server의 이미지 업로드 uri' from origin '프론트 도메인'이 has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. 이라 출력됩니다. 위 오류를 해결해보기 위해 시도해본 것은 아래와 같습니다 1. NGINX의 proxy_connect_timeout, proxy_send_timeout, proxy_read_timeout, send_timeout을 600으로 설정, client_max_body_size를 500M으로 설정 2. ALB의 유휴제한시간 600 설정 3. Express 앱에 app.set('trust proxy', true); 추가 4. Express-session에 app.use(session({proxy:true})) 추가 5. body-parser에 app.use(bodyParser.json({limit: '1000mb'})); 추가 및 app.use(bodyParser.urlencoded({limit: '1000mb', extended: true})); 추가 6. 업로드되는 uri의 미들웨어에 (req, res, next) => { req.setTimeout(1000000); next(); } 추가 7. upload.single()미들웨어를 주석처리 후 req.file 출력 시도 아직도 해결을 하지 못하였습니다 ㅜㅜ 연휴임에도 도와주시면 너무 감사하겠습니다..

[node.js] 세션을 이용한 로그인 구현 중 브라우저 쿠키의 maxAge 초기화 안 되는 문제 발생

Node.js(v18.17.0) + TypeScript로 개발을 진행하고 있습니다. express 로 서버를 구축했고, express-session , session-file-store 라이브러리를 사용해서 로그인 기능을 구현했습니다. 제가 원하는 것은 세션 만료 시간을 연장하는 기능을 만드는 것인데... 서버에서는 세션 쿠키 만료 시간이 재설정(초기화)가 되는데 브라우저에 저장된 쿠키 만료 시간은 그대로인 상태라 연장이 되지 않습니다. 처음 제 코드는 이렇습니다. ```ts export const extendSession = async (req: Request, res: Response) => { req.session.resetMaxAge(); res.json({ success: true, message: '세션 연장 성공', expiredTime: req.session.cookie.expires.getTime(), }); }; ``` 이런 식으로 resetMaxAge() 함수를 통해서 만료 시간을 연장할 수 있을거라 생각했습니다. (트라이캐치문은 생략하였습니다.) 콘솔에 값을 확인해봤을 때에도 연장이 잘 된 것으로 보이는데 브라우저에 저장된 쿠키의 만료 시간을 확인해보면 최초의 쿠키 값 그대로였습니다. 이를 해결하기 위해서 만료 시간을 따로 정해서 줘보기도 했습니다. `req.session.cookie.maxAge = 3600000;` 하지만 마찬가지로 세션 쿠키의 만료 시간은 바뀌지만 브라우저에 저장된 쿠키의 expires가 변하지 않았습니다. 따로 헤더를 줘보아도 새로운 쿠키가 생성될 뿐 해결책이 되지 않았습니다. `res.setHeader('Set-Cookie', 'Max-Age=3600000')` express-session 미들웨어가 자동으로 set-cookie 헤더를 설정해주어서 제가 여기에 어떻게 접근할 수 있을지 모르겠습니다. 브라우저의 쿠키가 초기화 적용을 받지 못하는 것이 문제인 것 같은데... 원인은 대충 알 것 같으면서 해결책을 모르겠습니다. session 설정은 이렇습니다! ```ts app.use( session({ secret: process.env.SESSION_SECRET_KEY, resave: false, saveUninitialized: false, cookie: { sameSite: 'lax', secure: false, httpOnly: true, maxAge: 1000 * 60 * 5, }, store: new FileStore({ reapInterval: 3000, }), }), ); ```

createStore 리액트

안녕하세요 리액트 초보입니다. (이걸 기술 토픽 카테고리에 적합한지는 모르겠네요.. ) 리액트를 다루는 기술 책으로 리액트를 공부하던 와중에 리덕스로 상태 관리하는 부분에서 막혔습니다. 책에서는 redux의 createStore를 사용하는데 현재에는 모든 것이 rtk 라이브러리를 사용하더라고요.. (createSlice 등..) 프레센테이셔널 컴포넌트 같은 것도 없어졌고 (어쩐지 불편하더라..!) 미들웨어라는 것을 많이 사용하지 않고 react-query 같은 것을 사용하더라고요!! 그래서 제 질문은 그냥 책대로 공부해보는게 맞을까요?? 이제는 잘 사용하지 않는다는 것을 알고난 이후로 하기 싫어졌지만... 현직자분들이 필요하다고 하시면 찡찡거리기 그만하고 공부하겠습니다.. 그리고 별개로 책 내용이 최신 버젼(?)으로 정리가 된 사이트/ 또는 정리해본 블로그 있으면 추천 부탁드립니다! 감사합니다

LENA/TunA 솔루션 엔지니어로 면접 제안이 왔습니다.

LENA, TunA 솔루션 엔지니어 직무에 면접제안이 왔습니다. 근무지가 CNS 본사인데 아무리 봐도 CNS에서 제안한 건 아닙니다. 이런 경우 CNS의 하청 회사 느낌인건가요?? 그리고 해당 업무가 미들웨어 쪽인거 같은데 이쪽 괜찮으려나요..?

next.js 로그아웃 기능 (서버/클라이언트 공통 코드 작성 방법)

안녕하세요. 현재 로그아웃 기능을 구현하고 있습니다. 로그아웃 진행 시 다른 서브 도메인을 갖고 있는 사이트로 redirect 시킨 후 다시 돌아와야 합니다. 예) a.example.com에서 로그아웃 시 -> b.example.com?redirect=a.example.com 사이트로 리다이렉트 후 다시 a.example.com 사이트로 이동 해당 로직을 구현 함에 있어 클라이언트에서는 문제가 없습니다. 하지만, 서버 미들웨어에서 정상 동작은 하나 첨부 이미지와 같은 CORS 에러가 발생됩니다. 서버/클라이언트에서 동시에 사용할 수 있는 코드로 로그아웃 버튼을 클릭 하여 로그아웃 처리되는 로직을 만들고 싶은데요. 방법이 있을까요? (서버에서 로그아웃 처리가 필요한 이유는 토큰 만료 시 서버 단에서 로그아웃 시키기 위하여..) 단, b.example.com 사이트에서는 어떠한 설정도 불가능

리액트나 넥스트의 app.js를 미들웨어처럼 써도될까요?

로그인 유지나 자동로그인때문에 리프레시 토큰을 쓰려해도 백에서 지원불가능 하다는 답변을 받았습니다. 그래서 app.js(next 12.3.4)에서 로그인시 사용하는 페이지 컴포넌트를 로드하는 ...component와 나머지를 분기를 나눠 토큰 검사 및 에러 핸들링을 처리하려합니다. 이게 과연 옳바른지 모르겠습니다. 이전에는 next의 미들웨어쪽에서 유저의 토큰을 받아 백엔드서버에서 토큰을 인증받거나 토큰이 없을때의 로직을 구현했습니다만 비효율적인거 같다는 생각이 들어 방식을 바꾸려합니다.

next js middleware redirect 질문 있습니다.

안녕하세요, next js middleware를 사용해 로그인 사용별 화면을 분기하고 있습니다. 다름이 아니라 사용하면서 문제가 있어 이리저리 검색하다가 해결방법을 찾지 못해 글 남깁니다. 문제1. 브라우저 뒤로가기시 redirect대상 페이지면 title 미변경 문제. redirect된 페이지의 title이 아닌, redirect대상의 title이 적용되었습니다. redirect가 서버에서 브라우저에 요청하는 것이고 브라우저는 이를 실행은 하나 title은 변경되지 않았습니다. 2. 로그인후 뒤로가기를 계속 진행한후 브라우저 첫 페이지(구글)도달후 앞으로 가기를 하면 무한 리디렉션 문제가 발생. 해당 문제는 로그인후 메인 화면으로 넘어간 후 다시 뒤로가기를 반복하고 첫 페이지 도달시, 다시 앞으로 가기해서(예를 들어 로그인 페이지)면 미들웨어가 화면전환 도중에 리디렉션 요청이 많다고 에러를 발생 시킵니다. 아래는 제가 사용하는 코드를 첨부하겠습니다. 요약하자면 redirect하면 title 변경이 안됨. 뒤로가기후 다시 앞으로 가기하면 리디렉션 에러가 발생함. 만약 다른 방법이 있다면, 현업에선 어떻게 처리하는지 궁금합니다. export const verifyUser = (request: NextRequest, moveUrl: string) => { // const includesPage = ['/', '/auth/login', '/dashboard/customdashboard']; const accessToken = request.cookies.get('accessToken')?.value; const url = request.nextUrl.clone(); if (accessToken && isTokenExpired(accessToken)) { // 로그인 페이지 요청시 사용자 검증이 완료된 상태면 / 페이지로 강제 리다이렉트시킴. if (moveUrl === '/auth/login' || moveUrl.startsWith('/signup')) { url.pathname = '/'; return NextResponse.redirect(url); } return NextResponse.next(); } else { // 일반 페이지 요청시 사용자 검증이 미완료된 상태라면 로그인 페이지로 강제 리다이렉트시킴. if (moveUrl === '/auth/login' || moveUrl.startsWith('/signup')) { return NextResponse.next(); } removeLoginCookie(); url.pathname = '/auth/login'; return NextResponse.redirect(url); } };

Next.js에서 전역 미들웨어를 사용할 때

최근에 next.js를 공부하면서 간단한 프로젝트를 만들고 있습니다. 그러다 생긴 궁금점인데 전역 미들웨어를 사용하면 .next/server/pages 안에 페이지.js파일이 생성 안되던데 그러면 SSR이 안되고 있는건가요? 아님 다른 방식으로 SSR이 되고 있는건가요?

일시적으로 기능을 끄고 켜는 endpoint를 위한 에러 코드는 뭐가 좋을까요?

백엔드 설계 중에 질문이 생겨서 남깁니다. endpoint 별로 기능을 껐다 켜는 미들웨어를 만들고 있는데, 기능이 꺼져 있을 경우 어떤 에러 코드를 반환해줄지 고민이 되더라구요. RESTful한 API를 만든다고 했을 때, 어떤 HTTP status code를 내려줘야 할까요?

next js 미들웨어 리턴 메시지, status는 어디서 받을 수 있나요?

공식문서에 아래 이미지와 같이 메시지, 상태 코드를 보낼 수 있는데 이걸 화면 어디서 받을 수 있나요? next js 버전은 13.1.0 이상 쓰고있습니다.