개발자

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

2023년 11월 07일조회 131

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

이 질문이 도움이 되었나요?
'추천해요' 버튼을 누르면 좋은 질문이 더 많은 사람에게 노출될 수 있어요. '보충이 필요해요' 버튼을 누르면 질문자에게 질문 내용 보충을 요청하는 알림이 가요.

답변 1

백승훈님의 프로필 사진

조금 더 상세한 설명이 필요할 듯 한데 서버리스 펑션을 사용하면 아마 가능은 할 것 같습니다. app.js를 쓴다는 말은 가장 메인에서 작업을 하신다는 말씀이실까요? 토큰 검사의 경우 보안 처리가 들어가고 검사를 위한 Secret 키 등이 필요해 보이는대 해당 작업을 app.js에서 하게 된다면 큰 문제가 발생할 수 있습니다. https://vercel.com/docs/functions/serverless-functions 가장 좋은 방법은 역시 백엔드에서 처리하는 것입니다. 인증 인가 보안 부분을 프론트에서 처리하면 큰 문제가 발생할 수 있습니다. 불가능 하다면 차선책으로 위의 방법을 추천 드립니다.

강건마님의 프로필 사진

강건마

작성자

프론트2023년 11월 08일

죄송합니다 설명이 정말 부족했네요. 이전에 했던건 nextjs 서버 미들웨어 측에서 페이지 요청이 왔을때 로그인이 필요한 페이지라도 토큰이 없거나 권한이 부족하면, 리디렉션 처릴했었고 현재는 그렇게 하지 않고 클라이언트 측에서 전송받은 컴포넌트 최상위 노드에서 토큰관련 로직과 data fetching을 처리 해보려 한다는 뜻 이였습니다. 물론 토큰을 복호화 하는건 어느 쪽이든 백엔드 서버에서 처리합니다. 단지 웹앱의 최상위 컴포넌트에서 토큰을 처리한다 하더라도 클라이언트 측은 리디렉션이 아닌 200응답을 받고 그에 맞는 페이지 정보를 받는게 껄끄러워 여쭈어보았습니다.

백승훈님의 프로필 사진

백승훈

프론트 엔드 개발자 (FE)2023년 11월 09일

해당 댓글 대로라면 어느 쪽에서 하더라도 크게 이슈는 없어 보입니다. 단지 작성하신 댓글처럼 200응답을 받고 정상통신인데 리다이렉션을 하는 상황이 껄끄럽고 정상적이지 않다 라고 생각하신다면 제가 댓글 달아드린 서버리스 펑션을 사용하면 api단에서 node환경으로 처리하고 해당 통신의 결과를 200 혹은 404등 원하는 방식으로 바꿔서 보내줄 수 있습니다. 예를 들어 서버 <-> 클라이언트 사이에 서버 <-> Next ./api <-> 클라이언트 사이에 있는 미니 서버를 가진다고 생각하시면 편합니다. 서버에서 받아오는 정보를 next 서버리스 펑션을 통해 한번 검사 , 토큰을 체크하여 적합성 판단을 하여 나오는 결과를 다시 클라이언트로 보내는 작업을 수행할 수 있습니다. 즉 서버에서 200으로 어떤 값을 주었으면 그것을 /api에서 판단 후 옳지 않다면 400에러와 함게 결과값에 특정 결과값으로 커스터마이징 하여 전달할 수 있습니다. 해당 방법을 통해 토큰 , 서버 통신의 주소 (Rest API 통신주소) , 은닉이 필요한 환경변수 등을 더 안전하게 사용 가능합니다. 상세한 사용내용은 공식 홈페이지에서 보시면 될 것 같습니다.

지금 가입하면 모든 질문의 답변을 볼 수 있어요!

현직자들의 명쾌한 답변을 얻을 수 있어요.

또는

이미 회원이신가요?

AI 답변
커리어리 AI 봇 프로필 이미지

커리어리 AI 봇

GPT가 달아주는 답변입니다.

2023년 11월 07일

네, Next.js에서는 `App` 컴포넌트를 사용하여 매 페이지 로드 전 특정 작업을 처리하는 미들웨어와 유사한 기능을 수행할 수 있습니다. 이는 `getInitialProps` 라이프 사이클 메서드를 통해 가능한데, 이 메서드의 반환값은 모든 페이지에 props로 전달됩니다. 그러나, 리액트와 같은 클라이언트 측 자바스크립트 프레임워크에서 서버의 역할을 너무 많이 하게 되면 성능 저하 및 보안 문제가 발생할 수 있습니다. 따라서 어느 부분까지 클라이언트에서 처리해야 하는지 균형점을 찾는 것이 중요합니다. 로그인 상태를 유지하기 위해선 Cookie를 사용하거나 Local Storage에 토큰을 저장하는 방법 등 여러가지 접근 방법이 존재합니다. 서버에서 지원하지 않는다면, JWT(JSON Web Tokens) 같은 클라이언트-사이드 솔루션을 고려해 볼 수 있습니다. 올바른 가장 좋은 방식은 없으며 각 방식마다 장단점이 있기 때문에 프로젝트의 요구사항과 상황에 따라 선택하시면 됩니다. 즉, 프로젝트의 상황과 요구사항에 가장 적합하다고 판단되는 방법을 선택하시면 됩니다.

목록으로

지금 가입하면 모든 질문의 답변을 볼 수 있어요!