#클라이언트

Nextjs14 서버 컴퍼넌트 JWT 갱신 방법 문의

안녕하세요 NextJS14 에서 JWT 로그인 방식으로 프로젝트 진행중에 있습니다. 현재 AccessToken 만료시 재 갱신하는 로직을 하면서 해결하지 못하는 내용이 있어서 문의 드리립니다. 서버 컴포넌트와 클라이언트 컴포넌트에서 갱신된 AccessToken 을 공유 하는 법에 대해서 어떻게 처리 하셨나요? - app router 사용 - accessToken, refreshToken 쿠키 사용 - fetch 를 이용하여 API 호출 아래 테스트 내용으로 서버 컴포넌트에서 AccessToken 만료되어 갱신되는 경우 클라이언트로 쿠키를 갱신해줄 방법을 모르겠습니다. 너무 CSR 구조로 생각하는거 같기도해서, 이런 경우 어떻게 토큰을 현행화 해서 사용하는지 문의 드립니다. 별도 가이드 문서를 더 찾아보면 서버 컴포넌트에서는 쿠키를 사용하지 말라는 글도 보여서, 방향성을 잘못잡고 있는 느낌도 들고 있습니다. 많은 조언 부탁드립니다!! 테스트 케이스) 1. 서버 <-> 클라이언트 (에러) - 서버 컴포넌트에서 백엔드 API 호출 -> 토큰 만료 -> AccessToken 재 갱신 API 호출 -> 쿠키 set -> 클라이언트에서 백엔드 API 호출(당연히 클라이언트에서는 쿠키가 갱신안되서 에러) 2. 서버 <-> 서버(성공) - 서버 컴포넌트에서 백엔드 API 호출 -> 토큰 만료 -> AccessToken 재 갱신 API 호출-> 쿠키 set -> 서버 백엔드 API 호출 3. 클라이언트 <-> 클라이언트 (성공) - 클라이언트 컴포넌트에서 백엔드 API 호출 -> 토큰 만료 -> AccessToken 재 갱신 API 호출-> 쿠키 set -> 클라이언트 백엔드 API 호출

Spring security로 OAuth2.0 인증 후 클라이언트에게 JWT 보내기

spring security와 소셜 로그인 , JWT를 같이 써보려고 개인적으로 연습을 하던 중 의문이 들어서 이렇게 질문을 올립니다. 제가 생각한 과정은 다음과 같습니다 1. 클라이언트가 서버에 구글 로그인 요청을 보낸다 {{BASE_URL}}/oauth/authorization/google -> 스프링 시큐리티에서 기본적으로 제공하는 로그인 경로입니다. 2. 서버에서 스프링 시큐리티의 과정에 따라 유저 정보를 가져온 후 데이터베이스에 저장하고 JWT을 발급한다. 3. 발급된 JWT를 클라이언트에게 response로 던져준다. 의 과정이였는데 생각해보니 3번의 발급된 JWT를 클라이언트에게 못던져주겠다는 생각이 들었습니다. 클라이언트에서 서버의 로그인 URI에 접근하면 이미 클라이언트의 손을 떠난 request가 되는데 response를 클라이언트에게 던져줄 방법이 없는 것 같아서,,, 혹시 이부분에 대해서 알려주실 수 있는지 궁금합니다. 클라이언트와 통신을 해야하는 상황이라면 클라이언트에게 인가 코드나 access_token을 받아서 서버에서 자체적으로 http 통신을 하는 방법밖에 없는지도 궁금합니다. security에서 OAuth2.0에 대한 인증 인가가 굉장히 편하게 만들어져 있다고 생각했는데 이런 부분에서 막히네요 ㅠ

JWT 인증과 로그인 상태 유지

웹 프로젝트를 진행하는 과정에서 jwt 인증과 로그인 상태 유지에 관해 질문이 있어 글 남깁니다. 현재 서버측에서 로그인 요청을 받고 로그인 완료 시에 클라이언트 측으로 access token 과 refresh token 을 응답으로 주고 client 측에서는 refresh token 은 cookie 에 access token 은 클라이언트 측 로컬 변수에 저장해 사용할 예정입니다. 로컬 변수에 access token 을 저장하면 페이지 리로드나 페이지 이동 시에 로그인 상태를 유지해야 하는데, 이를 처리하는 부분에서 고민점이 생겼습니다. 일단 인증이 필요한 요청이 아니더라도 서버 측에서 로그인 된 사용자라면 정보를 다르게 반환해줘야 하기 때문에 모든 요청에 대해서 로그인 된 사용자의 요청이라면 access token 을 헤더에 포함해 요청을 보내도록 할 것입니다. 첫번째 해결 방안은 클라이언트 측에서 페이지를 로드할 때 cookie 에 refresh token 값이 존재하면 로그인 된 상태라고 판단하고 서버측에 access token 재발급 요청을 보내는 방법입니다. 두번째 해결 방안은 서버측에서 인증이 필요한 요청을 받았을 때 access token 이 존재하지 않으면 받은 요청의 cookie 값을 확인하고 로그인 된 사용자라면 재발급 요청 신호를 클라이언트 측으로 보내고 로그인 된 사용자가 아니라면 로그인이 필요하다는 신호를 클라이언트 측으로 보내고, 서버측에서 인증이 필요하지는 않지만 로그인 된 사용자라면 정보를 다르게 반환해줘야 하기 때문에 access token 이 없이 온 요청에 대해서 cookie 값을 확인하고 로그인 된 사용자지만 access token 이 없으면 재발급 신호를 클라이언트 측에 보내고 클라이언트 측에서 재발급 요청을 보내고 access token 을 포함해 진행 중이던 요청을 다시 보내는 방법 이렇게 두가지를 생각해 봤습니다. 가장 간단한 방법은 access token 을 cookie 나 로컬 스토리지에 저장하는 방법이지만 보안을 위해 이 방법은 제외했습니다. 서버측에서 사용자의 로그인 상태를 확인하는 것은 jwt 의 장점을 무시하는 것 같기도 하고 서버측에서 지속적으로 사용자의 로그인 상태를 확인해야 해서 부담이 있을 것 같고 클라이언트 측에서 사용자의 로그인 여부를 판단하는 것은 과연 옳바른 해답인지 의문이 들어 질문 남깁니다.

하둡에서 클라이언트란?

