Trello 기본구조(React + Redux)

 전에 했던 프로젝트에서 Redux를 사용한 적이 있었는데 state관리도 편할 뿐더러 mapstatetoprops를 이용하면 state들을 언제든지 가져다가 쓸 수 있었기 때문에 이번 추가 프로젝트에서도 redux를 사용하기로 했다.

 

---

 

처음에는 db diagram을 통해 데이터베이스의 구조를 그려보았다.

db schema

각각의 user들이 있어야하며 그 user들은 각자 자신의 board를 가지고 있다. 그렇게 때문에 user와 board는 다대다 관계이므로 그 사이에 userboard 테이블을 추가하여 연결시켜 놓았다. 그리고 board는 list와 다대일 관계이고 list 또한 card와 다대일 관계이기 때문에 이 부분은 따로 테이블을 만들지 않았다.

 

기존에 있는 Trello의 전체적인 틀을 보면 아래와 같이 생겼다.

Trello 기본구조

 구조를 살펴보면 전체 보드(초록색)가 있고 가로로 리스트가 쭉 나열되어있으며, 맨 오른쪽에는 리스트를 추가할 수 있도록 구성되어 있다. 그 다음 각 리스트에서 세로로 카드들이 나열되어있고, 맨 아래에는 카드를 추가할 수 있도록 되어있다.

 이제 코드를 세팅해보자. 기본적인 구성은 redux이기 때문에 전체적으로 봤을 때 action, reducer, store, components 이렇게 네가지로 구별해 놓았고, components에 보드를 책임져 줄 App.js와 리스트를 책임져 줄 TrelloList.js, 그리고 카드들을 책임져 줄 TrelloCard.js를 구성하였다. 아직 기능은 구현하지 않았고 기본구조만 구성해 놓았기 때문에 아래와 같이 보여진다.

기본구조

다음 시간은 기능을 구현하는 쪽으로 가보자~~~