코드숨 리액트 8기

TIL - 20220624

윤석 님께 다음과 같은 질문을 했다. 과거, 대학교 동기들과 함께 간단한 동아리 사이트를 만들 때도 텍스트를 상하좌우로 움직이거나, 크기 조절할 때도 구글링을 통해 무지성으로 코드를 작성하다 보니 어떻게 동작될지 예상을 하지 않은 채로 그저 우연에 맡기는 코드를 작성한 적이 있었다. 그래서 이번 과제로 웹 사이트에 CSS 적용할 때도 어떻게 시작해야 할지 많이 막막했었으며, 다음과 같은 답변을 받았다. 링크: https://www.youtube.com/watch?v=_o1zsrBkZyg&list=PLBNdLLaRx_rKXwi7MulM6v1UG9JLKWIYS 강의를 듣기 전에는 사실 CSS의 중요성을 그렇게 느끼지 못했는데, "어떻게 하면 고정되어 있는 숫자를 사용하지 않고 계산된 체계로 그래픽을 표현할까..

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로 바꾸는 법이 있지만, 데이터마다 상태를 만들면 데이터가 많아질 경우, 하나하나 상태를 처리해야 하기 때문에 좋은 방법이 아니라는 것을 배웠다. 그러면 좋은 방법은 무엇이 있을지? 찾아봤지만 아직 원하는 답을 얻진 못했다. 다음 주 과제부터는 이러한 고민을 질문으로 물어보면서 에러 핸들링을 과제에 반드시 곁들인다는 각오로 과제에 임해야겠다.

코드숨 리액트 7주차 회고

코드숨 리액트 과정에서 이번 7주차는 로그인에 대해 공부했다. 실제로 로그인 기능을 구현해보는 시간이였는데, 로그인 페이지에서 email과 password를 입력하면 입력값을 redux에 저장하고, 로그인 버튼을 누르면 redux에 저장한 값을 바탕으로 postLogin 액션을 dispatch 시켜서 실제 서버의 응답을 받아 데이터베이스에 존재하는 회원이라면 accessToken을 발급받아 redux에 저장한다. 이 accessToken을 localStorage와 redux에 저장함으로써 리뷰 작성과 같이 로그인이 필요한 기능을 사용할 때, accessToken으로 실제 회원인지 아닌지 인증할 때 활용하며 페이지를 새로고침 할 때마다 로그인 정보를 날아가지 않도록 하는 법을 배웠다. 과거에 로그인 정보를..

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 설정을 했기 때문에 다음과 같이 진..