TiL

TIL - 20220615

어제자 이러한 리뷰를 받았다. 아샬님의 리액트 7주차 강의를 들으면서도 인상 깊게 느끼며 내가 놓치고 있었던 부분과 겹치는데, 그것은 바로 체감상 반복되는 코드의 부분이 두 번 이상 존재하면, 같은 파일 내에서라면 하나의 함수나 반복문을 이용하여 반복을 간결하게 만들고 다른 파일 내에서라면 utils라는 파일을 만들어 파일에 반복되는 코드를 함수로 만들고 그 함수를 불러와 간결하게 만드신다는 점이다. 코드가 짧다고 무조건 좋은 코드라는건 당연히 아니고 utils에 존재하는 함수를 확인해야 한다는 번거로움도 있겠지만, 하나의 함수를 한 번 이해하면 계속해서 반복되는 코드를 읽는 것보다 더 집중하며 코드를 읽을 수 있어서 문제를 해결할 때나 리팩토링할 때 훨씬 더 수월해지고 무엇보다 보기 좋은 코드라는 장점..

TIL - 20220614

오늘은 코드숨 리액트 7주차의 두, 세 번째 강의를 들었다. 먼저, given이라는 라이브러리를 알게 됐다. 기존 리덕스를 이용하는 테스트 코드를 작성하는 경우, 필요한 조건을 걸어줄 때마다 useSelector로 일일이 state에 대한 조건을 작성해줬어야 했는데, given을 사용하게 되면 state에 대한 조건도 간단하게 작성할 수 있고 lazy한 평가를 할 수 있기 때문에 테스트 코드 작성이 수월해지게 됐다. 앞으로 리덕스를 사용하는 테스트 코드를 작성할 때 given을 활용하도록 해야겠다. 다음으로, 로그인 정보를 localStorage와 redux의 state에 저장하고, 페이지를 새로고침할 때마다 로그인 정보를 날아가지 않도록 하는 법을 배웠다. 과거에 로그인 정보를 localStorage에..

TIL - 20220612

오늘은 코드숨 리액트 3주차 테스트부터 4주차 Redux, 5주차 비동기를 진행하며 어려움을 많이 겪었던 기억이 있고 내가 강의를 들으며 놓치고 있는 부분이 있을 것 같아 복습 겸 점검차 테스트 강의에 대한 복습을 진행했다. 테스트 강의를 복습하며 내가 무심코 지나간 부분이 있었다. 바로, jest.fn()에 대한 부분인데, 강의에서 배운 뒤에 jest.fn()에 대해 더 자세히 알아보려 하지 않고 과제를 진행하면서 아무 생각과 의심 없이 사용한 것 같다. jest.fn()은 jest에서 만들어주는 가짜 함수로, 일반 자바스크립트 함수처럼 인자를 넘겨 호출할 수 있다. 또한 따로 공부하면서 알게 된 점은 const mockFunction = jest.fn(); mockFunction.mockReturnV..

TIL - 20220611

오늘은 코드숨 리액트 6주차 과제의 풀이 영상을 시청했다. 과제 풀이 영상을 보며 느낀 점은 관심사의 분리를 UI와 상태 관련 측면으로 간단한 페이지일지라도 분리해야 하고, UI에서도 반복적으로 사용하는 부분이 있다면 분리를 하는 것이 재사용하기에 유리하다는 점이다. 이번 과제를 진행하면서 식당의 정보를 출력하는 페이지는 비교적 간단한 페이지에 속한다고 생각해서 UI와 상태 관리를 나눠서 만들지 않았는데, 영상에서 아샬님은 먼저, 상태 관련 컴포넌트인 Container 컴포넌트와 UI 관련 컴포넌트로 분리하면서, UI 관련 컴포넌트에서도 식당의 목록들은 또 분리하여 식당을 배열로 받았을 때, 아무것도 없을 땐 메뉴가 없다는 문구를 출력하고, 있다면 map을 이용하여 배열을 출력하는 컴포넌트를 만드시는 모..

TIL - 20220610

어제 모던 JavaScript 튜토리얼에서 객체: 기본편을 공부하며(https://jaeyooniverse.tistory.com/93) 작성한 질문, 중요하다고 생각하는 내용으로 JavaScript 카테고리의 첫 게시글(https://jaeyooniverse.tistory.com/94)을 작성했다. 작성하면서 여러 가지 생각이 들었다. 내가 지금 이 글을 작성하는 이유는 뭐지? 이 글을 볼 사람이 있을까? 라는 생각들이 들었다. 작성하는 이유는 여러 가지가 있었다. 처음으로는 JavaScript에서 객체는 뗄레야 뗄 수 없는 존재이기 때문에 한 번 다뤄보고 싶었다는 점, 다음으로는 진행하고 있는 대외활동의 글 작성 마감 기한이 이번 주 금요일이었다는 점이 있었기 때문이다. 그래서 글을 작성하게 됐는데, ..

TIL - 20220609

오늘은 모던 JavaScript 튜토리얼에서 객체: 기본(https://ko.javascript.info/object-basics)에 대해 복습하는 시간을 가졌다. 개념에 대한 공부를 진행할 때, 그냥 훑어보면서 공부하는 것이 아닌 한 챕터에 존재하는 섹션마다 질문을 하나씩이라도 만들어보고 다 읽어본 다음 만든 질문에 대한 답변을 작성해보는 방식으로 공부했다. 다음과 같이. 먼저, 이 방법으로 공부하면 가장 크게 느껴지는 것은 같은 내용이더라도 만들어지는 질문은 항상 달라진다는 것이다. 오늘로써 객체: 기본에 대한 내용을 두 번째 보고 있음에도 질문을 작성하면 처음 질문을 만들어볼 때 보다 질문이 더 다양해지고 개수도 많아지며 난이도도 더 올라가기 때문에 같은 개념을 공부하더라도 흡수하는 양이 달라지는 ..

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를 보게 된다. 다음과 같이 작성하면 ..