코드숨_React_6주차_주간회고

Facts (사실, 객관)

• 코드숨 6주차 강의 듣기 - 라우팅
• 과제 1: 레스토랑 상세 페이지 구현하기

 

Feelings (느낌, 주관)

MemoryRouter를 활용하여 테스트를 작성하는 중에 단순히 코드를 따라 치는 모습을 자각했다. 내가 지금 쓰고 있는 코드가 어떤 의미가 있는 건지, 알고는 있는 건지 먼저 생각하자고 다짐했다.

 

비교적 이른 시점에 과제의 기능 구현을 모두 끝마쳤다고 생각했지만 e2e테스트를 통과하지 못했다. 처음에는 식당 목록을 클릭할 때 이벤트로서 fetch 하도록 했는데, 생각해보니 주소를 직접 입력하는 경우에는 당연하게도 데이터를 불러오지 않았다. 바보 같은 실수이긴 했지만 테스트의 필요성을 느끼게 되는 경험이었다.

 

주소창에 id값을 직접 입력하는 경우에 페이지를 불러오지 못하는 문제가 있었다. Not Found 페이지도 불러오지 못한다는 사실이 이상하다고 느꼈다. 처음에는 route의 순서가 잘못된 줄 알았는데 알고보니 path에 하위 경로가 포함된 모든 경우에 페이지를 제대로 매칭 시켜주지 않았다. 시행착오 끝에 index.html의 스크립트 경로 앞에 슬래시를 포함하도록 수정해주었더니 문제가 해결되었다. 다른 해결 방법이 있었을지 모르겠지만, 덕분에 절대 및 상대 경로의 개념에 대해 알게 되었다.

 

트레이너님의 권유로 테스트 코드 작성 시에 given2를 사용해 보았다. 아직 사용하기에 능숙하지 않은 도구임에도 편리했다.

 

이번 과제에서는 컨테이너 컴포넌트에 상위 컴포넌트가 추가되었다. 이 컴포넌트들은 각각의 라우트와 연결되어 컨테이너 컴포넌트를 리턴한다. 과제를 진행하면서는 전체 로직을 명확하게 느끼지 못했는데, 과제 풀이 영상을 보고 각각이 어떻게 분리되어 각자의 역할을 갖게 되는지 알게 되었다.

 

과제 풀이 코드와 내 코드에 상이한 부분이 많아 보인다.

 

Findings (배운 점)

• 과제 템플릿으로부터 redux-mock-store를 사용한 비동기 액션 생성자 및 미들웨어 테스트를 접했다.
• given2 사용하는 방법을 조금이나마 알게 되었다.
• 절대/상대 경로에 대해 배웠다. 관련해서 더 정리해야 할 내용이 남아 있다.

 

Things to do (해야 할 것들)

• 관심사 분리에 더 신경을 써야 한다.
• 미뤄왔던 알고리즘 공부를 해야 한다.
• 과제 풀이 영상의 코드를 반복하여 작성해보자.
• 코어 자바스크립트 읽기

 

Affirmation(자기 선언)

• 쓸데없이 유튜브보는 시간을 줄이고 그 시간에 운동을 하거나 컨디션 관리에 도움 되는 무언가를 해보자.