전체 글

TIL - 20220526

오늘도 어김없이 코드숨 리액트 4주차 첫 번째 과제에 대한 피드백과 두 번째 과제를 진행했다. 첫 번째 과제에 대한 코드 리뷰를 진행하며 다음과 같은 리뷰를 받았다. Redux를 사용하기 위한 reducer코드의 일부인데, state와 action을 받아 action의 type별로 if 조건을 이용하여 원하는 action을 dispatch하는 코드였다. 여기서, 이 action의 type을 if문 없이 작성하는 것이 리뷰이자 과제였는데, 작성하면서 어떻게 작성해야 하지 막연히 떠오르지 않아 생각을 많이 했다. 그래서, 1주차에서 진행한 과제의 코드를 참고하여 다음과 같이 만들었다. 앞서 reducer 함수처럼 이번 리듀서도 state와 action을 받고, 여기서 중요한데, action의 type을 알아..

TIL - 20220525

오늘은 코드숨 리액트 첫 번째 과제에 대한 피드백과 두 번째 과제를 진행했다. 코드숨 리액트 첫 번째 과제를 리뷰하며 다음과 같은 리뷰를 받았다. TDD Cycle에서 테스트 코드 작성(RED), 테스트 코드 통과하는 코드 작성(GREEN), 리팩토링 단계 중 리팩토링할 때, 한 파일 안에 중복되는 코드들을 리팩토링하는 생각은 계속해서 하고 있었으나 파일 간 중복되는 테스트용 데이터를 리팩토링할 생각은 하지 못했다. 단일 컴포넌트 테스트부터 통합 컴포넌트 테스트에서 중복되는 테스트용 데이터들이 존재하는 경우가 있는데, 앞으로 테스트용 데이터들을 따로 저장해서 코드의 복잡도를 낮춰야겠다. 코드숨 리액트 두 번째 과제를 진행하면서 TDD Cycle에 맞게 개발을 진행하고 있는데, 사용법을 적는다는 느낌으로 ..

TIL - 20220524

오늘은 코드숨 과제를 진행하며 Presentational Components와 Container Components라는 디자인 패턴에 대해 공부했다. 표와 함께 분류해보면 다음과 같다. Presentational Components Container Components 목적 UI 관련 동작 관련 (데이터 패칭, 상태 업데이트) 리덕스를 알고 있는 지 모른다 알고 있다 데이터를 읽는 것 props로 부터 데이터를 읽는다 Redux state를 subscribe하면서 데이터를 읽는다. 데이터를 변경하는 것 prop을 콜백하면서 데이터를 변경한다. Redux action을 dispatch하면서 데이터를 변경한다. Redux를 사용함으로써 상태 관심사의 분리를 할 수 있으니 상태 관리는 Container Com..

TIL - 20220523

오늘은 코드숨 리액트 과정의 4주차로 Redux에 대해 공부했다. 두고두고 보기 위해 간단히 정리해보면 다음과 같다. Redux는 Flux Architecture의 구조를 따르는데, 데이터의 흐름이 양방향이 아닌 단방향이라는 점, action이 dispatcher를 통해 store에 전달되는 흐름이 Redux의 핵심이다. Redux를 이용하면 상태 관리를 React가 해주지 않아도 되기 때문에 React에서 App은 오로지 view만 담당할 수 있게 되어 상태 관리 코드의 변경이 있어도 App은 관심사가 달라서 수정하지 않아도 된다는 큰 장점이 있다. Redux를 제대로 사용하려면 다음의 세 가지 원칙을 지켜야 한다. 앱의 전역 상태는 store라는 하나의 객체에만 저장된다. 상태값은 불변 객체다. 상태..

TIL - 20220522

