#route

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

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

Next 14에서 새 탭을 링크로 열기 이후 뒤로가기 시 메인으로 이동하고 싶은데 방법을 모르겠어요.

Next 14에서 새 탭을 링크로 열기 이후 UI 헤더에 커스텀한 뒤로가기 버튼 클릭 시 history가 없어 router.back()이 작동하지 않네요. 새탭에서 url로 검색 시에도 뒤로가기 시 메인 페이지로 이동시키고 싶은데 방법을 모르겠어요. 예를 들면 카카오웹툰처럼 페이지 이동을 하고 싶습니다. 도와주세요 🙏

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

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

Router back 렌더링

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

개인 프로젝트 피드백 부탁드립니다!! (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와 rust 사이에서의 kafka 통신

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

백엔드 애플리케이션 프레임워크를 개발 중인 학생입니다. 조언을 구하고자 합니다.

[ 서론 ] Low-level 이해도 향상, 객체 지향적 사고 증진, 공부량 증가를 위해 Spring 느낌의 프레임워크를 개발하려 합니다. [ 본론 1 ] 프레임워크 사용자의 편의성 확대를 위해, MVC의 Controller에 해당하는 영역을 어떻게 설계해야할지 고민 중에 있습니다. 아래 코드 블럭에 나열한 코드 중 개발하며 재미를 느끼실 것 같은 항목을 투표 영역에서 투표해주시거나, 답변을 통해 더 나은 방안을 추천해주시면 감사하겠습니다. [ 본론 2 ] (개인적으로 느끼기에) 매우 거대한 프레임워크를 혼자 개발하고 있는 만큼, 많은 문제와 고민에 봉착하고 있습니다. 이와 관련해 현직자 분들의 소중한 조언을 구하고자 합니다. 부디 시간 들여주시어 답변해주시면 감사하겠습니다. [ 결론 ] 프레임워크 개발이라는 저에겐 다소 어려운 길에 있어 조언을 구하고자 합니다. 부디 소중한 시간내어 답변 남겨주시면 정말로 감사드리겠습니다. ... 현재 소프트웨어 계열 고등학교에 재학 중이며, 백엔드 개발자가 되기 위해 공부하고있는 2학년 학생입니다. 최근 들어, 면접을 경험하신 선배 분들과 조금 대화를 나누다보니 제 지식 수준이 매우 낮다는 것을 깨닫게되었습니다. HTTP, TCP 등 (TCP/IP 4계층 모델 기준) 3,4 계층 프로토콜의 통신 과정, 데이터베이스와 Java 애플리케이션의 Low-Level(JDBC, R2DBC 혹은 더 낮은 수준) 통신 과정, 프레임워크를 사용하는 이유, 그 외 기타 등등. 조금은 깊은 지식에서부터, 원초적인 것들까지, 백엔드 개발자로서 알아야할 것들에 대해 제 수준이 턱없이 부족함을 느끼고 있습니다. 그럼에도 불구, 슬럼프와 비슷한 상태에 빠져있어 작년보다 공부량도 적어졌고, 의지와 기운도 많이 상실한 상태입니다. 아마도 구체적인 목표가 없기에 그런 게 아닌가 하여 공부도 겸하고, 저 자신을 자극할만한 거대한 목표를 한 가지 잡았습니다. Java 백엔드 애플리케이션 프레임워크를 만든다는, 저에겐 어쩌면 지나칠 수도 있는 어려운 도전에 임해보려 합니다. 프레임워크 하나를 기획할 시간을 없기에 Spring의 추상적인 틀을 기반으로 개발-수정 프로세스로 진행하고자 합니다. 프레임워크 주도의 IoC 컨테이너, 어노테이션 기반의 모듈(Spring과 Java에서의 Bean 개념) 관리, 클래스 단위의 설정 정보 관리가 프레임워크의 주요 포인트입니다. Spring의 Core 모듈에 해당하는 기반 프레임워크가 IoC 컨테이너를 포함해 부분적으로 구현되어있습니다. 그리고 현재 Spring Web, Spring MVC 등에 해당하는 WAS 프레임워크 구현을 시작한 상태입니다. MVC에서 Controller에 해당하는 부분을 디자인하는 과정에 있는데, 현직자분들의 생각하시는 최선의 Controller 디자인에 대해 의견을 수집하고자 합니다. 포함된 코드 블럭은 대중적인 프레임워크의 Controller/Router 디자인들입니다. 각 디자인별로 선호하시는 항목에 대해 부여된 번호를 투표를 통해 선택해주시면 감사하겠습니다. 또한 이 프로젝트에 대해 조언 혹은 비판, 의견을 답변 혹은 메일, 링크드인 통해 남겨주시면 대단히 감사드리겠습니다. 그 외 개인적인 문의 사항과 제안 또한 환영합니다. leetyxodud312@gmail.com 아래는 프레임워크 깃허브 주소입니다. 문서화 작업은 진행 중에 있어 다소 부끄러운 수준입니다. 양해 부탁드립니다. https://github.com/Project-Smoodi 끝까지 읽어주심에 다시 한 번 감사의 말씀 드립니다.

NavigationContainer 중첩 오류

안녕하세요, RN(Expo)로 React Navigation을 적용하다 오류가 해결되지 않아서 질문드립니다. expo를 통해 다음과 같이 index.js에 React Navigation을 적용했습니다. import { store } from "@/redux/store"; import MainScreen from "./screens/MainScreen"; import { Provider } from "react-redux"; import { NavigationContainer } from "@react-navigation/native"; import { createNativeStackNavigator } from "@react-navigation/native-stack"; import LoginScreen from "./screens/LoginScreen"; export default function HomeScreen() { const Stack = createNativeStackNavigator(); return ( <Provider store={store}> <NavigationContainer> <Stack.Navigator> <Stack.Screen name="Main" component={MainScreen} /> <Stack.Screen name="Login" component={LoginScreen} />{" "} </Stack.Navigator> </NavigationContainer> </Provider> ); } 그러나 다음과 같은 오류가 뜨며 빈화면만 보이더라구요ㅠ Error: Looks like you have nested a 'NavigationContainer' inside another. Normally you need only one container at the root of the app, so this was probably an error. If this was intentional, pass 'independent={true}' explicitly. Note that this will make the child navigators disconnected from the parent and you won't be able to navigate between them. 찾아보니 NavigationContainer가 중첩되었다는 것 같은데, 저는 계속해서 그대로 강의를 따라가고 있었고, 따로 NavigationContainer를 적용한 파일이 존재하지 않습니다 ㅠ 다음 속성을 추가해도 오류가 해결되지 않습니다 ㅠ 아마 어디선가 부모에서 NavigationContainer가 적용된 것 같은데 찾을 수가 없네요 ㅠㅠ independent={true} 조금 더 찾아보니 expo-router랑 충돌이 난 거일 수도 있다는데 정확하게 모르겠네요 ㅠ

Aws 로드밸런스를 통해 https로 변환시 오류가 발생합니다.

정말 몇일째 잡고있는데 도저히 실행이 되지 않아, 질문글을 올립니다. 도와주시면 정말 감사드리겠습니다 ㅠㅠ... 현재 상태에 대해서 말씀드리겠습니다. 1. AWS Route 53을 통해서 도메인 구매 2. 도메인과 ec2에서 인스턴스를 생성한 ipv4와 연결 레코드 생성해서 ip주소 3.39.xxx.xx와 도메인 do-prove.com을 연결하는것까지는 확인 3. Aws Certification Manager를 통해서 인증서 발급 완료 4. 대상그룹 생성과 로드밸런스설정 완료 여기까지 한 상태입니다. 스프링을 그대로 사용하여서 8080포트를 사용하였습니다. 대상그룹에서 상태가 정상으로 뜨고, 상태확인이 healthy로 뜹니다. 인스턴스가 정상적으로 실행으로 뜨고, 3.39.xxx.xx:8080으로 접속시 제대로 접속됩니다. 또한 8080포트를 열어두었습니다. 로드밸런서 상태는 정상이고, 리스너는 해당 사진처럼 설정하였습니다. route53 호스팅영역의 아래 레코드 사진을 첨부하였습니다. https://do-prove.com:8080/으로 접속을 하려면 접속이 안됩니다. http://3.39.226.33:8080/으로 인스턴스로 접속하면 이건 또 됩니다. route53호스팅 레코드에서 A dual-stack지우고 do-prove.com으로 하고 3.39.226.33으로 설정해서 http://do-prove.com:8080/으로 접속하는것이 되는건 확인했습니다. 도대체 어디서 잘못되서 연결이 안될까요.. 부탁드립니다 사람하나 살려주세요 ㅠㅠㅠ

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 Dynamic Routing 관련 질문

현재 ./pages 폴더에서 page router로 라우팅 관리 중에 있습니다! id별 post 상세창 조회를 위해 ./pages/post-detail/[id].tsx 와 같이 작성했으나 Whitelabel Error Page This application has no configured error view, so you are seeing this as a fallback. Fri Aug 30 21:08:21 KST 2024 [67199a4f-4509] There was an unexpected error (type=Not Found, status=404) 만 발생합니다 참고로 ./pages/post-write.tsx 와 같은 파일은 정상 작동합니다 혹시 무엇이 문제일까요? 추가+) 혹시 Next.js 14에서 page router 방식을 사용하는것이 문제일지 궁금합니다

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

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

