기술 스택 5-JS 튜토리얼-php.cn

React 생태계는 끊임없이 진화하는 기술의 역동적인 환경입니다. 이 기사에서는 2025년에 전체 스택 애플리케이션을 구축하여 자체 제품(예: SaaS) 또는 최소 실행 가능 제품(MVP)을 실현할 수 있는 강력한 기술 스택에 대해 설명합니다.

저는 숙련된 풀스택 웹 개발자로서 접근 방식을 완성하는 데 수년을 보냈습니다. 기술 스택에 대한 연간 재평가는 최첨단 추세와 장기적인 프로젝트 안정성 및 유지 관리 가능성의 균형을 맞추는 데 매우 중요합니다.

2024년 11월에 종료된 나의 마지막 업무 경험은 나에게 귀중한 피드백을 제공했습니다. 초기 기술 스택에는 만족하지만 회고전은 향후 프로젝트에 귀중한 교훈을 제공합니다.

이 발견의 여정을 시작하고 이 간결하면서도 강력한 선택에서 기다리고 있는 흥미진진한 가능성을 탐구해 보세요.

풀스택 프레임워크로 반응

리믹스.js

Remix.js는 개발자 경험을 우선시하고 웹 기본 사항을 활용하여 빠르고 탄력적이며 사용자 친화적인 웹 애플리케이션을 만드는 풀 스택 웹 프레임워크입니다.

주요 특징:

데이터 로드 및 가져오기: Remix는 내장된 로더와 액션을 사용하여 데이터 가져오기를 단순화합니다. 로더는 경로를 렌더링하기 전에 데이터를 가져오는 반면 작업은 양식 제출 및 기타 부작용을 처리합니다.
파일 시스템 기반 라우팅: 경로는 프로젝트의 파일 시스템 내의 파일로 정의되어 라우팅 구조를 직관적이고 이해하기 쉽게 만듭니다.
서버 측 렌더링(SSR): Remix는 SSR에 탁월하여 우수한 SEO와 더 빠른 초기 로드 시간을 제공합니다.
데이터 전송: Remix는 클라이언트에 데이터를 전송하여 인지 성능과 사용자 경험을 향상시킬 수 있습니다.
양식 처리: 통합된 양식 처리는 유효성 검사, 제출, 오류 처리 등의 일반적인 작업을 단순화합니다.
테스팅: Remix는 단위, 통합, 엔드 투 엔드 테스트를 포함한 다양한 수준에서의 테스트를 권장합니다.
유연성: Remix는 Node.js 서버 및 Cloudflare Workers와 같은 엣지 컴퓨팅 플랫폼을 포함한 다양한 환경에 배포할 수 있습니다.

리믹스 사용의 이점:

더 나은 성능: SSR 및 데이터 스트리밍은 더 빠른 로딩 시간과 더 원활한 사용자 경험에 기여합니다.
더 나은 개발자 환경: 개발자 환경에 중점을 둔 Remix는 직관적인 라우팅, 데이터 가져오기 메커니즘 및 내장 기능 덕분에 사용이 즐겁습니다.
유연성 및 확장성: Remix는 다양한 환경에 배포할 수 있으므로 다양한 프로젝트 요구 사항에 맞게 조정할 수 있습니다.
강력한 커뮤니티 및 생태계: Remix는 다양한 리소스와 도구를 사용할 수 있는 성장하는 커뮤니티와 지원 생태계를 보유하고 있습니다.

Remix.js는 기본적으로 웹 개발에 대한 현대적이고 효율적인 접근 방식을 제공하여 개발자가 고품질, 고성능, 사용자 중심 애플리케이션을 구축할 수 있도록 지원합니다.

별

전용 랜딩 페이지를 고려 중이신가요? 이 일에 아스트로가 빛납니다!

Remix.js는 정적 콘텐츠와 동적 콘텐츠를 모두 제공하는 모놀리식 애플리케이션에 탁월하지만 Astro는 특히 뛰어난 랜딩 페이지를 만들기 위한 강력한 대안을 제공합니다. Astro가 완벽한 선택이 될 수 있는 이유는 다음과 같습니다.

주요 특징:

초고속 성능: Astro는 속도를 최우선으로 생각하여 방문자의 참여를 유지하는 매우 빠른 랜딩 페이지를 제공합니다.
직관적인 파일 기반 라우팅: Remix와 유사하게 Astro는 파일 기반 라우팅 시스템을 활용하여 랜딩 페이지의 콘텐츠를 쉽게 구성하고 관리할 수 있습니다.
구성 요소 기반 개발: 전체 랜딩 페이지에서 최적화된 개발 프로세스와 일관된 디자인을 위해 재사용 가능한 구성 요소를 구축하세요.
여러 프레임워크와의 통합: Astro는 React, Vue 및 Svelte와 같은 널리 사용되는 프레임워크와 원활하게 통합되므로 기존 기술과 선호도를 활용할 수 있습니다.
헤드리스 콘텐츠 관리 시스템(CMS) 지원: Astro는 여러 헤드리스 CMS 솔루션과 잘 작동하여 랜딩 페이지 콘텐츠를 유연하게 관리할 수 있습니다.