안녕하세요 클라이언트란 개념에 대해 질문이 있는데요. 제 컴퓨터로 웹서버에 요청하면 응답올때 제 컴퓨터가 '클라이언트'가 되는거잖아요 그런데 하둡에서는 따로 클라이언트프로그램을 다운받아야하는것으로 이해했습니다. 이게 살짝 이해가 안가는데요.. 어떤 프로그램을 다운받야지만 제 컴퓨터가 클라이언트가 되는걸까요? 아님 그 프로그램의 인터페이스만을 이용해야 하둡에 접근할 수 잇는것같은데.. 그 프로그램 자체가 클라이언트가 되는건가요? 좀 질문이 이상한데,, 핵심은 클라이언트가 대체 무엇인가? 제 컴퓨터 아닌가요? 어떤 프로그램을 설치하면 클라이언트가 어떻게 되나요?

Next 서버 컴포넌트와 전역 상태관리

안녕하세요. Next15에서 서버 컴포넌트를 적극적으로 도입하여 프로덕트를 개발하고 있는데, 고민이 되는 부분이 있어 여러 분들의 도움을 얻고자 질문을 남깁니다. 서버 컴포넌트에서 받아온 데이터와 클라이언트 컴포넌트에서 사용하는 zustand가 적절히 사용되고 있는지 고민이 듭니다. 현재 GET 요청의 경우 각각의 서버 컴포넌트에서 fetch를 통해 진행하고, 해당 데이터를 자식 클라이언트 컴포넌트에서 사용할 경우 props로 내려 사용하고 있는데, 이때, 드릴링이 심해질 경우 zustand와 같은 전역 상태관리 라이브러리를 함께 사용하려고 합니다. 예를 들어, 서버 컴포넌트의 첫 번째 자식인 클라이언트 컴포넌트에서 zustand를 사용하고, 이후 자식 클라이언트 컴포넌트에서는 zustand를 통해 상태관리 할 때 자식인 클라이언트 컴포넌트의 업데이트가 진행되는 부분에서 try/catch를 통해 요청을 보내고, router.refresh()를 통해 서버 컴포넌트에서 데이터를 새로 받아옵니다. 이후 클라이언트 컴포넌트에서는 useEffect로 서버 컴포넌트에서 props로 받아온 데이터가 바뀌는 것을 감지하고, 해당 props를 zustand에서 사용하는 데이터로 업데이트하려고 하는데 문제가 될만한 점이 있을까요? 이와 관련된 링크나 답변이 있으시다면 감사히 받겠습니다!

Nextjs App router 동작 방식이 이해가 안됩니다.

https://nextjs.org/docs/app/building-your-application/rendering/client-components // 문서내용 Defining multiple use client entry points: You can define multiple "use client" entry points in your React Component tree. This allows you to split your application into multiple client bundles (or branches). However, "use client" doesn't need to be defined in every component that needs to be rendered on the client. Once you define the boundary, all child components and modules imported into it are considered part of the client bundle. => 클라이언트 컴포넌트의 하위 컴포넌트들은 자동으로 전부 클라이언트 컴포넌트가 됨(use-client 명시할 필요X) 으로 이해했습니다. 그런데 첨부한 코드의 동작방식이 이해가 안됩니다. 예상 1. TestComponent가 클라이언트 컴포넌트(CSR)이므로 내부에 있는 HotEventList도 클라이언트 단에서동작할 것이다. 2. TestComponent를 ‘use client’로 클라이언트 컴포넌트로 만들었다. HotEventList에서는 useState등 CSR에 필요한 요소를 추가하더라도 ‘use client’를 추가할필요가 없다. TestComponent하위에 있어서 자동으로 클라이언트 컴포넌트가 되기 때문이다. 실제 1. HotEventList는 여전히 SSR로 동작한다. 2. HotEventList에 state를 추가하면 ‘use client’를 명시하라는 에러가 발생한다. 제가 어떤 부분을 잘못 이해하고 있는걸까요?

Next.js 서버 컴포넌트, 클라이언트 컴포넌트 어떤 식으로 분리해야 하나요??

현재까지 React를 사용하다가 SEO측면이나 사용자 경험 등 여러 방면에서 서버 사이드 렌더링이 갖는 장점이 크다 생각하여, Next로 프로젝트를 하면서 공부하는 중입니다. 지금까지 Next로 프로젝트를 진행하면서, 구글에 찾아봐도 명쾌하게 답을 얻지 못한 문제가 있어서 질문드립니다! 공식문서에서는 최대한 서버 컴포넌트로 만들고, 상호작용이 필요한 부문만 최대한 작게 클라이언트 컴포넌트로 만드는 것을 추천하고 있습니다. 이 말은 당연하게도 이해가 잘 되었습니다. 하지만 제가 만들고 있는 프로젝트에는 검색 페이지, 유저 페이지 등이 있습니다. 검색 페이지를 예로 들면, 사용자가 입력한 검색어를 쿼리 파라미터로 검색 결과 페이지에 넘겨주게 되고, 해당 검색어에 해당하는 데이터를 불러와야 합니다. 그 과정에서 검색어를 useParams()를 사용해서 받아오게 되는데, 이러한 훅을 사용하려면 클라이언트 컴포넌트여야 합니다. 그렇게 최상단에서 검색어를 파싱해서 데이터를 불러와 자식 컴포넌트들에게 넘겨주게 되면, 결국 루트가 클라이언트 컴포넌트가 되어 버리는데, 이런 검색 결과 페이지와 같은 경우엔 SSR이 큰 의미가 없나요?? 비슷한 원리로, 유저의 마이페이지와 같은 경우엔 유저 정보를(userId 등) 이용해서 데이터를 불러와 해당 유저의 정보를 보여주게 되는데, 유저 정보를 프론트 서버에서 페이지를 보내주는 시점에는 알 수 없습니다. 때문에 검색 페이지와 비슷하게 recoil의 atom 등과 같은 곳에서 유저 정보를 빼와서 데이터를 불러오게 될텐데, 그럼 이 경우에도 루트가 클라이언트 컴포넌트가 되어 버립니다. 이렇게 동적으로 발생하는 데이터를 이용해서 데이터를 불러오는 페이지는 SSR이 큰 의미가 없는 것인지 궁금합니다!! 개발 초보라 완전히 잘못 이해하고 있는 것일 수도 있지만, 바로 잡아주시면 감사하겠습니다!

Next.js App router + recoil 적용 방법에 질문이있습니다.