next14의 next/headers의 cookies를 이용한 쿠키설정

안녕하세요 현재 데이터시각화 사이트 프로젝트를 진행중입니다. next14와 spring boot(리소스와 인증.인가)를 사용하고 있고, 카카오 소셜로그인을 하면 스프링서버에서 jwt(access 토큰)를 발급해주고 refresh 토큰은 redis를 통해 관리되고 있습니다. 받아온 토큰은 cookie를 통해 관리하고 있습니다. seo를 위해 ssr을 사용하고 있는데, ssr과정에서 데이터를 fetch를 할 때 토큰을 같이 보내고, 만약 액세스 토큰이 만료되고 리프레시 토큰이 살아있다면 응답 헤더에 새로운 액세스토큰을 보내주고 있습니다. 그런데 이때 next/headers의 cookies를 사용하여 쿠키를 세팅하는것이 안됩니다. 데이터 페치중, 혹은 ssr과정중에는 Cookies can only be modified in a Server Action or Route Handler. 라는 오류가 뜨며 cookie를 set 하거나 delete하는게 안됩니다. 이럴 경우는 어떻게 해야할까요?

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 확장 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. 더 좋은 방법이 있는 건가요?

data fetching은 어디서 하는 게 좋은 것일까요?

안녕하세요. 저는 프론트엔드 개발자가 되기 위해 공부중인 취준생입니다. 피드백을 적극 환영하기에 많은 피드백 혹은 의견을 많이 남겨주시면 감사하겠습니다. 저는 데이터 페칭을 어디서 하는 게 좋을지 고민 중이라 글을 남깁니다. 아래와 같이 3개로 글을 구성해봤습니다. 1. 현재 개발상황 2. 현재 저의 데이터 페칭 위치 3. 궁금한 점 1. 현재 개발상황 저는 개인 프로젝트로 Next.js와 React Query를 사용하여 개발하고 있습니다. 현재 Next.js의 App Router를 사용 중이며, 프로젝트 구조는 아래와 같습니다. app: page.tsx, layout.tsx components: 최소 2번 반복 사용되는 재사용 가능한 컴포넌트 container: 일반적인 컴포넌트 (조합 등) hook, service 등 2. 현재 저의 데이터 페칭 위치 현재 데이터 페칭은 최상단의 app -> page.tsx에서 수행하고 있으며, 자식 컴포넌트에는 데이터를 props로 전달하고 있습니다. 이러한 이유는 prop drilling이 발생하더라도 데이터 페칭을 한 곳에서 처리하면 코드 이해가 쉬울 것 같아서입니다. 현재로서는 전역 상태 라이브러리를 사용하지 않아 최대 4단계까지 prop drilling이 발생하고 있지만, 전역 상태 라이브러리를 도입하면 prop drilling 문제는 해결될 것으로 생각하고 있습니다. 추가적으로 현재 이렇게 구현하면서 data fetch할때 필요한 query값들도 최상단에서 관리해야하는 불편함이 있었습니다. -> 최상단에서 관리해야 하는 상태값이 늘어남 3. 궁금한 점 3-1. 아래의 2가지 data fetching 방법 중 어느것이 적절한지? 합리적인지 의견이 궁금합니다. - 최상단에서 Fetching - 장점 : 한 곳에서 Fetching하기에 코드 일관성, 가독성, 코드를 이해하는데 좋다고 생각 - 단점 : prop drilling, 추가적인 전역 상태 관리 해야한다고 생각 - 필요한 컴포넌트에서 Fetching - 장점 : 필요한 컴포넌트에서 fetching 하기에 prop driling과 같은 불필요한 코드 작성 할 필요 x - 단점 : 어떤 컴포넌트에서 fetching 했는지 파악하기 힘들어짐 3-2. 현재 최상단에서 모든 데이터 페칭을 하고 props로 전달하는 방식 vs 필요한 컴포넌트에서 데이터 페칭을 하는 두 가지 방식 중 어느 것이 더 많이 사용되는 패턴인지 궁금합니다. 3-3. React Query는 서버 상태 관리, 캐싱, Optimistic Update와 같은 기능을 위해 도입했습니다. 그러나 prop drilling을 해결하기 위해 React Query에서 가져온 서버 데이터를 전역 상태 라이브러리에 담게 되면 서버와 클라이언트 상태를 구분하는 의미가 없어지는 것 같다는 생각이 듭니다. 제가 잘못 사용하고 있는것인지 궁금합니다.

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

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

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

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