랜딩 페이지에 Astro를 사용하면 얻을 수 있는 이점

개발자 경험에 집중: Astro의 깔끔한 구문과 파일 기반 구조는 개발을 단순화하므로 영향력 있는 랜딩 페이지를 만드는 데 집중할 수 있습니다.
신속한 프로토타이핑: Astro의 속도는 랜딩 페이지 디자인의 신속한 프로토타이핑과 반복에 이상적입니다.
SEO 최적화: Astro는 깔끔하고 잘 구조화된 HTML을 생성하여 랜딩 페이지의 강력한 검색 엔진 최적화(SEO)에 기여합니다.
빌드 시간 단축: Astro의 증분 빌드는 빌드 시간을 최소화하여 개발 주기를 단축합니다.

Astro의 강점을 활용하면 리드를 확보하고 SaaS의 성장을 촉진하는 고성능의 개발자 친화적인 랜딩 페이지를 만드는 동시에 Remix/Next 앱 내에서 핵심 제품 개발에 집중할 수 있는 소중한 시간을 절약할 수 있습니다.

서버 구성 요소

집을 짓고 있다고 상상해 보세요. 서버 구성 요소는 무겁고 전문적인 작업을 처리하는 건설 노동자와 같습니다. 내부(브라우저)에서 모든 작업을 수행하는 대신 이러한 구성 요소는 서버 외부에서 작동합니다.

그들은 무엇을 합니까?

재료 가져오기: 벽을 만들기 위해 벽돌을 가져오는 것과 같이 데이터베이스나 API에서 데이터를 검색합니다.
복잡한 계산 수행: 방의 면적 계산과 같은 복잡한 수학적 또는 논리적 연산을 수행합니다.
집 보호: 누군가 출입 권한이 있는지 확인하는 등의 보안 작업을 처리합니다.

왜 유용합니까?

집이 더 빨리 지어집니다. 서버에서 일부 작업을 수행하면 방문자가 웹사이트를 더 빠르게 로드할 수 있습니다.
T*집이 더 안전해졌습니다.* 중요한 데이터는 침입자의 손이 닿지 않는 안전한 장소에서 처리됩니다.
장식에 집중할 수 있습니다. 서버 구성 요소가 무거운 작업을 처리하므로 웹 사이트를 보기 좋게 만들고 성능을 좋게 만드는 데 집중할 수 있습니다.

서버 기능

집에 인터콤 시스템이 있다고 생각해 보세요. 서버 기능은 마치 집 밖에 있는 직원에게 인터콤을 이용해 뭔가를 해달라고 요청하는 것과 같습니다.

어떻게 작동하나요?

당신(당신의 React 컴포넌트)은 작업자(서버 기능)에게 "브릭을 더 가져와 주세요"와 같이 무엇을 해야 할지 알려줍니다.
직원이 작업을 수행하고 결과를 제공합니다.

왜 유용합니까?

소통이 매우 쉽습니다. 메시지 주고받기에 대한 기술적인 세부 사항에 대해 걱정할 필요가 없습니다.
다양한 작업을 수행할 수 있습니다. 서버 구성 요소가 수행할 수 있는 거의 모든 작업을 수행하도록 서버 기능에 요청할 수 있습니다.

서버 작업

인터콤에 대해 사전 정의된 명령 목록이 있다고 상상해 보세요. 서버 작업은 이러한 명령과 같습니다.

그것들은 무엇입니까?

양식 제출, 데이터베이스 업데이트 등 특정 작업을 수행하도록 설계된 서버 기능입니다.

왜 유용합니까?

사용하기 쉽습니다. 이미 특정 작업을 수행하도록 구성되어 있으므로 많은 코드를 작성할 필요가 없습니다.
도움이 되는 라이브러리가 많이 있습니다. 일반적인 작업에 대해 사전 정의된 서버 작업을 제공하는 next-safe-actions 및 zsa와 같은 라이브러리가 있습니다.

React의 상태 관리

주스탄

Zustand는 React 애플리케이션을 위한 가볍고 유연한 상태 관리 라이브러리입니다. 전역 및 로컬 상태를 관리할 수 있는 간단하고 직관적인 API를 제공하므로 모든 규모의 프로젝트에 적합한 옵션입니다.

주요 특징:

미니멀리스트 API: Zustand는 최소한의 상용구 코드로 간결하고 배우기 쉬운 API를 제공합니다.
성능 지향: Zustand는 효율적인 상태 업데이트와 최소한의 오버헤드로 최적의 성능을 제공하도록 설계되었습니다.
유연성: 상태 관리에 대한 유연한 모듈식 접근 방식을 제공하여 필요에 따라 여러 매장을 만들고 관리할 수 있습니다.
배우기 쉬움: 간단한 API와 명확한 문서 덕분에 Zusstand는 쉽게 배우고 React 프로젝트에 통합할 수 있습니다.

import create from "zustand";

const useStore = create((set) => ({
  count: 0,
  increment: () => set((state) => ({ count: state.count + 1 })),
}));

