2019. 11. 22. 00:18ㆍ카테고리 없음
trello라는 todo 어플리케이션의 클론 코딩 프로젝트를 진행하였고 아래의 Stack을 사용하였다.
Front : React, Reactstrap
Back : node.js, express, mysql
Deploy : S3, EC2, RDS
※배포 주소: http://trello-clone.s3-website.ap-northeast-2.amazonaws.com/
코드스테이츠에서 진행한 프로젝트에서 계속 백 부분을 맡았었기 때문에 크게 어려움은 없었다.
다만 다시 한번 서버를 구현 하면서 RestAPI에 대해서 잘못 이해하고 있던 부분을 정정할 수 있었고 Token을 어디에 저장해야 제일 안전한지에 대한 의문도 어느정도 해소할 수 있었다.
백 부분만 계속 맡아왔기 때문에 프론트에 대한 걱정이 어느정도 있었다. React를 사용하여 프론트를 구현하였는데 page와 component 구분울 어떻게 해줄 것인지와 css를 이용하여 어떻게 동작을 만드어 낼지에 대한 고민을 많이 하였다.
첫번째 고민은 큰 틀로서 존재하는 것은 page로 만들고 동작이 이루어 지는 부분들은 component로 만들자라고 정하여 생각보다 쉽게 해결하였다.
두번째 고민이 프로젝트를 하면서 가장 고생을 많이한 부분이었다.
수정을 할때 어떤방식으로 수정을 해야 할지 추가는 어떻게 해야할지 단지 수정,추가,삭제는 쉽지만 css를 이용하여 동작을 구현하는 부분에선 많은 생각이 필요하였다. 이러한 동작을 어떻게 구현을 해야하는지 그리고 사용자가 직관적으로 내가 만들어둔 동작을 이해할 수 있을지에 대한 고민도 많이 하였다.
Board
trello에서 처럼 추가 버튼은 따로 만들어 주었지만 수정과 삭제를 어떻게 구현을 할지에 대한 고민이 생겼다. trello에서는 수정을 보드를 클릭해서 들어갔을때 할 수 있게 해두었고 삭제 기능은 아예 다름 페이지로 넘어가서 그곳에서 Board, container, card의 삭제가 가능하였다.
처음엔 보드 이름을 누르면 input 창으로 변하게 하려고 하였지만 Link가 걸려있는 상태라 계속 다른 페이지로 이동을 하여 onclick을 걸어 줄 수가 없었다. (완성한 이후에 든 해결책은 z-index를 사용하였다면 가능하지 않았을까 싶다.)
그래서 나는 한번에 만들어 주기로 결정하였고 고민을 한 결과 생성된 보드 밑에 수정,삭제 버튼을 추가해 주었다.
버튼의 위치와 색에 대해서도 고민을 하였다.
버튼을 아래쪽으로 둔 이유는 옆쪽으로 두었을땐 Modify 글자를 새로로 세워야 했고 일기가 어려웠기 때문에 아래로 내리기로 하였다.
버튼의 색은 처음엔 파란색으로 지정을 했었는데 그렇게 되니 경계가 없어지게 되었고 버튼을 구분하기가 어려워 옅은 회색으로 바꾸어 주었다.
Container
컨테이너의 추가도 trello로 처럼 따로 버튼을 만들어 주어 클릭을 하면 input 박스로 변하게되어 추가를 하는 방식을 그대로 사용하였고
원래 수정 방식은 input박스로 변환 시켜서 수정을 하는 방식이지만 드롭다운 박스를 만들어서 수정/삭제가 가능하도록 해주었다.
input 박스로 변환 해주기 위해 컨테이너 이름에 state값으로 boolean값을 지정해두고 클릭하면 바뀌도록 해주었는데 모든 컨테이너들이 하나의 state값을 공유하고 있기 때문에 하나만 클릭해도 전부가 바뀌게 되어 버렸다.
컨테이너 이름부분만 컴포넌트로 만들어 각각의 state값을 가지도록 만들어 주면 되지 않을까 했지만 실시간으로 변경이 되지 않았다. 프로젝트의 남은 시간이 부족해서 우선 드랍다운 방식을 채택하기로 하였다.
컨테이너를 처음엔 버튼으로 만들어 주었다. 버튼을 클릭하면 수정이 가능하도록 하기 위함이였다. 하지만 컨테이너는 카드를 포함하기 때문에 버튼의 수가 많아졌고 깔끔해보이지 않았다. 그래서 bootstrap의 카드형식을 사용하여 좀 더 깔끔하고 직관적으로 보일 수 있도록 만들었다.
그리고 하나의 컨테이너가 하나의 열을 차지하도록 만들어 주어야 해서 컨테이너 마다 height: 100vh 만들어 주었지다. 하지만 컨테이너를 계속 생성했을 때 가로축을 넘어가니 아래 쪽으로 생성이 되어버렸다. overflow를 가로축만 설정을 해주었지만 같은 현상이 발생 하였다. 이후 수정이 필요한 부분이다.
Card
카드의 추가는 inputbox와 버튼으로 수정은 textarea로 만들어 클릭을 했을때 수정이 가능하도록 해주었고 삭제는 버튼을 만들어 주었다.
카드는 컨테이너마다 이동이 가능해야 했는데 trello에서는 drop and drag로 구현이 되어있었다. react dnd 라이브러리를 사용하여 만들어 보려고 했으나 이 기능을 적용하는데 너무 오랜 시간이 걸릴 것 같아 다른 방법을 생각하게 되었다.
먼저 떠오른 방법은 각 카드마다 드랍다운을 사용해 컨테이너의 목록을 가지도록 하고 목록에서 특정 컨테이너를 클릭하면 해당 컨테이너로 이동시켜 주려고 했다. 하지만 이 방법을 사용하려면 데이터를 가져와서 뿌려줄때 for문을 3중으로 사용해야 했고 또 이미 컨테이너에 드랍다운 버튼이 있기때문에 미관상 깔끔해 보이지 않았다.
그래서 다른 방법을 생각했고 move 버튼을 클릭하면 컨테이너들 마다 이모지가 나타나고 이동하고 싶은 컨테이너의 이모지를 클릭하면 해당 컨테이너로 이동하도록 만들어 주었다.
alert
회원가입, 로그인 과 보드, 컨테이너, 카드 의 수정,삭제,추가 등의 행동을 할 때 마다 동작이 성공적으로 반영되었다는 것을 알리기 위해 화면 가운데 상단에 alert 창을 띄우게 만들어 두었다. 사용자가 자신이 명련한 행동이 잘 수행되었는지 확인 시켜주도록 하기 위해서 였다. 그런데 배포를 하고 테스트를 하는 도중 매번 계속 alert 창이 뜨니 귀찮기도하고 화면이 지저분한 느낌이 들었다.
그래서 왼쪽 상단에 부드럽게 나왔다가 시간이 지나면 스스로 사라지는 alert창이 뜨도록 만들어 볼 예정이었다. 하지만 한 편으론 명령이 성공하면 그 행동이 적용 되어서 화면에 나타나는 것 자체로 성공 여부를 알 수 있는데 굳이 alert창을 띄울 필요가 있을까란 생각이 들기도한다. 이 부분에 대해선 좀 더 고민이 필요할 것 같다.
프로젝트 후기
이 프로젝트를 진행 하면서 node.js, react, express 등 내가 배운 스택들에 대해서 좀 더 깊게 이해할 수 있는 시간을 가질수 있었다.
특히 css를 사용하여 어떻게 이런 동작을 만들어 낼지 그리고 어떻게 해야 사용자가 버튼들을 보고 직관적으로 사용을 할 수 있을지 그리고 어떻게 해야 포인트를 주면서 화면을 깔끔하게 구성할 수 있을지에 대해서 많은 생각을 할 수 있는 시간이였다.
아직 수정해야 할 부분들이 있는 프로젝트이기 때문에 계속해서 수정해 나가면서 dnd 같은 기능들도 추가하여 좀 더 완성도를 높여볼 계획이다.