next.js 에 recoil 을 적용하려하니 RecoilRoot 컴포넌트로 감싸줘야하는 부분에서 어려움이 생겼습니다. RecoilRoot 는 react.createContext를 쓰기에 클라이언트 컴포넌트에서 사용해야 한다는 것인데 이를 위해 RecoilRoot만을 return 하는 클라이언트 컴포넌트를 만들고 root layout 에서 불러와 그것으로 children을 감싸주면 된다는 것이였습니다. https://velog.io/@pakxe/Next.js-Recoil%EC%9D%84-Next.js-%EC%97%90%EC%84%9C-%EC%82%AC%EC%9A%A9%ED%95%98%EB%8A%94-%EB%B0%A9%EB%B2%95%EC%97%90-%EB%8C%80%ED%95%9C-%EA%B3%A0%EC%B0%B0%EA%B3%BC-children-prop-pattern 위 블로그의 마지막 하단을 보면 ``` // ./app/layout.tsx // 보이는 코드 <RecoilRoot> {children} </RecoilRoot> // 실제 코드 <RecoilRoot children={<Home/>}/> ``` 처럼 동작하기에 RecoilRoot 클라이언트 컴포넌트 하위에 서버 컴포넌트 들이 들어가는게 아니라 RecoilRoot 와 chilren 이 같은 부모를 두고 서로 부모자식 관계가 아니니 클라이언트 컴포넌트 하위에 서버 컴포넌트가 들어가는 것이 아니다 라고 하는데 이 부분이 이해하기 어려워서요... 실제코드 부분을 보면 RecolRoot 가 children 이라는 컴포넌트를 파라미터로 받기에 파라미터로 받는 과정에서 이미 렌더링이 되어 넘어가기에 Recoil Root는 서버 컴포넌트인 children이 렌더링된 상태에서 파라미터로 받아 서버 컴포넌트가 클라이언트 컴포넌트 하위에서 렌더링 되는 것이 아니다.. 가 맞는 것인지 궁금합니다.

Next.js 클라이언트 컴포넌트에서 api 요청 시 보안 문제?

Next.js에서 클라이언트 컴포넌트에 사용하는 환경 변수에 NEXT_PUBLIC을 붙여줘야하는 것으로 압니다. 제가 프로젝트에서 api 키를 포함해 클라이언트 컴포넌트에서 fetch 요청을 보내야하는 상황이라(리액트 쿼리 사용 중), 해당 api키에 위와 같은 변수를 붙여주었습니다. 그런데 해당 방법이 안전한걸까요? 전에 chatGPT에서는 NEXT_PUBLIC을 붙이는 환경 변수에는 api 키와 같은 보안에 중요한 변수는 넣지 않는게 좋다고 하더라고요.... 이 말이 사실인건가요? 그렇다면 그 이유가 궁금합니다.. + Next.js에서 리액트 쿼리를 사용하고 있는데 리액트 쿼리를 사용하는 곳은 클라이언트 컴포넌트여야 정상적으로 작동하더라고요.. 만약 api 키가 포함된 요청을 클라이언트 컴포넌트에서 사용하는 것이 보안에 좋지 않다면, 어떤 방법을 써서 api 요청을 보내야할까요? Next.js의 api 라우트를 만들어 요청하는게 맞는건가요? 개발에 대해 잘 몰라 질문이 깔끔하지 않습니다만.. 혹시 아는 분 계시면 도와주세요 😭❕

Next.js SSR CSR에서의 캐시 문제

메인 페이지의 컴포넌트는 무한 스크롤을 이유로 SSR안에 CSR이 작동하는 구조입니다. 거기서 제품 상세 페이지를 들어가면 현재 페이지는 RSC + 클라이언트 컴포넌트를 통해 이루어진 SSR 페이지입니다. 구매 또한 RSC / 클라이언트 컴포넌트를 구분 지어놓은 상태입니다. 구매를 하면 메인으로 와지구요. 이 경우 다시 제품 상세 페이지로 들어갔을 때 fetching을 다시 안하는 이슈가 있어(next-server 캐싱 문제) 동적 페이지로 작동해야하기 때문에 force-dynamic과 no-cache header를 달아줬습니다. 그 이후에 제대로 작동하는듯 하였는데 상세 페이지에서 클라이언트 컴포넌트에서 console.log를 찍었을 때 구매 한 이후에도 수량이 변하지 않는 것을 확인하였습니다. 이러한 문제를 해결하기 위해서 구매 페이지에서 onSuccess 됐을 때 router.refresh()를 해줬을 시에는 상세 페이지에서의 클라이언트 컴포넌트 console이 제대로 찍히는걸 확인하였습니다. 이에 대해 궁금점은 메인 페이지로 가는 router 이후 refresh를 하였고 메인에서 변경된 상황만 refresh 되는걸로 알고 있었는데 별개의 페이지인 상세 페이지에서 console이 제대로 찍히는 이유가 뭔지 모르겠습니다. 이러한 전처리를 하지 않으면 새로고침을 하지 않으면 이전의 data가 그대로 console에 찍힙니다. 또한 force-dynamic을 해줬는데도 불구하고 console.log를 SSR 페이지에서 찍었을 때 최초의 접근 할 때는 가져오지만 그 이후에 다시 들어올 때는 메인에서 refresh를 하고 나서도 console이 안찍히는데 왜 이런지 궁금합니다. next-server에서 매번 data를 fetching하지만 ui의 변경이 없다고 판단되면 클라이언트로 데이터를 보내지 않아 찍히지 않는걸까요.

node.js express.js 백엔드 개발 시 자동 로그아웃 관련

안녕하세요 헬스케어 콘텐츠 개발팀에서 근무하고있는 이제 1년 2개월이된 서버개발자입니다. 서버쪽은 저 혼자라서 서버쪽 도움을 요청할분이 없기에 이렇게 도움을 요청 드리게 되었습니다! node.js express.js로 개발중인데요! 클라이언트쪽은 다른분이 unity로 개발중에있습니다. 앱에서 로그인하고 일정시간동안 아무 이벤트가없으면 자동로그아웃이 되도록 구현하려고합니다. 알아보니 setInterval를 사용하면 될 것같아 구현은했는데 postman으로 테스트시 console에 자동 로그아웃 성공되는 부분까지 확인이 되었습니다. 그런데 클라이언트쪽 return에 대해서는 아무 반응이 없다보니 이렇게 처리하는게 맞나라는 생각이 듭니다. 개발하고 unity 클라이언트 앱 쪽과 api 통신을할껀데 setInterval로 자동 로그아웃 기능을 구현면 어떻게 unity 클라이언트쪽에서 확인하고 팝업창을 띄우거나 로그인 페이지로 돌릴지 감이 잡히지않아 이렇게 요청드립니다..!! 정리하자면.. node.js로 백엔드 개발중 일정 시간이 지나도록 이벤트(마우스,키보드,api요청)가 전혀없을때 setInterval로 만들어 놓은 자동 로그아웃이 실행되고 return 값을? unity 클라이언트쪽에서 받아서 팝업창에 띄우는 흐름대로 하려고하는데 관련 키워드나 해결방법을 알고싶어 도움 청하게 되었습니다..!!! 혹시나 제가 처리하려는 흐름이나 setInterval로 접근하는게 잘못된것일까요..?