function Counter() {
  const count = useStore((state) => state.count);
  const increment = useStore((state) => state.increment);

  return <button onClick={increment}>Count: {count}</button>;
}

로그인 후 복사

뒷걸음질

Recoil.js는 Context API와 같은 기존 방법에 비해 공유 상태 관리에 대한 보다 세부적이고 유연한 접근 방식을 제공하는 React 애플리케이션용 상태 관리 라이브러리입니다. 복잡한 상태 구조를 만들고 기존 상태에서 새로운 상태를 도출할 수 있는 고유한 데이터 흐름 그래프를 제공합니다.

주요 개념:

Atom: Recoil의 기본 상태 단위입니다. Atom은 독립적이며 여러 구성 요소에 의해 구독될 수 있습니다. 간단한 값을 저장하고 공유하는 방법을 제공합니다.
선택기: 선택기는 기존 원자나 다른 선택기에서 새로운 상태를 파생하는 순수 함수입니다. 이를 통해 복잡한 상태 구조를 생성하고 즉시 계산을 수행할 수 있습니다.
RecoilRoot: 이 구성 요소는 Recoil 애플리케이션의 루트입니다. 모든 Recoil Atom 및 선택기에 대한 컨텍스트를 제공합니다.
구독: 구성 요소는 상태가 변경될 때 업데이트를 받기 위해 Atom 또는 선택기를 구독합니다. Recoil은 효율적인 메커니즘을 사용하여 구성 요소가 의존하는 데이터가 실제로 변경된 경우에만 구성 요소를 다시 렌더링하도록 합니다.

고급 기능:

비동기 값: Recoil은 비동기 값을 지원하므로 API에서 데이터를 얻고 로딩 상태를 관리할 수 있습니다.
지속성: 반동 상태를 로컬 저장소 또는 기타 저장소 메커니즘에 유지하여 후속 페이지 로드 시 복원할 수 있습니다.
시간 여행 디버깅: Recoil은 시간 여행 디버깅을 위한 도구를 제공하여 상태 변경 사항을 검사하고 롤백할 수 있습니다.
사용자 정의 후크: 사용자 정의 후크를 생성하여 복잡한 상태 관리 논리를 캡슐화할 수 있습니다.

import create from "zustand";

const useStore = create((set) => ({
  count: 0,
  increment: () => set((state) => ({ count: state.count + 1 })),
}));

function Counter() {
  const count = useStore((state) => state.count);
  const increment = useStore((state) => state.increment);

  return <button onClick={increment}>Count: {count}</button>;
}

로그인 후 복사

React의 CSS 스타일

순풍 CSS

빠른 발전을 위한 혁명

Tailwind CSS에 대한 의견은 개발자 커뮤니티 내에서 다양하지만 현재로서는 이것이 신속한 제품 개발과 장기적인 CSS 유지 관리를 위한 가장 효과적인 솔루션이라고 굳게 믿습니다.

나의 경험과 많은 동료들의 피드백을 바탕으로 Tailwind는 다음과 같은 몇 가지 주요 이점을 제공합니다.

신속한 프로토타이핑: Tailwind의 유틸리티 우선 접근 방식을 통해 개발자는 맞춤 CSS 클래스를 작성하지 않고도 UI 요소를 빠르게 구축하고 스타일을 지정할 수 있습니다. 이를 통해 프로토타입 제작 및 반복 프로세스 속도가 크게 향상됩니다.
일관된 스타일: Tailwind는 사전 정의된 유틸리티 클래스 세트를 제공하여 프로젝트 전반에 걸쳐 일관된 스타일을 보장합니다. 이를 통해 지속적으로 바퀴를 재발명할 필요가 없으며 응집력 있는 디자인 시스템을 유지하는 데 도움이 됩니다.
더 나은 개발자 환경: Tailwind의 직관적인 구문과 최신 코드 편집기의 자동 완성 기능은 개발자 환경을 개선하여 CSS를 더 빠르고 즐겁게 작성하고 유지 관리할 수 있게 해줍니다.
CSS 파일 크기 감소: 사전 정의된 유틸리티 클래스를 활용하면 CSS 파일의 전체 크기를 크게 줄여 페이지 로드 시간을 단축하고 성능을 향상할 수 있습니다.
강력한 커뮤니티 및 생태계: Tailwind는 광범위한 문서, 유용한 리소스, 커뮤니티에서 구축한 수많은 플러그인 및 확장 프로그램에 대한 액세스를 제공하는 크고 활동적인 커뮤니티를 보유하고 있습니다.

내 경험상 Tailwind의 초기 학습 곡선은 상대적으로 작습니다. 대부분의 개발자는 일주일 이내에 능숙해지며 개발 속도 및 유지 관리 가능성 측면에서 장기적인 이점은 초기 투자보다 훨씬 큽니다.

Tailwind를 사용해 보시기 바랍니다. CSS 작업 흐름을 얼마나 단순화하고 생산성을 높일 수 있는지 알면 놀랄 것입니다.

React에서 데이터 가져오기

반응/탄스택 쿼리

