Sign in

blog

it blog nextjs

Next.js app router에서 React Query 사용하면서 고민했던 것들

지난 글에서 react-query의 hydrate, dehydrate을 통해 서버에서 prefetching 한 데이터 사용하는 방법에 대해서 살펴보았습니다. 서버에서 prefetching 한 데이터 사용하기 오늘은 조금 실용적으로 Next.js 13, 14 버전의 app router에서 react-query를 어떻게 사용하고 세팅하면 좋을지 고민했던 내용에 대해서 이야기해보도록 하겠습니다. 해당 글은 23년 10월에 메이저 버전 업데이트된, Next.js 14와 React-Query 5 를 기준으로 작성된 글입니다. 예시로 보여주는 코드는 저의 next-14-react-query repo에서 확인 할 수 있습니다. 제가 크게 고민했던 문제는 아래 세 가지입니다. Hydrate vs ReactQueryStreamedHydration 두 가지 API 중에 어떤 것을 채택할까? Hydration API 사용 시에 RSC, RCC 모두에서 깔끔한 코드를 유지하려면 queryOption은 …
wono | discuss |
it blog nextjs react

next.js에서 react query가 필요할까?

😋왜 필요할까?react-query가 제공해주는 SSR 환경에서 사용법을 보면서 한가지 의문이 들었습니다. react query가 제공해주는 캐싱, 리페칭 등등의 기능들이 매력적이긴한데...사실 대부분의 기능은 캐싱 , revalidate 같은 부분은next.js가 제공해주는 확장된 fetch 함수로도 충분하지 않나?? 그렇다면 next.js에서 react-query를 꽤나 복잡한 설정을 꾸역꾸역 설정하며 굳이굳이 사용할 필요성이 있을까?라는 의문이 들었습니다. 물론 아직 제공되지 않는 부분도 많을 것 같습니다.하지만 꼭 필요할까?라고 묻는다면 좀 애매할 것 같았습니다.그러던 중 You Might Not Need React Query라는 글을 발견했어요https://tkdodo.eu/blog/you-m..
wono | discuss |
it blog arc api

REST란? REST API 디자인 가이드

REST란? REST API 디자인 가이드 시작하며 작년 저의 커리어의 첫 번째 회사인 스타트업 입사 첫날 사수님이 REST API를 구현해본적이 있냐고 물어보셨습니다. 그런 경험이 없다고 하니 REST API 디자인 가이드 글을 읽어보라고 주셨고 이렇게 REST API의 첫 만남을 시작하여 퇴사하기 전까지 주어진 중요한 일은 프론트와 API 스팩을 정하는 것이었습니다. 한번 스팩을 정하면 벡엔드 개발자인 저만 바꾸어야 하는 것이 아닌 프론트에도 영향이가니 신중함과 검토와 소통의 연속이었습니다. 당시 어떻게 개발해야할까 검색과 고민한 내용을 재구성하여 작성해봅니다. 참고 링크는 글의 후미에 작성하였습니다. REST란? REST는 웹의 창시자(HTTP) 중의 한 사람인 Roy Fielding(로이 필딩)이..
wono | discuss |
it blog basic

HTTP 기본 인증 ( Basic authentication )

기본 인증(Basic authentication)의 예 서버가 사용자에게 인증 요구를 원할 때, 서버는 401 Unauthorized 응답과 함께 WWW-Authenticate 헤더를 포함해서 클라이언트에게 전송한다. 이 정보에는 클라이언트가 어떻게 인증해야 할지 포함되어 있고, 위 예시에서는 Basic 인증을 요청 한다. 해당 메시지를 받은 클라이언트는 서버에게 인증 메시지를 보낼 수 있다. 위 그림에서는 서버가 Basic 인증을 요청 했기 때문에, 인토딩(BASE64)된 비밀번호와 그 외 인증 파라미터들을 Authorization 헤더에 담아서 메시지를 보낸다. 성공적으로 완료되면 서버는 정상적으로 200 OK 코드를 반환한다. 추가적인 인증 알고리즘에 대한 정보는 Authentication-Info..
wono | discuss |
it blog sse

웹소켓 과 SSE(Server-Sent-Event) 차이점 알아보고 사용해보기

최근에 어떤 이벤트가 생겼을 때 client side에 ui를 업데이트해야 되는 기능을 구현해야 됐었습니다. 처음에는 이런 경우에 사용할 수 있는 것이 socket 밖에 몰라서 socket.io를 사용해서 socket으로 만들다가 웹소켓을 공부하다가 보니 SSE(Server-Sent-Event)라는 것을 알게 되었습니다. 제가 평소에 공부를 해두었다면 웹소켓으로 안 만들고 SSE를 사용해서 만들었을 텐데 시간 낭비를 해버렸습니다. 이래서 평소에 공부를 해야 되는 것 같습니다. Socket과 SSE에 가장 큰 차이점을 하나 말해보라고 한다면 Socket은 양방향으로 데이터를 주고받을 수 있지만 SSE(Server-Sent-Event)를 사용하게 되면 클라이언트는 데이터를 받을 수만 있게 됩니다. 그러니까 ..
wono | discuss |
it arc blog msa

[MSA] 마이크로서비스 서비스간 통신

모놀리식 애플리케이션은 대부분의 모듈이 언어 수준의 메서드나 함수를 통해 서로 호출하기 때문에 REST API나 클라우드 서비스 연계 모듈을 작성하지 않는 이상 IPC는 크게 신경 쓸 필요가 없습니다. 이와 달리 MSA는 애플리케이션을 여러 개의 서비스로 구성하며 서비스는 대부분 요청을 처리하기 위해 서로 협동합니다. 서비스 인스턴스는 여러 머신에서 실행되는 프로세스 형태이므로 반드시 IPC(Inter-Process Communication)를 통해 상호 작용해야 합니다. 이번 글에서는 IPC의 종류와 가용성 측면을 따졌을때 MSA에서 어떤 IPC를 쓰는 것이 좋은지 알아보겠습니다. 동기 RPI 통신 💡 RPI는 클라이언트가 서비스에 요청을 보내면 서비스가 처리 후 응답을 회신하는 IPC입니다. 💡 메시..
wono | discuss |