[멋쟁이사자처럼]프론트엔드 39일차 정리

백엔드 API를 활용하여 사용자가 이용할 '루틴 관리' 관련 프론트엔드 컴포넌트를 작업 한 내용입니다.

컴포넌트 기반 설계

지난 며칠간 구축한 백엔드 API를 기반으로 사용자에게 보여지는  화면을 만드는 프론트엔드 개발의 진행을 시작했습니다.
컴포넌트 기반 개발 방식으로 접근했습니다.

• 컴포넌트 분리 : '루틴 관리 모달'이라는 큰 기능 단위를 다음과 같은 작은 컴포넌트로 분리하여 개발했습니다. 

RoutineList.tsx : 루틴 목록을 표시합니다. 

RoutineItem.tsx : 개별 루틴 하나하나를 표시합니다.

AddRoutineForm.tsx : 새로운 루틴을 등록합니다.

PhotoUpload.tsx: 사진 인증을 담당합니다.

 

위와 같은 역할 분리로 각 컴포넌트는 자신의 역할에만 관여하며 코드의 복잡성을 낮출 수 있습니다.

React Hooks를 이용한 상태 관리

useState와 useEffect를 통해 컴포넌트를 관리합니다.

• useState로 상태 정의
  각 컴포넌트가 '기억'해야 할 모든 값들(예: 폼 입력 내용, 로딩 여부, 에러 메시지)을 useState로 명확하게 정의했습니다.
  예를 들어, setLoading(true)로 버튼이 '생성 중...'으로 바뀌고 비활성화되는 로직을 구현했습니다.
  
• useEffect로 데이터 흐름 제어
  RoutineModal 컴포넌트에서 모달이 열릴 때useEffect를 사용하여 자동으로 fetchRoutines API를 호출하도록 설계했습니다. 이는 "특정 조건이 충족되었을 때,  실행하라"는 명령을 내리는 것과 같았다.

API 연동 및 비동기 처리

백엔드와 프론트엔드를 연결하는 연결점의 역할을 하는 API 연동 작업을 진행하며, 비동기 처리에 대해 집중햇습니다.

• axios를 이용한 API 호출 : 미리 설정해둔 axiosInstance를 사용해 백엔드 API(POST /api/routines 등)와 연결했습니다.
  
• async/await와 try...catch...finally
  서버 응답을 기다리는 모든 API 호출은 async/await를 사용하여 비동기적으로 처리했습니다.
  네트워크 오류 등과 같은 문제를 처리하기 위해 모든 비동기 로직을 try...catch 구문으로 작성했습니다.
  작업의 성공/실패 여부와 관계없이 항상 실행되어야 하는 로직(예: setLoading(false))은 finally 블록에 넣어 코드의 안정성을 높였습니다.

사용자 경험(UX)을 고려한 디테일 구현

사용자가 더 편리하고 직관적으로 앱을 사용할 수 있도록 디테일을 추가했습니다.

• 유효성 검증 : 루틴 이름이 비어있거나, 이미지 파일의 크기가 너무 클 경우, 폼을 제출하기 전에 사용자에게 미리 알려주어 불필요한 API 요청을 막습니다.
  
• 로딩 및 에러 상태 표시 : API 통신 중에는 스피너 아이콘을 보여주고 버튼을 비활성화하여 사용자가 중복 클릭하는 것을 방지했습니다. 에러 발생 시에는 한글 메시지로 나타내어 사용자가 상황을 인지할 수 있도록 구현했습니다.
• 컴포넌트 간의 소통 (Props & Callbacks)
  부모 컴포넌트(RoutineModal)가 자식 컴포넌트(AddRoutineForm)에게 데이터를 전달할 때는 props를 사용했습니다.
  자식 컴포넌트가 자신의 작업 완료를 부모에게 알릴 때는 onSuccess, onCancel 같은 콜백 함수를 호출하는 패턴을 사용하여 컴포넌트 간의 의존성을 낮추고 재사용성을 높였습니다.

정리

작성한 백엔드 API를 이용하여 프론트엔드를 구현했습니다. useState를 통해 데이터와 UI가 어떻게 실시간으로 반응하는지, useEffect로 API 호출 시점을 어떻게 제어하는지 이해할 수 있었습니다. 내일은 기능의 작동을 확인하며 추가적인 부분을 구현할 예정입니다.