Facts
- 페이먼츠 미션의 모든 정적 페이지를 만들었다.(4시간)
- 카드 추가 페이지의 기능을 구현했다.(4시간)
Feelings & Findings
페이먼츠 미션의 모든 정적 페이지를 만들었다.
정적 페이지를 만들면서 문제점이 발견되었다.
- 카드 소유자 이름의 최대 길이는 30자인데 10자만 입력해도 카드를 넘어간다.
- onClick이나 value와 같은 속성을 만들어 둔 공통 컴포넌트에 넘길 때, 공통 컴포넌트에서는 props를 모두 styles로 styled-components에 넘기고 있기 때문에 속성을 받기 위해서는 하나하나 빼줘야 한다.
카드 소유자 이름의 최대 길이를 해결하기 위해 width를 정해주기로 했고,
overflow: hidden;
white-space: nowrap;위 속성을 통해 해결하려고 했다. 하지만 width를 넘어가면 넘어간 글자의 모양이 잘리게 되었다. ㅁ에서 width가 넘치면 ㅁ의 반만 보이는 것이다. 그래서 간단한 해결 방법으로 난 text-overflow: ellipsis;를 넣어서 ...으로 보이게 하는 것을 원했다. 하지만 카드에 ...이 보이는 것이 이상하기도 하고, 방법을 찾아보자고 해서 찾아봤지만 원하는 결과를 얻지 못했다. js로 텍스트의 길이만큼 자를까도 생각을 해봤지만, 글자의 크기가 모두 달라서 10자로 제한을 해두면 영어는 너무 짧고, 한글은 너무 길었다. 그래서 결국 text-overflow: ellipsis;를 사용하기로 했다. 분명 해결 방법이 있을텐데 찾지 못해서 살짝 아쉬웠다. 하지만 디자인 상 문제될 것은 없다고 생각하기에 만족한다.
그리고 html의 속성을 어떻게 넘겨줄지에 대해 토론을 하다가 결국 예전에 내가 주장했던 방법으로 바꾸기로 결정했다. 주장했던 방법은 컴포넌트에 props를 전달할 때, style 요소는 styles prop으로 전달하고, 나머지는 그냥 전달해서 props를 받는 컴포넌트에서는 styles={styles} {...props}로 받아서 사용하는 것이다.
이렇게 했을 때의 장점은 style은 모두 styled-components로 넘어가고, 나머지 속성들이 적용되기 때문에 명확해진다. 사실 styles로 받지 않고 지금 상태를 유지하면서 attr같은 props를 받아서 onClick과 같은 속성을 받아도 되긴 하지만 styles로 받는 것이 더 친숙하기도 하고, 명확하다는 생각이 들었다.
그래서 대공사를 하고, 적용되는지 체크를 한 뒤 정적 페이지를 만들기 시작했다. 정적 페이지 만드는 것은 정말 재미있었다. 지금까지 열심히 만든 컴포넌트 부품들을 조립해서 페이지를 만들었고, 한 번에 조립을 성공했을 때 희열을 느꼈다. 컴포넌트를 분리해서 재사용하는 이유를 알게 되었다.
카드 추가 페이지의 기능을 구현했다.
카드 추가 페이지 기능 구현 사항은 다음과 같다.
- 카드 추가 페이지의 input을 입력할 수 있다.
- input을 입력하면 카드의 상태가 실시간으로 반영된다.(앞의 8자리는 숫자 그대로, 뒤의 8자리는 마스킹이 들어간다.)
- 카드 번호를 입력할 때, 4자를 입력하면 뒤의 input으로 자동 focus가 된다.(비밀번호와 만료일도 자동 focus)
- 카드 번호 8자를 입력하면 카드 선택 모달이 보여진다.
- 모든 입력이 완료되면 다음 버튼이 보여진다.
대충 이런 기능을 만들어야 했다. 기능 구현 자체는 지겹도록 했던 input과 form을 다루는 것이고, 쉬울 것이라고 생각을 했다. 하지만 카드 번호를 입력할 때 자동 focus와 마스킹이 정말 어려웠다.
카드 컴포넌트에서 카드 번호는 한 개의 div로 되어 있었고, 한 개의 div에서 분기 처리로 4개의 번호를 각각 처리를 하려고 해서 정말 어려웠다. 결국 발상의 전환을 해서 한 개의 div에서 하지 않고 4개의 div로 나누어서 받은 카드 번호를 4개씩 나눠서 띄워주는 것으로 구현을 했다.
이 과정이 생각보다 오래 걸렸고, 알고리즘을 생각하는데 시간이 걸렸던 것 같다. 어림 잡아 1시간 30분 정도 한 것 같다.
자동 focus는 ref를 사용하면 쉽게 할 수 있을 것이라고 생각했는데, 현재 사용 중인 input은 styled-components가 적용된 공통 컴포넌트 input이었다. 아무리 해봐도 ref가 null로만 나오고 input을 잡지 못했다. 이유를 검색해보니 ref라는 속성은 props로 넘어가지 않는다고 한다. 흠.. 그렇게 따지면 onClick과 같은 속성도 넘어가면 안되는 것 아닌가? 라는 생각이 들었지만 일단은 ref 대신 innerRef라는 props를 넘기고, input 컴포넌트에서는 ref={innerRef}로 받아서 문제를 해결했다. 이 부분은 아직 완전한 해결책이 아니라고 생각해서 조금 더 알아볼 예정이다.
위의 어려움을 제외하고는 딱히 어려웠던 점이 없었다. 그래서 현재는 카드 번호 8자를 입력하면 모달이 뜨는 것과 모든 입력이 완료되면 다음 버튼이 보여지는 것 외에는 모두 구현을 한 상태이다. 물론 상수화와 리팩토링을 거치지 않아서 코드는 지저분하다..
내일은 페어 프로그래밍을 하지 않기로 해서 학습 로그도 작성하고 모의 면접 공부도 하면서 하브루타 스터디, css 스터디를 참여할 예정이다. 살짝 지친 것 같을 때 쉬는 타이밍이 있어서 다행이다.
Plans
- 학습 로그 작성하기
- 하브루타 스터디 참여하기
- css 스터디 참여하기
- 모의 면접 대비 공부하기
