#nextjs

nextjs middleware 에서 protected route 처리 하는 방법이 궁금합니다

middleware 에서 토큰 인증에 따른 redirect 를 구현 할려고 합니다 제가 생각한 로직은 인증이 필요한 페이지는 accesstoken을 쿠키에서 받아오고 토큰이 없거나, 인증이 실패하면 login 페이지로 이동, 토큰이 만료된 경우에는 refresh 요청이후 accesstoken,refreshtoken 재발급 이후 원래 이동할려는 페이지로 이동 이렇게 생각중인데 다만 하나 걸리는게 middleware에서 refresh api 요청을 하는게 과연 올바를까? 궁금합니다 그럼에도 굳이 middleware 에서 할려는 이유는 page단 에서 처리할경우에는 결국에는 한번 그 페이지로 이동했다가 처리되는거라 깜빡이는 이슈가 생겨서 그렇습니다 보통 어떤식으로 처리하는지 궁금해요

하이브리드앱 화면 전환 애니메이션 도움 부탁드립니다

nextjs 로 하이브리드앱을 개발하고 있습니다. 네이티브 쪽은 AOS - kotlin, IOS - swift 입니다. 제가 궁금한 부분은 보통 앱들을 보시면 페이지 이동시, 새로운 페이지가 기존페이지를 덮으면서 슬라이딩 되어 나타나고, 뒤로가기를 하면 다시 현재페이지가 슬라이딩 되어 사라지면서 밑에 있던 이전 페이지가 보이는 형태입니다. 요즘은 하이브리드앱으로 많이 개발하는것으로 알고 있는데, 하이브리드앱인데 위의 페이지 전환 효과가 있는 앱들은 보통 어떻게 구현하는지 너무 궁금합니다! 애니메이션을 구현하려면 네이티브 기능을 꼭 써야 하는걸까요? 써야 한다면 하이브리드앱에서도 가능한 걸까요? 구글과 유튜브 상의 페이지 전환 애니메이션을 적용해봐도 제가 사용하는 앱들만큼의 자연스러움이 없네요. 선배님들의 도움 부탁드립니다!

NextJs에 따로 백엔드를 두는경우

안녕하세요. 토이프로젝트로 글, 댓글, 로그인 기능을 포함한 블로그를 만들어보고있습니다. 원래 프론트엔드는 ReactJs, 백엔드는 Golang으로 만들려고 했는데, 글 기능을 구현하던 중 글기능은 SEO가 필요한데, React는 그게 잘 안되서 원래 React프로젝트 구조를 유지하고 SSR로 렌더링 하기 위해서 NEXTJs로 바꾸려고 합니다. 또 이미지 최적화 기능이나 폴더기반때문에 편하기도 하고요. 근데 Next로 프론트엔드만 바꾸고 GO 백엔드는 유지하려고 하는데, NEXTJS를 프론트로 사용하고 따로 백엔드를 두는게 많이 쓰이는 방식인가요..? NEXT가 백엔드기능까지 제공하는 풀스택 프레임워크로 알고있는데 백엔드서버를 따로 두는게 바보같은 방식인가 궁금합니다.

Router back 렌더링

Nextjs router가 페이지 이동 하다가 다시 back 할 때 이전페이지 상태가 유지가 안돼서 다시 렌더링 하는 문제가 있는데 어떻게 해결하나요? 이전 페이지 내용이 많거나 스크롤 이거나 페이지 그런게 있을 때 어떻게 해야 되나요

공부를 어떻게 해야할 지 모르겠습니다

