【PF-1】화면 관리

제품

React × AWS APIGateway × Lambda × DynamoDB로 제작된 SPA입니다.
ver1.0.0의 구성은 다음과 같다.

기능

특정 시스템의 사용자 데이터를 사용하여 CRUD 작업을 수행할 수 있는 화면

스크린

제작된 화면은 다음과 같습니다.

사용자 요약 화면(ListUser.tsx)

소스 코드 및 설명

사용자 세부 화면(DescribeUser.tsx)

소스 코드 및 설명

사용자 등록 화면(AddUser.tsx)

소스 코드 및 설명

기타

메뉴 표시줄, 측면 탐색 설치
App.tsx

디렉토리 구조

다음 디렉토리 구조를 사용하여 생성합니다.
구성 요소 분할은 논리(Container Component)와 화면 표시(Presentation Component)를 간단하게 분리할 뿐이다.

app/
┗ src/
   ┠ container/     //ロジックに関するファイル
   ┃   ┠ AddUser.tsx
   ┃   ┠ DescribeUser.tsx
   ┃   ┗ ListUser.tsx
   ┠ presentation/  //画面表示に関するファイル
   ┃   ┠ AddUser.tsx
   ┃   ┠ DescribeUser.tsx
   ┃   ┠ ListUser.tsx
   ┃   ┗ Menu.tsx
   ┠ App.tsx
       ┗ index.tsx

백엔드

API 구성

다음 API 구조를 사용하여 생성

 ▼/
  ▼ /ctrl
   ▼ /users
      GET
      OPTIONS
      POST
    ▼/{user_id}
       DELETE
       GET
       OPTIONS
       PATCH

API Gateway의 구축·Lambda 설치

【PF-1】APIGateway・Lambda

향후의 전망

스크린

storybook의 제작

figma 기반의 디자인

백엔드

swagger를 이용하여 API 설계서 제작

반환 오류 처리 수행