[1] React Query가 만들어진 이유리액트 쿼리(React Query)는 데이터 가져오기와 관리를 목적으로 만들어진 라이브러리입니다. 이 라이브러리는 React 애플리케이션에서 서버에서 데이터를 가져오고 캐시 관리, 재시도, 데이터 갱신 등을 처리하는 데 도움을 줍니다. [2] 이점 간편한 데이터 관리: 리액트 애플리케이션에서 데이터를 가져오고 관리하는 과정을 단순화합니다. REST API, GraphQL 등 다양한 데이터 소스에서 데이터를 가져오고 캐시를 효과적으로 관리할 수 있습니다.캐시 제어 및 재시도 로직: 데이터를 가져올 때 캐싱 기능을 제공하여, 동일한 데이터를 여러 번 불러오지 않고 성능을 최적화할 수 있습니다. 또한 네트워크 문제 등으로 요청이 실패했을 때 자동으로 재시도하는 기능도..

CSS-in-JS 자바스크립트 코드에서 CSS를 작성하는 방식 장점CSS 파일의 유지보수가 필요없음 (컴포넌트 레벨로 추상화하기 때문에 단일 파일에서 관리가 가능)자바스크립트와 CSS사이에 있는 상수와 함수 공유 가능스타일링을 위한 코드 사용량이 줄어듦단점러닝커브가 높다 (신기술을 학습하는데 소요되는 시간)새로운 의존성 발생별도의 라이브러리 설치에 따른 번들 크기 증대 및 CSS-in-CSS에 비해 느린 속도정리작업자의 성향이나 판단이 필요한 부분이나 개발 효율성에 중점을 둔 컴포넌트 위주의 프로젝트라면CSS-in-JS를 고려하는 것이 좋음 ⇒ CSS 스타일 요소로만 로딩하기 때문사용자 편의에 방점을 둔 인터렉티브한 웹 프로젝트 ⇒ 렌더링 시 모든 CSS 스타일 요소를 로딩하는 CSS-in-CSS 방식 ..

[1] 리액트 생명주기 (Life Cycle)Lifecycle = 생명주기사람의 생명주기 : 출생 후 인생을 살다가 노화로 사망리액트 컴포넌트도 이러한 생명주기를 가지고 있음컴포넌트가 생성되는 시점과 사라지는 시점이 정해져있음출생,인생,사망으로 나뉘어져 있음각 과정의 초록색 표시부분은 생명 주기에 따라 호출되는 클래스 컴포넌트 함수해당 함수를 Lifecycle Method라고 불리며, 번역하면 생명 주기 함수먼저 컴포넌트가 생성되는 시점 (사람으로 말하면 출생)이 과정을 "마운트"라고 부르는데 이때 컴포넌트의 constructor(즉 생성자)가 생성생성자에서는 컴포넌트의 state를 정의컴포넌트가 렌더링 되며, 이후에 ComponentDidmount 함수가 호출태어난 모두는 각자 인생을 살아감사람은 인생..

제어 컴포넌트 vs 비제어 컴포넌트1. Form tag elements input 태그는 전통적인 html태그자바스크립트를 통해서 동작input태그는 form태그 엘리먼트의 대표적인 특성 중 하나.form태그 엘리먼트들은 독특한 특징이 하나 있는데 value attribute를 통해 자체적인 Data를 가짐value가 사용자 입력값으로 변함. => 사용자가 입력한 값으로 value attribute가 바뀜 사용자가 입력한 값에 의해 value atrribute가 바뀜. => 사용자가 입력한 값이 value atrribute에 저장=> input 태그의 value atrribute는 DOM에 존재=> Input을 통한 사용자의 입력데이터는 DOM에 저장된다 (논점)2. 신뢰 가능한 단일 출처 React에 ..

[1] 가상 돔 (Virtual Dom)  DOM : (Documnet object model)웹페이지에 들어가 있는 html element 들을 tree형태 구조로 표현한 것DOM이 제공하는 API를 통해 DOM 구조에 접근하고, 원하는 Element에 구조,내용,스타일을 변경 가능 (DOM 조작)자바스크립트 getElementById(), querySelector() 같은 API를 통해서 DOM구조 안에 있는 Element에 접근해서 원하는대로 내용,스타일,레이아웃등을 수정할 수 있음. 가상돔 (Virtual Dom) 실제 DOM의 복사본 (실제 DOM X) 모든 Elemnet와 속성을 똑같이 가지고 있음 실제 DOM과는 다르게 브라우저 문서에 직접적으로 연결 X => 수정 XReact는 가상 DOM..

[1] 브라우저의 동작원리 1.사용자 : 브라우저로 웹 사이트 접속2.브라우저 : DNS를 통해 서버의 IP주소를 파악3.브라우저는 파악한 IP주소에 있는 서버와 3way handshake 완료4.서버에 데이터를 요청하는 HTTP Request를 합니다.5.서버로부터 데이터를 받는데 이것을 HTTP Response6.서버로부터 받은 데이터에 HTML을 Parsing하여 Dom Tree를 만듦7.중간에 Style 태그가 나오면 CSS를 Parsing하여 CSSOM Tree를 만듦8.Parsing 중간에 Script 태그가 나오면 JavaScript 엔진에게 권한을 넘겨자바스크립트 코드를 Parsing 하여 AST를 만들고 실행9.DomTree와 CSSOM 트리를 합쳐서 Render Tree 생성 (=> C..