대부분의 데이터 수집 요구 사항에 대해서는 본질적인 성능 이점과 향상된 데이터 보안으로 인해 서버 구성 요소를 우선시합니다. 서버에서 데이터 로드를 처리함으로써 브라우저에서 실행되는 JavaScript의 양을 최소화하여 초기 페이지 로드 속도를 높이고 사용자 경험을 향상시킬 수 있습니다.

그러나 무한 스크롤, 페이지 매김 또는 실시간 데이터 업데이트와 같은 더 복잡한 시나리오에서는 React의 기능을 활용합니다. 쿼리. React Query는 클라이언트 측에서 데이터 가져오기, 캐싱 및 업데이트를 관리하기 위한 강력하고 유연한 솔루션을 제공합니다.

예:

서버 구성 요소: 제품 페이지, 사용자 프로필 또는 블로그 게시물에 대한 초기 데이터를 가져오는 데 적합합니다.
React 쿼리: 피드에서 무한 스크롤을 구현하거나, 테이블에서 페이지가 매겨진 데이터를 관리하거나, 채팅 애플리케이션의 실시간 업데이트를 처리하는 데 적합합니다.

서버 구성 요소와 React Query를 전략적으로 결합함으로써 React 애플리케이션의 성능, 유지 관리성 및 개발자 경험 간의 최적의 균형을 달성할 수 있습니다.

데이터베이스 및 ORM

프리즘

내가 선호하는 데이터베이스 상호작용 선택

Prisma ORM은 내 React 프로젝트에서 데이터베이스와 상호 작용할 때 여전히 선호하는 선택입니다. Drizzle과 같은 최신 ORM이 인기를 얻고 있지만 Prisma는 강력한 커뮤니티와 광범위한 문서를 통해 안정적이고 신뢰할 수 있는 솔루션임이 입증되었습니다.

프리즈마 주요 특징:

유형 안전성: Prisma는 데이터베이스 스키마에서 TypeScript 유형을 생성하여 애플리케이션 전체에서 유형 안전성을 보장하고 런타임 오류 위험을 줄입니다.

예:

import create from "zustand";

const useStore = create((set) => ({
  count: 0,
  increment: () => set((state) => ({ count: state.count + 1 })),
}));

function Counter() {
  const count = useStore((state) => state.count);
  const increment = useStore((state) => state.increment);

  return <button onClick={increment}>Count: {count}</button>;
}

로그인 후 복사

사용자 및 게시물에 대해 생성된 유형은 명확한 지침을 제공하고 예상치 못한 데이터 구조를 방지합니다.

선언적 스키마 정의: 선언적이고 직관적인 구문인 Prisma 스키마 언어를 사용하여 데이터베이스 스키마를 정의하세요.

예:

import create from "zustand";

const useStore = create((set) => ({
  count: 0,
  increment: () => set((state) => ({ count: state.count + 1 })),
}));

function Counter() {
  const count = useStore((state) => state.count);
  const increment = useStore((state) => state.increment);

  return <button onClick={increment}>Count: {count}</button>;
}

로그인 후 복사

단순화된 쿼리: Prisma는 유연하고 직관적인 쿼리 생성 API를 제공하므로 최소한의 노력으로 복잡한 데이터베이스 쿼리를 쉽게 작성할 수 있습니다.
마이그레이션: Prisma Migrate는 사용하기 쉬운 마이그레이션 시스템으로 데이터베이스 스키마 변경을 단순화하여 시간이 지남에 따라 데이터베이스를 안전하게 발전시킬 수 있습니다.

프리즘 사용의 이점

생산성 향상: Prisma는 SQL 쿼리 생성, 데이터베이스 스키마 변경 관리 등의 반복 작업을 자동화하여 개발자 생산성을 크게 향상시킵니다.
향상된 코드 품질: 유형 안전성, 생성된 유형 및 모범 사례에 중점을 두어 코드 품질을 높이고 버그를 줄였습니다.
향상된 유지 관리: Prisma의 선언적 접근 방식과 명확한 스키마 정의를 통해 시간이 지남에 따라 데이터베이스 상호 작용을 더 쉽게 이해하고 유지 관리할 수 있습니다.
강력한 커뮤니티 및 생태계: Prisma는 광범위한 문서, 튜토리얼 및 지원 리소스에 대한 액세스를 제공하는 크고 활동적인 커뮤니티를 보유하고 있습니다.

Drizzle과 같은 최신 ORM은 유망한 기능을 제공하지만 Prisma의 안정성, 성숙한 생태계, 개발자 경험에 대한 강력한 초점 덕분에 대부분의 프로젝트에서 제가 선호하는 ORM이 되었습니다.

수파베이스

Supabase는 실시간 PostgreSQL 데이터베이스, 인증, 저장소, 에지 기능을 포함한 전체 백엔드 서비스 제품군을 제공하는 Firebase의 오픈소스 대안입니다. 이는 개발자에게 번거로운 인프라 관리 없이 풀 스택 웹 애플리케이션을 구축할 수 있는 빠르고 효율적인 방법을 제공합니다.

Supabase 주요 기능:

