web20조 | 박나경, 유능, 윤수빈, 전대성

목차

1. 첫 릴리즈와 데모!
2. TodoList 클래스 구현기
1. 일단 메모리로 관리하자
2. DB와 비즈니스 로직의 의존성을 인터페이스로 분리하자
3. 의존성 주입으로 Memory와 IndexedDB 두가지 저장 방식을 모두 사용해보자
3. 비동기 메서드와 상태관리
4. 컴포넌트 설계와 고민들
5. 어떤 디테일을 살려볼까?

첫 릴리즈와 데모!

TodoList 클래스 구현기

​

• 보기보다 복잡한 로직을 사용하는 우리의 TodoList…
• DB에 다 넣어두고 꺼내서 매번 조작하는 것보다, �TodoList에 대한 데이터 관리를 전담하는 클래스를 하나 만들자!

TodoList 클래스 구현기

​

• 일단은 일종의 API 문서와 인터페이스부터 정의

TodoList 클래스 구현기

​

• 일단은 메모리 내에서 CRUD가 가능하게 구현…

React Component

TodoList

CUD

R

TodoList 클래스 구현기

​

• 데이터 저장소(DB)의 역할과 데이터 가공 로직의 분리
• DB 부분도 인터페이스부터 작성하고, �어떤 DP던지 해당 인터페이스의 구현체를 통해 연결하도록 함.

React Component

TodoList

CUD 요청

Read는 메모리에서

DB

반영

결과값 즉시 메모리에 반환

TodoList 클래스 구현기

​

• 인터페이스를 잘 분리한 덕에 기존에 메모리로 구현한 코드는 MemoryDB 형태로 바꾸고,
• 추가로 IndexedDB API를 활용해서 DB 인터페이스 구현체를 추가로 구현.
• 언제든지 사용하는 DB를 바꿔끼울 수 있도록 구현
• 미래에는 데모 이용(MemoryDB), 로컬 저장(IndexedDB), 클라우드 저장(server) 등으로 �다양한 데이터 보관 형태를 제공할 수 있을 것 같다.
• 클래스 형태는 FE에서 쓰기에 의존성이 너무 크다.. 함수 단위로 분해해서 데이터 중심적으로 관리하도록 바꿀수도…

React Component

TodoList

IndexedDB

MemoryDB

Server(?)

비동기 메서드와 상태관리

​

• 일단은 DB와 연결될 것을 고려해서 모든 TodoList API의 메서드는 비동기로 짜여졌는데…
• 정작 Component에서 사용하려면 사용이 간단한 동기 함수들에 비해 수많은 then과 catch를 사용해야 한다…
• 게다가 초기 로드 역시 비동기적이니, 타입을 TodoList | undefined 로 정의하고… 매번 optional chaining(?.)을 하거나 if문으로 존재 유무 체크를 해주는 불편함이 발생
• React Suspense를 활용하면 조금 더 비동기 상태를 편하게 핸들할 수 있다고 한다!

​

• 다른 팀 분들은 비동기 메서드를 사용하는 상태들 어떻게 잘 관리하고 계신가요??

컴포넌트 설계와 고민들

• 렌더링 최적화는 어떻게 하면 좋을까?
• 1초마다 전체 re-render되는 페이지,, 괜찮지 않아 보인다,,
• jotai + React Suspense, useMemo, React.memo
• 시간 관련 컴포넌트들만 re-render되도록 수정

어떤 디테일을 살려볼까?

• 유저 사용성에 관련된 FE적 디테일 살리기
• 데이터의 변화를 유저가 인지할 수 있는 형태로 전달하기 (DB값을 그대로 보여주지 말고, 변화도 따로 상태로 기록하고 표현하기)
• 부드러운 애니메이션
• 최적화와 예외처리
• Todo 정보를 극한으로 활용하기
• Todo간의 물리고 물린 관계를 Flow 차트 형태로 디스플레이 하기
• 유저와 Todo의 메타데이터 수집해서 정보 형태로 보여주기
• Todo들의 정보와 관계성으로 좋은 계획인지 확인해주기
• Todo를 조작할 수 있는 더 다양한 유저 인터페이스 구현하기 (칸반, 캘린더 등)
• 리팩터링… 또 리팩터링…
• 가능한 모든 경우를 테스트해 보자!

감사합니다! 많은 피드백 부탁드려요!