TIL

TIL - 20220623 ( 부제: webpack에 dotenv-webpack으로 환경 분리하기)

20220617 TIL(https://jaeyooniverse.tistory.com/103)에 잘못 적은 내용이 있었다. 먼저, dotenv를 사용하지 않고 dotenv-webpack만으로도 .env 파일의 경로를 지정할 수 있다. 아니, 당연한 이치다. dotenv에서 좀 더 사용하기 편하게 만들어진 것이 dotenv-webpack인데, dotenv-webpack이 dotenv의 기능을 사용하지 못하는 것은 애초에 말이 되지 않는다. 게시글에서도 확인할 수 있듯이 코드를 다음과 같이 작성했는데, 다음과 같이 수정할 수 있다. Dotenv에서 path를 통해 .env 파일 경로를 설정할 수 있다. NODE_ENV가 'development'이면 webpack.config.js 파일이 위치한 디렉토리에서 ...

TIL - 20220622 (부제: Promise로 요청 한 번에 하기)

코드숨 리액트 과제를 진행하며 다른 분들이 작성한 코드와 리뷰를 보던 중 다음과 같은 리뷰를 보게 됐다. 코드를 보면 fetchRegions()를 데이터를 불러와 regions에 저장하고 regions를 setRegions에 담아 액션을 dispatch한 다음에 fetchCategories()를 진행하며 과정을 반복한다. regions와 category는 아무런 연관이 없기 때문에, 동시에 요청하면 더 빠를 수 있지 않을까? Promise를 통해 regions와 category를 동시에 요청할 수 있다! Promise를 통해 위와 같이 작성해준 다음 React Developer Tools로 속도 측정을 해보니 과거의 코드는 Regions를 불러온 다음 Categories 불러오기까지 2초가 걸렸고 Pro..

TIL - 20220621 (부제: React.memo()로 성능 최적화하기)

어제자 TIL에서 적은 React.memo()가 잘 와닿지 않았기 때문에 다른 내용을 더 찾아서 공부했다. 간단하게 정리하면 React에서 최초로 컴포넌트를 렌더링한 다음, 변화가 있을 때, 이전에 렌더링된 결과와 비교하여 변경이 있으면 React는 DOM을 업데이트한다. 이전 렌더링 결과와 다음 렌더링 결과의 비교의 속도는 빠르지만 더 빠르게 만들 수 있는 방법이 존재하는데, 그 방법이 바로 함수형 컴포넌트에 적용되어 같은 props의 같은 결과를 제공하는 React.memo()이다. React.memo()를 언제 사용해야 하는가에 대한 답은 간단하다. props의 변경이 잘 일어나지 않는, 즉 같은 props로 자주 렌더링될 것이라고 예상될 때 사용하면 된다. 지난 몇 주간 코드숨 과제로 예시를 들어..

TIL - 20220620

오늘은 코드숨 리액트 8주차로 Emotion, Redux Toolkit, PureComponent에 대해 공부했다. 먼저, Emotion은 CSS-in-JS라는 개념을 알아야 한다. 과거 CSS는 xxx.css와 같이 별도의 파일로 관리했지만, 요즘은 JavaScript에서 css를 작성한다. 따라서, CSS-in-JS는 JavaScript에서 CSS를 작성하는 방법론이다. JavaScript에서 css를 작성할 수 있도록 도와주는 라이브러리는 많으며 그 중 styled-components와 emotion이 있고 이번 수업에서는 emotion과 styled-components를 같이 곁들여 웹 페이지를 디자인 해보는 법을 배웠다. 현대 웹사이트는 CSS를 어떻게 작성하는지 배울 수 있어 좋았고, 다음 주..

TIL - 20220619

오늘은 에러 핸들링을 공부해보기 위해 과거에 코드숨 과제를 제출한 분들의 코드를 찾아봤다. 각 데이터마다 에러 상태를 boolean형으로 만들어서 데이터를 가져옴에 있어서 문제가 발생하면 에러 상태를 true로 바꾸는 법이 있지만, 데이터마다 상태를 만들면 데이터가 많아질 경우, 하나하나 상태를 처리해야 하기 때문에 좋은 방법이 아니라는 것을 배웠다. 그러면 좋은 방법은 무엇이 있을지? 찾아봤지만 아직 원하는 답을 얻진 못했다. 다음 주 과제부터는 이러한 고민을 질문으로 물어보면서 에러 핸들링을 과제에 반드시 곁들인다는 각오로 과제에 임해야겠다.

TIL - 20220618 (부제: Github Actions를 위한 환경변수 설정)

어제자 TIL(https://jaeyooniverse.tistory.com/103)에서 dotenv를 설정하고 생각해보니 이런 문제가 있었다. 간단히 현 상황을 설명하면, 코드숨의 과제는 pull request를 통해 push를 진행하면 Github의 자동화 테스트를 통해 과제를 잘했는지 검사한다. 현재 과제를 통해 자신이 만든 TDD와 코드숨에서 만든 e2e 테스트를 통과해야 하고, 코드를 eslint 검사가 그 예인데, 내가 어제 작성한 대로라면 Github는 내 환경 변수를 알 수 있는 방법이 존재하지 않으니 모를 수밖에 없다. 그래서 윤석님께 다음과 같은 질문을 드렸고 오늘 배운 해결법을 작성한다. 먼저, Github CI/CD를 진행하고 있으면 .github/workflows/ci.yml 파일이..

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

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

TIL - 20220616

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