실시간 PostgreSQL: Supabase는 PostgreSQL의 강력한 데이터베이스 기능을 활용하여 복잡한 데이터 모델을 생성하고 강력한 쿼리를 수행할 수 있도록 해줍니다. 실시간 기능을 사용하면 채팅 애플리케이션, 대시보드 등 실시간 업데이트가 포함된 애플리케이션을 구축할 수 있습니다.
인증: Supabase는 이메일/비밀번호, 소셜 로그인, 맞춤형 인증 공급자 등 다양한 방법을 지원하는 유연한 인증 시스템을 제공합니다. 또한 비밀번호 없는 인증, 다단계 인증과 같은 기능도 제공합니다.
저장소: Supabase에는 애플리케이션에서 직접 파일을 업로드하고 관리할 수 있는 파일 저장 서비스가 포함되어 있습니다. 파일에 대한 공개 URL을 생성하고 액세스를 제어하기 위한 권한을 설정할 수 있습니다.
엣지 기능: 이러한 서버리스 기능을 사용하면 사용자에게 더 가까운 엣지에서 사용자 지정 코드를 실행할 수 있습니다. 이는 데이터 변환, 서버 측 렌더링, 사용자 정의 인증 논리와 같은 작업에 유용합니다.
GraphQL API: Supabase는 REST API 외에도 GraphQL API를 제공하여 데이터를 쿼리하는 보다 유연하고 표현력이 풍부한 방법을 제공합니다.

왜 Supabase를 선택해야 할까요?

신속한 개발: Supabase는 사전 구축된 백엔드 서비스를 제공하여 개발을 가속화하므로 사용자는 애플리케이션의 프런트엔드 구축에 집중할 수 있습니다.
확장성: Supabase는 확장 가능한 인프라를 기반으로 구축되어 모든 규모의 애플리케이션에 적합합니다.
오픈 소스: 오픈 소스인 Supabase는 투명성, 유연성 및 강력한 커뮤니티를 제공합니다.
비용 효율성: Supabase는 넉넉한 무료 등급과 유연한 가격 계획을 제공하여 소규모 및 대규모 프로젝트에 모두 합리적인 가격을 제공합니다.

Supabase를 사용해야 하는 경우

실시간 애플리케이션: Supabase는 채팅 애플리케이션, 협업 도구, 대시보드와 같이 실시간 업데이트가 필요한 애플리케이션에 이상적입니다.
신속한 프로토타이핑: Supabase는 사용이 간편하여 프로토타입과 MVP를 빠르게 구축할 수 있는 탁월한 옵션입니다.
풀스택 웹 애플리케이션: Supabase는 단순 웹 애플리케이션과 복잡한 웹 애플리케이션 모두의 백엔드로 사용할 수 있습니다.

데이터 관리 및 검증

타입스크립트

TypeScript는 의심할 여지 없이 JavaScript 프로젝트의 업계 표준입니다. 인터페이스 및 모듈과 같은 최신 기능과 결합된 정적 유형 시스템은 유형 안전성 향상, 오류 감지 향상, 생산성 향상, 보다 즐거운 개발 경험 등 다양한 이점을 제공합니다. 업계에서 TypeScript를 채택한 것은 그 가치와 효율성을 입증하는 것입니다.

조드

유형 안전 검증을 위한 강력한 도구

Zod는 특히 TypeScript와 결합할 때 React 프로젝트의 검증을 위한 최고의 선택으로 부상했습니다. Zod의 유형 안전 접근 방식을 활용하면 애플리케이션의 견고성과 유지 관리성을 크게 향상시킬 수 있습니다.

조드 주요 기능

유형 안전 유효성 검사: Zod는 TypeScript의 유형 시스템을 활용하여 데이터 스키마를 정의하고 적용합니다. 이렇게 하면 애플리케이션에서 수신한 데이터가 예상 구조와 일치하여 예기치 않은 오류를 방지하고 데이터 무결성이 향상됩니다.
선언적 스키마: Zod를 사용하면 간결하고 표현력이 풍부한 구문을 사용하여 데이터 스키마를 선언적으로 정의할 수 있습니다. 이를 통해 데이터에 대한 복잡한 유효성 검사 규칙을 쉽게 만들 수 있습니다.
오류 처리: Zod는 상세하고 유익한 오류 메시지를 제공하므로 유효성 검사 문제를 쉽게 식별하고 수정할 수 있습니다. 이러한 오류 메시지는 사용자 인터페이스에 쉽게 통합되어 사용자에게 유용한 피드백을 제공할 수 있습니다.
확장성: Zod는 유연하고 확장 가능한 API를 제공하므로 사용자 지정 유효성 검사 규칙을 만들고 이를 애플리케이션의 다른 부분과 통합할 수 있습니다.

Zod 사용의 이점

