코드숨

TIL - 20220608

과제를 진행하다가 끝내 해결하지 못한 e2e 테스트 하나가 존재했다. e2e의 테스트 코드는 다음과 같다. 간단하다. 메인 페이지에서 /restaurants/1로 이동하면 '양천주가'와 '서울 강남구'라는 텍스트를 확인할 수 있어야 한다. 다만, 여기서 한 가지 문제가 존재했는데 식당 링크를 눌러 이동할 때는 식당 정보가 정상적으로 출력됐지만 url로 이동하면, 식당 정보가 출력되지 않는 문제가 있었다. 식당 링크를 눌렀을 때도 식당 정보가 출력되지 않았다면 원인을 쉽게 파악할 수 있었을 것 같은데, 식당 링크를 눌렀을 때는 식당 정보가 출력되니 갈피를 잡지 못했다. 결국 윤석 님께 물어봤다. 윤석 님의 지도 아래, 30분 동안 디스코드 DM으로 이 문제에 대한 상황 파악부터 해결까지 내가 갖고 있는 지..

TIL - 20220607

오늘은 코드숨 리액트 6주차 과제를 진행했다. 강의 영상을 시청하면서 지난 3주차부터 5주차까지 테스트, redux 테스트, redux 비동기 테스트를 과제를 진행하며 쉽지 않았던 기억이 존재했기에 이번 라우팅 테스트는 얼마나 어려울려나 초조한 마음으로 시청하고 있었는데 라우팅 테스트하는 법에 대해 강의로 알려주셔서 천만다행이라고 생각했다. 또한, 라우팅 테스트는 비교적 간단했다. Link 태그를 사용하고 있는, 그 위에 존재하는 컴포넌트들을 테스트할 때, react-router-dom에서 제공하는 MemorRouter로 감싸주어 @testing-library/react의 render로 진행하면 된다. 해주지 않으면, 테스트를 진행하는 console 창에서 error를 보게 된다. 다음과 같이 작성하면 ..

TIL - 20220606

오늘은 코드숨 리액트 과정의 6주차로 라우팅에 대해 공부했다. 과거 코드숨 과정을 진행하기 전 리액트를 독학으로 공부할 때, react-router-dom을 잘못 사용해서 한 페이지에서 다른 페이지로 바뀔 때 바뀐 부분만 렌더링하는 리액트의 장점을 활용하지 못하는 것 같다는 생각을 한 적이 있어 6주차의 라우팅이 기대되는 수업들 중 하나였다. 먼저 이 고민에 대한 답은 react-router-dom switch 밖으로 빼줘야하는 것이었다. 예를 들어, 우리가 사용하는 홈페이지들 중 중복해서 사용하는 헤더 부분은 switch 밖으로 빼고 여러 페이지들의 라우팅은 switch 안에 route를 이용하여 처리해주어야 하는 것이다. 또한, 위 이미지와 같이 App 컴포넌트에서 사용하는 BrowserRouter를..

TIL - 20220605

오늘은 코드숨 커뮤니티에서 마침 내가 이번 한 주 동안 열심히 공부했던 Github Commit 메시지 관련하여 재밌는 정보를 배웠다. 정말 정곡을 찔렸다. 내가 이번 한 주 동안 이미지와 같이 Feat:, Fix -, Refactor -,TEST와 같은 형식으로 작성했다. 지금 돌이켜보면 왜 이렇게 작성해야 하지?라는 의심을 전혀 하지 않았다. 실제 다른 분의 pull request도 이러한 형식으로 작성되어있었고, Github Gommit 메시지 작성법을 구글링 통해 찾아보다 앞서 말한 형식으로 제목을 짓는다는 글을 보고 의심이 순식간에 확신으로 바뀌어버렸다. 내가 하는 형식은 그저 형식일 뿐이다. 정확히 표현하면 udacity의 스타일 가이드일 뿐 이 스타일 가이드를 맹목적으로 따를 필요는 없는 것..

