코드숨 리액트

TIL - 20220617 (부제 : webpack에 dotenv, dotenv-webpack 설정)

2일 전에 이러한 리뷰를 받았다. 실제 업무에서는 지금 공부하는 상황처럼 개발용 서버만 존재하는 것이 아닌 실제 배포 서버도 존재할 것이기에 이런 경우에 해당 코드를 어떻게 수정하면 좋을지 고민해보시라는 말씀의 리뷰였다. 독학으로 진행할 때는 이런 경우를 생각조차 못했을텐데 또 공부할 수 있는 기회가 되어서 좋았다. 환경 변수를 관리하는 라이브러리인 dotenv라는 라이브러리가 있다. dotenv는 설정한 디렉토리에 위치하는 .env 파일로부터 환경 변수를 읽어오기 때문에 이를 이용하여 개발 환경과 배포 환경에서의 환경 변수를 다르게 둠으로써 리뷰를 해결할 수 있다. 먼저 dotenv 라이브러리를 설치하자. npm i dotenv CRA 환경이 아닌 직접 webpack 설정을 했기 때문에 다음과 같이 진..

TIL - 20220616

다음과 같은 리액트 코드에서 리액트는 null, false, undefined, ''와 같은 값을 렌더하지 않는다. 따라서, accessToken &&

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을 이용하여 배열을 출력하는 컴포넌트를 만드시는 모..