리액트에서 배열을 렌더링할 때 key를 써야 하는 이유에 대해 설명해 주세요.1. Key리액트 컴포넌트에 고유성을 부여하는 컴포넌트 속성2. Key 규칙key값은 조건부 렌더링 or 배열 렌더링처럼 함께 고려되는 형제 컴포넌트 간에 고유해야 함key값은 변경되지 않아야 함3. 배열 렌더링리액트 렌더링 참고배열 리터럴이나 map() 메소드로 복수의 컴포넌트를 반환할 경우, 배열 렌더링 과정을 거침배열 렌더링 중 비교 알고리즘을 적용할 때, 리액트는 기본적으로 나열 순서(인덱스)를 기준으로 전후 컴포넌트를 비교함배열 내에서 순서가 바뀔 경우, 인덱스를 기준으로 비교하므로 순서 변경을 고려치 못해 비효율적인 렌더링이 이뤄짐4. 배열 렌더링과 Key배열 내 각 컴포넌트에 고유한 key가 할당될 경우, 배열 렌더..

리액트에서 Virtual DOM이 무엇인지, 이를 사용하는 이유는 무엇인지 설명해 주세요.1. DOMDocument Object ModelHTML 문서를 계층 구조의 객체로 표현한 것각 객체를 노드로 여기고, 요소/텍스트/주석 노드로 구분2. 브라우저 렌더링DOM/CSSOMHTML/CSS를 분석하여 DOM/CSSOM 생성렌더 트리DOM에 CSSOM을 부착하여 렌더 트리 구성레이아웃렌더 트리 내 노드의 구조 및 위치 결정리렌더링 시 리플로우라고 표현페인팅렌더 트리 노드에 색칠리렌더링 시 리페인팅이라고 표현위와 같은 렌더링 과정을 CRP(Critical Rendering Path)라고 표현함3. Virtual DOMReact에서 사용하는 가상의 DOM 추상화실제 DOM에서 이뤄져야 할 변경 사항들을 가상 D..

HTTP 메소드에 대해 설명해 주세요.1. HTTPHyperText Transfer ProtocolHTML같은 하이퍼 미디어 문서 전송을 위한 프로토콜클라이언트의 요청과 서버의 응답 통신이 이뤄짐2. HTTP 요청 메소드클라이언트가 서버에게 요청의 목적이나 종류를 알리는 수단주어진 자원에 수행할 동작을 명시함자원을 다루는 기본 메소드와 통신과 관련된 기타 메소드로 나눌 수 있음3. 메소드 판단 기준본문 존재 : 요청/응답에 본문이 존재하는가안전성 : 요청이 서버 상태를 유지시키는가멱등성 : 단일 요청과 중복 요청의 결과가 동일한가캐시 가능성 : 응답을 캐싱하여 다음에 재사용이 가능한가HTML 폼 가능 : HTML 폼으로 요청 가능한가4. 기본 메소드4-1. GET데이터를 받기 위해 사용하는 메소드요청 본..

렉시컬 스코프(Lexical scope)에 대해 설명해 주세요.1. 스코프식별자의 접근 규칙에 따른 유효 범위범위 기준전역 스코프 : 모든 코드의 기본 범위모듈 스코프 : 모듈로 실행되는 코드 범위함수 스코프 : 함수로 생성된 범위블록 스코프 : 중괄호로 생성된 범위결정 기준동적 스코프 : 런타임 도중 결정된 범위렉시컬 스코프 : 선언 시점에 속한 맥락으로 결정된 범위2. 실행 맥락Execution ContextJS 코드가 실행될 때의 환경2-1. 실행 맥락 종류전역 실행 맥락Global Execution Context전역 공간에서의 선언프로그램 실행/종료 시 맥락 생성/폐기함수 실행 맥락Function Execution Context함수 선언 내에서의 선언함수 실행/종료 시 맥락 생성/폐기2-2. 콜 ..

자바스크립트 this에 대해 설명해 주세요.1. this호출 맥락/방식에 따라 동적으로 값을 바인딩하는 자기 참조 변수2. 전역/모듈 맥락 this2-1. 전역 맥락Web 환경 : 전역 객체(Window) 바인딩NodeJS 환경 : 전역 객체(global) 바인딩하지만 NodeJS 환경은 각 파일을 하나의 모듈로 취급하므로 유의2-2. 모듈 맥락Web 환경 : undefined 바인딩NodeJS 환경 : exports 객체 바인딩3. 함수 맥락 this3-1. 일반 함수(단순 호출)전역 객체 바인딩3-2. 객체 메소드호출 시점에 속한 객체 바인딩프로토타입 체인, get/set도 동일하게 적용3-3. 화살표 함수선언 시의 상위 렉시컬 스코프 this 값 바인딩3-4. 생성자 함수생성된 객체 바인딩3-5. ..

이벤트 버블링, 캡쳐링, 위임에 대해 설명해 주세요.1. 이벤트1-1. 이벤트프로그래밍 시스템 내에서 발생하는 사건1-2. Event 객체발생한 이벤트에 대한 정보를 가지는 객체다양한 파생 객체 존재MouseEvent, KeyboardEvent, FocusEvent, InputEvent, ErrorEvent, CustomEvent 등1-3. 이벤트 리스너/핸들러이벤트 리스너특정 대상이 이벤트를 수신하도록 하는 함수DOM 요소, Document, Window 등대상이 이벤트 수신 시 이벤트 핸들러 동작이벤트 핸들러이벤트 수신 시 호출할 함수매개변수로 해당하는 Event 객체를 받음1-4. 이벤트 리스너 등록HTML 이벤트 리스너 속성사용 비권장JS 이벤트 리스너 속성수신대상.on이벤트 = 이벤트핸들러적은 ..