전체 글

TIL - 20220615

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

TIL - 20220614

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

TIL - 20220613

오늘은 코드숨 리액트 7주차 로그인 강의를 들었다. 2시간 30분이라는 엄청난 강의 분량 속에서 먼저 첫 강의는 HTTPie라는 도구를 배우게 됐는데, HTTPie는 curl로 테스트하기엔 불편하고 Postman을 사용하기엔 더 간편한 curl과 Postman 가운데에 있는 HTTP 클라이언트 도구이다. HTTPie를 이용하여 간단하게 로그인 기능을 진행해 본 다음에는 실제로 로그인 기능을 구현해보는 시간을 가졌다. 로그인 페이지는 email과 password input이 존재하고, input에 입력하면 입력값이 redux에 저장되고, 전송 버튼을 누르면 postLogin 액션을 실행시켜 실제 서버의 응답을 받아 데이터베이스에 존재하는 회원이면 accessToken까지 발급받는 과정까지 진행했는데, 백엔..

TIL - 20220612

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

코드숨 리액트 6주차 회고

코드숨 리액트에서 이번 6주 차는 react-router-dom을 이용한 라우팅을 배웠다. 과거 react-router-dom을 이용하여 여러 페이지를 구현할 때, 바뀐 부분만 다시 렌더링 하는 React의 장점을 활용하지 못하고 페이지 전체를 렌더링 하는 문제를 겪은 적이 있어서 라우팅 수업에 대해 갖는 기대가 컸었고, 실제 강의를 들으며 그 문제에 대한 해결 방법을 얻어갈 수 있어서 좋았다. 강의를 들으면서 비동기와 리덕스 테스트를 진행하면서 겪은 어려움들 때문에 라우팅 테스트에 대한 걱정도 많았었는데 실제 라우팅 테스트는 비동기와 리덕스 테스트보다 수월했고 앞으로는 시작하기 전부터 너무 겁먹지 말아야겠다는 생각을 하게 되었다. 또한, 개발하면서 겪는 에러에 대해 조금 더 체계적으로 해결하는 법을 배..

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에서 객체는 뗄레야 뗄 수 없는 존재이기 때문에 한 번 다뤄보고 싶었다는 점, 다음으로는 진행하고 있는 대외활동의 글 작성 마감 기한이 이번 주 금요일이었다는 점이 있었기 때문이다. 그래서 글을 작성하게 됐는데, ..

[JavaScript] 객체(1) - 기본

JavaScript에는 여덟 가지 자료형이 존재하면서 이 중 일곱 가지 자료형은 문자열, 숫자와 같이 오직 한 종류의 데이터를 저장하는 원시형과 이번 게시글에서 다룰 객체다. 한 종류의 데이터만 담을 수 있는 원시형과 달리 객체는 여러 종류의 데이터를 담을 수 있고, 이 데이터들을 키로 구분한다. 객체는 JavaScript에서 거의 모든 면에 녹아있기 때문에 JavaScript를 잘 다루려면, 객체를 잘 이해하고 있어야 한다. 객체를 만드는 방법은 객체 생성자 문법을 이용하여 만드는 방법과 객체 리터럴을 이용하여 만드는 방법이 존재한다. const obj = new Object(); // 객체 생성자 문법 const obj = {} // 객체 리터럴 문법 한 객체를 살펴보며 객체에 대해 좀 더 자세히 살..