Next.js Server Action와 React useActionState 알아보기

🚀 Next.js 15v의 Server Action1. Server Action이란?Next.js 15버전에 새롭게 도입된 Server Action은 서버에서 직접 실행되는 함수로, 클라이언트와 서버 간의 복잡한 데이터 요청 흐름을 단순화하는 기능을 제공합니다. 이를 통해 서버에서 처리해야 할 작업들을 클라이언트 코드에서 분리하고, 클라이언트에서 서버 함수 호출을 간편하게 할 수 있습니다.2. Server Action이 해결하는 문제들복잡한 데이터 요청 로직: 기존에는 클라이언트에서 데이터를 fetch하거나 서버와 통신하기 위해 여러 API 호출 코드를 작성해야 했습니다.클라이언트-서버 분리: 클라이언트 코드에서 서버 로직을 분리함으로써 코드의 유지보수성과 가독성을 향상시킵니다.직접적인 서버 실행: S..

• format_list_bulleted Front End/React
• · 2025. 1. 3.
• textsms

SSR로 사용자 경험 향상시키기

❓SSR은 무엇일까요?SSR(Server-Side Rendering)은 서버에서 HTML을 생성하여 클라이언트에 전달하는 렌더링 방식입니다. 이는 브라우저가 자바스크립트를 실행하기 전에 사용자가 완전한 HTML 문서를 받을 수 있도록 도와줍니다.기존 CSR의 문제점CSR(Client-Side Rendering)은 자바스크립트가 클라이언트에서 실행되기 전까지 빈 HTML 파일이 로드되는 방식입니다. 이로 인해 발생하는 주요 문제는 다음과 같습니다:SEO 문제검색 엔진 크롤러는 자바스크립트를 실행하지 못하는 경우가 많아, CSR에서는 빈 페이지를 읽게 됩니다.이로 인해 SEO 최적화가 어려워질 수 있습니다.느린 초기 로드(FCP)클라이언트가 화면에 콘텐츠를 표시하기 전에 자바스크립트 번들을 다운로드하고 실행..

• format_list_bulleted Front End
• · 2024. 12. 28.
• textsms

Paint 이전 Macro Task가 실행될 가능성과 React의 useEffect

이전 아티클에서 useEffect는 macro Task를 통해 Paint 직후 실행됨을 시사하는 아티클을 작성하였습니다. [React] useLayoutEffect와 useEffectuseLayoutEffect와 useEffect를 사용하면서 느꼈던 의문을 해결하기 위해서 파보기로 했습니다.우선 브라우저의 렌더링 과정에 대해서 간략하게 알아보겠습니다. 크게 4가지로 나눌 수 있습니다.파싱lurgi.tistory.com 추가적으로 부족한 부분을 공부해보면서 Paint 이전 useEffect의 콜백이 실행될 가능성에 대해서 공부해보려 합니다!!! useEffect sometimes fires before paintuseEffect should run after paint to prevent blocking ..

• format_list_bulleted Front End/React
• · 2024. 11. 28.
• textsms

[Apollo Basic] Apollo Client를 이용하여 Supabase GraphQL 요청 보내기

이전 아티클에서는 Supabase와 Apollo Client의 기본적인 Setting에 대한 글을 작성하였습니다.이번 아티클과 내용이 이어집니다!! 참고하실 분들은 아래 링크를! ⤵️ [Settings] GraphQL과 Supabase, Apollo Client 설정1️⃣ GraphQL이란? GraphQL | A query language for your APIEvolve your API without versions Add new fields and types to your GraphQL API without impacting existing queries. Aging fields can be deprecated and hidden from tools. By using a single evolvilur..

• format_list_bulleted Front End/React
• · 2024. 11. 27.
• textsms

[Settings] GraphQL과 Supabase, Apollo Client 설정

1️⃣ GraphQL이란? GraphQL | A query language for your APIEvolve your API without versions Add new fields and types to your GraphQL API without impacting existing queries. Aging fields can be deprecated and hidden from tools. By using a single evolving version, GraphQL APIs give apps continuous access to new featgraphql.orgGraphQL은 Facebook이 개발한 데이터 쿼리 언어이자 API를 설계하는 방식입니다. 클라이언트가 필요한 데이터만 요청하고 받을 수..

• format_list_bulleted Front End/React
• · 2024. 11. 26.
• textsms

크루루 서비스의 PopOverMenu 컴포넌트 개선기(1), createPortal과 합성 이벤트 문제 해결

React에서 createPortal을 활용해 팝오버 메뉴(Popover Menu)를 구현할 때는, 스타일과 이벤트 처리에 대한 고려가 필요합니다. 이번 포스트에서는 기존 CSS hover를 사용하는 코드에서, React 상태(useState)로 이벤트를 관리하는 코드로의 전환 과정을 소개하고, createPortal 사용 시 발생하는 이벤트 버블링 문제 해결 방법을 다룹니다.기존 서비스에서 Popover Menu는 특정 요소에 종속되지 않고 자유롭게 위치하도록, createPortal을 활용해 body에 렌더링했습니다. createPortal을 사용하면 overflow: hidden과 같은 부모 요소의 스타일 영향을 받지 않아, Popover Menu가 자유롭게 표시될 수 있습니다.import { Pr..

• format_list_bulleted Front End/React
• · 2024. 11. 23.
• textsms