API 서버에 데이터 요청 처리 질문입니다!

안녕하세요. API 서버를 별도로 구축하고, 인증은 토큰방식으로 체택했습니다! 이제 웹페이지를 제작하고있는데요, 문득 드는 의문이 API서버에 대한 데이터 요청은 클라이언트 사이드단에서 처리를 해야 맞는건가요? 아니면, 서버 사이드단에서 처리를 해야 맞는건가요? 인가에 대한 토큰은 쿠키에 있다고 한다면, 1. 클라이언트 사이드단 처리 클라이언트에서 브라우저의 쿠키 접근 -> 인가 토큰 획득 -> 헤더에 포함하여, API서버에 요청. -> 데이터 요청 완료. 2. 서버사이드 처리 클라이언트에서 브라우저의 쿠키를 헤더에 포함하여 서버사이드로 데이터 요청 -> 서버사이드에서 인가토큰을 획득하여, API서버에 요청 -> 클라이언트에게 해당 데이터를 응답 -> 데이터 요청 완료. 1번 방법은 API서버가 외부에 노출되어있어서 보안에 취약하지만, 트래픽이 많아질경우, API서버에 대한 처리만 잘 하면 될것같고, 2번 방법은 API서버는 웹서버와만 통신을 하니, 보안에 강하지만, 트래픽이 많아질경우, 웹서버에 대한 처리, API 서버에 대한 처리 둘다 고민해야할것같은데.. 보통 어느방법을 선택하나요??

토큰 기반 인증에서 리프레쉬 토큰 관리

JWT로 토큰 기반 인증을 구현할 때 궁금한게 좀 생겼습니다! 리프레쉬 토큰은 DB에 저장해볼까 했는데 그러면 토큰 기반 인증이 아니라 세션 기반 인증인 것 같아서 고민입니다. DB에 저장하는 순간 Stateless 장점도 없어지는 것 같구… Stateless로 구현한다해도 로그아웃 때문에 블랙리스트 관리해야한다는데, 이러면 결국 Stateful인거 같구… 다른 분들은 어떻게 구현하시는지 궁금합니다! 일단 이렇게 고민해봤습니다. --- <1번 시나리오 - 리프레쉬 토큰을 DB에 저장하지 않는 시나리오>

 1. 액세스 토큰이랑 리프레쉬 토큰은 클라이언트가 저장하고 서버는 저장하지 않는다.
 2. 클라이언트 요청이 왔을 때 리프레쉬 토큰이 만료되지 않았으면 액세스 토큰을 발급해주고, 만료됐으면 액세스 토큰을 발급해주지 않는다. (401 또는 403)
 장점 - DB에 접근할 이유가 없으므로 Stateless 하다. 단점 - 로그아웃을 했을 때 토큰 자체는 무효화시킬 수 있는 방법이 없다.

 <2번 시나리오 - 리프레쉬 토큰을 DB에 저장하는 시나리오> 1. 액세스 토큰이랑 리프레쉬 토큰은 클라이언트와 서버가 각각 저장한다.
 2. 클라이언트 요청이 왔을 때 리프레쉬 토큰이 만료되지 않았으면 액세스 토큰을 발급해주고, 만료됐으면 액세스 토큰을 발급해주지 않는다. (401 또는 403) 장점 - 로그아웃을 했을 때 토큰 자체는 무효화시킬 수 있다. 단점 - DB를 접근해야하므로 Stateful 하다. => 클러스터링이나 샤딩이 도입되면 복잡도가 올라간다.
 --- 1번 시나리오 단점을 극복하려고 블랙 리스트를 Redis에 관리한다는 글들을 종종 봤습니다. 블랙 리스트를 도입 안했을 때 문제는 실제로 겪어본 적이 있어서 공감은 가는데, 이러면 사실상 세션 쓰는거랑 똑같지 않나라는 생각이 듭니다. 인증시 결국 Redis 같은 DB에 접근해서 직접 확인하는 거니까요. 한편으로는 서비스가 매우 많이 커지면 세션이 부담돼서 토큰 기반 인증으로 전환한다는데, 파면 팔수록 점점 세션 기반 인증으로 바뀌는 것 같아서 고민입니다.

Next.js 13 서버 컴포넌트 조건부 렌더링

안녕하세요. 개인프로젝트로 SEO가 중요한 웹 애플리케이션을 만들고 있어서 Next.js 13을 배워 사용중입니다. 프로젝트를 진행하다보니 막막한 구간에 들어섰습니다. 조건부 렌더링으로 사용자의 조작에 따라서 각각 다른 컴포넌트들을 렌더링하려고 페이지 루트 컴포넌트에 useState()를 사용했습니다. 그리고 그러다보니 루트 컴포넌트에 'use client'를 선언하게 되었고 루트 컴포넌트는 자연스럽게 클라이언트 컴포넌트가 되었습니다. 그런데 여기서 의문이 들었습니다. next 13 공식문서에서는 컴포넌트를 클라이언트 컴포넌트로 만들면 모든 하위 컴포넌트들이 클라이언트 컴포넌트가 되기 때문에 SEO에 취약해질수있다. 그러니 되도록이면 서버 컴포넌트를 상위에 배치시키고 클라이언트 컴포넌트는 하위 컴포넌트로 배치하는게 좋다. 이렇게 나와있는데 조건부 렌더링 기능을 넣자니 클라이언트 컴포넌트로 만들어야되서 SEO가 취약해지고, 조건부 렌더링을 빼자니 프로젝트가 너무 밋밋해지고.. 되도록이면 루트컴포넌트는 서버컴포넌트를 유지하면서 조건부 렌더링 기능을 넣고싶은데 막막하네요.. 혹시 서버컴포넌트에서 조건부 렌더링을 할수있는 방법이 있을까요? 현업에서는 이런상황일때 어떻게 하시나요?

Next.js 서버 컴포넌트와 클라이언트 컴포넌트 관련 질문입니다.

