안녕하세요~ totally 개발자입니다. Eslint 오늘은 Eslint에 대해 살펴보도록 하겠습니다. Eslint는 프로그래밍 코드를 작성할 때 문법에 문제가 있거나 오류를 찾아주는 도구이며 다른 개발자들과 같이 협업할 때 가독성 및 일관성 있는 코드를 작성할 수 있다는 점에서 매우 중요합니다. 설치 방법과 사용하는 아주 간단한 방법을 아래에 소개합니다. Step 1: 터미널에 yarn add -D eslint를 입력해줍니다. Step 2: 터미널에 yarn add -D eslint-plugin-react eslint-plugin-react-hooks를 입력해줍니다. Step 3: 터미널에 yarn add -D @typescript-eslint/parser @typescript-eslint/eslint..

안녕하세요~ totally 개발자입니다. Hot Module Replacement (저장 시 바로 반영) 개발하다보면 Ctrl + S했을 때 바로 수정사항을 반영해서 자주 봐야하는데 새로고침을 하게 되면 모든 요소의 상태가 리셋되기 때문에 좋지 않습니다. 그래서 Ctrl + S로 저장했을 떄 수정된 부분만 체크해서 반영될 수 있도록 설정을 해주어야 합니다. Step 1: 터미널에 yarn add -D @pmmmwh/react-refresh-webpack-plugin react-refresh를 입력해줍니다. 만약에 permission denied 이슈가 있는 경우에는 node_modules 폴더와 package-lock.json 모두 root으로 되어 있기 때문에 사용자 이름으로 변경해주시면 됩니다. 커맨..

안녕하세요~ totally 개발자입니다. 리액트(React), 타입스크립트(Typescript), Webpack, Babel 초기 설정에 대해서 살펴보도록 하겠습니다. 오늘 살펴볼 리액트, 타입스크립트, 웹팩, 바벨의 용도는 아래와 같습니다. 리액트(React) 자바스크립트 라이브러리 타입스크립트(Typescript) 자바스크립트의 확장 언어로 자바스크립트에 타입 등을 부여할 수 있고 엄격한 문법을 사용하도록 지원 웹팩(Webpack) 애플리케이션을 위한 필요한 모든 파일(모듈)을 병합하여 하나의 번들(결과물)로 생성해주는 도구 바벨(Babel) ES6 이상의 자바스크립트 문법을 ES5 형태 즉 모든 브라우저에서 지원할 수 있도록 컴파일해주는 도구 초기 세팅을 위해 기본적으로 VScode, yarn, n..

안녕하세요~ totally 개발자입니다. useMemo 오늘 다뤄볼 부분은 useMemo 훅입니다. useMemo는 useCallback과 유사합니다. useMemo와 useCallback 모두 Memoization을 활용하는 훅으로, Memoization은 이전에 이미 수행했던 계산의 결과값을 이미 다른 곳에 저장을 해두고 동일한 값이 입력될 때 재사용하는 프로그래밍 기법입니다. 그래서 성능을 높이고 최적화할 때 많이 사용됩니다. useMemo는 Memoization된 값을 반환하고 useCallback은 Memoization된 함수를 반환하는 특징이 있습니다. 바로 예제 실습을 통해 살펴보도록 하겠습니다. Step 1: Counter.js 컴포넌트 파일을 생성하여 useMemo와 useState를 i..

안녕하세요~ totally 개발자입니다. useCallback useCallback 훅에 대해서 살펴보겠습니다. useCallback은 한 번 생성한 함수를 재사용하고 그 함수가 의존하는 값들이 변경되지 않는 한 동일한 함수를 재사용합니다. 그래서 연관된 값이 변경되지 않은 상태에서 재렌더링을 막기 위해서도 사용합니다. 먼저 다음과 같은 코드가 있을 때 버튼을 눌러보면 Update 버튼 클릭할 때마다 랜더링이 다시 일어나게 되는 것을 알 수 있습니다. (3개 버튼 모두) 이번에는 Button.js로 따로 이 버튼 function를 분리해서 작성하겠습니다. 여기에서 React.memo(Button)으로 export 해줍니다. Counter.js 부분을 다음처럼 해주시면 됩니다. 9, 11, 13번째 줄에 ..

안녕하세요~ totally 개발자입니다. useReducer Hook 오늘은 useReducer 훅에 대해 살펴보겠습니다. 사실 useReducer는 useState랑 용도는 같으나 더 복잡한 로직을 처리하기 위해 사용된다고 보시면 되며 예제를 위해 div 박스를 상하좌우로 버튼을 클릭해서 움직일 수 있는 코드를 작성해보도록 하겠습니다. Step 1: 먼저 컴포넌트에 Direction.js 파일을 생성후 다음처럼 useReducer를 import 하시고 reducer 함수를 작성해줍니다. reducer에는 state 변수(업데이트할 변수명)와 action이 인자로 전달됩니다. 이것을 보통 switch를 활용하고 여기에서는 action.type (변경 가능)을 사용하여 스위치로 조건문을 만들어서 retur..