오늘은 코드숨 리액트 3주차 과제 풀이 영상을 통해 아샬님의 태도를 배우는 시간을 가졌다. 먼저, 테스트 코드를 작성할 때도 바깥에서부터 만들어나가는 것을 선호한다고 하셨는데, 이 부분은 나도 바깥에서부터 만들어나가는 것을 선호하며, 과제를 처음부터 만들어보는 시간을 가질 때도 통합 테스트를 진행하는 App 컴포넌트 테스트 코드 작성을 먼저 진행했다. 확실히, 바깥에서부터 만들어나가면 안에 있는 기능들의 테스트 코드 작성이 수월해져서 안에서 바깥으로 나아가는 것보다 바깥에서 안으로 나아가는 것의 소요 시간이 훨씬 덜 든다고 느꼈기 때문이다. 다음으로, 항상 사용법을 우선으로 하는 테스트 코드를 작성하자라는 말을 해주셨는데, 처음 테스트 코드를 작성할 때 채점과 같은 느낌의 테스트 코드를 작성해서 ~한다가..

코드숨 리액트 3주차 회고

5월 16일부터 5월 22일까지 코드숨 리액트의 3주차가 끝났다. 3주차 회고를 진행하기 전에 1,2주차에 진행했던 시작하기 전에 했던 다짐 점검은 이제 점검하지 않아도 습관이 되어 잘 행동하고 있다고 생각하기 때문에 앞으로 작성하지 않아도 될 거 같아서 작성하지 않으려 한다. 그래서 3주차부터는 기억에 남는 부분, 피드백, 앞으로는 이렇게 나아가자를 정리한다. 3주차에서 기억이 남는 부분 코드숨 3주차에서 가장 기억이 남는 부분은 역시 이번 주차에 처음으로 배웠던 TDD다. 이번 주에는 TDD를 익혀보기 위해 이미 작성된 코드에 테스트를 작성해보는 과정으로 진행했지만, TDD Cycle은 먼저 테스트를 작성하고(RED), 테스트를 통과하는 코드를 작성한 다음(GREEN), 테스트를 통과하는 코드의 기능..

TIL - 20220521

코드숨 과제에 대한 리뷰를 진행하며 다음과 같은 리뷰를 받았다. 리뷰를 읽으면서 노드라는 표현과 함께 쓴 리뷰가 이해가 안 돼서 구글링을 통해 좀 더 찾아봤다. getByRole이라는 쿼리 함수로 예를 들자면, getBy*라는 variant와 Role이라는 query로 나눌 수 있다. getBy*로 시작하는 쿼리는 조건에 일치하는 DOM 엘리먼트 하나를 선택하여 없으면 에러를 출력하고, Role은 특정 role을 가지고 있는 엘리먼트를 선택한다. toHaveTextContent는 해당 엘리먼트에 주어진 string이 존재하는지 체크하는 함수다. 따라서, 내가 작성한 코드는 매 줄마다 조건에 일치하는 DOM 엘리먼트를 찾고, toBeInTheDocument를 통해 해당 엘리멘트가 문서에 존재하는지 존재하지..

TIL - 20220520

아주 나쁜 습관 하나를 갖고 있다. 혼자서 공부할 때, 에러를 만나면 에러를 해결할 때까지 끝까지 물고 늘어지려 하지 않고, 내가 처음부터 잘 못 한 것이 있나 싶어 초기 환경설정부터 다시 시작하는 습관(초기 환경설정부터 다시 시작하는 건 어렵지 않고 편해서 계속 이런 행동을 반복하는 것 같다)이 있다. 당장 오늘 있었던 사례를 통해 이야기해보자면, 이번 주에 배운 내용을 바탕으로 TDD Cycle을 적용하여 처음부터 환경설정을 하고 테스트 코드를 만들고 있었다. 테스트 코드를 만들던 중, 다음과 같은 에러를 만났다. 그래도, 저번 TIL때 느끼고 배운 점이 있어서 링크는 들어가 본다. 링크가 완벽한 해결책을 갖고 있을 수도 있지만, 대개 공식문서의 내용이 나오기 때문에 내 상황과 완벽하게 매칭 되지 않..