입사한지 얼마 안된 신입 프론트엔드 개발자입니다. 회사에서 Next.js를 사용하게 되어 개념을 공부중입니다. Next.js 12까지 사용되던 SSR과 CSR, SSG의 개념은 문서를 뒤져가며 어느정도 이해했다고 생각합니다. 하지만 이번에 Next.js 13 app dir에서 사용되는 서버 컴포넌트(RSC)와 클라이언트 컴포넌트의 개념을 구글링을 통해 며칠동안 알아봐도 이해가 안가는 부분이 많아 겉핥기식으로만 이해가 갑니다. 제가 앞으로 해야할 분야인데 아무리 문서랑 검색을 통해 정보를 찾아봐도 제대로 이해가 가지않아 질문 올려봅니다. 1. 서버 컴포넌트는 서버에서 렌더링이 된다고 이해했는데, 그렇다면 서버 컴포넌트는 db에 직접 접근할 수 있다는 점 외에 SSR과 어떤 차이점이 있는건가요? 2. Next.js13 app dir는 use client를 사용하지 않은 모든 페이지가 서버 컴포넌트라고 알고있는데, 그렇다면 기존 Next.js12에서 지원하던 SSG은 더이상 Next.js13에서 지원하지 않는 건가요? 아니면 서버 컴포넌트랑 SSG는 공존할 수 있는 개념인가요? 3. 기존 Next.js 12에서는 데이터를 fetching해오지 않는 정적인 페이지는 기본적으로 SSG로 작동한다고 알고있습니다. 그렇다면 Next.js 13에서는 기본적으로 모든 컴포넌트가 서버 컴포넌트이니 데이터를 fetching하지 않는 페이지도 서버에서 렌더링이 되는건가요? 4. 클라이언트 컴포넌트에서 서버 컴포넌트를 import해 사용할 수 없다는데.. 저는 잘만 됩니다. 여기서 서버 컴포넌트는 클라이언트 컴포넌트가 된 건가요? 5. 서버 컴포넌트도 SSR처럼 브라우저에서 해당 페이지를 접속했을 때 렌더링이 되고 클라이언트에 내려오나요? 아직 Next.js 이해도가 낮아 질문이 이상할 수 있습니다. 양해 부탁드립니다. 이게 이해가 안가서 스트레스를 너무 받고있네요.. 도와주세요

docker container 내부의 spring boot 서버에서 client 의 ip 주소 알아내는 방법

안녕하세요 지금 만들고 있는 서비스가 설치형 어플리케이션에, 리눅스 파일 시스템을 사용해야해서 처음부터 docker 환경으로 spring boot 서버 환경을 세팅하고 시작했습니다. 순조롭게 진행하다가 한 부분에서 막히게 되었는데요, spring boot 서버 내에서 현재 요청한 클라이언트의 ip를 기존에 등록한 아이피와 비교하여 다른 아이피일 경우 요청을 거부하는 보안 로직을 구현해야하는 부분입니다. 문제가 되는 부분은 요청한 클라이언트의 ip를 알아내는 부분인데요 원래 하던것과 같이 HttpServletRequest 객체에서 getRemoteAddr() 메소드를 호출하여 아이피를 출력해보니 클라이언트의 아이피가 아닌 다른 아이피가 잡히는겁니다. 정황상 host 에서 컨테이너로 포트포워딩을 하다보니 본래 클라이언트의 아이피가 아니라 Docker 네트워크의 아이피가 나온 것 같습니다. 혹시라도 포워딩 헤더가 있을까 하여 헤더를 까봤지만 헤더에 있지도 않더라구요.. GPT에게 자문을 구해보니 두가지를 추천해주더군요. 1. container의 network를 host로 설정하라 이건 알아보니 리눅스에서만 작동하는거랍니다 제 어플리케이션은 리눅스에 설치될수도 있고 윈도우에 설치될 수도 있는데 말이죠.. 2. Nginx 같은 프록시 서버를 둬라 호스트에 프록시를 둬서 본래의 아이피를 헤더에 추가하든 어떻게든 해서 본래의 아이피를 스프링에 전달해주라는 말로 이해했습니다. 플랫폼 독립적으로 설치하기 위해서 Docker를 채용했는데 호스트에 추가적인 서버를 설치하라뇨… 이것도 좀 아닌 것 같습니다.. 막막합니다… 괜히 Docker 들여왔나 싶기도 하고, 보안 인증때문에 이 기능을 지원 안할수도 없고.. 도와주십쇼..!

클라이언트, 서버 두 DB의 데이터를 동시에 수정할 때 무결성 보장

안녕하세요 어플리케이션을 만드는 도중 문제가 생겼습니다. indexedDB( 클라이언트 ), postgreSql( 서버 ) 2곳의 데이터를 동일하게 수정해야할 때 ( 추가, 삭제, 수정 등 ) 한 곳의 api 가 실패하는 순간 이미 수정이 된 곳의 트랜잭션을 롤백 ( abort ) 하여 연동된 두 곳의 데이터가 동일 하도록 무결성을 보장하고자 합니다. 그런데 2가지 문제를 발견하였습니다. 1. indexedDB 의 트랜잭션 도중 다른 api 의 await를 쓰는 순간 indexedDB 는 트랜잭션을 즉시 종료시켜 서버 데이터 수정이 실패해도 abort() 가 불가능하다. 2. postgreSql 의 트랜잭션은 next.js 의 서버사이드 api에서 쿼리를 날리기에 중간에 클라이언트 사이드의 indexedDB 수정 api 사용이 불가능하다. indexedDB는 idb, postgreSql 은 pg 라이브러리를 사용중입니다. 수정 되기 전 상태를 임의로 기록 > 2번째 api 실패? > 기록된 상태로 수정하는 api 요청 이라는 단순한 방법도 생각해봤지만 결국 마지막 상태로 수정하는 것도 별도의 api 요청이기에 이 것또한 실패할 시 무결성 보장이 되지않기에 포기하였습니다... 선배님들은 서버와 클라이언트 데이터를 연동할때 무결성 보장을 어떻게 하시나요? next.js 14 환경입니다.

개발자 모드 함수 실행 방지