실습 중인 회사에서 제이쿼리, php를 이용해서 웹 개발을 맡고 있습니다. 인원이 10명도 안되기 때문에 웹 개발자가 없어서 AI와 구글에만 의존해서 진행하고 있습니다. 그래서 성능이나 최적화 신경도 안 쓰고 오로지 구현에만 초점을 두고 일하고 있습니다. 회사의 다른 웹 프로젝트는 NextJS로 개발되었어서 따로 NextJS도 공부를 하고 있습니다. 하지만 기존과는 달리 리액트의 기술들(hook 등)이 전혀 와닿지 않습니다. 리액트의 성향과 맞지 않는건지, 구현만 집중하는 제가 동작 원리나 기본 구조를 소홀해서 그런건지 생각이 많아집니다. 1. 구현만 생각하던 제가 기본부터 다시 잡으려면 어떤식으로 공부할 지 모르겠습니다. (조금만 아는 내용이면 빨리 넘어가는 나쁜 습관 때문에 메타인지 능력이 부족합니다...) 2. 주변에서 리액트가 쉽다고는 하는데 저는 아닌 거 같습니다... 리액트가 성향에 안 맞다고 하면 다른 걸 배워야 할까요? 아니면 더욱 리액트를 집중적으로 공부를 해야할까요

Nextjs with tailwind기반 ui라이브러리 질문

프론트엔드 취업전인 학생입니다. Rollup으로 라이브러리 번들 관련하여 질문입니다. 제작 현시점은 사용자가 컴포넌트를 import 하였을때 사용자가 tailwind.config.ts에 node_module경로의 제 라이브러리를 경로를 설정해야 스타일이 적용이 되는상황입니다. 개발자도구 element에는 텍스트상 적용이돼있는데 해당 방법말고는 못찾았습니다. 개발자분들의 좋은의견 부탁드립니다. 아래는 현재 rollup.config.js입니다.

프론트 next와 rust 사이에서의 kafka 통신

회사에서 프론트로 nextjs 쓰고있고 백으로 rust 사용하고 있습니다.(백 서버1, 프론트 1) 들어온지 얼마 안되었고 카프카가 좋다고 카프카 쓴다고 해서 그냥 그런게 있구나하고 UI나 기초적인거 짜고 이제 next에서 카프카 작업 하고있는데요 막상 시작하려니 nextjs에서 모든 데이터(유저 정보와 같은 정적인 데이터 포함)를 next 서버로부터 카프카 통신을 통해 들어오는 데이터들을 클라이언트에서 감지하려면 모든 페이지에서 웹소켓을 도입해야하는 상황입니다.. 제가 알고있는 게 맞나요? 백 서버 한개있는 프로젝트에서 카프카를 도입하는게 일반적인 일인가요..? 제가 해왔던 백-프론트 통신과 너무 달라서요 채팅같은 실시간 데이터가 필요하지 않은 곳에 웹소켓을 연결해야 하는 뿐더러 next app router에서 웹소켓을 연결하려면 별도의 node 서버를 두어야 하는 것 같은데 맞을까요? 아니면 웹소켓 말고도 카프카로 날아오는 데이터를 next 프론트쪽에서 받아올 수 있는 방법이 있나요? 정적인 데이터들은 api fetch 날려서 받아오면 된다고 생각했는데 모든 데이터를 카프카로 받아오고 있고 이를 실시간으로 확인해야하는 번거로움이 따라오는 것 같습니다.. 단지 유저정보를 받아오는데 웹소켓을 연결하는게 도저히 아닌 것 같아서 글 올려봅니다. 마감기한이 얼마 남지 않았는데 어려운걸 되게 해야하는 것도 아니고 안되는걸 되게 하라고하니 이게 맞나 싶어서요 .. 이러한 경우들이 있는지 현업자분들 도움 부탁드립니다. 공부해보니 카프카라는 기술 자체가 DB를 가진 백 서버들간의 통신에서 빛을 보기 위해 도입한다고 하는데 애초에 지금 진행하고 있는 프로젝트는 백 쪽 DB 1개입니다. 현재 프로젝트에서 카프카를 도입하는 것은 오버엔지니어링 같음은 물론 비용적인 면에서도 절대 도입할 이유가 없다고 생각하는데, 의견 부탁드리겠습니다.

nextjs 현업에서 백엔드로 사용하는 경우는 없나요?

Js풀스택 취업 준비중이라 리액트 nextjs 공부중입니다. 그런데 다른분이 현업에서 nextjs 로 백엔드 구현하는 회사는 하수다 차라리 nest를 공부하라 하시는데 정말인가요?

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

