#csr

스프링부트 로컬 환경에서는 되지만, 배포 환경에서 404 에러가 발생합니다.

안녕하십니까 선배님들. 스프링부트 API 서버를 개발하고 배포하였는데 다음과 같은 문제가 발생하였습니다. 로컬 환경에서는 잘 작동하지만, 배포 환경에서 특정 POST 요청에서 404에러가 발생하는 문제였습니다. 해당 요청은 JSON을 반환하는 컨트롤러입니다. 서핑을 하던 중, Spring Security의 CSRF의 문제일 수도 있다고 하던데 저는 현재 Security를 사용하지도 않고 다른 POST 요청은 잘 응답하여 뭐가 원인인지 잘 모르겠습니다. 아래는 application.yaml과 Controller 코드입니다. 감사합니다. // application.yaml spring: application: name: tika servlet: multipart: max-file-size: 50MB max-request-size: 50MB

개인 프로젝트 피드백 부탁드립니다!! (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/ 따끔한 피드백 주시면 감사드리겠습니다!! 감사합니다!!

프론트엔드 지망생. 한심하지만 길어진 공백. 잃어버린 공부 방향성. 조언이나 의견 부탁해도 될까요 ?

안녕하세요. 커리어리에서 자주 질문하면서 현직 개발자분들의 다양한 의견을 듣고 많은 도움을 받고있는 취준생입니다. 그 중엔 가끔 쓴소리하시는 분들도 계시지만 그런 부분들이 진심으로 제 고민거리에 대해 생각해주시는 거 같아 오히려 믿을만한 이야기구나 하고 받아들이는 경우도 많네요. 본론부터 말하자면 공부방향을 제대로 잡지 못하는 듯 하여 현업 분들이나 저와 같은 취준생 위치에 있는 분들의 다양한 의견을 듣고 싶습니다. 저는 국비를 수료 후 근 1년 가까이 개발에 손을 놓아 공백이 있습니다. 수료 후 5개월 정도는 만들어 진 협업 포폴로 이력서를 내면서 알고리즘 공부하고 간간히 그렇게 보냈구요. 그후 6~7개월 정도는 금전적인 문제로 공장,업체 단기알바 등을 하며 아예 공부에 손을 놓게 되었습니다.. (구차한 변명이지만 별 수없죠. 후에 면접 기회가 생겨도 이 공백에 대한 답변은 이렇게 할 수밖에 없을듯해요.) 아무튼 현재 다시 마음을 다잡고 배워왔던 것들을 복습하며 공부에 다시 전념하고 있습니다. 1~2달 전부터 쇼핑몰 프로젝트 하나를 만들고 있고요 (서버리스 서비스를 이용해서 db 연동하고 혼자 만들고 있습니다). 추가로 JS DeepDive 정독하면서 좀 중요하다 싶은 개념은 노션에 따로 정리해두고 다시 읽어보면서 눈에 익히고 있습니다. 그리고 기술면접 대비 질문들도 인터넷에서 찾아보면서 마찬가지로 노션에 정리하고 있고요. 네트워크 부분을 정확히 짚고가고 싶어서 인프런에 속성정리된 네트워크 강의 정독했습니다. 추가로 제가 next.js 로 공부했는데 react 기반 프레임워크지만 react와는 또 사소한 여러 차이점이 있는 거 같아 (ex. 페이지 라우팅 방식, csr 과 ssr 등) 유데미에 근본강의로 불리는 강의 (redux 도 같이 배우는) 구매해서 듣고 있습니다. 얼마전에는 타입스크립트 강의를 완강했는데 그 때쯔음부터 뭔가 내가 제대로 하고 있는게 맞나? 의문이 들고 있습니다. 스스로 불가피한 공백은 만들어 버렸지, 제대로 배포되는 프로젝트도 없지, 그렇다고 나이가 적은 것도 아니지 (아직 30은 아니지만 곧이라...)..이런 불안감들이 계속 머리속에 멤도니 잡생각이 많이 나고, 그러다보니 뭔가 열심히 공부는 하는데 확신이 안 섭니다. 객관적으로 보면 스스로에 대한 결핍이 좀 심해진것도 같구요. 며칠 전에 프로젝트 하다 z-Index 문제로 몇 시간을 chatgpt, 구글링을 하며 씨름하다 보니 아..css도 아직 모자란가? 라는 생각이 들어서 풀강의로 잘 정리된 css 강의도 하나 들을까? 이런 생각도 하고...css 생각하다보니 sass도 배워야 할 거 같고..그렇게 찾아보면 요즘 편리하게 tailwind 도 많이 쓴다는데 이것도 배워야겠지? ..막 그냥 바람결 제대로 만난 갈대마냥 막 흔들거려요. 글을 훑어보니 너무 제 감정에 치우쳐서 막 휘갈긴거 같네요. 긴 글 정독하기 싫은분들도 많으실 듯 하여 간략히 정리해 보겠습니다. 1. 현재 국비 수료 후 공백이 1년 넘게 있으나, 그 공백기는 개인사정? (금전문제) 등의 이유로 딱히 개발부분에 있어 뭔가 월등히 노력한 부분을 어필할 게 없음 2. 제대로 배포되고 있는 프로젝트도 없는 상황에 현재는 쇼핑몰 개인 프로젝트 하나 하고 있음 (서버리스로 DB 연동, 개인 프로젝트) 3. 그 밖에 유데미의 react 핵심강의 듣고 있고, js deepDive 정독, 기술면접 대비 질문들을 노션에 정리하며 관련 개념들을 상기하며 공부 중 (알고리즘은 따로 공부 안하고 있습니다. 혹 이 부분 중요하다 생각되시면 의견부탁드립니다.) 4. 현재 목표는 올해 안에 최소 2개의 프로젝트를 배포과정까지 끝내고(1개는 가능하면 협업으로) 연말 쯤 부터 이력서 미친듯이 넣고자 함. (현재 최종목표는 중소기업입니다. 워라벨, 연봉 크게 안따지고 최소한 배우고 성장할 배경이 되는 기업을 목표로 두고 있습니다. 중소에 그런 기업이 별로 없겠지만요..) 뭘 더해야 할까요? 그리고 이 상황에 백엔드 공부하는 건 좀 어리석은 짓인가요? (백엔드 기반 지식도 어느정도 필요하다고 하는데 전 그 정도를 모르겠어요) 여러분의 솔직한 의견 부탁드립니다. (걍 개발자 때려쳐라. 넌 답없다. 같은 솔직발언도 괜찮습니다. 제가 우둔하고 고집머리는 쎄서 그런 말 들어도 쉽게 포기 못하는 성격이지만...모르죠. 여러 사람들이 같은 식의 답변을 한다면 또 되새겨서 다시 생각해 볼 수도 있고요. 지금이 갈림길인 거 같습니다. 마음을 제대로 다잡고 영끌하던지, 아니면 그러고싶지는 않지만 포기해야하는지)

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 호출

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의 변경이 없다고 판단되면 클라이언트로 데이터를 보내지 않아 찍히지 않는걸까요.

Nextjs, 비용차이 많이 날까요?

안녕하세요 그냥 제 주변인이나 학우 대상으로 플젝 조그만하게 만드는 사람입니다 새 프로젝트를 nextjs로 가다보니 단순 호기심이에요 지금까지 프로젝트는 csr 방식으로 제작해 배포했고 비용은 0원나왔어요(트래픽이 많이 발생한 것도 아니고ㅋㄷ) 이번 플젝은 nextjs approuter을 사용하지만(ssr) client component만을 사용할 것이고 server side에서 Fetching하지 않을 계획이에요 실제 트래픽이 유의미하게 발생해야하고, 배포 플랫폼(버셀, aws)에 따라 다르지만 여러분들의 사례를 대충 알려주신다면 제 궁금증이 해소될 것입니다

Next.js 질문

아직 next의 개념을 잘 몰라서.. 혼란스러움에 질문드립니다..ㅠㅠ 전역상태에서 state를 꺼내서 사용하거나 react-query, pagination같은것들은 모두 csr로 변경해서 코드를 짜야하던데 그러다보니 page가 거의 use client로 도배되었는데요… 그럼 SSR의 장점들을 모두 잃어버리는건가요…? getStaticProps나 getServerSideProps들을 사용해서 이러한 문제들을 해결할 수 있다는데, 이것들로 해결해야하는걸까요..? 🥲

프로젝트 메인스택 선정 기준(react vs next.js)

안녕하세요. 입사 7개월차인 주니어 프론트엔드 개발자입니다. 사수가 없는 작은 스타트업에서 일하고 있는데, 이번에 새로운 프로젝트가 들어가면서 메인스택을 어떻게 해야하는지 고민이 됩니다. 1. 채팅 기능이 메인 2. 장기적으로 추가 기능 계속 들어갈 계획 nextjs가 csr ssr 모두 확장성이 있다는 생각이 들어서 reactjs 혹은 nextjs로 스택을 분리해서 기술스택을 선정한다는게 의미가 없어보이는데, 그러면 매번 프로젝트 할 때마다 nextjs면 만사해결! 이라는 느낌이 들어서요. 다른 분들은 메인스택을 어떻게 선정하시나요?

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

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

SSR을 사용하지 않는 next.js 앱의 장점은 뭐가 있나요?

SSR을 사용해 next.js 앱을 만들었는데 서버 컴포넌트쪽 인증을 처리하지 못해 전체 앱을 CSR로 전환하자는 의견이 나왔습니다. SEO도 필요하지 않은 앱이라 SSR을 사용하지 않으면 라우팅을 제외하곤 next.js의 어떤 장점을 살릴 수 있는지 잘 모르겠습니다. SSR을 적용한 컴포넌트를 CSR로 전환할바에 앱을 리액트로 변환하는게 프론트 서버를 신경써야하는 단점도 없어질 것 같고 시간도 비슷할거 같아서요. 추가적으로 only CSR로 next.js 사용하시는 분도 계실까요?

NextJS13 모바일 구분 및 기술 문의

안녕하세요 nextjs13 으로 프로젝트를 진행할려고 하면서 문의 사항이 있습니다. 전제 조건으로 하이브리드앱으로 구현 예정이며, 웹뷰 방식으로 웹, 앱을 같이 사용할려고 합니다. (레이아웃을 웹, 앱 별도 구성 예정) 궁금한게 많아서 질문이 많이 있네요. 전문가분들 도움 부탁드립니다. 1. react-device-detect 모바일 여부를 구분하여 레이아웃을 구성할려고하는데, MobileView의 경우 use client 에서만 작동되는 것같습니다. MobileView을 사용하여 ssr 사용은 불가능한건가요? 2. style-component nextjs12 에서는 style-component를 사용되었는데 13으로 올라가면서 css-in-js방식을 사용 못하는것으로 보이며, tailwindcss, postcss를 권장하는걸로 보이는데 맞나요? 추가로 style-component 를 use client로 사용할 경우 하위에 들어가는 컴포넌트들이 다 csr 형식으로 되는게 맞는건가요? 3. RCS(React Server Components) children 으로 화면을 넘겨서 사용하는데 중간에 use client 를 사용하면 하위도 csr 형태로 인식이 되는건지 문의 드립니다. 감사합니다.

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’를 명시하라는 에러가 발생한다. 제가 어떤 부분을 잘못 이해하고 있는걸까요?

Nuxt header asyncdata 질문

Nuxt에서 header에 들어갈 메뉴를 ssr로 하고 싶어서 asyncdata에서 구현하려고 했더니 Header가 layout 이라서 안되더군요 Header에서 메뉴 리스트 서버에서 가져올 때 시점을 ssr로 해야 되나요? csr으로 해야 되나요?

클라이언트에서 사용자가 로그인 상태인지 판별하는 방법

일반적으로 웹/앱 클라이언트에서 사용자가 로그인 상태인지 어떻게 확인하는지 궁금합니다. 1. 서비스에 접속하고 페이지를 이동할 때마다 매번 유저 정보를 가져오는 api를 호출해서 에러가 나면 로그아웃 상태로 판단한다. 2. 서비스에 접속할 때 한번 유저 정보 api를 호출하고 에러가 나면 로그인 api를 호출해서 성공할 때까지 로그아웃 상태로 판단한다. 3. 쿠키나 로컬 스토리지 같은 곳에 세션 id가 있는지 여부로 판단한다. 지금 생각해본건 이렇게 세가지 인데 일반적으로 어떻게 로그인 상태인지 매번 판별하는지 궁금합니다! 그리고 환경을 nextjs로 가정했을때 이 유저 api 호출을 ssr과 csr중 어디서 호출하는게 좋을지도 알고 싶습니다.

[Django ]CSRF(Cross-Site Request Forgery) 보호를 해제하면 프론트엔드와의 통신에서 CORS(Cross-Origin Resource Sharing)

CSRF(Cross-Site Request Forgery) 보호를 해제하면 프론트엔드와의 통신에서 CORS(Cross-Origin Resource Sharing)가 발생하나요?

refresh Token은 왜 사용하는건가요??

액세스 토큰이 탈취될 가능성이 있어서, 탈취된 경우 피해를 최소화하기 위해 리프레쉬 토큰을 사용한다고 이해했습니다. 액세스 토큰만을 사용하고, 액세스 토큰을 브라우저의 쿠키에 저장한다고 했을때 쿠키에 httponly, secure 설정 / 서버에 csrf토큰 및 https를 적용하면 Csrf 및 Xss 공격을 예방하고 쿠키에 저장된 액세스 토큰이 암호화 되어 있어 이를 가로챈다고 해도 원래 값을 알아낼 수 없으니 액세스 토큰 자체가 탈취될 가능성을 배제할 수 있을 것 같은데 어떤 이유에서 리프레쉬 토큰을 쓰는건가요??? 정말 너무 너무 궁금한데 지식이 부족해 구글링으로 속시원한 답을 찾아낼 수 없어 질문 올려봅니다..!

ssr을 사용 시, 조건부 렌더링의 문제점

ssr을 사용하는 가장 큰 이유 중 하나는 seo입니다. seo는 html 내부의 데이터를 수집해서 웹 결과를 구성하는데 csr은 초기에 빈 html을 받고, 이후 링크된 자바스크립트를 통해 화면을 렌더링 합니다. 이러한 구조 때문에 seo에 취약하다는 단점이 생깁니다. ssr은 프리렌더링을 통해 미리 화면을 렌더링 하고 완성된 html을 클라이언트에게 보내줌으로 seo를 최적화 합니다. 하지만 리엑트 코드를 작성중 이런 경우 생기는 데 동적으로 받아오는 데이터가 있고, 이에 따라 달라지는 화면이 여러가지인 구조입니다. 이런 상황이 빈번하다면 프리렌더링을 하더라도, 핵심적인 데이터가 html에 나타나지 못하니 여전히 seo에 취약한 것 아닌가 하는 의문이 들었습니다. 그리고 만약 그러하다면, 이런한 코드방식을 지양해야 하는가 의문도 있습니다.

React와 같은 CSR에서 데이터 로딩 중 화면 구성 보통 어떤식으로 하시나요?

기본값을 지정해서 보여주자니 뭔가 기본값이 있는 화면이 띄워져 있다가 데이터를 불러온 후 화면이 전환되는듯한 느낌을 주면 사용성이 안좋을거같아서.. Skeleton을 띄우는게 제일 무난할거같긴한데.. 보통 어떤식으로 사용하시나요??

next.js 특정 페이지에 컴포넌트 미출력 기능 구현 이슈(use client 사용)

로그인페이지(/user-page)에서 footer컴포넌트를 안띄우는 기능을 구현하고 싶어 footer 컴포넌트를 csr 방식으로 사용하도록 'use client' 줬습니다. 근데 error ReferenceError: window is not defined 라는 에러가 뜨면서 적용이 안되네요ㅠㅠ nextjs는 ssr이니까 window에 접근하기 위해선 'use client'를 주면 된다고 들었는데 왜 안되는걸까요?? 찾아보니까 useEffect 쓰라해서 useEffect도 써봤는데 에러가 뜨진않지만 여전히 적용안되더라구요. 문제점 알려주시면 감사하겠습니다ㅠㅠㅠ <footer.tsx 파일> 'use client' import React, { useEffect } from 'react' import style from '../styles/footer.module.scss' const Footer = () => {     if (window.location.pathname === '/user-page') return null return ( -생략- ) } <루트 layout.tsx 파일> 'use client' export default function RootLayout({     children, }: {     children: React.ReactNode }) {   return (         <html lang="ko">             <body className={inter.className}>                 <div className="wrap bg-white">                     <Header />                     {children}                     <Footer />               </div>             </body>         </html>     ) }

Next.js server component(app router)의 auth 관련 질문 입니다.

안녕하세요. 이번에 Next.js(13)에서 최신 기술인 app router를 기반으로 자그마한 홈페이지를 구축 중에 있습니다. JWT 기반으로 SSR을 구축하고 있습니다. middlware로 어떻게 든 토큰 재발행이 가능한 로그인 구현을 완료 했습니다. 하지만 ServerComponent이다 보니, RSC에서 accesstoken 혹은 refreshtoken과 같은 인증 토큰이 만료 되었을 때, 재 발행을 하려면 어떻게 해야 할까요? cookie나 header는 접근은 가능해도 Set-Cookie를 내려 보내거나 할 수는 없는 걸로 문서에 나오고 실제로도 되지 않습니다. 어떻게 하면 ServerComponent에서 토큰을 재발행 하거나 다른 인증 방법이 있을 까요? 아니면 JWT + Session으로 가는 조합을 사용 해야 할까요??? 또, client와 server 간의 토큰 공유를 위해 access-token만 http-only를 해제하고 사용 중에 있습니다. 이게 cors나 csrf와 같은 공격에 취약한 문제가 있어서 이게 올바른 구현 방법일까요? 일단 제가 찾은 방법으로 가장 쉽게 해결되는 방법은 아직 실험 단계인 server action을 활성화 해서 클라이언트에서 토큰을 가지고 있을 필요가 없이 서버에서만 관리 하는 방법입니다. BFF을 일부 수용해서 해결 했습니다. front <-> BFF <-> api

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 이해도가 낮아 질문이 이상할 수 있습니다. 양해 부탁드립니다. 이게 이해가 안가서 스트레스를 너무 받고있네요.. 도와주세요

react.js VS Next.js 운영비용 외 보안적 측면

안녕하세요. 신규 프로젝트에 대해서 입장을 내야하는 상황입니다. 서비스는 그룹웨어, HR 같은 서비스여서 SEO 는 필요 없는 서비스입니다. 그러면 무조건 react.js , vue.js 같은 CSR 로만 개발하는게 좋을까요? 걱정은 실제 route 가 많은 서비스라면 SEO 가 없어도 Next.js Nuxt.js 와같은 SSR이 더 효과적일까요? 코드 스플릿을 한다고 해서 충분히 react.js 의 js 번들 다운로드 량을 짧은 시간으로 단축이 가능할까요? 스플릿을 잘해서 라우트가 많은데도 3초 이내에 다운로드가 될 수 있다라던가... Next.js 로 하게되면 react.js 배포와 비용차이가 많이 날까요? (SSG 를 사용할 일이 많지는 않음) 일가견 편하게 부탁드립니다. 제가 어떤 걸 알아야 하고, 어떤 내용을 전달할 수 있을까요?

getServerSideProps를 모든 페이지에서 공통적으로 사용할 수 있는 방법이 있을까요?

Next.js 에서 loginStatus같은 부분들을 CSR로 처리하다보니 새로고침시 false => true로 변경되면서 깜빡이는 문제가 생겨서 SSR로 처리하고싶은데 app.tsx에서 getIntialProps를 사용하였는데 요즘방식에는 getInitialProps보다 getStaticProps나 getServerSideProps를 권장한다고 들어서 변경할려고 합니다… 매 페이지에 공통적으로 들어가는 getServerSideProps같은 경우는 어떻게 처리를 해야할까요…? ㅜㅜ

Next.js i18n 다국어 시 getServerSideProps 사용 문제

안녕하세요 Next.js를 통해 프로젝트를 진행하고있는데 궁금증이 생겨서 질문남깁니다 ! i18n 라이브러리를 통해 다국어를 진행하고있는데 getStaticProps를 쓰고있습니다.. getStaticProps는 getServerSideProps랑 같이 사용 못하는 것으로 알고있는데 페이지마다 다국어가 들어가는 상황에서 get api 호출을 어떻게 진행해야할까요? (거의 모든 호출이 query나 param이 있는 동적인 데이터입니다…) 1. CSR형태로 페이지내에서 진행 2. 다국어또한 getServerSideProps로 진행 3. getStaticPath로 ISR형태로 revalidate를 짧게 진행해서 getStaticPaths가 없이 fallback “true”, “blocking” 형태로 진행 또 추가로 4. fallback “true”와 “blocking” 때의 각각의 장단점이 궁금합니다….! (똑같아보여서…😭) 질문이 길지만 너무 감사합니다😂

Next.js와 SSR관련 질문있습니다 !

Next.js 를 공부하다가 궁금증이 생겨 질문합니다 ! 1. Next.js로 만들어진 프로젝트를 S3 + CloudFront와 같은 정적 웹사이트 형태로 배포시에는 SEO와 같은 SSR의 이점을 볼 수 없고, SSR이 동작을 안하는 걸까요?! 2. 페이지 내에서 useEffect를 이용해 api fetch를 통해 데이터를 가져오는 부분이 CSR형태인가요? getServersideProps를 통해 데이터를 받아오면 혹시 이 방법과 비교했을때 장점이 무엇이 있는지… 궁금합니다 ! 질문이 길지만 고수님들 답변 부탁드립니다😭

SSR + CSR 를 같이 하는 웹 어플리케이션의 장점은 SEO 가 전부 인가요?

SSR + CSR 을 사용하는 이점이 SEO 말고는 없다고 생각하는데 맞나요? (잘못 알고 있는 내용이 있으면 알려주세요.) SSR 은 서버를 통해서 데이터를 로드하고 렌더링을 하는 초기 로딩 시간이 있고, Node.js 서버를 따로 띄워야 하는 복잡성도 늘어나고 CSR 은 순수한 필요한 HTML, JS 만 로드해서 클라이언트에서 바로 렌더링 되고 캐시를 활용해서 파일을 더 빠르게 보내주는 방법도 많을 것 같아요. 또한 복잡한 서버 구성이 없어서 구현하는 비용도 더 낮을 것 같고요. 그래서 대부분의 상황에서는 CSR 이 훨씬 유리하다고 생각되고 SEO 를 위해서 두가지를 조합해서 렌더링하는 프레임워크가 생겨났다고 생각합니다. 혹시 제가 모르는 추가적인 장점이 있을까요?

사이드 프로젝트에서 학습 목적으로 도입한 기술은 사용한 이유를 어떻게 설명하는것이 좋을까요?

안녕하세요 프론트엔드 취준생입니다. CSR, SSR에 대해 공부하면서 Next.js를 알게 되었습니다. SSR의 장점, SEO 등등에 대해 이론적인 개념(?)을 먼저 공부했고 직접 프로젝트에 적용하면서 느껴보고 싶었습니다. 하지만 사이드 프로젝트의 주제가 특별히 Next.js의 장점을 잘 활용할 수 있는 프로젝트는 아니었습니다. (팀 프로젝트라 팀원들과 함께 주제를 선정하다보니 불가피하게 되었습니다.) 그래서 만약 면접관이 제 이력서를 보고 Next.js를 사용한 이유를 묻는다면 어떻게 답변하는 것이 좋을지 잘 모르겠습니다. "Next.js의 장점을 잘 활용하지는 못했지만, 어떠어떠한 개념을 알고있으며 이걸 직접 프로젝트에 적용해보면서 학습하기위해 사용했다"고 답변하는 것이 혹시 좋지 않은 인상을 주는 답변일지 궁금합니다.

next.js 하고 express.js 로 웹앱 개발중인데

next.js 에서 express 쪽으로 request 날릴때 express 에서 csrf 검증을 통해서 요청을 검증하고 싶은데 csrf token 발급을 어떻게 해야할지 감이 잘 안와서요 next.js 에서 express로 csrf token 발급 request를 날려서 발급받은 csrf token을 쿠키에 저장하는 방법이 좋을까요?

SSR를 하는데 서버포트가 따로 존재하는건가요?

CSR은 3000일 것 같고 SSR은 어떤 식인지 모르겠습니 St.

Nextjs의 ssr, ssg, isr을 각각 언제 적용하는게 좋을지 기준과 구체적인 예시가 궁금합니다.

ssg : 빌드 때 정적 파일 생성해 빠르게 전달 가능하지만 다시 빌드할 때 까지 변경이 불가능하다. isr : 임의의 주기마다 재빌드 가능하지만 그 주기를 특정하기 어렵다. ssr : 깜빡임 없이 매 요청 마다 정적 파일을 만들어서 보내주지만 서버 요청 시간이 길어지면 사용자가 흰 화면을 오래 보게 된다. 제가 공부하면서 느낀 세가지 렌더링 방식의 장단점입니다. SEO가 필요 없고 초기에 데이터를 패칭해 반영하는 페이지가 있다고 했을 때, csr이 아닌 굳이 이것들을 적용해야 할 상황이 있을까 하는 생각이 듭니다. 흔히 예시로 드는 아주 명확한 상황이 아닌, 실무에서 적용해보시고 효과를 거둔 케이스와 판단 기준이 궁금합니다.