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