스타트업 vs 시리즈B 기업

현재 매우 큰 고민이 있습니다 현재 저는 2년차 프론트엔드 개발입니다 이번에 회사를 이직하게 되었는데요 선택지가 2개있습니다 이미 월요일부터 출근하여 근무하고 있는 스타트업으로 초기 멤버로 생긴지 얼마 되지 않은 기업입니다 기술은 nextjs를 쓰면서 많은 기업에서 사용하는 기술입니다 그다음은 오늘 갑자기 합격메일이 온 시리즈B이상의 기업입니다 기술은 Vue를 사용합니다 제가 고민되는 부분은 이전 직장에서도 vue를 사용하여 취업하는데 조금 힘든 경험을 했습니다 그래서 또 Vue를 사용하는 기업을 가야 할지 고민됩니다 또한 현재 월요일부터 출근한 스타트업은 사람들이 매우 좋아서 출근하는게 재밌습니다 하지만 시리즈 B 이상 기업은 잡플래닛이나 블라인드를 확인하였을 때 평점이 2점을 넘지 못했습니다 또한 연봉도 스타트업이 더 높습니다 시리즈 B 기업에 가면 그래도 안전하게 다닐 수 있을 것 같지만 여러 가지로 고민되네요 조언해 주시면 정말 감사하겠습니다!

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

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

NextJs 확장 fetch로 서버 컴포넌트에서 동적으로 api를 받는 방법

안녕하세요. 선배 개발자 선생님들. 오늘도 한 단계 성장하기 위해 질문을 남겨봅니다. 저는 NextJs, App router 방식으로 코드를 구현중이며, 서버 상태는 React-Query로 상태값을 관리하고 있었습니다. 왜 리액트 쿼리를 사용했는가? why? 1. Optimistic update, 무한스크롤에 대해 공부하고 적용해보고 싶었습니다. 2. 클라이언트 상태, 서버 상태를 나눈다는 개념이 너무 좋아서 서버 상태는 React-Query로 다뤘습니다. 3. statleTime, gcTime을 조정하여 캐싱기능이 좋았습니다. 갑자기 문득 나는 NextJS를 잘 쓰고 있는건가? 리액트랑 폴더 구조 말고는 다른게 없는거 아닌가? 라는 생각이 들었고, NextJs의 기능을 최대한 활용하고 나머지 불편한 부분이 생긴다면 외부 라이브러리를 사용하자! 라는 생각이 들었습니다. 그래서 저는 React-Query로 상태를 관리하던걸 NextJs의 확장 fetch로 바꿀려고 합니다. Optimistic update, 무한스크롤 기능을 제외하고 나머지 모든 서버 상태는 확장 fetch로 바꿀려고 합니다. 페이지네이션 페이지네이션 처럼 사용자와 상호 작용하는 부분, 즉 동적으로 데이터를 받아오게 하기 위해 url을 변경한 뒤, [id]/page.tsx에서 param로 받던지 혹은 header()를 통해 params를 받아서 처리를 할 수 있다고 생각하고, 저는 header()로 params를 받아서 처리를 했습니다. 모달에서의 페이지네이션 그런데 문제는 모달을 띄우고, 모달 내부에서 페이지네이션이 있는 경우 어떻게 데이터를 동적으로 받아오는지 고민을 해봐도 방법이 없는 것 같습니다. 1. 모달에서 다음 페이지 클릭시 url을 변경한다. -> 안해봤지만 동작을 할 수 있더라도 뭔가 느낌적으로 아닌 것 같습니다. 2. 클라이언트 컴포넌트에서 상태값을 서버 컴포넌트로 전달한다 -> 불가능 궁금한 점 1. 모달 내부에서 페이지네이션을 처리할때 url을 변경해서 서버 컴포넌트에서 확장 fetch로 데이터를 관리하는 게 적절할까요? 2. 모달 내부에서는 페이지네이션을 처리할 때는 react-query로 데이터를 관리하는 걸 확장 fetch로 바꿀 수 없는 건가요?? 바꿀 필요가 없는 건가요? 3. 더 좋은 방법이 있는 건가요?

