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

좋은 팀이란 무엇일까? (feat. 무엇이 1등 팀을 만드는가? - 애디 오스마니)

"한빛미디어  활동을 위해서 책을 제공받아 작성된 서평입니다."올해 처음으로 팀 프로젝트를 경험하며, 단순히 코드를 작성하는 것을 넘어 팀워크의 중요성을 몸소 느꼈습니다. 특히 애자일(Agile) 프로세스를 경험하면서, 팀의 성공은 개인의 기술적 역량만으로 이뤄지지 않는다는 깨달음을 얻었습니다.팀의 화합과 조화를 통해 사용자에게 더 나은 서비스를 제공하기 위한 프로세스를 만들어내는 것, 그 기반에는 기민함(Agility)과 효율성, 효과성, 생산성의 균형이 있었습니다.이번 글에서는 제가 고민했던 "좋은 팀워크란 무엇인가?"라는 질문에 대한 답을 정리하고, 에디 오스마니의 책 [무엇이 1등 팀을 만드는가]를 통해 얻은 통찰을 공유하고자 합니다.기민함이란 무엇인가: 단순한 빠름이 아닌 유연한 적응력기민함은 ..

• format_list_bulleted 개발관련/기술 서적
• · 2024. 12. 30.
• 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 개발관련/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 개발관련/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 개발관련/React
• · 2024. 11. 26.
• textsms