Front

웹 브라우저 구성: 웹 브라우저는 크게 자바스크립트 엔진, 백그라운드 (web API), 테스트 큐 (이하 callback 큐), 이벤트 루프로 구성되어 있다. 자바스크립트 엔진자바스크립트는 싱글 스레드로 한 번에 한 가지 일만 처리할 수 있다.하지만 웹브라우저에서 HTTP 요청이나 타이머 등 비동기 함수를 병렬적으로 처리할 수 있다.이렇게 자바스크립트가 싱글 스레드임에도 병렬적으로 처리가 가능한 이유는 다양한 웹 API 를 제공하여 비동기 작업을 처리할 수 있도록 도와주기 때문이다.자바스크립트 구성자바스크립트는 Call Stack, Memory Heap 이라는 메모리 구조를 통해 데이터 및 코드 실행을 관리한다 Call Stack함수 호출과 관련된 실행 컨텍스트를 관리하는 메모리 영역이다.함수가 호출될..

Virtual Dom?React 의 장점 중 하나인 Virtual DOM은 JavaScript 라이브러리나 프레임워크에서 사용되는 개념으로, 실제 DOM(Document Object Model)의 가벼운 복사본을 메모리에 유지하는 기술이다. 이를 통해 실제 DOM과의 비교를 최소화하고 효율적으로 UI를 업데이트할 수 있다. DOM 은 객체로 문서 구조를 표현하는 방법으로 XML 이나 HTML 로 작성한다.웹 브라우저는 DOM 을 활용해 객체에 자바스크립트와 CSS 를 적용한다. DOM 은 트리 형태라서 특정 노드를 찾거나, 수정하거나 제거하는 등의 원하는 곳에 삽입할 수 있다.  하지만, 동적 UI 에는 최적화되지 않다. 규모가 큰 웹 어플리케이션 (페이스북, 인스타그램 등)에서 DOM 에 직접 접근하여..

: 서버와 데이터를 주고 받기 위해 HTTP 통신을 하는데, 리액트에는 이런 작업(HTTP 상에서 커뮤니케이션을 하는 자바 기반 컴포넌트 = HTTP Client) 을 하는 내장 클래스가 없다.--> 리액트에서 AJAX 를 구현하기 위해 다른 HTTP Client 를 사용해야 한다. Fetch API, AXIOS리액트에서 Axios 구현Axios 설치npm install axiosyarn add axios사용하기비동기로 서버에 요청 -> 서버의 응답이 오면 받아서 성공/실패 를 구분하여 처리서버에 요청 후 응답이 오기까지 시간이 걸리기 때문에 요청은 비동기로 처리하고, 응답을 처리하는 부분은 then 이나 await 을 사용한다.// GETasync function getUser() { // async,..

Data Types기본형 데이터 타입과 참조형 데이터 타입기본형 (Primitive Type) 데이터 타입숫자, 문자열, 논리, null, undefined / symbol (ES6 에서 추가된 )참조형 (Reference Type) 데이터 타입대표적으로 객체 (Array, Function, RegExp (정규표현) / Set - WeakSet, Map - WeakMap (ES6 에서 추가된 것) )Stack Memory (스택 메모): 변수와 함께 기본형 데이터가 저장된다, 정적할당: 변수 = 데이터 를 설정할 때 메모리에 올리게 되는데 순서는 다음과 같다var a;// 변수 a 를 임의의 메모리에 올린다 (주소를 1 이라고 하자)// 주소 1 에 이름과 값을 저장할 수 있는데, 이름은 a 로 저장한다..