Facts
- 페이먼츠 미션 중 공통 컴포넌트인 카드, 모달, 버튼, 원을 구현했다.(8시간)
Feelings & Findings
페이먼츠 미션 중 공통 컴포넌트인 카드, 모달, 버튼, 원을 구현했다.
수업이 없는 날이어서 진도를 많이 나갈 수 있을 것이라고 예상했었다. 어제 다 하지 못한 기능 구현 목록 작성으로 시작을 했고, 곧바로 카드 만들기를 시작했다.
카드를 만들 때 고민했던 점은 아래와 같았다.
- 어느 정도로 재사용이 가능해야 하는가?
- styled-components와 emotion 중 어떤 라이브러리를 사용할 것인가?
styled-components와 emotion에 대해 찾아봤고, 서로 문법도 비슷하고 느낌도 비슷하지만 emotion이 더 가볍다는 결론이 나왔고, 우리의 앱은 크지 않기 때문에 emotion을 사용해봐도 좋을 것 같다는 생각을 했다. 그래서 emotion을 사용하기로 했다.
emotion을 잘 사용하고 있었는데, emotion 스타일이 적용된 컴포넌트 안에 다른 요소를 추가하게 되면 cannot convert a symbol value to a string에러가 발생하면서 동작하지 않았다. 구글링을 해봐도 명쾌한 해답을 찾지 못했고, 왜 오류가 나오는지에 대한 이유를 아예 찾지 못했다. 그래서 바벨 문제일 수도 있겠다는 생각을 하면서 emotion 대신 styled-components를 사용해보기로 했다. styled-components에서는 아무런 오류 없이 정상 동작했다. 그래서 현재 styled-components를 사용하게 되었다.
순조롭게 이어나가던 도중 한 가지 의문점이 생겼다. 어느 정도로 재사용을 해야 하는가에 대한 것이었다. 처음에 생각했던 것은 style과 관련된 모든 props를 받아서 style만 지정하면 어디에서나 사용할 수 있도록 컴포넌트를 만드는 것이었다. 하지만 그렇게 되면 props로 받아야 할 것들이 너무 많아지기도 하고, 카드 뿐만 아니라 카드 안에 있는 IC 칩이나 소유자 이름, 만료일 등 여러 가지를 모두 입력받아야 했다. 이것을 모두 입력받기 보다는 현재 App에서 쓰이는 카드를 만드는 것이 좋겠다는 생각을 했고, props로는 size와 color, contents만 받아서 사용하도록 구현을 했다.
즉, size는 현재 중간 사이즈와 큰 사이즈가 있다. 그래서 피그마로 보는 사이즈와 동일하게 우선 만들어두었고, 개발을 하면서 점점 사이즈를 조정하려고 한다. 그리고 이것이 미션의 의도일 것이라는 생각을 모두가 했다. 왜냐하면 코치가 피그마의 디자인을 손상하지 않고, 그대로 하는 것에 목표를 두라고 했기 때문이다. 충분히 현재의 App에서는 재사용이 가능하다고 생각했고, 만족한다.
이 과정이 순탄하지만은 않았다. 여러 가지의 의견이 나왔었고, 각종 상황을 종합해서 최선의 결론을 도출해냈다. 모두가 동의했던 것은 어느 곳에나 사용되는 컴포넌트를 만들면 좋겠지만 우리의 능력은 부족하고, 그렇게 만드는 것이 베스트가 아닐 수도 있겠다는 것이었다. 리액트는 선언형 라이브러리이기 때문에 컴포넌트를 만들 때 props로 일일이 style을 지정하는 것이 좋지 않다는 생각이 들었기 때문이다.
카드를 구현하는데 5시간 정도가 걸렸다. 카드가 제일 쉬울 줄 알고 시작했는데, 고려해야 할 사항이 많았고, 토론을 많이 해서 시간이 오래 걸렸다. 그 뒤의 컴포넌트는 정말 쉬워서 금방 할 수 있었다.
한 가지 고민 사항은 재사용을 위해 어느 정도까지 고려해야되는지 모르겠다. 현재는 버튼, 모달, 원 컴포넌트는 기본 스타일이 있고, 개발자가 원하면 원하는 스타일을 할당해서 사용할 수 있도록 구현을 한 상태이다. 하지만 props로 넘겨주기 때문에 예상하지 못한 에러가 발생할 수도 있다고 생각하는데, 이것을 잘못 사용해서 에러가 발생했을 때, 개발자의 잘못으로 두어야 할지, 에러 처리를 모두 해야하는지 고민이 된다.
이번에 컴포넌트를 만들면서 스토리북의 유용성에 대해 알게 되었다. 각종 content를 입력해볼 수 있고, 색상도 바꿔볼 수 있다. 정말 많은 컨트롤 기능이 있다. 게다가 핫 로드까지 되기 때문에 실시간으로 변경 사항을 알 수 있다. 나중에는 만약 카드 추가 완료 페이지를 구현한다고 할 때, 카드 추가 완료를 계속 들어가서 확인해야 하는 수고도 덜 수 있다.
비록 진도는 많이 나가지 못했지만 정말 재미있었고, 많은 것을 배울 수 있었던 하루였다.
Plans
- 페이먼츠 미션 인풋 구현하기(시간 되면 기능까지!)
