Interview 컴퓨터의 기본 구조 컴퓨터는 입력장치, 출력장치, 연산을 위한 중앙처리장치(CPU), 저장을 하기 위한 주 기억장치와 보조 기억장치를 갖고 있다. 입력 장치 컴퓨터가 처리할 수 있는 형태로 데이터와 명령을 받아들이는 물리적인 장치이다. 키보드와 마우스, 조이콘 등 컴퓨터에 연...

TypeScript TS 설치 리액트와 같이 TS 설치 npx create-react-app my-app --template typeScript yarn create-react-app my-app --template typeScript 기존 리액트에 TS만 추가 npm install --save @types/node @type...

React Custom Hooks 무한 스크롤 실습 const useIntersectionObserver = (callback) => { // IntersectionObserver 객체를 생성하고, useRef를 사용하여 observer 변수에 할당한다. const observer = useRef( new Intersectio...

React 코드 분할 리액트 앱들은 대부분 Webpack, Rollup과 같은 툴을 사용해 번들링한다. 이렇게 하면 HTML 웹 페이지에 JavaScript를 쉽게 추가할 수 있다. 번들된 앱은 모든 JavaScript가 한 곳에 있기 때문에 페이지에 설정하는 데 필요한 호출 수가 적은 링크 태그 하나만 필요하게 된다. 번...

React Recoil 상태 관리 라이브러리며, Facebook의 엔지니어가 개발했지만 리액트 상태 관리를 위한 공식적인 라이브러리는 아니다. 리액트 애플리케이션의 모든 구성 요소가 상태를 쉽게 공유할 수 있도록 전역 상태를 제공하며 Redux에 비해 최소화된다. 장점 Redux를 사용할 때처럼 초반 설정을 위한 복잡한 코드 작...

React Custom Hooks 개발자가 스스로 커스텀한 훅을 의미하며 이를 이용해 반복되는 로직을 함수로 뽑아내어 재사용할 수 있다. 여러 url을 fetch할 때, 여러 input에 의한 상태 변경 등 반복되는 로직을 동일한 함수에서 작동하게 하고 싶을 때 커스텀 훅을 주로 사용한다. 상태관리 로직의 재...

React Component와 Hook Function Component와 Class Component Hook은 함수 컴포넌트에서 사용하는 메서드이다. 함수 컴포넌트 이전에는 클래스 컴포넌트가 있었다. 클래스 컴포넌트는 복잡해질수록 이해하기 어려워졌고, 컴포넌트 사이에서 상태 로직을 재사용하기 어렵다는 단점이 있었다. 리액트의 ...

React Virtual DOM 리액트는 UI의 상태를 추적하고 변화가 일어난 요소들을 빠르게 업데이트할 수 있도록 Virtual DOM이라는 가상의 DOM객체를 활용한다. Virtual DOM이 나오게 된 배경 Virtual DOM은 Real DOM의 가벼운 사본과 같다. Real DOM은 Browser에서 생성되는 Docum...

React 웹팩 튜토리얼 1 디렉터리 생성 cd ~/Dekstop mkdir Webpack-practice cd Webpack-practice npm init npm init -y 현재 디렉터리에 package.json 파일을 생성해준다. { "name": "Webpack-practice", "version": ...

React 번들링 여러 제품이나, 코드, 프로그램을 묶어서 패키지로 제공하는 행위를 말한다. 프론트엔드 개발자에게 번들은 사용자에게 웹 애플리케이션을 제공하기 위한 파일 묶음이다. 번들링의 필요성 내가 작성한 HTML, CSS, JavaScript 파일을 그대로 전송한다면 여러가지 문제가 발생할 수 있다. 두...