💡 알아두면 좋은 것들

🚪 들어가며브라우저의 렌더링 과정에 대해서 알아보자 ! 브라우저의 렌더링 과정은 복잡한 여러 단계를 거친다.🪽 렌더링 과정DOM 파싱: HTML을 파싱하여 DOM 트리(문서 객체 모델)를 생성CSSOM 생성: CSS를 파싱하여 CSSOM 트리(스타일 규칙 트리)를 만듬렌더 트리 생성: DOM과 CSSOM을 결합하여 화면에 그릴 요소를 포함한 렌더 트리를 만듬레이아웃: 각 요소의 크기와 위치를 계산페인팅: 계산된 스타일과 위치에 따라 화면에 그림합성 단계: 복잡한 레이어를 관리하여 최적화된 화면 출력📿 이벤트 루프렌더링 과정은 HTML과 CSS를 기반으로 화면을 표시하는 데 집중하고, 이벤트 루프는 비동기 작업을 관리하여 사용자 인터랙션에 대한 반응성을 유지합니다. 이벤트 루프는 렌더링 과정의 수행과..

this는 함수를 호출한 객체이다💡 this ➡️｛⁇｝this는 어떤 객체를 가리키는 키워드이다 ! 그런데 this가 가리키는 객체는 상황에 따라 변한다.1. main함수를 만들고 this를 출력해보자.이렇게 main() 함수를 만들고 실행시켜 주면 this는 Window객체가 된다.즉, main() === Window.main()과 같은 의미인 것이다 👍 우리가 만든 main 함수도 잘 들어있다.2. object객체를 만들고 object의 main 메서드를 호출하여 this를 출력해 보자.3. object.main을 담는 main2를 출력해 보자.  main2 함수를 호출한 객체는 더 이상 object가 아니기 때문에 main2의 this는 Window객체를 출력한다.여기서 우리가 알아야할 점 !!..

interface인터페이스는 객체가 가져야 할 속성과 메서드를 정의하는 구조입니다. 객체의 구조를 정의하거나, 상속을 통해 코드의 재사용성을 높이는 데 주로 사용합니다.type alias특정 타입을 정의하는 데 사용됩니다.객체를 포함한 다양한 형태의 타입을 정의하는 데 사용되며, 더 유연한 정의가 가능합니다.🚨 interface는 '객체용이다.','상속하기 위한 용이다.'라고 말하는데 ❌ 아니다 !! type alias 방식도 객체, 상속 모두 가능하다 !! 1️⃣ 유연성 / 유니온 타입의 혼란 발생type aliastype Dog = | { eat(): string; woof(): string; } | {};const jindo: Dog = { constructor(pri..

1. 프리렌더링(Pre-rendering)프리렌더링은 서버가 페이지를 사용자가 요청하기 전에 미리 렌더링해서 준비해두는 방식입니다. 페이지를 미리 생성하여 캐싱해 두는 것이 특징입니다.특징정적 생성: 빌드할 때 렌더링서버사이드 렌더링: 리퀘스트가 들어오면 렌더링장점: 빠른 로딩 속도 (페이지가 미리 준비되어 있음), SEO에 유리프리 렌더링을 사용하면 프리페치보다 표시 시간이 빨리지고 더 많은 리소스를 필요로 하는 대신 사용자 경험이 향상됩니다.단점: 동적인 컨텐츠에 대해 적용하기 어렵고, 미리 준비된 페이지만 제공 가능프리렌더링이 적합한 경우자주 변경되지 않는 콘텐츠: 예를 들어 블로그, 포트폴리오 사이트 등 자주 업데이트되지 않는 콘텐츠가 많을 때.ex) 블로그, 포트폴리오 사이트SEO가 중요한 페이..

브라우저의 경우 setTimeout 을 예로 들면, Call Stack에서 Web API setTimeout 요청 이후 제거됩니다.Web API에서 setTimeout 이 완료되면 setTimeout callback 함수를 Callback Queue(자료구조의 queue처럼 구현된 저장소, 세분화된 queue들이 있음)로 옮깁니다.현재 실행한 자바스크립트 코드를 모두 실행한 뒤, Event Loop가 지속적으로 Call Stack이 비어있는지 확인하고, 비어있다면 Callback Queue에 있는 작업 순서대로 Call Stack으로 넘겨 실행하도록 만듭니다.

1. PromisePromise는 비동기 작업의 결과를 나타내는 객체입니다. 비동기 작업이 성공적으로 완료되면 결과값을 제공하거나, 실패하면 에러를 반환합니다.주요 특징상태: Pending (대기), Fulfilled (이행), Rejected (거부) 세 가지 상태를 가집니다.메소드: then, catch, finally 메소드를 사용하여 결과를 처리합니다.const fetchData = () => { return new Promise((resolve, reject) => { setTimeout(() => { resolve("데이터 수신 완료"); }, 1000); });};fetchData().then(result => { console.log(result); // "데이터 ..