Facts
- 로또 구매 관련 css를 구현했다.(3시간 30분)
- 로또 구매 관련 기능을 구현했다.(1시간)
Feeings & Findings
로또 구매 관련 css를 구현했다.
개발 공부를 시작하고부터 지금까지 css 외에 다른 것을 사용해 본 적이 없다. css 전 처리기를 사용해보지 않은 것이다. 하지만 오늘은 페어가 scss를 사용해보기도 했고, 새로운 것도 배우고 싶어서 scss를 배워서 사용했다.
scss는 css 전 처리기이다. sass-loader에 의해 css로 변환된다. 그래서 scss는 css의 표준을 따른다. 그래서 배웠다는 느낌보다는 css인데 조금 간편하다는 느낌을 받았다. 자식 class를 찾을 때, .부모 class .자식 class로 찾지 않고, 중괄호를 이용할 수 있다는 점이 매력적이었다. 살짝 아쉬운 점은 scss를 사용하기 전에 sass, scss가 있다는 것을 알고 있었지만 어떤 차이점이 있는지 몰랐다. 그냥 페어가 scss를 사용해본 적이 있다고 해서 sass를 고려해 보지도 않고 scss를 사용했다.
검색해보니 sass와 scss가 따로 나뉘어져 있는 것이 아니었다. sass의 syntax였다. scss는 css와 비슷하게 {}, ;를 사용하지만 sass는 사용하지 않는다. sass는 항상 보던 {}, ;가 없어서 구분하기도 힘들 것 같고, 굳이 써야 하는 이유를 모르겠다. 우선은 scss로 구현을 해야겠다.
리액트에서 scss를 사용하게 된 이유는 컴포넌트 기반이기 때문에 각 컴포넌트의 파일 이름과 동일한 css 파일을 만들어서 관리하면 편할 것 같았기 때문이다. 컴포넌트 최상단의 요소를 기준으로 잡고 시작하기 때문에 css가 겹쳐서 오류가 발생할 일도 없다.
로또 구매 관련 기능을 구현했다.
바닐라 js에서는 로또 구매 -> state 변경 -> 로또 list template 구성 -> 랜더링의 과정을 거쳐야 했다. 하지만 리액트는 로또 구매 -> state 변경까지만 하면 알아서 넘겨준 props를 통해 화면 랜더링까지 해준다. 게다가 바뀐 부분만 랜더링을 하기 때문에 성능에도 더 좋다. 리액트의 편리함을 알 수 있었다. 이것이 리액트가 자랑하는 특징 중 선언형인 것 같다는 느낌이 팍팍 들었다.
기능 구현은 이미 한번 했던 것이라서 오래 걸리지 않았다. 총 1시간 정도 걸린 것 같다. 기능 구현을 해놓고 마음에 들지 않는 css를 만지는데 시간을 많이 썼다. 스크롤바를 커스터마이징하기도 하고, 어떤 색이 잘 어울리는지에 대해 고민도 하고, 윈도우에서는 로또 티켓 이모지가 이상하게 나와서 그것에 대해서도 고민을 했다. 기능 구현 관련해서는 여기까지가 끝이다.
마지막에 PureComponent를 사용해보려고 했다. PureComponent는 Component에서 shouldComponentUpdate만 추가된 것이다. 즉, state와 props를 이전 상태와 비교해서 변경되었는지 검사를 하고, 변경되었을 때만 랜더링을 실행한다. 이때, 얕은 비교를 하기 때문에 불변성 유지가 굉장히 중요하다. 하지만 지금 만들고 있는 로또 앱에서는 필요하지 않은 것 같아서 시도만 하고 아직 사용하지는 않았다.
10시부터 19시까지 페어 프로그래밍을 하는 것을 지키기 위해 노력하고 있다. 페어 프로그래밍 시간이 적어져서 진도가 느릴 수도 있겠다는 걱정을 했지만 오히려 개인 공부 시간과 코드 구조를 파악할 시간이 늘어나서 더 효율적인 것 같다. 아직 2일 밖에 지나지 않아서 섣불리 단정 지을 수는 없지만 이번에 효과가 있다면 다음 페어 프로그래밍을 할 때도 적용해볼 것 같다.
Plans
- 로또 미션 마무리하기