코드 품질 개선: Zod는 데이터 유형과 유효성 검사 규칙을 적용하여 예상치 못한 오류를 줄이고 더욱 강력하고 안정적인 코드를 작성할 수 있도록 도와줍니다.
향상된 개발자 환경: Zod의 유형 안전 접근 방식과 유용한 오류 메시지는 코드 작성, 디버깅 및 유지 관리를 더욱 쉽게 만들어 개발자 환경을 크게 개선합니다.
사용자 경험 개선: Zod는 사용자에게 명확하고 유용한 오류 메시지를 제공함으로써 앱의 전반적인 사용자 경험을 개선하는 데 도움을 줍니다.
유지관리 비용 절감: Zod는 데이터 검증 문제를 조기에 감지함으로써 애플리케이션과 관련된 장기 유지 관리 비용을 줄이는 데 도움을 줄 수 있습니다.

나의 접근방식

Zod는 강력한 클라이언트 측 유효성 검사 기능을 제공하지만 주로 서버 측 유효성 검사, 특히 서버 작업 내에서 사용하는 것을 선호합니다. 이 접근 방식은 클라이언트 측 양식을 가볍게 유지하고 많은 타사 양식 라이브러리로 인해 발생하는 복잡성을 방지합니다. 기본 검사에 기본 HTML 유효성 검사를 사용함으로써 간결하고 효율적인 양식 구성 요소 아키텍처를 유지할 수 있습니다.

테스트 및 도구

모의 서비스 워커(MSW)

내 작업 흐름을 획기적으로 개선한 도구는 MSW(Mock Service Worker)입니다. 아직 사용하지 않으셨다면 왜 주목받아야 하는지 알려드리겠습니다.

모의 서비스 워커는 API 모의를 위한 강력한 JavaScript 라이브러리입니다. 서비스 워커를 사용하여 네트워크 수준에서 요청을 가로채면 브라우저나 Node.js 런타임에서 직접 API를 시뮬레이션할 수 있습니다. 따라서 백엔드에 의존하지 않고도 테스트, 디버깅은 물론 개발까지 완벽하게 수행할 수 있습니다.

내가 MSW를 좋아하는 이유

저에게 MSW는 다른 모의 라이브러리가 해결하지 못하는 많은 문제를 해결합니다.

현실적인 모의: MSW는 네트워크 수준에서 요청을 가로채므로 시뮬레이션된 동작은 실제 서버와 거의 구별할 수 없습니다. 마치 주머니에 백엔드 에뮬레이터가 있는 것과 같습니다.
클라이언트 및 서버 테스트: React 애플리케이션을 테스트하든 Node.js 서비스를 테스트하든 MSW는 두 환경 모두에서 완벽하게 작동합니다.
종속성 감소: 추가 테스트 서버나 복잡한 모의 구성이 필요하지 않습니다. MSW는 깨끗하고 단순하게 유지합니다.
유연성: REST API, GraphQL은 물론 WebSocket까지 시뮬레이션할 수 있습니다. 앱에서 요청할 수 있으면 MSW에서 이를 시뮬레이션할 수 있습니다.
더 나은 디버깅: 명확한 로그와 디버깅 도구를 사용하면 어떤 요청이 어떻게 시뮬레이션되고 있는지 정확히 알 수 있습니다.

MSW 대 전통적인 조롱 도구

내 경험에 따르면 MSW는 Axios 인터셉터나 사용자 정의 모의 도구보다 뛰어납니다.

확장성: MSW를 사용하면 모의 객체가 애플리케이션 논리 외부에 위치하여 재사용 및 유지 관리가 가능해집니다.
격리: 인터셉터와 달리 MSW는 애플리케이션 코드를 방해하지 않습니다. 이는 테스트 후 지저분한 분해 코드가 없음을 의미합니다.
브라우저와 유사한 동작: MSW는 서비스 워커를 사용하여 브라우저 수준의 동작을 모방하여 테스트가 가능한 한 실제 조건에 가깝도록 보장합니다.

MSW를 시도해야 하는 이유

API는 최신 애플리케이션의 중추이므로 이를 테스트하는 것이 고통스러울 필요는 없습니다. MSW는 불필요한 복잡성 없이 API를 시뮬레이션할 수 있는 현실적이고 유연하며 개발자 친화적인 방법을 제공합니다.

개발, 디버깅, 테스트 중 무엇을 하든 MSW는 게임 체인저입니다. 나에게 필요한지 몰랐던 도구인데 이제는 없이는 할 수 없는 도구입니다.

2025년에 개발 프로세스를 향상시키고 싶다면 MSW를 사용해 보세요. 귀하의 팀은 귀하에게 감사할 것이며 귀하의 코드는 빛날 것입니다.

극작가

2025년 최신 웹 테스트와 관련해 Playwright는 제가 꼭 사용하는 도구 중 하나가 되었습니다. 단순한 테스트 라이브러리가 아닙니다. 정확성, 속도 및 다양성을 원하는 프런트엔드 개발자를 위한 강력한 도구처럼 느껴집니다.

Playwright는 브라우저 자동화를 위한 Node.js 라이브러리입니다. Microsoft에서 개발한 이 앱을 사용하면 일관된 API를 사용하여 모든 주요 브라우저(Chromium, Firefox, WebKit)에서 웹 애플리케이션에 대한 엔드투엔드 테스트를 작성할 수 있습니다. 이는 개발자가 사용하기 쉽고 우아하고 강력하며 브라우저 테스트를 위한 스위스 군용 칼을 갖는 것과 같습니다.

