코드숨_React _4주차_주간회고

Facts (사실, 객관)

• 코드숨 4주차 강의 듣기
• 과제1: To-do 리스트 Redux를 사용하여 리팩터링 하기
• 과제2: 레스토랑 정보 확인 및 예약 시스템 구축하기(TDD로 기능 구현)
• Refactor: 투두리스트 with 바닐라 자바스크립트

Feelings (느낌, 주관)

커리큘럼 구성이 좋다고 느끼고 있다. 리덕스를 활용하여 실습해보니 상태관리에 많은 이점이 있었다. 관심사도 더 잘게 분리되어, 코드의 가독성도 좋아졌다. 3주차에 이어 지금까지 계속 분리될 수 있다는 것이 놀라웠다.

 

지난 주 작성한 과제에 리덕스를 적용했다. 컴포넌트를 presentational과 container로 분리해주면서 테스트도 더 늘어났다. 리듀서 테스트에서 이벤트 발생에 따라 액션이 생성되고 상태가 변경되는지 테스트하는 것과,  presentational 컴포넌트에서 이벤트의 호출 여부를 테스트하는 것, 이 2가지에 대한 혼동이 있었다. 트레이너님께 이 중에 하나만 해줘도 되는 것인지 여쭤 봤는데, 그 둘은 서로 다른 부분이라는 답변을 해주셨다. 이벤트에서 시작되고 fireEvent를 활용하기 때문에 그 둘이 비슷하다고 착각했었는데 테스트 대상에 대한 진지한 고민이 없었기 때문에 생겨난 착각이었다. 무엇을 테스트하는 것인지 깊게 고민해 보아야 겠다.

 

TDD를 실천하는 것은 어려웠다. 어디서부터 시작해야 할지 몰라서 오랫동안 헤맸다. 무작정 흉내라도 낼 생각으로 코드를 작성해서 테스트 커버리지를 모두 채웠다. 하지만 내가 생각해도 순서가 엉망이었다. 지우고 처음부터 다시 시작했다. TDD 뿐만 아니라 리덕스도 익숙하지 않은터라 더욱 쉽지 않았다. 결국 다시 완성은 했지만 많은 피드백을 받을 수 밖에 없었다. 특히 테스트를 작성할 때, 우선 HTML 마크업으로 형태를 완성시키는 것부터 해보라는 말씀이 기억에 남는다. 숙련도를 높이기 위해 반복해야 겠다. 

 

예전에 바닐라 자바스크립트로 작성한 투두리스트를 다시 꺼내 보았다. 자바스크립트를 공부할 겸 여기저기 손도 보고 여러 기능을 추가했다. 코드숨 과정에서 여태까지 배운 것 만으로도 고칠 데가 많아 보였다. 우선 let을 제거하는 것부터 시작했다. 그리고 중복되는 코드를 최대한 제거했다. 기존에 제공하던 날씨정보와 함께 AQI지수까지 제공하도록 했다. 다들 만들어 본다는 슬라이더도 구현해 보았다. 단순히 이동하는 슬라이더를 구현하는 것은 어렵지 않았다. 하지만 무한 슬라이딩을 매끄럽게 구현하는 것은 쉽지 않았다. 약간의 트릭을 사용해봤지만 특정 상황에선 기대만큼 매끄럽지 못했다. 그 밖에도 탭 메뉴를 추가하고 전반적인 디자인을 수정했다. 나중에 모달이나 리스트의 순서를 바꾸기 위한 드래그앤드랍 기능도 추가해 볼 계획이다.

 

Findings (배운 점)

• 기본 HMTL 마크업으로 완성된 형태를  만드는 것부터 TDD를 시작하면 좋다. 그리고 나서 관심사를 분리하며 리펙토링한다.
• 테스트 시나리오는 코드로 표현하기 보다는 풀어서 설명하는 것이 좋다. 각 부분은 하나의 책임을 갖는다.
• 테스트 시나리오가 2개 이상일 때는 mock function 들을 clear 해주는게 안전하다. beforeEach를 활용할 수 있다.
• 테스트 코드는 컴포넌트의 설명서와 같다. 컴포넌트에 들어가는 인터페이스는 모두 명시해주는 것이 좋다.
• 의도를 드러낸 마크업, 변수, 컴포넌트 이름을 사용하자.

 

Things to do (해야할 것들)

• TDD와 리덕스에 익숙해지기 위한 코드 반복 작성해보기
• 피드백 받은 부분에 대해 생각하고 정리해보기
• 자바스크립트 코딩의 기술 읽기

 

Affirmation(자기 선언)

• 익숙해지기 위해 반복 학습한다.
• 반복 학습하기 위해 체력을 관리한다.