코드숨 리액트 5주차 회고

5월 29일부터 달이 바뀌어 6월 5일까지 코드숨 리액트 5주차가 끝났다. 이번 주는 비동기라는 주제로 과제를 진행하면서 비동기 이외에도 Github Commit 메시지 작성하기와 같이 여러 가지 배워가는 것들이 많았다. 하나하나 천천히 회고해보자. 비동기 내가 지금까지 배운 내용은 모두 동기 방식이었다. 하지만, 앞으로도 동기만을 사용하기엔 서버 API와 같이 처리 시간이 긴 작업을 하게 되면 사용자는 아무것도 못하게 된다. 그렇기에 서버 API를 요청에 대한 응답을 기다리면서 다른 행동을 할 수 있는 것이 비동기이자 비동기의 핵심 장점이다. 이 비동기와 함께 redux를 사용하고 이 사용하는 것을 테스트 코드를 작성하는 과정이 쉽지 않았었는데 그래도 하나하나 차근차근해보자라는 마인드로 나아가니 해낼 ..

TIL - 20220604

오늘은 코드숨 리액트 5주차 과제 풀이 영상을 보며 풀이 과정과 어떤 결정을 하는지 자세히 지켜보며 복습하는 시간을 가졌다. 먼저, 가장 인상 깊게 느낀 부분은 TDD Cycle은 지키면서 파일간 이동이 자유롭다는 점이다. 나는 과제를 진행하면서 reducer부터 시작하면 reducer 테스트 코드 작성 - reducer 코드 작성 - reducer 리팩토링 다음으로 action 테스트 코드 작성 - action 코드 작성 - action 리팩토링으로 이어지면서 reducer 테스트 코드를 작성할 때는 action 테스트 코드를 작성하지 않는 약간 경직된 개발 방식으로 진행했다. 하지만 아샬님은 reducer 테스트 코드 작성 - action 테스트 코드 작성 - action 코드 작성 - reducer..

TIL - 20220603

오늘은 코드숨 과제를 진행하며 생겼던 헷갈리는 부분들을 윤석님과 함께 시원하게 해소하는 시간을 가졌다. 먼저, 테스트 대상을 어떻게 정하느냐에 대한 부분이다. 예를 들어, reducer를 테스트한다고 가정하자. BDD를 사용한다면 테스트 대상은 당연히 reducer가 될 것이다. 그다음 reducer로 처리할 액션들을 테스트 대상으로 규정해야 할지 아니면 크게 reducer만 테스트 대상으로 보고 액션들은 reducer의 행동으로 볼 것인지 이 부분이 헷갈리는 점이었는데, 내가 내린 결론은 보는 사람의 관점에 따라 달라지며, 나는 전자를 선택했다. 전자를 선택한 이유는 테스트를 진행할 액션이 한두 가지가 아닌 여러 가지기 때문에 전체 reducer의 행동으로 보며 작성한 테스트 코드보다 액션들을 테스트 ..

TIL - 20220602

오늘은 코드숨 과제 리뷰와 함께 기존에 작성한 코드를 수정하는 시간을 가졌다. 기억에 남는 리뷰 중 다음과 같은 리뷰를 받았는데, 리뷰를 보자마자 바로 아!가 입에서 나왔다. 처음 코드를 작성할 때 category 버튼을 클릭하면 changeCategoryId를 호출하면서 (V)표시가 추가되기 때문에 아무 문제가 없다고 생각하며 위와 같은 테스트 코드를 작성했는데, 사실 " 'category' 버튼을 클릭하면 '(V)' 표시가 추가된다"라는 텍스트에서는 해당 테스트에서 fireEvent.click과 같은 클릭 이벤트에 대한 내용을 다루는 코드가 없었다. 그래서 올바른 테스트 코드를 작성한다면 테스트 설명을 바꾸지 않은 채로 fireEvent.click과 같은 클릭 이벤트를 추가하거나 테스트 설명을 '"c..