S3와 Cloudfront로 웹사이트 배포 후 ACM으로 커스텀 도메인 설정 과정에서 레코드 생성이 안되는 문제가 발생했습니다.

Gatsby로 만든 개인 블로그를 CloundFront 로 배포했습니다. 아시겠지만 CloundFront 로 배포하면 도메인주소가 지저분하잖아요? 못생기고... 그래서 AWS Certificate manager를 이용해 커스텀 도메인과 https를 적용하려는데 문제가 생겼습니다. us-east-1 리전(버지니아 북부)로 설정하고 인증서 요청을 진행했습니다. 근데 인증서 요청해서 만든 CNAME이 계속 검증 대기중으로 뜹니다... 세부정도 갱신자격도 부적격으로 뜨구요ㅠㅠ Route 53 레코드 생성 버튼을 눌러봐도 레코드생성 버튼이 비활성화 되어있구요... 원인이 뭔지 도무지 모르겠네요ㅠㅠ 도와주시면 정말 감사하겠습니다!

Next.js에서 모든 컴포넌트를 dynamic import하는건 별로인가요?

안녕하세요. Next.js page router 방식으로 프로젝트 진행 중 질문이 있어 글 남깁니다. 현재 프로젝트의 크기가 커져서 최적화 작업을 진행중에 컴포넌트의 import 방식을 정적에서 동적으로 바꾸어 주려고 합니다. 그런데 만약 A 컴포넌트를 X컴포넌트에서 dynamic으로 import하고, Y컴포넌트에서는 정적으로 import하면 그만큼 중복된 코드를 불러온다고 이해하고 있는데, 그럼 프로젝트에서 사용되는 컴포넌트 중 2개 이상의 컴포넌트에서 사용되는 것들은 모두 dynamic import로 선언 해주어야 하나요? 만약 그렇다면 모든 파일에 import문을 dynamic으로 바꾸어 주어야 하나요 아니면 next.config.js에서 일괄적으로 설정하는 방법이 존재하나요?

