HTML 중에서 헷갈리거나 잘 모르는 부분을 기록해두고자 작성한 글 1. strong em 은 텍스트를 강조하여 두껍게 표시한다. 은 이탤릭체로 표시한다 (기울임꼴) 2. div span = 분할 (Division), 블록 수준의 컨테이너 요소- 주로 여러 요소들을 그룹화,레이아웃을 나눌 때 사용- 주로 스타일을 적용하기 위한 그룹화에 사용 = 인라인 수준의 컨테이너 요소- 주로 텍스트 내에서 작은 부분을 감싸거나 스타일을 적용하기 위해 사용- 인라인 수준의 요소 => 같은 줄에 텍스트와 함께 표시3. label input 관계성 첫번째 의문 : label for속성과 input id 값은 왜 일치시켜야 하는가?label for 속성은 input의 id값을 일치시키는 이유는 라벨과 입력 요소를 연결하기..

[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..