강의/CodeSoom (4) 썸네일형 리스트형 [4주차] 회고 4주 차에는 두 가지 과제를 진행하였다. - Todo 리스트를 Redux를 활용하여 리팩터링 하기 - 레스토랑 정보 확인 애플리케이션 구현하기 첫 번째 과제는 지난 시간에 구현한 Todo 리스트 애플리케이션에 Redux를 적용하는 것이었다. 지난 강의에서 관심사의 분리에 대한 내용이 나왔었는데, 이번에 Redux를 적용하며 관심사를 분리하여 코드를 작성해보았다. 상태를 관리하는 부분은 Reducer로 분리하고, Component도 각각 Container, Presentational로 나누어 작성하였다. 규모가 작은 애플리케이션임에도 각각의 역할이 분명하여 에러가 났을 때 디버깅하기 쉽겠다는 생각이 들었고, 규모가 큰 프로젝트에서는 유지보수를 위해 Redux와 같은 상태 관리 라이브러리를 적용하는 것이 필.. [3주차] 회고 1. Facts - 저번 주 과제였던 Todo 애플리케이션에 대해 테스트 케이스를 작성해보았다. - Testing Library를 이용하였고, BDD 작성하는 연습을 하였다. : describe - context - it 단계로 나누어 테스트 케이스를 작성하였다. - 처음엔 컴포넌트 단위의 테스트에 대해 잘 이해하지 못하여, 하위 컴포넌트에서 상위 컴포넌트의 기능을 검증하려고 했었다. - 통합 테스트를 작성해보았다. 2. Feelings - 항상 머리로 구현 사항을 생각하고 개발을 하였는데, 그것보다는 테스트 케이스를 명확하게 작성해놓은 후에 개발하는 것이 실수를 줄일 수 있겠다는 생각을 하였다. - 컴포넌트 단위의 테스트도 중요하지만, 통합 테스트를 통해 데이터를 정상적으로 전달하고 있는지 확인하는 것.. [2주차] 회고 1. Facts - 과제 2에서는 List에 key를 할당해야 했는데, react 공식 문서에서 index를 할당하는 것은 추천하지 않는다고 하여 검색 끝에 uuid라는 라이브러리를 사용하여 key를 할당했다. - babel을 업데이트하고 babel.config.js 파일을 수정하여, jsx 파일 위에 react 라이브러리를 import 하는 부분을 생략했다. - 조건에 부합하지 않을 경우, 빠르게 종료하여 더 이상 코드를 읽지 않아도 되게 하였다. if (isEmpty(todos)) { return '할 일이 없어요'; } 2. Feelings - 함수, 변수 이름을 지을 때 조금 더 신경써야겠다는 생각을 했다. - React 공식 문서를 따라서 jsx 파일에서 React를 import 하지 않는 방법.. [1주차] 회고 1. Facts - git 반영 방법과 pull request 만드는 방법에 대해 다시 한번 복습하였다. - 강의를 본 후, 과제 1, 2를 수행하였다. - 과제 2를 수행하던 중 발생한 eslint 에러에 대해 질문하였다 : 이벤트 위임을 사용하려고 했는데, eslint 에러가 발생하였다. (모든 숫자 버튼에 대해 이벤트를 등록하지 않고, p태그로 묶어서 p에 이벤트를 등록했었다.) => interactive 하지 않은 태그에는 이벤트 리스너를 등록하지 않아야 한다는 에러가 발생. => 실무에서는 이벤트 위임을 잘 사용하지 않는다는 답변을 받았다. 2. Feelings - 과제 2를 처음 받았을 때는 구현이 어렵지 않을 것이라고 생각했는데, 막상 해보니 복잡했다. 처음엔 state에 4개의 변수가 있었.. 이전 1 다음