next.js에서 히스토리 탭 기능 구현

next.js를 사용해서 브라우저에 탭 기능을 사이트 내에서 구현해야 하는 상황입니다. 탭 기능에 추가로 페이지 내부에서 다른 페이지로 가는 링크를 클릭하면 탭 목록에 추가되어야 하고 기존에 있던 탭에 보이던 페이지는 상태가 유지되어야 합니다. 지금 구현한 방법은 미리 모든 페이지의 페이지 컴포넌트를 하나의 파일에 넣어두고 링크를 클릭하면 store에 해당 페이지의 데이터를 넣어주고 Layout 컴포넌트에서 router.path를 비교해서 show/hide을 결정해주고 있는데 뭔가 다른 방식이 없을까요?

RCE 보안공격 질문입니다!

안녕하세요 백엔드 취업 준비생입니다 최근 프로젝트를 진행중에 배포서버를 구성해봤습니다 aws ec2에 docker compose로 nginx, WAS, redis를 컨테이너화해 동작시키고, nginx에 의해 3개의 WAS가 로드밸런싱 된 상태입니다(WAS 는 sping boot+spring security+JPA를 사용중입니다) route 53으로 Gabia에서 구매한 도메인을 연결해둬 도메인 접근을 허용해둔 상태입니다 배포 서버가 정상적으로 동작하는지 확인하기 위해 log를 보고 있었는데 이상한 요청이 보였습니다 요청 url에 `chmod 777`이라던지 `rm -rf`가 보여서 식겁해서 일단 서버는 내려뒀습니다 알아보니 RCE라는 공격 방식 같더라고요 그래서 RCE를 막는 최선의 방법이 무엇인지 궁금합니다 또 통상적으로 알고있으면 좋은 보안 방어 기법에는 어떤것들이 있을지 궁금합니다! (가능하면 AWS 과금이 없는방법이면 더 좋을거같아요 😊 😊)

