1. Scss

   1. Sassy CSS의 줄임말로, css를 보완하고 확장한 스타일 시트 언어. 기본 css문법을 따르지만 변수, 중첩 규칙, 믹스인(재사용 가능한 스타일 블록), 함수 등을 사용하여 스타일 시트를 더 모듈화하고 유지보수하기 쉽게 만듦

2. px, em, rem 차이점

   1. px은 절대단위, em은 부모 속성 단위, r(root)em은 최상단 속성 단위

3. position 속성

   1. 요소의 위치를 지정하는데 사용. static, relative, absolute, fixed, sticky

4. display 속성

   1. 요소의 표시 방법 지정. block, inline, none, flex, grid

5. 시멘틱 마크업

   1. HTML요소를 이용하여 문서 구조를 설명하고 의미론적인 의미를 부여하는 것을 의미
   2. 이를 통해 검색엔진이나 스크린 리더와 같은 보조기술이 문서를 이해하고 해석할 수 있음
   3. 코드의 가독성과 유지보수성을 높여줌

6. this

   1. 현재 실행중인 코드에서 “현재 객체”를 참조하는 키워드
      1. 전역 컨텍스트 : 전역 객체 = 브라우저 환경에서 window
      2. 함수 내부 : 해당 함수를 호출한 객체를 참조, 그러나 함수가 일반적인 함수호출로 호출된 경우 전역 객체 가리킴
         • 예시
      3. 메소드(객체가 가지고 있는 함수) 내부 : 해당 메소드가 속한 객체를 가리킴
         • 예시
      4. 생성자 함수 내부 : 새로 생성되는 객체
   2. call, apply, bind
      1. call : 함수를 호출하는 메소드로, 함수를 호출하면서 특정 객체를 함수 내부의 **this**에 바인딩합니다. 또한, 함수에 필요한 매개변수를 직접 전달할 수 있습니다. call 메소드는 첫 번째 인자로 함수 내부에서 **this**에 바인딩할 객체를 받고, 이후에는 함수에 전달할 인자들을 받습니다.
         • 예시
      2. apply : **call**과 유사하지만, 함수에 인자들을 배열로 전달하는 차이가 있습니다. 첫 번째 인자로 함수 내부에서 **this**에 바인딩할 객체를 받고, 두 번째 인자로는 함수에 전달할 인자들을 배열로 받습니다.
         • 예시
      3. bind : 함수의 this 값을 영구적으로 설정한 새로운 함수를 반환합니다. 즉, 새로운 함수를 만들고 그 함수를 호출하면 항상 지정된 객체가 **this**로 사용됩니다. bind 메소드는 첫 번째 인자로 함수 내부에서 **this**에 바인딩할 객체를 받습니다.
         • 예시

7. 콜백 함수 : 다른 함수에 인수로 전달되는 함수(함수 안에 함수)

   1. 대표적인 예시로 setTimeout
   2. 콜백지옥 : 콜백함수 안에 콜백함수.. 이를 반복 → 코드 가독성을 떨어뜨리고 유지보수가 어려워짐
      1. promise나 async/await 비동기 함수로 처리로 해결

8. Promise : 비동기 작업을 처리하는데 사용되는 객체

   1. then(), catch()메소드를 제공함

   fetchData()
   	.then(data => {
   		console.log("Data:", data);
   	})
   	.catch((error) => {
   		console.log("Error:", error);
   	});
   

9. async/await : 비동기 처리를 보다 간편하게 작성할 수 있도록 도와주는 기능

   1. async함수를 사용해 비동기 작업 수행, await를 사용하여 비동기 작업의 결과를 기다릴 수 있음 → 이를 통해 비동기 코드를 동기식처럼 작성할 수 있음
   2. try/catch문을 사용하여 error처리를 함.
   3. Promise를 사용하는 것보다 더 직관적이고 읽기 쉬움. 에러 처리도 간편해지고, 비동기 작업을 더 쉽게 조율할 수 있음

10. var, let, const : 변수 선언하는데 사용되는 키워드

    함수 스코프 : 함수 내에서 선언된 변수는 함수 내에서만 유효하며, 함수 외부에서는 접근 불가

    블록 스코프 : 중괄호 안에서 선언된 변수는 해당 블록 안에서만 유효, 외부에서 접근 불가

    	스코프	호이스팅
    var	함수	발생, undefined	재선언 가능
    let	블록	발생, but ReferenceError	재선언 불가능
    const	블록	발생, but ReferenceError	재선언,재할당 불가능

