오늘은 기본기능(추가, 수정, 삭제) 중 리스트와 카드를 추가할 수 있는 기능을 구현하였다. 지금의 기능은 백엔드의 서버와 연결되어있는 것이 아닌 오로지 react + redux만을 이용한 프론트적인 기능이다.
전반적인 ui는 materila ui를 사용하였다. material ui는 구글에서 만든 모바일과 데스크탑 그리고 그 외 다양한 디바이스들을 아우르는 하나의 일관된 디자인 가이드라인인데 코드를 짜는 중에 막히는 부분이 있으면 참고하던 유투버가 이 가이드라인을 가져다가 쓰는 것을 보고 나도 사용하게 되었다. 지금 쓰고 있는데 의외로 편하다. Icon, Button, Card 등 여러가지의 기능들을 가져다가 쓸 수 있으며 디자인적으로도 깔끔하게 되어있어 나중에도 종종 사용할 듯하다.
그리고 css적인 부분도 유투버의 스타일을 따라하였다. 이 부분은 진짜 재능이 있지 않는 한 이쁘게 꾸미는 건 힘든 부분 같다.....ㅠㅠ 지금은 추가하는 기능만 구현한 상태인데 이것만해도 어후.....중간중간 에러가 있어(대부분 오타에러.......) 고생 좀 했다. 그래도 리덕스를 한번 사용했었어서 그런지 일반 react를 사용하던 것보다는 수월하여 할만한 듯 하다.
가로로는 리스트를 추가 할 수 있도록 하였고, 각 리스트별로 세로로 카드를 추가할 수 있도록 하였다.
(한번 더 말하지만 css나 ui는 가져오거나 참고하였다는 점 잊지 말도록!!!)
+카드 추가 를 하면 위와 같이 내용을 입력할 수 있도록 input창이 뜨고 밑에 카드 추가라는 상자가 추가되어 저 상자를 누르면 카드가 추가된다. 이와 마찬가지로 리스트도 +리스트 추가 를 하면 같은 원리로 동작하며 리스트가 추가된다.
내일은 수정 및 삭제 기능을 추가하고 요구사항에 (적절한 client side routing 적용) 이러한 내용이 있는데 이건 가능할 지........
'TIL' 카테고리의 다른 글
| 휴식..... (0) | 2019.12.22 |
|---|---|
| Trello 회원가입, 로그인, 로그아웃 (0) | 2019.12.21 |
| Trello 서버구상 (0) | 2019.12.20 |
| Trello 기본구조(React + Redux) (0) | 2019.12.18 |
| Trello에 대해서 (0) | 2019.12.17 |