극작가가 돋보이는 이유

내 경험에 따르면 Playwright는 다음 분야에서 탁월합니다.

멀티 브라우저 지원: 기본적으로 Chromium 기반 브라우저만 지원하는 Cypress와 달리 Playwright를 사용하면 Chromium, Firefox 및 WebKit에서 테스트할 수 있습니다. 따라서 애플리케이션이 다양한 환경에서 작동하는지 확인하는 것이 중요합니다.
병렬 테스트: Playwright에 내장된 병렬화는 획기적인 변화입니다. 테스트가 더 빠르게 실행되어 CI 파이프라인을 원활하게 유지하고 개발자의 생산성을 유지합니다.
헤드리스 및 헤드 모드: CI에서 디버깅을 하든 테스트를 실행하든 Playwright는 원활하게 적응합니다.
컨텍스트 격리: Playwright를 사용하면 다양한 사용자를 모방하는 격리된 브라우저 컨텍스트를 만들 수 있습니다. 이는 복잡한 인증 흐름이나 다중 테넌트 시나리오가 있는 애플리케이션을 위한 생명의 은인입니다.
API 테스트: 극작가는 UI에서 멈추지 않습니다. 테스트 스크립트 내에서 직접 API 호출을 수행하여 프런트엔드와 백엔드가 조화롭게 작동하도록 할 수 있습니다.

몇 가지 코드를 살펴보겠습니다

다음은 TypeScript에서 Playwright 테스트를 작성하는 방법에 대한 간단한 예입니다. 이 테스트는 로그인 페이지를 확인합니다:

import create from "zustand";

const useStore = create((set) => ({
  count: 0,
  increment: () => set((state) => ({ count: state.count + 1 })),
}));

function Counter() {
  const count = useStore((state) => state.count);
  const increment = useStore((state) => state.increment);

  return <button onClick={increment}>Count: {count}</button>;
}

로그인 후 복사

2025년에는 테스트가 더 이상 선택 사항이 아닙니다. 사용자는 원활한 경험을 기대하며 자동화는 이를 제공하는 방법입니다. Playwright는 강력한 성능과 개발자 친화적인 기능을 결합하여 필수 도구로 만들었습니다.

아직 탐험하지 않으셨다면 지금이 바로 그때입니다. 테스트가 더 빠르게 실행되고, 오류가 줄어들고, 사용자가 만족할 때 미래의 여러분도 감사할 것입니다.

배치 및 숙박

Cloudflare(도메인 및 CDN)

Cloudflare는 현대 웹 개발의 초석으로 남아 있습니다. 나에게 이는 단순한 서비스가 아니라 빠르고 안전하며 확장 가능한 애플리케이션을 만드는 데 필수적인 부분입니다. 독립 개발자이든 대규모 팀의 일원이든 Cloudflare에는 스택을 향상시킬 수 있는 도구가 있습니다.

Cloudflare란 무엇입니까?

Cloudflare는 완전한 웹 성능 및 보안 도구 세트입니다. CDN(콘텐츠 전송 네트워크)으로 시작되었지만 오늘날에는 그 이상입니다. Cloudflare를 사용하면 웹사이트 성능을 최적화하고 악의적인 공격으로부터 보호할 수 있으며 강력한 엣지 컴퓨팅 플랫폼을 사용하여 서버리스 애플리케이션을 만들 수도 있습니다.

내가 Cloudflare를 신뢰하는 이유

Cloudflare가 내 스택의 필수적인 부분인 가장 큰 이유는 다음과 같습니다.

어디서나 빠른 속도: Cloudflare는 글로벌 CDN을 통해 사용자가 어디에 있든 앱의 정적 자산이 매우 빠른 속도로 제공되도록 보장합니다. 캐시는 자산이 많은 앱이나 전 세계 사용자에게 생명의 은인입니다.
탁월한 보안: Cloudflare의 WAF(웹 애플리케이션 방화벽)와 DDoS 보호 덕분에 수많은 고민을 덜었습니다. 보안팀이 자동으로 조종되는 것과 같습니다.
엣지에서의 서버리스 컴퓨팅: Cloudflare Workers 사용은 판도를 바꾸었습니다. 이를 통해 에지에서 가벼운 기능을 실행하여 대기 시간을 줄이고 기존 서버의 작업을 오프로드할 수 있습니다.
사용 편의성: Cloudflare를 설정하는 데는 몇 분밖에 걸리지 않지만 그 이점은 엄청납니다. 직관적인 대시보드와 개발자 친화적인 도구를 통해 모든 스택과 쉽게 통합할 수 있습니다.
비용 효율적: Cloudflare의 가격은 제공하는 가치에 비해 비교할 수 없습니다. 무료 등급에도 비용 걱정 없이 시작할 수 있는 기능이 가득합니다.

최신 애플리케이션을 개발한다는 것은 빠르고 안전하며 안정적인 경험을 제공한다는 의미입니다. Cloudflare를 사용하면 스택을 지나치게 복잡하게 하지 않고도 이 모든 것을 달성할 수 있습니다. 탁월한 CDN부터 혁신적인 엣지 컴퓨팅 플랫폼까지, 2025년에 애플리케이션의 미래 경쟁력을 확보하려는 모든 개발자에게 추천하고 싶은 도구입니다.

