Vanilla JS로 코딩을 하고 난 뒤에 React에 대한 이해와 지식이 부족하다고 느껴서 복습 차원에서 아주 기본적인 예제로 꼽히는, Todo 프로젝트를 시작하게 되었다.
Figma로 디자인 하기Material-design을 적용하기CRA를 사용하지 않고React를 사용하기Typescript를 사용하기Webpack과Babel을 사용하기Eslint를 적용하기- 스타일링은
Tailwind를 사용하기 - 기타: redux적용 ,Backend도 구현하기, Severless로 배포해기 등
프로젝트를 처음 시작할 때
이제 어느 정도 지식을 쌓았으니 아주 단순히 할 일을 추가, 제거하는 앱을 구현하기는 아무 도움이 안된다는 생각이 들었다.
그래서 아주 조금 더 나아가
- 투두 리스트의 카테고리를 나누고
- 투두 리스트 내부에서 완료 항목을 최하단으로 밀어내고
- 투두 리스트 내부에서 완료 항목에 대해서 숨기기 기능을 추가
- 투두의 Drag & Drop 기능 구현 등의 추가적인 기능을 추가
하는 등의 기능을 구현하면 좋겠다고 생각했다.
디자인부터
예전부터 머리로 생각해서는 앱에 어떤 구성이 필요한지 모르겠다는 생각이 들었다. 디자이너를 포함해서 다른 분들과 협업을 하고 싶다는 마음이 이때 많이 들었다. 하지만 협업을 구하려면 마땅한 프로젝트는 하나 완성할 필요가 있지 않나하는 생각이 들었고, 팀프로젝트 하고 싶다 > 그럼 프로젝트 완성하자 > 디자인이 없으니 힘드네 > 팀프로젝트 하고 싶다하는 루프에 갖히고 말았다.
결국 스스로 Figma를 배우기로 결정, 안드로이드의 Material-Design 템플릿을 참고하여 아주 기초적인 화면만 디자인을 해보았다.
Figma나 Sketch에서도 UI를 디자인할 때 컴포넌트 단위로 반복되는 오브젝트를 묶는다는 사실이 꽤 재미있었다. React에서도 재사용을 위해 컴포넌트를 같은 방식으로 제작하는데 이런식으로 어플리케이션 개발의 환경 혹은 시스템이 통일성을 갖는구나 싶었다.
디자인을 대략적으로 해보니 확실히 시각적으로 분명하게 고민할 수 있어서 좋았다. 또한 컴포넌트를 어떻게 구성할 것인가에 대한 고민도 덜 수 있었다. 다만 어떻게 파일과 디렉토리의 구조를 구성해야할지 고민이 들었다. 구글링을 해본 결과 이를 디자인 패턴으로 부르는 모양이었다. React Design Pattern 🎨
에 자세히 소개되어 있었다.