11. 이벤트 버블링, 캡쳐링 : HTML 요소 간에 발생한 이벤트가 어떻게 전파되는지 설명하는 이벤트 전파 모델

    1. 캡쳐링 : 이벤트가 발생한 요소에서부터 DOM트리의 가장 깊은 요소까지 이벤트 전파
    2. 버블링 : 이벤트가 발생한 요소에서부터 DOM트리의 가장 상위 요소까지 이벤트가 전파
    3. 이벤트 위임 : 여러 하위 요소에 대한 이벤트 핸들러를 각각 등록하는 대신, 상위 요소에 하나의 이벤트 핸들러를 등록하여 하위 요소들의 이벤트를 관리하는 패턴
       1. 이벤트 핸들러 수 줆 = 메모리 사용량 줄임, 성능 향상

12. 호이스팅이 발생하는 이유

    1. 자바스크립트 엔진이 코드를 해석할 때 변수 및 함수 선언을 메모리에서 먼저 할당하고, 코드 실행 단계에서 변수 초기화 및 함수 할당을 처리하기 때문이다.
    2. 호이스팅은 코드의 이해를 어렵게 만들 수 있으므로, 변수 및 함수 선언을 스코프의 최상위에서 하는게 좋음

13. 클로저 : 함수와 그 함수가 선언될 당시의 렉시컬 환경 사이의 조합

    1. 함수가 다른 함수의 내부에서 정의되고, 해당 함수가 외부 스코프에 대한 참조를 가질 때 발생
    2. 정보 은닉, 콜백함수, 비동기 작업 처리에 사용됨

12-1**. 렉시컬(정적) 환경** : 자바스크립트에서 스코프를 관리하는 메커니즘 중 하나

1. 스코프 체인을 형성하여 스코프를 관리 https://ljtaek2.tistory.com/140
   1. 스코프 체인 : 각각의 스코프가 어떻게 연결되고 있는지 보여주는 것
   2. 실행 컨텍스트 : 작성된 코드가 실행되는 환경. 스코프, 호이스팅 등 동작원리를 담고있는 자바스크립트의 핵심 원리
      1. LIFO(Last In, First Out)구조의 스택, 코드 실행 중에 생성된 모든 실행 컨텍스트를 저장하는데 사용된다. 실행 컨텍스트가 실행되면, 엔진이 스코프 체인을 통해 렉시컬 스코프를 먼저 파악한다. 그리고 나서, 함수가 중첩 상태일 때 하위 함수 내에서 상위 함수의 스코프와 전역 스코프까지 참조할 수 있는데 이것을 스코프 체인을 통해 탐색하는 것이다.
         • 예시(보면 완전 이해됨)
2. 동기/비동기
   1. 동기 : 순차적으로 실행되며, 한 작업이 끝날 때까지 다음 작업이 시작되지 않음.
   2. 비동기 : 순차적으로 실행되지 않고, 작업이 완료되기를 기다리지 않고 다음 작업이 시작됨
3. 리액트 컴포넌트의 라이프 사이클 : 컴포넌트가 생성되고, 업데이트되고, 파괴되는 과정을 설명
   1. 마운트(Mounting): 컴포넌트가 생성되고 DOM에 삽입되는 단계
   2. 업데이트(Updating): 컴포넌트의 상태나 속성이 변경되어 다시 렌더링되는 단계
   3. 언마운트(Unmounting): 컴포넌트가 DOM에서 제거되는 단계
4. 리액트 hooks : 함수형 컴포넌트에서 상태 관리와 라이프사이클 메서드를 사용할 수 있게 해주는 기능
5. props drilling : React 애플리케이션에서 상위 컴포넌트가 하위 컴포넌트로 데이터를 전달하기 위해 여러 컴포넌트 계층을 거쳐 props를 전달해야 하는 상황
   1. 깊어질 수록 코드가 복잡해지고, 유지보수가 어려워짐
   2. 해결방법
      1. 전역상태 라이브러리 사용
      2. useContext hook 사용
6. key prop의 중요성 : 리스트의 각 항목을 고유하게 식별하기 위해 사용
   1. 효율적인 업데이트: key prop을 사용하면 React는 어떤 항목이 변경되었는지, 추가되었는지 또는 제거되었는지를 빠르게 파악할 수 있어 UI 업데이트가 효율적입니다.
7. 브라우저 렌더링 과정
   1. HTML 파싱 및 DOM 트리 구축: HTML 문서를 파싱하여 DOM 트리를 생성합니다.
   2. CSS 파싱 및 CSSOM 트리 구축: CSS를 파싱하여 CSSOM 트리를 생성합니다.
   3. 렌더 트리 생성: DOM 트리와 CSSOM 트리를 결합하여 렌더 트리를 생성합니다.
   4. 레이아웃: 렌더 트리의 각 요소에 대해 위치와 크기를 계산합니다.
   5. 페인팅: 레이아웃된 요소들을 실제로 그립니다.
   6. 컴포지팅: 여러 레이어를 결합하여 최종 화면에 표시합니다.