Facts
-
flex-box 관련 css bug 해결
모인 웹의 경우 최대송금액, 최소송금액 조건에 맞지 않으면 금액 입력 input 아래에 에러메세지를 띄우게 되어 있었다.
새로나온 디자인을 반영해 input 을 감싸는 container 의 display 속성을 flex 로 설정, 높이도 지정했다.
또한 해당 container 안에 있는 item 들도 높이를 지정했다.
에러메세지가 없을 땐 괜찮았는데, 에러메세지 div 가 출력되자 에러메세지 div 가 전체 container 밖으로 삐져 나오는 것을 확인했다.
알고보니 flex-container flex-item 둘다 크기를 설정해서 생긴 문제임을 확인하여 해결했다.
-
송금 전 필수 입력정보 확인 후 처리
모인 웹의 경우 송금액, 국가 등을 입력하고
송금신청하기버튼을 눌러 송금 받는 사람 입력화면으로 이동해야 하는데, 이 때 계좌인증과 같은 인증이 되어있지 않으면 인증정보를 입력하는 page 로 이동시켜야 했다.기존 legacy code 는 송금받는사람 입력 화면 mount 되면 if 문 떡칠된 부분에서 조건들을 확인한 다음
react component 를 배열에 넣어놨다가 배열을 splice, unshift 등을 사용하여 다음에 보여줄 화면을 처리했다.
생각해 보니 가독성도 떨어지고, 버그가 생겼을 때 예측하기도 어려울 것 같았다.
이에 송금받는 사람 입력화면을 들어가서 판단하는 것이 아니라 들어가기 전
송금신청하기버튼을 눌렀을 때 redux-thunk 를 사용하여 조건들을 확인한 후 조건에 부합하면 즉시 url 을 변경시켜 화면을 update 하도록 변경했다.최대한 가독성을 살리고 의존성주입을 통해 함수간 의존성을 줄이기 위해 역할에 따라 util 함수로 분리하여 사용하니 기존 code 보다 훨씬 가독성이 좋아지고, 상태가 아니라
송금신청하기버튼을 클릭한 액션을 기준으로로직을 처리하여 예측가능성도 높였다.
Findings
flex-box 의 크기와 flex-item 들의 크기가 고정된 상태에서 flex-item 들의 크기의 합이 flex-box 크기보다 커지면 flex-item 들이 flex-box 를 삐져나오게 된다.
이를 방지하기 위해선 flex-box 크기만 고정하고 flex-item 들은 flex 속성등으로 설정하거나
flex-item 크기만 고정하고 flex-box 크기는 고정하지 않는 식으로 처리해야 한다.