안녕하세요. 스스로 개발자라고도 하기 민망한 신입 개발자입니다. 이번에 자바스크립트를 이용한 쿠폰 다운로드 로직을 구현하면서 예전 사람이 만들어 놓은 코드를 참고하면서 문제가 발생했습니다. 기존 방식은 프론트단에 있는 데이터를 ajax에 담아 서버 측에서 검증을 받은 후 쿠폰 다운로드 함수를 실행하여 쿠폰을 다운로드 받아왔습니다. 예시) 로그인체크 함수 (ajax로 로그인 검증 함수로 보냄) 응답이 성공일시 -> 참여이력체크 함수 (ajax로 로그인 검증 함수로 보냄 -> 반복 -> 검증 전부 성공시 쿠폰 다운로드 함수 실행 여기서 문제는 개발자 모드 콘솔창에 쿠폰 다운로드 함수를 호출하면 검증과정 없이 쿠폰이 다운로드 받아지는 것입니다. 이것을 방지하기 위해 서버단에서는 세션, 토큰을 사용하는 방법이 있다는 것은 찾았지만 클라이언트 측, 즉 자바스크립트 코드로 개발자 모드에서 함수를 무단으로 호출하는 것을 방지하는 방법이 있을까요? 밑에 원하는 해결 방안을 적어 놓겠습니다 1. 개발자 모드 실행 시 경고창, 창 이동 방법 - 이 방법은 제외입니다. 2. 클로저 사용 - 익명 함수로 다운로드 함수를 작성 시 검증 과정 마지막에 호출하지 못하더군요. 제가 클로저를 잘못 이해하고 사용한다 생각하니 클로저로 해결할 수 있는 방법이 있다면 가르쳐주시면 감사하겠습니다. 3. 그 이외에 방법 자바스크립트 코드로 해결하는 방법이 있으면 좋겠습니다.

Next.js 13 fast refresh가 작동하질 않습니다..

현재 Next.js13 프로젝트를 Pages Router에서 App Router로 마이그레이션 한 이후로 클라이언트 컴포넌트에서만 fast refresh (hot reload)가 작동하지 않습니다. 신기한 건 서버 컴포넌트의 값을 바꾸고 저장하면 바로바로 fast refresh가 된다는 점입니다. 하지만 클라이언트 컴포넌트는 값을 바꿔 저장해도 fast refresh가 되지 않거나 여러번 저장하면 가끔씩 그냥 페이지가 새로고침이 되며 수정값이 적용됩니다. 혹시나 Next 버전 문제인가 싶어 같은 버전(최신버전입니다.)으로 새로운 프로젝트를 생성해 클라이언트 컴포넌트를 수정해 본 결과, 문제없이 fast refresh가 작동했습니다. 구글링을 해봐도 일부 프로젝트의 클라이언트 컴포넌트에서만 fast refresh가 작동하지 않는 경우는 저밖에 없는 것 같습니다.. 도와주세요!

[Next.js] api라우터에 대한 질문입니다.

갑자기 의미없을 거 같은 단순 궁금증이 생겼습니다. (클라이언트 - app) & (서버 - app) (클라이언트 - app) & (서버 - page) 클라이언트와 서버 모두 app 디렉터리에서 구현하는 것과 클라이언트는 app, 서버는 page 디렉터리에서 하는 것이 성능 차이가 있을까요?

클라이언트인데 웹 개발자로 전향하는게 맞을까요?

유니티 언리얼을 사용하는 4년차 클라이언트 프로그래머입니다. 최근에 회사측의 안 좋은 일로 퇴사한 후에 실직상태로 지내고 있는데 공고 수가 너무 적네요 경쟁률이 진짜 너무 어마어마하구요 현재 상태로는 클라이언트를 접고 웹 개발자로 전향하는게 맞을까 싶기도 합니다.. 갑갑하네요

nextjs 서버사이드 데이터페칭 질문입니다.

안녕하세요. 다른분들의 고견을 여쭙고자 합니다. next에서 app라우트 방식을 이용해서 개발을 진행하고 있는데요 좋아요한 게시글을 불러오는데. 속도를 위해서 서버사이드에서 불러와서 클라이언트 사이드에 뿌려주는데요. 클라이언트 사이드에서 좋아요 버튼을 누르면 -> 좋아요 데이터를 파이어베이스 서버에 저장 -> 좋아요 페이지에서 확인 -> 업데이트가 안됩니다. 그도 그럴것이 서버사이드는 업데이트가 되지 않기 때문이고 새로고침을 해야만 하기 때문이라고 생각합니다. 초기값을 서버사이드에서 불러온후에 그 후의 데이터들은 recoil로만 관리한다? 이런것도 아닌것 같구요. 이 문제를 해결할려면 초기데이터를 불러오는것 부터 전부다 클라이언트 사이드에서 해야만 하는 것 일까요? 이 문제를 해결할려면 tanstack-query를 사용해야할까요? 모르는점이 많네요. 아시는 내용이있으시면 답변주시면 너무 감사하겠습니다.

RAG 를 짜는 중에 도무지 어떤 부분이 문제인지 모르겠습니다.

# JSON 파일에서 FAQ 데이터를 로드하는 함수 def load_faq_data_from_json(file_path): with open(file_path, 'r', encoding='utf-8') as f: faq_data = json.load(f) return faq_data # FAQ 데이터 로드 json_file_path = '' faq_data = load_faq_data_from_json(json_file_path) # ChromaDB 클라이언트 및 Embedding 설정 chroma_client = chromadb.Client() # ChromaDB 클라이언트 생성 # 고유한 컬렉션 이름 생성 collection_name = "faq_data_" + datetime.datetime.now().strftime("%Y%m%d_%H%M%S") collection = chroma_client.create_collection(collection_name) # LangChain의 Text Splitter 설정 text_splitter = RecursiveCharacterTextSplitter( chunk_size=512, chunk_overlap=50 ) # OpenAI 임베딩 설정 openai_api_key = '' embedding_function = OpenAIEmbeddings( model="text-embedding-ada-002", openai_api_key=openai_api_key ) # 텍스트 스플리팅 및 임베딩 생성 함수 def split_and_embed_text(text): splitted_texts = text_splitter.split_text(text) print(f"Splitted texts: {splitted_texts}") try: # OpenAIEmbeddings는 embed_documents를 사용합니다. embeddings = embedding_function.embed_documents(splitted_texts) except Exception as e: print(f"임베딩 생성 중 오류 발생: {e}") return None # 임베딩이 제대로 생성되었는지 확인합니다. if embeddings is None or len(embeddings) == 0: print("임베딩 생성 실패") return None # 임베딩을 numpy 배열로 변환 embeddings = np.array(embeddings) print(f"Embeddings shape: {embeddings.shape}") # 임베딩 벡터의 차원을 확인하고 처리합니다. if embeddings.ndim == 1 and embeddings.shape[0] == 1536: # 임베딩이 1차원 배열이고 길이가 1536인 경우 final_embedding = embeddings elif embeddings.ndim == 2 and embeddings.shape[1] == 1536: # 임베딩이 2차원 배열이고 두 번째 차원이 1536인 경우 final_embedding = np.mean(embeddings, axis=0) else: print("임베딩 벡터의 차원이 예상과 다릅니다.") return None print(f"Final embedding shape: {final_embedding.shape}") return final_embedding # FAQ 데이터를 Vector DB에 저장 def store_faq_data_in_vector_db(faq_data, collection): for faq in faq_data: # 'question'과 'answer'가 있는지 확인하고, 'answer'가 None이 아닌지 확인 if 'question' not in faq or 'answer' not in faq or faq['answer'] is None: print(f"누락된 'question' 또는 'answer'로 인해 항목을 건너뜁니다: {faq}") continue # 다음 항목으로 넘어감 # 텍스트 스플리팅 및 임베딩 생성 question_embedding = split_and_embed_text(faq['question']) if question_embedding is None: print(f"Embedding generation failed for question: {faq['question']}") continue # 임베딩이 없으면 다음 질문으로 넘어감 print(f"Generated embedding for question '{faq['question']}': {question_embedding}") # 각 질문에 고유한 ID 생성 faq_id = str(uuid.uuid4()) # 메타데이터에서 None 값을 제거 metadata = {k: v for k, v in {"answer": faq['answer']}.items() if v is not None} # Vector DB에 저장 collection.add( documents=[faq['question']], metadatas=[metadata], ids=[faq_id], embeddings=[question_embedding] ) # 추가 후 임베딩 확인 (저장된 후 곧바로 확인) stored_results = collection.get(ids=[faq_id], include=["embeddings"]) if stored_results['embeddings'] is not None and len(stored_results['embeddings']) > 0: print(f"Embedding for question '{faq['question']}' successfully stored.") else: print(f"Failed to store embedding for question '{faq['question']}'") # FAQ 데이터를 JSON에서 로드하고 저장 store_faq_data_in_vector_db(faq_data, collection) 이렇게 데이터를 저장하고 # 환경 변수에서 API 키 로드 openai_api_key = os.getenv("OPENAI_API_KEY") if not openai_api_key: raise ValueError("OpenAI API 키가 설정되지 않았습니다. 환경 변수 OPENAI_API_KEY를 설정하세요.") # OpenAI 임베딩 설정 embedding_function = OpenAIEmbeddings( model="text-embedding-ada-002", openai_api_key=openai_api_key ) # LangChain의 Text Splitter 설정 (일관성 유지) text_splitter = RecursiveCharacterTextSplitter( chunk_size=512, chunk_overlap=50 ) # ChromaDB 클라이언트 및 컬렉션 설정 chroma_client = chromadb.Client() collection_name = "faq_data_collection" try: # 이미 존재하는 컬렉션인지 확인하고, 있으면 가져옴 collection = chroma_client.get_collection(name=collection_name) except chromadb.errors.CollectionNotFoundError: # 컬렉션이 존재하지 않을 경우에만 생성 collection = chroma_client.create_collection(name=collection_name) # Vector DB에서 유사 질문 검색 (ChromaDB) def find_similar_question_in_vector_db(new_question_embedding, collection, k=5): results = collection.query(query_embeddings=[new_question_embedding], n_results=k, include=['documents', 'metadatas', 'embeddings']) best_similarity = 0 best_question = None best_answer = None # 검색 결과에서 각 질문의 유사도와 답변을 처리합니다. if 'documents' in results and 'metadatas' in results: documents = results['documents'][0] metadatas = results['metadatas'][0] embeddings = results['embeddings'][0] for i in range(len(documents)): stored_embedding = embeddings[i] metadata = metadatas[i] if stored_embedding is not None: # 코사인 유사도를 통해 유사도를 계산합니다. similarity = cosine_similarity([new_question_embedding], [stored_embedding])[0][0] print(f"유사도: {similarity} for {documents[i]}") # 유사도가 가장 높은 결과를 선택하며, 임계값 이상일 경우에만 선택 if similarity > best_similarity and similarity >= SIMILARITY_THRESHOLD: best_similarity = similarity best_question = documents[i] if isinstance(metadata, list): metadata = metadata[0] best_answer = metadata.get('answer') if isinstance(metadata, dict) else None return best_question, best_answer # Fine-tuned GPT를 사용해 새로운 답변 생성 def gpt_generate_response_from_finetuned_gpt(question, style="의사 A 말투"): prompt = f"다음은 환자의 질문입니다: \"{question}\". 아래 말투를 사용하여 질문에 대해 성실하고 정확한 답변을 작성해주세요.\n\ 말투: {style}" response = client.chat.completions.create( model="", # Fine-tuned된 GPT 모델 ID messages=[ {"role": "system", "content": "You are a helpful medical assistant."}, {"role": "user", "content": prompt}, ], max_tokens=300, temperature=0.7, # 답변의 다양성을 조절합니다. ) return response.choices[0].message.content.strip() # 새로운 질문 처리 및 최종 응답 생성 def generate_final_response(new_question, collection): # 텍스트 스플리팅 및 임베딩 생성 splitted_texts = text_splitter.split_text(new_question) new_question_embedding = np.mean(embedding_function.embed_documents(splitted_texts), axis=0) # ChromaDB에서 유사 질문 검색 similar_question, answer = find_similar_question_in_vector_db(new_question_embedding, collection) if similar_question and answer: final_response = f"질문: {new_question}\n유사 질문: {similar_question}\n기본 답변: {answer}" else: generated_answer = gpt_generate_response_from_finetuned_gpt(new_question) final_response = f"질문: {new_question}\nGPT로 생성된 답변: {generated_answer}\n(이 답변은 벡터데이터에서 유사한 답변을 찾을 수 없어 GPT에 의해 생성되었습니다.)" return final_response # 사용자로부터 새로운 질문 입력 받기 new_question = input("새로운 질문을 입력하세요: ") # 최종 응답 생성 response = generate_final_response(new_question, collection) print(response) 로 데이터베이스에서 유사한 질문-답변 쌍을 끌어오려는데 정확히 같은 질문을 넣어도 (이러면 유사도가 1인데) 저장되어있는 답변이 끌어와지질 않네요...

Next.js 와 데이터 패칭 관련 React Query SSR

안녕하세요. Next.js 13.4 버전으로 개발중인 주니어 개발자입니다. SSR 관련해서 처음 접하고 개발중인데 Data Fetching 부분에서 조금 이론과 실무 모두 조금 막혀있습니다. 다름이 아니라 서버 컴포넌트/클라이언트 컴포넌트 이렇게 2개로 나뉘는데 accessToken 사용 떄문에 axios를 사용중입니다. 그래서 마이페이지 를 구현중에 데이터를 불러와서 뿌려주는 부분을 구현중인데 클라이언트 컴포넌트에서 useEffect 안에서 불러오면 한 박자 느리게 데이터가 뿌려져서 이질감이 있습니다. 그래서 서버컴포넌트에서 prefetch 해서 react query 사용해서 hydration 방식으로 직렬화 해서 내려주고 클라이언트 컴포넌트에서 const { data } = useQuery(['querykey'], () => queryFn) 형태로 사용해서 뿌려주고싶은데 여기서 이 'data'는 useState에 할당을 못하나요? 마이페이지 데이터 수정시에는 어떻게 활용을 해야되는건지 잘 모르겠습니다...

nextjs 서버컴포넌트 질문있습니다 !

안녕하세요 nextjs 14 app router 공부 중 질문이있어 이렇게 글 남깁니다.... 1. ”use client“ 클라이언트 컴포넌트가 자식으로 서버컴포넌트를 가져오면 그 아래의 모든 컴포넌트는 서버컴포넌트로 동작이 아닌 클라이언트 컴포넌트가 되는건지 궁금합니다.. 2. 그렇다면 layout단에서 use client를 사용한 provider가 있다면 children으로 받은 모든 페이지들은 클라이언트 컴포넌트가 되는건지 궁금합니다... 3. 서버컴포넌트랑 SSR이 다른 개념이라는데 너무 헷갈립니다.. 혹시 다른점이 뭔지 알 수 있을까요? 궁금한 점들을 나열하다보니 두서가 없어진거같아서 죄송합니다.. 좋은 히루 보내세요 :) !!!!

