Virtual DOM(가상돔)리액트에서는 실제 DOM(Document Object Model)을 조작하는 것이 아니라 가상의 DOM을 만들어 기존과의 차이점을 비교한 후 달라진 부분이 있을 경우 다시 렌더링하는 방식을 사용한다.리액트는 내부적으로 렌더링된 UI를 자바스크립트 객체로 관리하는데 실제 DOM노드를 생성하거나 접근해서 변경하는 것보다 이 자바스크립트 객체로 표현된 DOM 트리를 조작하는 것이 훨씬 빠르기 때문이다. React의 Virtual DOM 비교 단계1. UI가 변경을 감지하면 UI를 Virtual DOM으로 렌더링한다. (실제 화면상이 아님)2. 지금 렌더링한 Virtual DOM과 이전의 Virtual DOM을 비교해 차이를 계산한다.3. 변경된 부분을 실제 DOM에 반영한다. Re..

렉시컬 스코프란함수가 실행될 때가 아닌 선언될 때를 기준으로 스코프가 결정된다는 것. 스코프 결정 시점: 함수가 정의된 위치를 기준으로 스코프가 결정스코프 체인: 함수 내부에서 변수를 참조할 때, 먼저 내부 스코프에서 변수를 찾고, 없으면 외부 스코프로 이동하여 변수를 찾음. 이러한 과정을 스코프 체인이라고 함상위 스코프 참조: 내부 함수는 자신이 정의된 외부 환경(상위 스코프)을 참조할 수 있음. 이를 통해 함수가 호출되는 위치와 상관없이 일관된 스코프를 유지 const outerVar = 'I am outside!';function outerFunction() { const innerVar = 'I am inside!'; function innerFunction() { cons..

thisthis는 실행 컨텍스트에 따라 그 값이 결정되며, 현재 실행 중인 함수 또는 메서드의 "소유자"를 가리킵니다.전역 컨텍스트에서의 this전역 객체를 가리킴. 브라우저에서는 windowconsole.log(this); // 브라우저에서는 window 객체를 출력함수 내에서의 this일반 함수에서는 전역 객체엄격 모드에서는 undefinedfunction regularFunction() { console.log(this); // window 또는 global 객체}function strictFunction() { 'use strict'; console.log(this); // undefined}regularFunction();strictFunction();객체의 메서드로 호출될때는 ..

var는 재선언, 재할당이 가능let은 재할당만 가능const는 모두 불가var는 변수를 만들기도 전에 호출이 가능(hoisting)그러나 초기화는 실제 코드 위치에서 수행되므로 선언 전에 변수를 사용하면 undefinedlet: 초기화 이전에 접근하면 reference errorconst: 선언 전에 접근하면 reference error(선언과 동시에 초기화 필요, 값의 재할당 불가)console.log(title); // 에러가 아닌 undefined 출력var title='test';conssole.log(title); // 'test'출력스코프var는 function 단위로만 구분function안에서 선언된 경우만 지역변수if나 for문 등에서 생성하더라도 전역변수처럼 작동let과 const는 {..

브라우저 작동 원리브라우저의 구조사용자 인터페이스: 주소표시줄, 버튼 등브라우저 엔진: UI와 랜더링 엔진 사이의 동작을 제어랜더링 엔진: 요청한 콘텐츠를 표시통신: 네트워크 호출JS 해석기UI 백엔드자료 저장소: 로컬 저장통신 과정사용자가 브라우저에 URL 입력URL 정보를 DNS로 보냄DNS에서 IP주소를 받아 정보를 받아올 컴퓨터(웹서버) 정보 확인URL 정보를 http프로토콜을 통해 요청 메시지 전송TCP/IP 이용http프로토콜을 통해 다시 URL정보로 변환되어 웹서버에 전송웹서버에서 URL에 맞는 정보를 찾음http를 통해 응답 메시지로 전송TCP/IP 이용http를 통해 해당 정보를 브라우저로 전달브라우저 엔진을 통해 사용자가 볼 수 있는 정보로 변화되어 화면에 출력랜더링 과정DOM, CSS..

시멘틱 태그란 header, footer, section, nav 등을 의미한다.이러한 시멘틱 태그를 사용했을 경우의 장점은 아래와 같다.1. 코드 가독성 향상- 위 태그는 div와 기능상 동일하게 작용하므로 div를 사용해도 되지만 모든 영역에 div를 적용하게 되면- 코드를 볼 때 어디가 어떤 영역인지 알기가 어렵게 된다.- 물론 div에 class나 id를 정의하여 네이밍을 해도 되지만 시멘틱 태그가 좀 더 직관적으로 코드를 볼 수 있다.2. 사이트 정보를 효과적으로 전달할 수 있다- 검색 엔진 등이 사이트를 크롤링할 때 시멘틱 태그를 기준으로 정보를 판단하고 읽을 수 있으므로 효과적으로 사이트의 정보를 전달할 수 있다.3. 웹 접근성 강화- 시각 장애인을 위한 스크린 리더 등을 통해 사이트를 분석..

CSS는 웹문서에 스타일을 적용한다.이 과정에서 같은 요소에 적용되는 스타일은 여러 가지 이유로 충돌이 발생할 수 있다.이럴때 일정한 우선 순위를 두고 스타일이 적용되는데 이를 cascading이라고 한다.cascading은 중요도, 명시도, 코드 작성 순서에 의해 결정된다.1. 중요도- CSS를 어디에 선언했는지를 의미한다. - 크게 사용자 스타일, 작성자 스타일, 브라우저 스타일로 나눌 수 있다.- 브라우저 스타일은 크롬이나 사파리 등의 브라우저가 기본으로 갖고 있는 스타일을 의미하며- 작성자 스타일은 웹 문서를 만드는 사람이 설정한 스타일을 의미한다. (html파일내 style 또는 css파일)- 사용자 스타일은 사용자가 컴퓨터내에서 설정한 스타일 옵션을 의미한다.- 사용자 스타일 > 작성자 스타일..