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 개발관련/React
• · 2025. 1. 3.
• 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 개발관련/React
• · 2024. 11. 27.
• textsms

[React] useLayoutEffect와 useEffect

useLayoutEffect와 useEffect를 사용하면서 느꼈던 의문을 해결하기 위해서 파보기로 했습니다.우선 브라우저의 렌더링 과정에 대해서 간략하게 알아보겠습니다. 크게 4가지로 나눌 수 있습니다.파싱레이아웃페인트컴포지팅해당 과정에 대해서 자세히 알고 싶으시다면 제가 발표한 테코톡 참고해주세용~ 기본적으로 useLayoutEffect 와 useEffect 훅은 해당 렌더링 과정에 관여하는 훅입니다.useLayoutEffect는 Layout단계 직후 실행됩니다.useEffect는 Paint 단계 직후 실행됩니다.저는 여기서 해당 훅들이 어떻게 렌더링 타이밍을 정확하게 감지하는지에 대한 의문이 생겼습니다.1️⃣ useLayoutEffect가 Layout 직후 실행되는 방법React는 가상 DOM(Vi..

• format_list_bulleted 개발관련/React
• · 2024. 11. 22.
• textsms

React 서비스 SEO 성능 개선하기 (feat. SSR)

저희 서비스의 SEO를 개선시키기위해 논의를 하였는데요, 이와 더불어 React-Helmet이란 라이브러리를 인지하게 되었습니다.리액트 라이브러리인 React-Helmet을 이용하여 meta태그를 주입할 수 있다는 것을 알았는데요, 이를 이용하여 SEO를 개선할 수 있는 작업에 대해서 살펴보고, 우리 서비스는 어떤 선택을 할 것인지에 대해서 이야기 해보려 합니다.SPA 서비스의 경우 index.html파일이 하나이기 때문에, 라우트 별로 meta태그를 설정하는 것이 까다롭습니다.SPA의 경우 다음과 같은 특징을 가지는데요,SPA의 특성상 중요한 컨텐츠가 자바스크립트 로딩 후에 나타난다.SPA는 URL이 동적으로 변경되기 때문에 크롤러가 URL변화를 완벽히 감지하지 못한다.구글 크롤러의 경우, 자바스크립트..

• format_list_bulleted 개발관련/React
• · 2024. 9. 22.
• textsms

[React] Drag & Drop (DnD) 직접 구현하기 (2). Mouse Event와 상태관리를 사용하여 구현하기

기존에 Drag Event를 통해 드래그 앤 드롭 기능을 구현했지만, 페이지 레이아웃이 변경되거나 요소가 다시 렌더링되는 Reflow 상황에서 이벤트가 중단되었습니다. 이로 인해 드래그 중이던 요소가 예상치 못한 위치에 놓이거나, 드래그 자체가 취소되는 문제가 발생했습니다.이 문제를 해결하기 위해 Mouse Event를 사용하여 드래그 기능을 다시 구현하기로 결정했습니다. Mouse Event는 Reflow의 영향을 받지 않아 안정적인 이벤트 처리가 예상했으나, event.dataTransfer 객체를 사용할 수 없다는 점이 문제가 있었습니다.event.dataTransfer는 Drag & Drop 과정에서 데이터를 전달하는 데 사용됩니다. Mouse Event로 전환하면서 이 객체를 사용할 수 없게 되..

• format_list_bulleted 개발관련/React
• · 2024. 9. 17.
• textsms

React + Typescript + Webpack (esbuild-loader) 설정

1. React와 TypeScript 설치먼저, React와 TypeScript를 설치하겠습니다. TypeScript 의존성은 .ts 파일을 컴파일하는 데 사용됩니다.npm i react react-domnpm i -D typescript2. Webpack 설치다음으로, Webpack을 설치합니다. Webpack은 모듈 번들러로, 개발 중과 빌드 과정에서 유용하게 사용됩니다.npm install -D webpack webpack-cli webpack-dev-server3. 로더 설치CSS 스타일을 적용하기 위해 style-loader와 css-loader를 설치합니다. 또한, 빠른 번들링을 위해 esbuild-loader를 사용할 것입니다.npm i -D style-loader css-loader esb..

• format_list_bulleted 개발관련/우아한 테크코스 6기
• · 2024. 7. 15.
• textsms