TIL

TIL - 20220530

오늘은 코드숨 리액트 과정의 5주차로 비동기에 대해 공부했다. 3주차부터 시작해서 4,5주차 난이도가 점차 올라간다고 느껴져서 이동하는 버스에서 영상을 먼저 한 번 보고 공부하면서 한 번 더 보며 총 2번 반복했다. 과거부터 비동기에 대한 키워드를 공부할 때 나는 항상 동기를 동시라고 생각했다. 그러면 비동기는 동시가 아니라는 의미로 비동기는 요청을 하고 나서 응답을 동시에 받는 게 아닌 요청에 대한 응답이 올 때까지 다른 일을 수행하면서 기다린다고 생각하니까 좀 더 비동기라는 개념이 더 잘 이해돼서 오랫동안 잊지 않고 기억할 수 있었다. 비동기라는 개념을 이용하여 지금까지 Redux는 동기 처리만 했었는데 이번 주부터 비동기를 이용하여 서버의 API들을 dispatch하니깐 난이도가 더 높아졌다. 게다..

TIL - 20220529

오늘은 어제 적지 못했던 어떻게 문제를 풀 것인가를 기반으로 코딩 테스트 푸는 방법에 대해 배운 내용을 기록하려 한다. 과거 코딩 테스트(우아한 테크코스)를 준비할 때 알고리즘, 자료구조만 간단히 배우고 문제만 계속 풀었던 기억이 있다. 문제를 풀 때도, 문제가 정확히 어떠한 문제이며 어떤 답을 원하는지, 또 주어진 자료는 무엇이 있으며 이걸 어떻게 활용하며 풀어가야 할지 딱히 구체적인 방법을 생각하지 않은 채로 코드만 만들었기 때문에 역시나 광탈했다. 코드숨 커뮤니티에서 진행한 데모에서 어떻게 문제를 풀 것인가는 4단계의 과정을 갖고 있다. 1단계는 문제에 대한 이해, 2단계는 계획, 3단계는 실행, 4단계는 반성으로 이루어져 있다. 과거 나의 코딩 테스트를 준비할 때는 비율로 나누면 2 : 2 : 4..

TIL - 20220528

오늘은 코드숨 리액트 4주차 과제 풀이 영상을 보며 과제를 복습하는 시간을 가졌다. 마침 4주차 과제를 진행하며 고민했었던 문제의 해답이 영상에 있었다. 고민했었던 문제는 input이 여러 개일 때, 즉 예를 들어 식당의 이름, 분류, 주소를 적는 input이 있다고 할 때, input의 입력 변화를 setState로 받는 함수를 input 하나하나 만들어줘야 하나? 함수 하나만 만들어서 이 여러 개의 input을 다룰 수는 없을까?라는 문제였다. 이 문제의 해답은 input에 존재하는 name 속성을 이용하여 event를 받을 때, event 속 target 객체 안에 존재하는 name은 이 input이 어떤 input인지 알려주는 요소이고 value는 현재 입력된 값이 무엇인지 알려주는 요소임을 이용..

TIL - 20220527

내가 해냈다! 사실 누군가에겐 정말 별거 아닐 수 있는 문제인데, 거의 3~4시간 정도 매달렸음에도 불구하고 해결하지 못해 도움을 요청하려 쓴 글도 지운 다음, 결국 해냈을 때의 쾌감은 엄청난 거 같다. 그 일이 뭐였냐면... 한창 과제를 진행하다 ListContainer.test.jsx에서 다음과 같은 에러를 만났다. 이전에 있었던 과오를 되풀이 하지 않는다. 에러 문구부터 천천히 읽어보자. TypeError: Cannot read properties of undefined (reading 'map') : (내가 스스로 한 번역) undefined의 properties를 읽어올 수 없다는 것이다. 나는 restaurantCatalog가 배열이길 원한 건데 jest는 배열을 받지 못했다는 것이다. 내가 ..

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라는 하나의 객체에만 저장된다. 상태값은 불변 객체다. 상태..