프론트엔드분들은 개인 프로젝트할 때 백엔드를 어떻게 하시나요?

프론트엔드 분들은 취업이나 이직, 사이드프로젝트 등 개인 프로젝트를 진행할 때 백엔드는 어떻게 하시나요? 예시는 react 진영 기준으로 하였습니다 다른 선호하는 방식이 있다면 댓글로 알려주세요! 1. 클라이언트, 서버 각각 전부 개발 ex. reactjs(nextjs) + nestjs 2. 백엔드 서비스를 활용하여 개발 ex. nextjs + firebase, supbase 3. 풀스택 프레임워크 사용해 한 번에 개발 ex. nextjs + prisma(orm) + s3(storage)

공공openAPI웹 개발스택 질문

최근 공공쪽 데이터개방사업이 많아서 공공openAPI로 공공데이터를 이용한 정보취합이나 가공한 형태의 웹앱을 만들까합니다. nextjs를 쓸까했는데 개인개발인만큼 가볍고 단순했으면 좋겠고 공공데이터를 가공하는 만큼 데이터처리에 장점을 가졌으면 합니다. Nextjs로도 달성가능한지 혹은 적정기술 소개차원에서 추천할만한게 있는지 문의드립니다.

NextJS App router 공부 도중 궁금한게 생겼습니다

노션에 혼자 끄적이면서 공부중인데, 제가 잘 이해를 못하는 것인지 몇가지 글을 살펴보니 의견이 다 다른것처럼..? 보이더라구요.. 상품 업로드(db insert)나 회원가입/로그인 같은 로직들은 서버액션을 통하는지 API Routes(fetch)를 통해야 하는지 궁금합니다. 다양한 HTTP 메서드를 사용해야할때(PATCH, PUT..)만 API 쓰는게 맞는걸까요? 🥺

공부를 어떻게 해야할까요

현재 대학교 3학년인 학생입니다. 저는 꿈이 프론트엔드라 지금 거의 2년째 꾸준히 HTML/CSS/JS/react/nextjs까지 배우는 중입니다. 정말 프론트엔드에 진심이라 열심히 공부하고 있는데 요즘 들리는 말이 한가지 분야 말고도 다른것들도 해봐야한다는 것입니다. 또 지금 프론트 말고 c나 자바 파이썬도 배워야한다 처럼 다 다 해봐야한다고 들었습니다. 안그래도 저는 프론트 말고 백도 해볼 예정이긴 했는데 나중에 제 미래가 어떻게될지 모르는데 이것 저것 다 배워놓는게 맞을가요? 솔직히 제가 하고싶은 분야에 필요한 것들만 제대로 공부하면된다고 생각하는데 다들 어떻게 생각하시나요?

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

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

프론트엔드 신입 이력서 질문

올해 초 4년제 대학을 졸업하고 취업준비에 몰두하고있는 24살 프론트엔드 취준생입니다. 이제 포트폴리오, 깃허브 README 작성을 모두 마치고 이력서 작성만을 남겨두고 있습니다. 1. 이력서에 프로젝트의 어느부분까지 작성해야할 지 고민이 됩니다. 배포까지 모두 끝낸 상태이고 프로젝트별 깃헙/배포링크와 간략한 설명만 적으면 될까요..? 또 점핏 이력서 합격 족보들을 찾아 보니 자기소개서의 길이가 다들 다르시더라구요. 2. 대체적으로 어느정도 분량으로 자기소개란을 적어야 할 지, 프로젝트 관련이나 개발 능력을 위주로 기술해야할 지 장단점을 위주로 써야하는 지 감이 잡히질 않습니다. 3. 포트폴리오는 NextJS로 개발한 웹사이트로 제출하려고 하는데, 해당 사이트에도 이력서와 다른 별도의 자기소개 내용이 필요할까요? 주변에 개발자분들이나 회사다니는 분들이 전무해서 커리어리 실무직 선배님들의 답변이 정말 간절합니다.!!! 긴 글 읽어주셔서 감사합니다