언리얼 클라이언트 취준 하시는 분들 어떤 활동 하시나요?

안녕하세요. 현재 대학교 3학년 마치고 휴학하고 CS 부트캠프 수강 중인 취준생입니다. 저는 게임 개발자가 목표라 유니티 2년정도 사용해보았고, 언리얼 클라이언트를 생각하고 있습니다. 다만 아직 언리얼 공부를 시작해본적이 없고 다른 도움이 되는 활동같은게 어떤게 있는지 잘 모르겠어서 준비하는데 어려움이 있습니다.. ㅠㅠ 지금 계획으로는 내년 초에 unseen 3기를 신청하는 것 이외엔 언리얼 관련 계획이 없는 상황입니다. 그전까지 이득우님의 언리얼 책이나 유데미 강의를 보면서 독학을 할 듯한데, 혹시 연합 동아리나 스터디 같은걸 해보신 분이 계실까요? 아니면 다른 도움이 됐던 활동이면 아무거나 좋습니다!! 코딩테스트와 CS 관련은 계속 준비를 하고 있어서 괜찮은데 엔진 관련 공부가 필요한 상황입니다!! (포폴도 만들어야 돼요..)

Next.js에서 클라이언트 컴포넌트와 서버 컴포넌트의 axios interceptor 동기화