리액트 쿼리 에러 핸들링 이슈

react query를 활용한 에러 핸들링이 안돼서 질문 올립니다... //mainpage.tsx const { data, refetch, isFetching } = FetchData(url); const handleSearch = () => { refetch(); } <QueryErrorResetBoundary> {({ reset }) => ( <ErrorBoundary onReset={reset} FallbackComponent={FallbackUI}> {resultVisible ? ( <Result searchData={searchData} isFetching={isFetching} /> ) : ( <EmptyResult /> )} </ErrorBoundary> )} </QueryErrorResetBoundary> react-error-boundary 라이브러리를 이용해 ErrorBoundary 컴포넌트를 가져왔습니다. ErrorBoundary 하위 컴포넌트 내에서 에러가 발생하면 FallbackComponent의 FallbackUI 컴포넌트가 렌더링 되도록 했습니다. //FallbackUI 컴포넌트 //에러가 발생히면 이 컴포넌트가 렌더링되어야합니다. const FallbackUI = ({ error, resetErrorBoundary }) => { return ( <div> <span>{error.message}...</span> <button onclick={resetErrorBoundary} /> 돌아가기 버튼 </div> ); }; export default FallbackUI; FallbackUI 에서 QueryErrorResetBoundary 에서 제공하는 resetErrorBoundary를 받아와 에러 발생 후 '돌아가기 버튼'을 클릭하면 쿼리오류를 처리하고 리셋해주도록 구현했습니다. //url을 파라미터값으로 받아와 api호출하는 함수 //위에 있는 mainpage.tsx 에서 사용하는 함수입니다. const FetchData = (url: string) => { const { error, data, refetch, isFetching } = useQuery({ queryKey: ["repoData"], queryFn: async () => { const res = await axios.get(url); console.log(res.data); return res.data; }, refetchOnWindowFocus: false, enabled: false, }); return { error, data, refetch, isFetching }; }; 리액트 쿼리를 이용해 api를 호출하는 함수입니다. //main.tsx const queryClient = new QueryClient({ defaultOptions: { queries: { retry: 0, throwOnError: true, }, }, }); ReactDOM.createRoot(document.getElementById("root")!).render( <React.StrictMode> <QueryClientProvider client={queryClient}> <BrowserRouter> <GlobalStyles /> <Provider store={store}> <App /> </Provider> </BrowserRouter> </QueryClientProvider> </React.StrictMode> ); 마지막으로 전역으로 에러 관리를 하도록 세팅해놨습니다. 그리고 QueryClient에 throwOnError 속성이 있어야 에러를 ErrorBoundary로 전달할 수 있다해서 추가해줬습니다. 이렇게 세팅해놨는데 에러발생하면 그냥 하얀색 화면만 나오고 fallbackUI가 나오지 않습니다... 원인이 뭘까요...ㅠㅠㅠ 혹시 몰라서 콘솔 에러코드도 올립니다.. 추가로 궁금한 점 1. useQuery 에서 반환하는 객체중 error 객체는 어떤 존재인지 궁금합니다. 2. useQuery 속성과 QueryClient 속성 모두 throwOnError : true 를 가지고 있던데 어떤 차이점인지 궁금합니다. 답변주시면 정말 감사하겠습니다!!!

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이 안되나요? - 제가 생각한 구조 말고 추천하시는 토큰 관리 방식에 대해서 알려주셔도 감사하겠습니다. 아직 초보 개발자에 글도 잘 쓰지 못해 이해하시기 힘들 것 같지만, 넓으신 아량으로 지식을 나눠주신다면 정말 큰 도움이 될 것 같습니다. 긴글 읽어주셔서 감사합니다 (_ _)

