분류 전체보기
컴퓨터의 구조
🖥️컴퓨터의 구조컴퓨터의 기본 구성 요소CPUCPU의 구조CPU의 기능Memory메모리 분류별 특성메모리 성능메모리 종류컴퓨터의 구조컴퓨터는 단순히 말하자면 하드웨어와 소프트웨어가 합쳐진 형태이다. 하드웨어는 전자 회로 및 기계장치로 입출력 장치, 중앙처리장치(CPU), 기억장치 등으로 구성되어 있다. 소프트웨어는 그 하드웨어 위에서 제어하며 작업을 수행하는 프로그램이다.컴퓨터의 기본 구성 요소컴퓨터는 입력장치(Input), 출력장치(Output)가 갖춰져 있고 내부에는 연산을 위한 중앙처리장치(CPU), 저장을 하기 위한 주 기억장치와 보조 기억장치를 가진다.입력장치컴퓨터가 처리할 수 있는 형태로 데이터와 명령을 받아들이는 물리적인 장치. → ex. 키보드, 마우스, 캠, 마이크, 스캐너, 타블렛, 조..
Concurrent Feature (`React.lazy()`, `Suspense`)
코드 분할 (Code Spliting)번들 분할 혹은 줄이는 법React에서의 코드 분할Static ImportDynamic ImportReact.lazy()React.SuspenseReact.lazy와 Suspense의 적용React는 현재도 계속 업데이트가 되고 있는 오픈소스 라이브러리이며, 다양한 기능을 추가적으로 지원하고 있다. Hooks 역시 함수형 컴포넌트를 지원하면서 클래스형 컴포넌트에서 사용 가능했던 기능을 추가한 사례라 볼 수 있다. // React 18 버전부터는 경고문을 출력하는 기존 방식 const rootElement = document.getElementById("root"); ReactDOM.render(, rootElement); // React 18 버전부터는 createR..
Virtual DOM
Virtual DOM탄생 배경Real DOM (DOM)Virtual DOM의 기본 개념Virtual DOM이 Real DOM보다 빠른 이유Virtual DOM의 형태React Diffing AlgorithmReact가 DOM 트리를 탐색하는 방법다른 타입의 DOM 엘리먼트인 경우같은 타입의 DOM 엘리먼트인 경우자식 엘리먼트의 재귀적 처리키(key)Virtual DOMReact에는 Virtual DOM이라는 가상의 DOM 객체가 있다. 이는 실제 DOM의 사본 개념으로, React는 실제 DOM 객체에 접근하여 조작하는 대신 이 가상의 DOM 객체에 접근해 변화 전과 변화 후를 비교하고 바뀐 부분을 적용한다.탄생 배경Real DOM (DOM)Real DOM은 우리가 알고 있는 DOM과 같은 것으로, Vi..
Webpack (Bundling)
Bundling (번들링)Webpack모듈 번들러(Module Bundler)Webpack에서의 모듈빌드와 번들링Webpack의 필요성Webpack의 핵심 개념Target (Browser Compatibility)Entry (엔트리)Output (출력)Loader (로더)Plugins (플러그인)Optimization (최적화)React가 번들링이 필요한 이유리액트 개발에 꼭 필요한 라이브러리react, react-dombabelcss-loader 리액트 개발에 도움이 되는 라이브러리react-hot-reloadereslintprettierBundling (번들링)번들링은 단순히 개발 영역 뿐만 아니라 마케팅과 프로덕트 시장에서 전반적으로 쓰이는 단어로 여러 제품이나 코드, 프로그램을 묶어서 패키지로 제..
React Hooks
Hook이란?Hook 사용 규칙useMemoMemoization예제를 통해 살펴보기useCallbackuseCallback과 참조 동등성Custom HooksCustom Hook 사용 예제 : useFetch, useInputHook이란?React의 공식문서에서는 Hook을 아래와 같이 설명한다.Hook은 React 16.8에 새로 추가된 기능입니다. Hook은 class를 작성하지 않고도 state와 다른 React의 기능들을 사용할 수 있게 해줍니다.Hook은 다르게 말하면 함수형 컴포넌트에서 상태 값 및 다른 여러 기능을 사용하기 편리하게 해주는 메소드를 의미한다. Hook은 class가 아닌 function으로만 React를 사용할 수 있게 해주는 것이기 때문에 클래스형 컴포넌트에서는 동작하지 않..