마이크로 프론트 구현(Nextjs, React)

요구사항 마이크로 프론트엔드로 A라는 프로젝트에서 B라는 프로젝트의 컴포넌트를 사용하고 싶다 프로젝트 설명 ModuleFederationPlugin 사용해서 expose remote 설정 A 프로젝트 (remote) : react, styled-component 사용 B 프로젝트 (expose) : nextjs, scss 사용 첫번째 오류 styled 이 달라서 nextjs 에서 노드가 불러와지지 않는 것 해결 : <noscript id="**next_css__DO_NOT_USE**"></noscript> → 두번째 오류 발생 오류 내용 Cannot read properties of null (reading 'parentNode') TypeError: Cannot read properties of null (reading 'parentNode') at options.insert (webpack- 두번째 오류 Nextjs 에서 expose 할 때 Page 컴포넌트에 있는 useState를 사용 못한다고함 해결 : peerDependencies 로 nextjs 추가 → 오류동일 오류 내용 TypeError: Cannot read properties of null (reading 'useState') at useState (react.development.js:1623:21) at Page (index.js:8:40) react-dom.development.js:18704 The above error occurred in the <Page> component: 참고 : https://dev.to/omher/building-react-app-with-module-federation-and-nextjsreact-1pkh 두번째 오류를 해결해야 되는데 가능한 방법인지 모르겠습니다. 아시는 분은 댁글 남겨주세요~(코드상에 보안상 문제되는 부분은 a b 로 바꿨습니다.

웹사이트 프로젝트 피드백 주시면 감사하겠습니다!..

안녕하세요! 저는 현재 대학교 3학년 마치고 휴학 중인 코린이입니다.... 제가 실력이 너무 부족한 느낌이라서 혼자 프로젝트를 진행해도 이게 맞는 코드인지 잘 모르겠네여 ㅠㅠ.. 코드는 client쪽만 봐주시면 됩니당! 따끔한 피드백 부탁드립니다! 감사합니다 반응형이 아니라서 ㅠㅠ 웹으로 봐주셔야합니다~ 기술 스택 : nextjs, typescript, react-query 사이트 주소 : https://bestanimals.vercel.app/ 깃허브 주소 : https://github.com/kmj0973/bestanimals

Nextjs 탭 기능 질문

Next 14 앱라우터 버전과 react-query를 사용하고 있습니다. 게시물 목록을 보여주는 페이지를 만들고 있고 게시물의 카테고리를 필터링 해주는 탭을 만드려고 하는데요. 기존에 React에서 할땐 searchparams 값을 넘겨주는 식으로 필터링이 됐는데 next에서는 url을 바꾸는 식으로 하려면 페이지 이동을 해야 하는 것 같아서 이걸 페러렐 라우트로 처리를 해야할지 url 처리 없이 가야할지 고민이 됩니다 ㅠㅠ

좀 더 보완할 부분 궁금합니다. !!

nextjs 연습겸 만들어봤는데 재미있네요. 보완할 부분 궁금합니다. !!! ㅠ,ㅠ https://readme-decorate.vercel.app/

nextjs 14 form xss방지를 위한 검증방법

nextjs 14 server action 으로 form 전송하려고 합니다 xss공격을 방지하기위해 input의 html이나 script코드를 걸러내고싶은데 혹시 어떤라이브러리를 사용하는게 좋을까요?

nextjs typescript 실용성

저는 원래 백엔드 개발자인데 현재 이직한곳에서 사정상 프론트 서버를 공부하면서 하나 올리게 되었습니다. 공부하면서 개발 진행중인데 잘 이해되지 않는 부분이 있어서 여쭤 봅니다. 기술 스펙은 프론트 nextjs typescript, 백엔드 springboot gradle입니다. 1. 폴더로 라우팅하는게 편해보여서 nextjs로 선택했는데 합리적인가요?? 현재는 nextjs api는 사용계획 없습니다. 2. js 보다는 그래도 미래지향적인 ts를 선택했는데 뭔가 개발하다보니 괜히 사용중인 기술에 비해 오바했다는 생각이 좀 듭니다. 쭉 진행해도 괜찮을까요?? 지금이라도 js react로 바꿔야 할지 제가 프론트적 지식이 많이 부족하여 자문을 좀 구합니다. 감사합니다.

Nextjs Application error를 핸들링 할 수 있나요?

Nextjs로 개발중인데 Application error: a client-side exception has occurred가 간헐적으로 발생하고 있습니다. 위 에러가 뜰 경우에는 예외 처리를 해주려고 하는데 언제 어떻게 뜰 지 모르기 때문에 핸들링이 안되고 그대로 에러가 노출되고 있습니다 핸들링을 할 수 있는 방법이 있다면 공유 해주시면 감사하겠습니다!

API가 제공하는 데이터의 범위를 어떻게 잡을지 고민입니다.

안녕하세요. 개인 프로젝트로 풀스택 웹 서비스를 여러 번 만들어보다가 생긴 의문입니다. 보통 저는 백엔드는 nestjs와 프론트엔드는 nextjs로 개발을 합니다. 프론트 쪽에서 react query를 사용하여 백엔드의 데이터를 fetch하여 사용하는데, 한 화면에 여러 데이터가 필요한 경우가 있습니다. 원래 백엔드 api를 짤 때 resource를 기준으로 잡았었는데 이렇게 하다보면 재사용 측면에서는 좋으나 위에서 말한 경우와 같이 한 화면에 여러 resource에 대한 데이터마다의 api를 호출하기 때문에 한 화면에서 여러 api 통신이 이루어지게 되어 cost가 있지 않을까 생각이 들었습니다. 1. 그래서 아예 한 화면에 쓰이는 데이터를 전부 serving하는 api 라우트 하나를 두면 해당 api 하나만 호출했을 때 한 번의 통신만으로 데이터를 가져오기 때문에 이 방식이 괜찮다고 생각이 들었는데 실제로 어떤 것이 더 좋은지 궁금합니다. 뭔가 감으로는 리소스별로 독립된 api를 여러개 호출하는 방식이 장점이 많은 것 같은데(querykey로 캐싱을 따로 할 수 있는 등) api 갯수가 1개랑 3개라고 하면 사용자마다 3배 많은 통신이 이루어지게 되어 이 부분이 조금 걸립니다. 2. 그리고 유저에 대한 데이터를 응답한다고 했을 때 해당 테이블에 join으로 엮을 수 있는 다른 모든 테이블도 같이 포함시키는 것이 좋은지, 아님 분리시켜서 user 테이블의 속성만 제공하는 api(/users)와 다른 테이블의 정보도 같이 포함하는 api(/users/courses)를 따로 구분하는 것이 좋은지 그 범위를 아예 모든 정보를 다 가져오는 것과 딱 필요한 정보만 제공하는 것 중 어느 방식이 어떤 측면을 가지고 있는지 궁금합니다.

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

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

프론트엔드 테스트에서 단위,통합,E2E 중 하나만 해야한다면 무엇을 해야할까요

안녕하세요. Nextjs를 사용하는 프론트엔드 신입 개발자입니다. 새 플젝을 시작하면서 테스트를 도입하려고 하는데 단위->통합->E2E 전체를 다 하기엔 시간적, 인력적 여유가 없을거같아 셋 중 하나만 채택하기로 결정되었습니다. 이런 경우 어떤 테스트를 진행해야 할까요? 현재 동료와 의견이 갈리고 있습니다. (컴포넌트 UI 테스트는 스토리북을 도입할 예정입니다) 동료의견 : 테스트에 많은 시간 할애할 수 없으니까 통합테스트를 하자. 단위는 작성할 코드가 많아서 시간이 오래걸릴거같다. E2E는 단위,통합 이후 부가적으로 진행되어야 하는거지 'E2E만' 하는건 제대로된 테스트가 안될거같다. 이런측면을 고려했을 땐 '통합테스트'만 하는게 좋을거같다 제 의견 : E2E에 대한 의견은 공감한다. 그런데 테스트에 들어가는 노동력을 최소화 하려면 오히려 단위테스트를 진행해야 할거같다. 통합테스트는 여러 기능이 유기적으로 얽혀있는 테스트 코드를 작성해야하니 오히려 테스트코드 작성에 시간이 더 오래 걸릴수도 있을거같다. 그리고 테스트 과정에서 문제가 발생하더라도 어느 기능이 문제인건지 추적하려면 단위테스트보다 훨씬 시간이 걸릴거같다. 사실 회사마다, 개발자마다 의견이 다른건 알고 있습니다! 하지만 저희가 시니어나 중간급 개발자가 없는 입장이라 조언을 구할곳이 없어 여기에 질문해봅니다. 감사합니다.

NextJS 14에서 JWT를 쿠키를 통해 관리하려고 하는데 서버에서 set-cookie 해주는 방식말고 route 핸들러에서 주입할수는 없나요?

안녕하세요. 최근 NextJs를 공부하며 이전 리액트 기반의 사이드 프로젝트를 NextJs로 구현해보고 있습니다. 카카오 로그인만 지원을 하고 있고, 프론트 쪽에서 카카오 인가 코드를 백엔드로 넘기면 백에서 jwt를 발급해서 응답으로 access token과 refresh token을 프론트로 넘겨주고 있습니다. 이전 프로젝트에서는 두 토큰 모두 localStorage에 저장하는 방식으로 했었는데요, 이번에는 쿠키를 이용해보려고 하고 있습니다. 다만 백엔드에서 set-cookie를 해놓지 않아서 응답으로 받은 토큰을 따로 쿠키에 저장해야하는 상황입니다. 하지만 Server Component에서는 set cookie가 안되는 것으로 알고 있습니다. <목표 구현 방식> route handler를 통해서 백엔드 api를 호출하고 그 값을 쿠키에 저장하도록 코드를 짰습니다. (/app/api/token/route.ts) return 값은 확인을 위해서 임의로 넣었습니다. 그리고 쿠키에 저장된 토큰을 통해서 서버 컴포넌트에서 이를 이용해 백엔드 api 통신을 하고 싶습니다. 하지만 서버 컴포넌트에서 쿠키를 확인하니 비어있는 쿠키인 것을 알 수 있었습니다. 얕은 지식으로 생각을 했을때, (route handler - 브라우저 혹은 서버 컴포넌트)에서 생성한 쿠키는 (백엔드 도메인 - 브라우저 혹은 서버 컴포넌트) 통신에 사용되는 쿠키와 다르기 때문이라고 생각이 들었는데 해답을 찾지 못했습니다. <질문 사항> - 백엔드 서버에서 set-cookie를 하지 않고 직접 구현할 순 없을까요? 쿠키는 forwarding이 안되나요? - 제가 생각한 구조 말고 추천하시는 토큰 관리 방식에 대해서 알려주셔도 감사하겠습니다. 아직 초보 개발자에 글도 잘 쓰지 못해 이해하시기 힘들 것 같지만, 넓으신 아량으로 지식을 나눠주신다면 정말 큰 도움이 될 것 같습니다. 긴글 읽어주셔서 감사합니다 (_ _)

NextJS 14 project 시작 단계에서 에러가 발생했어요... 최대한 빠른 답변 부탁드립니다.

npx create-next-app 라는 명령어로 프로젝트를 시작했는데요. 아무것도 건들이지 않은 상태에서 app/layout.tsx 파일을 클릭했는데 맨 위에 에러가 발생해져 있더라구요.. 내용을 보니깐 Parsing error: __classPrivateFieldGet(...).at is not a function eslint 이런 에러가 있고 해당 에러가 tailwindcss.config.ts 파일 맨 윗줄에도 발생해져 있습니다. 어떻게 해야하는 건가요..?