useSuspenseQuery의 SSR 요청

안녕하세요, Next.js (v13-14), react-query (v5), page router 환경일 때, useSuspenseQuery와 Suspense를 사용했는데 찾아보니 useSuspenseQuery는 컴포넌트 렌더링 시점에 데이터를 로딩하도록 설계가 되어 있어서 Next.js에서 getStaticProps or getServerSideProps 함수를 사용하지 않아도 서버에서 api 요청이 보내지는게 맞을까요? 제가 테스트해보니 위의 가정 했던 것 처럼 동작하는것을 확인을 했지만 문서에서는 그런 내용을 찾을 수가 없어서 질문을 올려봅니다. 감사합니다!

Nodejs 백엔드 구조짜는법

안녕하세요 취직은 못했구 풀스택으로 Reactjs Nodejs사용해서사이드 프로젝트를 하고있는 뉴비개발자입니당 Nodejs를 백엔드로 사용하고 있는데 폴더구조를 어떻게 잡아야할지 항상 고민이 해결되지 않아 개발자분들의 의견을 구합니다 ㅠㅠ 제 나름대로 Web.js를 루트로 두고 Routes폴더에 api 경로에 따라 나뉠수 있게 폴더를 두고 Db를 사용하거나 함수들은 각각 Service라는 폴더를, 자주사용되는 데이터는 model이라는 폴더에 dto를 사용해서 두고있는뎅 이 구조가 좋은 방식일지 항상 생각하는데 조언을 구할 수가 없어서 어떤 방식으로 구조를 잡으면 좋을지 개발자님들의 조언을 부탁합니다...

next.js에서 interceptor 어떻게 사용하고 계신가요?

안녕하세요 page router 형식으로 프로젝트 진행 중 궁금한게 있어 게시글 남깁니다. 현재 프로젝트에서는 두가지 AJAX 요청이 존재하는데요. 한가지는 클라이언트 사이드에서의 요청(좋아요 누르기 기능 등)과 서버 사이드 렌더링을 위한 getserversideprops에서의 요청입니다. 문제는 인증 방식으로 엑세스토큰을 사용중인데 axios interceptor을 사용하려고 보니 하나의 interceptor로 두가지 요청을 커버하기가 어렵겠더라구요. 혹시 비슷한 경험이 있으신분들 어떻게 사용하셨는지 공유해주시면 감사하겠습니다.

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

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

Next JS 14 쿠키 관련 질문입니다.

현재 NextJS 14 버전을 사용 중에 있으며 App Router로 폴더 구성을 하고 로그인 작업을 진행 중에 있으며, 로그인 프로세스는 다음과 같습니다. 1. 프론트엔드 : 사용자가 로그인 버튼 클릭 2. 디스코드 서비스에서 인증 (디스코드 페이지로 이동) 3. 백엔드 서버로 인증코드 전송 4. 백엔드 서버에서 프론트엔드로 리다이렉트 (이 때 쿠키로 엑세스 토큰과 같은 정보를 보내줌) 쿠키 설정도 https에 백엔드랑 같은 도메인으로 맞춰 줬습니다. 여기서 1~4번까지 에러 없이 잘 동작하고, 쿠키도 브라우저에 잘 저장되고 있습니다. 근데 여기서 한 가지 문제가 발생했는데, Nexjs가 서버 사이드 컴포넌트(layout) 에서는 쿠키를 잘 불러오고 있지만 클라이언트 사이드 컴포넌트(page) 에서는 쿠키를 불러올 수 없었습니다. (undefined) 현재 클라이언트 사이드 컴포넌트에는 최 상위에 'use client' 를 붙혀 잘 사용하고 있고, cookies-next 라는 라이브러리로 불러오고 있습니다. 어떤 것이 문제일까요? 문제의 원인과 해결 방법을 알고 싶습니다.

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

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