안녕하세요 Next.js 13버전 page router방식으로 개발중입니다. 클라이언트 컴포넌트와 서버 컴포넌트에서의 통신을 위해 각각 axios interceptor를 구현했습니다. 각각 store와 cookie에서 accesstoken값을 헤더에 넣어주는 역할을 하고 있는데 문제가 되는 부분은 토큰 만료 이후 갱신하는 부분입니다. interceptor가 두개이다보니 처음에는 서로 동일한 토큰응 가지고 있지만, 만약 클라이언트 컴포넌트에서 요청시 토큰이 만료되면 갱신하는 요청을 보내고, 서버 컴포넌트에서 요청시 만료되면 갱신하기 때문에 서로 일치하지 않는, 유효한 토큰이 두개가 되는 상황입니다. 현재 서버에서는 유효한 토큰이 하나만 존재하도록 설계를 해놓진 않아서 작동하는데 문제는 없지만 많이 찝찝하네요. 혹시 좋은 방안이 있을까요? 혹은 비슷하게 구현하신 분들의 상황을 공유 받을 수 있을까요?

node.js 백엔드에서 JWT Secretkey 보관 방법

안녕하세요! node.js express.js를 활용하여 백엔드를 개발중인 신입 개발자입니다. 앱 개발을 하고있는데 unity 프론트와 api통신을 해야하는 상황입니다. JWT를 활용하여 로그인 처리를 하고있는데 unity프론트와 API통신하면서 JWT때 사용하는 secretkey값을 공용으로 사용하고싶은데 혹시 실무에서 주로 처리하는 방법이 있을까요?? 보통 앱개발에는 안드로이드 keystore로 처리한다고도 하던데 서버단과 unity 클라이언트단 JWT secretkey를 같이 사용할 수 있는 방법 질문요청드립니다...! 헷갈리는부분... API 통신시 클라이언트단에서 로그인하고 유효성검사하고 암호화해서 api 통신하는 방식으로 흐름이 되는게 맞나요..?? 그리고 서버단에서 복호화해서 암호화하고 저장 api 통신시에 탈취가능성이 있지 않나는 클라이언트분의 말을듣고 위와 같은 질문을 드립니다... 제가 헷갈리는 부분인건지 아니면 api 전송시에는 암호화가 되지않아도 보안에 이상이 없는건지 서버단에서만 jwt 암호화 처리를 하면되는건지.... 이 부분은 어떤 흐름대로 이해하고 가야하나요?? ㅠㅠㅠ 너무 초보같은 질문이지만 질문드립니다..

웹 클라이언트랑 서버 따로 배포하는 방법 알려주실 분

안녕하세요. 프론트엔드 개발자를 희망하는 학생입니다. 항상 프론트만 개발했다가 MERN 스택(mongodb, express, react, nodejs) 강의를 보고 이번에 처음으로 백도 개발하게 되었습니다. 프론트만 개발했을 때는 netlify에 배포했는데 서버는 어디에 배포해야할지, 클라이언트는 그대로 netlify에 배포하고 서버는 따로 배포해도 되는 것인지, 서버 무료 배포 사이트는 어떤 것이 좋은지 궁금합니다. 따로 배포해도 된다면 방법을 알려주시면 감사하겠습니다. 참고로 클라이언트와 서버 폴더가 따로 구성되어 있습니다. App 폴더 안에 client 폴더, server 폴더 이렇게 있습니다. 사진은 server/index.js 사진인데 서버를 client/build/index.js에 연결해놨으니까 그냥 서버만 배포해도 되는지도 궁금합니다.

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

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