SimpleCORE
PLATFORMS & TOOLS / PROJECT

React

API 정의로 React 화면의 기본 코드를 생성합니다.

목차 3세부 내용 3
프로젝트 상세
01 / 03
BROWSER

API 정의를 활용한 화면 개발

OpenAPI 정의를 읽어 API 클라이언트, 타입, 훅과 CRUD 화면의 기본 코드를 생성합니다. 생성한 코드는 FSD 구조에 맞춰 관리하고 서비스별 화면으로 확장합니다. 공식 제품 홈페이지의 영어 TUI 코드 생성기 화면입니다.

공통 코드를 활용해 서비스 화면을 구현합니다.

  • OpenAPI 정의
  • 인증·권한·다국어 설정
코드 생성 · FSD 구조
  • 목록·상세·입력 화면
  • 공통 UI와 서비스 기능
처리 흐름

API 정의에서 기본 코드를 생성하고 앱·페이지·위젯·기능·엔티티·공통 코드의 역할을 구분합니다.

FSD 구조에 따라 앱·페이지·위젯·기능·엔티티·공통 코드를 역할별로 나눕니다. 생성된 코드를 바탕으로 화면과 동작을 구현하고, API 변경에 맞춰 클라이언트 정의를 갱신합니다.

화면·데이터·권한을 일관된 구조로 관리합니다.

React·TypeScript에 TanStack Router와 TanStack Query를 연결합니다. shadcn/ui·Tailwind CSS로 화면을 구성하고 React Hook Form·Zod로 입력과 검증을 처리합니다.

i18next로 UI와 서버 메시지의 다국어를 관리하고, CSS 변수로 테마를 전환합니다. CASL 기반 권한은 라우트·컴포넌트·필드에 적용하며 서버 권한과 연결합니다.

pnpm 모노레포에서 홈페이지와 관리자 앱, 공통 UI·API·설정 패키지를 관리합니다. 공식 제품 홈페이지의 개발 가이드와 도입 문의를 통해 프로젝트에 맞는 구성과 자료를 확인할 수 있습니다.

  • React
  • TypeScript
  • TanStack
  • shadcn/ui
  • Tailwind CSS
  • i18next
  • CASL
© 2026 SIMPLECORE INC.CONTEXT. STRUCTURE. EXPERIENCE.