아직 Cloudflare를 살펴보지 않으셨다면 지금이 바로 적기입니다. 사용자는 차이점을 깨닫게 될 것이며 여러분도 마찬가지일 것입니다.

기타 유틸리티:

이메일에 반응하고 재전송

이메일 전송을 위한 강력한 조합

React Email and Resend는 React 애플리케이션 내에서 고품질 이메일을 생성하고 전달할 수 있는 강력한 솔루션을 제공합니다.

React 이메일: 이 라이브러리를 사용하면 React 구성 요소 내에서 직접 시각적으로 매력적이고 반응이 빠른 이메일 템플릿을 만들 수 있습니다. 구성 요소, 상태 및 소품과 같은 친숙한 React 개념을 활용하여 동적이고 유지 관리가 쉬운 이메일 레이아웃을 만들 수 있습니다.
재전송: 이 강력한 이메일 API는 환영 이메일, 비밀번호 재설정, 주문 확인과 같은 거래 이메일을 보내는 안정적이고 효율적인 방법을 제공합니다. 재전송은 높은 전달 가능성, 강력한 분석, 기존 인프라와의 손쉬운 통합과 같은 기능을 제공합니다.

주요 이점

더 나은 개발자 환경: React Email은 친숙한 React 패턴을 사용하여 이메일 템플릿을 생성하여 생산성과 유지 관리 가능성을 높여 개발자 환경을 개선합니다.
일관적인 브랜딩: 이메일 템플릿에 React 구성요소를 사용하면 이메일을 포함한 전체 앱에서 일관된 브랜딩과 스타일을 보장할 수 있습니다.
더 나은 전달 가능성: Resend의 강력한 인프라와 전달 가능성에 중점을 두어 이메일이 의도한 수신자에게 안정적으로 전달되도록 도와줍니다.
간편한 통합: Resend는 React 애플리케이션과 쉽게 통합할 수 있도록 간단한 API와 SDK를 제공합니다.

예:

import create from "zustand";

const useStore = create((set) => ({
  count: 0,
  increment: () => set((state) => ({ count: state.count + 1 })),
}));

function Counter() {
  const count = useStore((state) => state.count);
  const increment = useStore((state) => state.increment);

  return <button onClick={increment}>Count: {count}</button>;
}

로그인 후 복사

import { atom, selector, useRecoilState, useRecoilValue } from "recoil";

// Atom for user data (fetched asynchronously)
const userDataAtom = atom({
  key: "userData",
  default: null,
  effects_UNSTABLE: [
    ({ setSelf }) => {
      // Fetch user data from API and set it
    },
  ],
});

// Selector to extract the user's name
const userNameSelector = selector({
  key: "userName",
  get: ({ get }) => {
    const userData = get(userDataAtom);
    return userData?.name || "Guest";
  },
});

function UserProfile() {
  const userName = useRecoilValue(userNameSelector);

  return <div>Hello, {userName}!</div>;
}

로그인 후 복사

이 예에서는 React Email을 사용하여 간단한 환영 이메일 템플릿을 만든 다음 Resend API를 사용하여 보내는 방법을 보여줍니다.

React 이메일과 재전송의 강력한 기능을 결합하면 이메일 워크플로를 간소화하고 이메일 커뮤니케이션 품질을 향상하며 전반적인 사용자 경험을 향상시킬 수 있습니다.

줄무늬

Stripe는 온라인 결제를 허용하는 완전한 기능 세트를 제공하는 강력하고 널리 사용되는 결제 게이트웨이입니다.

잠재적인 과제

복잡성: Stripe의 광범위한 기능 세트는 강력하기는 하지만 특히 소규모 프로젝트나 결제 요구사항이 더 간단한 프로젝트의 경우 압도적일 수 있습니다.
진화하는 API: Stripe은 지속적으로 새로운 기능을 도입하고 API를 업데이트하며, 이로 인해 때때로 통합 조정이 필요할 수 있습니다.

import create from "zustand";

const useStore = create((set) => ({
  count: 0,
  increment: () => set((state) => ({ count: state.count + 1 })),
}));

function Counter() {
  const count = useStore((state) => state.count);
  const increment = useStore((state) => state.increment);

  return <button onClick={increment}>Count: {count}</button>;
}

로그인 후 복사

본질적으로 이것은 제가 오늘 새로운 풀 스택 React 프로젝트를 위해 선택할 기술 스택입니다. 이는 가능한 조합 중 하나일 뿐이며, 프로젝트에 가장 적합한 기술 스택은 궁극적으로 특정 요구 사항과 우선 순위에 따라 달라집니다. 이러한 기술을 탐색하고 다양한 조합을 실험하여 자신에게 가장 적합한 것이 무엇인지 찾아보시기 바랍니다.

이 정보가 도움이 되었거나 새로운 정보를 얻었기를 바랍니다.

Tech Stack 5