나의 개발 순서
- 만들고자 하는게 어떤 것인지 정리 (아이패드)
- 어떤 기능이 들어가야 하는지, 어떤게 들어가면 좋을지 구상하고 정리
- 그 기능이 들어가기 위해서는 화면 구성을 어떻게 하는 것이 좋을 지 기획
- 위를 기반으로 와이어 프레임 만들기
- 기능 구현을 위해 필요한 데이터 등 리스트 만들기
- 할 일 단계별 정리(핵심 기능을 선정해서 개발 우선순위 선정)
- 한 기능을 잡고 UI 컴포넌트 계층으로 쪼개기
- UI에 생명 부여하기(기능 넣기)
- 만들면서 중복되는 코드 등 제거하고 수정하며 개선, 모듈화
- 기능 동작하면 전체 코드 다시 보고 코드 개선점 찾고 React에 이와 관련된 기능 있는지 검색하기
- 리팩토링 및 디버깅 -> 하다가 아이디어 생각나면 적어놓고 한 번 쫙 정리된 후에 구현해봄
- 지금 쓴 기술 스택 말고 다른 더 좋은거 쓸 수 있는지 알아보기
- 완성
상태 관리가 왜 필요한 것인가?
- 전역 상태 관리 : 맥락 종속성 보다 데이터 자체가 중요할 때 전역 상태를 사용한다. (무거운 편이다.)
- props : 의존성 부모 관계가 명확해야 할 경우 사용한다.
- context : 특정 트리에 대해 전체적으로 영향을 끼칠 떄 사용한다.
- 지역 상태 : 이 컴포넌트와 페이지에서만 쓰일 때 사용한다.
개발을 할 때 생각할 것
- 요구 사항을 분석한다.
- Page 별로 분석한다.- 기능 단위로 최대한 자세하게 분석한다. (not component)
- 요구사항을 묶는다. 특정 페이지에서만 필요한 기능과 공통으로 쓰여지는 기능이 구분 될 것이다.
- 동적 데이터(API 등)와 정적 데이터를 분류한다.
- 폴더 구조를 정하는 scaffolding을 한다.
- 데이터들을 담을 적절한 자료구조를 결정한다.
- 동적 데이터의 동기/비동기 타입을 결정한다.
- dummy data를 이용해 정적, 동적 데이터를 연결한다. (mocking)
- 적절한 상태 관리를 고른다.
- component를 분리한다.
주의
처음부터 컴포넌트를 분리하며 개발하려 하지 말자. 한 페이지에서 코드를 쭉 작성하고, 관계를 파악한 후 관계에 따라 컴포넌트를 적절히 분리하는 연습을 하자. 컴포넌트 분리와 관련해서는 다음 자료를 참고하면 좋을 것 같다.
협업 시 생각할 것
- 공통기능을 만드는 사람은 인터페이스, 데이터타입을 협업하는 분들에게 미리 알려주고, 어떻게 하면 충돌을 없앨 수 있을지 고민해보자.
- 어떤 데이터가 어디에서 언제 필요할 지 상태를 모델링하는
mocking을 하면, 주입한 상태의 모양이 (snapshot) => UI 가 같다. 실제 API를 받아오는 로직만 디테일하게 수정해주면 된다. - 독립적인 기능과 공통 기능을 나누어 역할 분배를 해보자.
내 꿈은 세계정복🧐