Today Hailie Learned

✔️ 이번 정독을 통해 알게 된 것 파싱이 무엇인가요? 렌더링이 무엇인가요? 브라우저의 렌더링 과정? script 태그를 body 태그 최하단에 추가하는 이유 🤔 파싱이 무엇인가요? 🤓 프로그래밍 언어의 문법에 맞게 작성된 텍스트 문서를 읽고 실행하기 위해 토큰으로 분해하고 토큰에 문법적 의미와 구조를 반영하여 트리 구조의 자료구조인 파스 트리를 생성하는 과정을 말합니다. 🤔 렌더링이 무엇인가요? 🤓 HTML, CSS, JS로 작성된 문서를 파싱해서 브라우저에 시각적으로 출력하는 것을 말합니다. 🤔 브라우저의 렌더링 과정? 🤓 브라우저는 렌더링에 필요한 리소스를 요청하고 서버로부터 응답을 받습니다. 브라우저의 렌더링 엔진은 서버로부터 응답된 HTML, CSS를 파싱하여 DOM과 CSSOM을 생성하고, 이..

✔️ 이번 정독을 통해 알게 된 것 클로저는 무엇인가요? 렉시컬 스코프가 무엇인가요? 🤔 클로저는 무엇인가요? 🤓 클로저는 함수와 그 함수가 선언된 렉시컬 환경과의 조합입니다. 🤔 렉시컬 스코프가 무엇인가요? 🤓 자바스크립트 엔진은 함수를 어디에 정의했는지에 따라 상위 스코프를 결정하는데 이를 렉시컬 스코프라고 합니다. ✔️ 클로저란 클로저는 자바스크립트 고유의 개념이 아니다. 함수를 일급 객체로 취급하는 함수형 프로그래밍 언어에서 사용되는 특성이다. 클로저 in MDN 👉 A closure is the combination of a function and the lexical environment within which that function was declared. 클로저는 함수와 그 함수가 선언된..

✔️ 이번 정독을 통해 알게 된 것 this란 무엇인가요? this 바인딩이란 무엇인가요? 🤔 this란 무엇인가요? 🤓 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수입니다. 🤔 this 바인딩이란 무엇인가요? 🤓 this와 this가 가리킬 객체를 연결하는 과정입니다. ✔️ this란? 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수이다. 객체에서 메서드는 자신이 속한 프로퍼티를 참조하고 변경할 수 있어야 하는데 그러기 위해서는 자신이 속한 객체를 가리키는 식별자를 참조할 수 있어야 한다. 이 역할을 this가 한다. this를 통해 자신이 속한 객체 또는 자신이 생성할 인스턴스의 프로퍼티나 메서드를 참조할 수 있다. ✔️ this의 특징 ◆ this..

✔️ 이번 정독을 통해 알게 된 것 TDZ(temporal dead zone)이란 무엇인가요? 암묵적 전역이 무엇인가요? 🤔 TDZ(temporal dead zone)이란 무엇인가요? 🤓 스코프의 시작 지점부터 초기화 시작 지점까지 변수를 참조할 수 없는 구간을 말합니다. 🤔 암묵적 전역이 무엇인가요? 🤓 선언하지 않은 식별자에 값을 할당하면 전역 객체의 프로퍼티가 되 ✔️ var ◆ 변수의 중복 선언이 가능해서 side effect 발생 가능성 ↑ ◆ 함수 레벨 스코프(오로지 함수의 코드 블록만을 지역 스코프로 인정한다. )이기 때문에 함수 외부에서 var 키워드로 선언한 변수는 코드블록 내에서 선언해도 모두 전역 변수가 된다. side effect 발생 가능성 ↑ var i = 10; for(var ..

✔️ 실행 컨텍스트란? 자바스크립트의 동작 원리를 담고 있는 핵심 개념이다. 실행 컨텍스트는 식별자 (변수, 함수, 클래스 등)를 등록하고 관리하는 스코프와 코드 실행 순서 관리를 구현한 내부 메커니즘으로, 모든 코드는 실행 컨텍스트를 통해 실행되고 관리된다. 식별자와 스코프는 실행 컨텍스트의 렉시컬 환경으로 관리하고 코드 실행 순서는 실행 컨텍스트 스택으로 관리한다. ✔️ 소스 코드의 과정 1. 소스코드의 평가 => 실행 컨텍스트를 생성하고 변수, 함수 등의 선언문만 먼저 실행하여 생성된 변수나 함수 식별자를 키로 실행 컨텍스트가 관리하는 스코프에 등록한다. 2. 소스코드의 실행 => 선언문을 제외한 소스코드가 순차적으로 실행된다. (런타임 시작) / 소스코드 실행에 필요한 정보는 스코프에서 검색해서 ..

✔️ 이번 정독을 통해 알게 된 것 전역 변수와 지역 변수의 생명주기를 설명해주세요. 전역 변수 사용을 억제해야하는데 그 이유가 무엇인가요? 🤔 전역 변수와 지역 변수의 생명주기를 설명해주세요. 🤓 전역 변수는 애플리케이션의 생명 주기와 대체로 같습니다. 지역 변수는 함수가 호출되어 실행되는 동안에만 유효합니다. 🤔 전역 변수 사용을 억제해야하는데 그 이유가 무엇인가요? 🤓 전역 변수는 생명 주기가 길기 때문에 메모리 리소스도 길게 사용할 뿐더러, 전역 상태를 의도치 않게 변경할 가능성도 커진다는 것이기 때문에 전역 변수 사용을 억제해야합니다. ✔️ 변수의 생명 주기 지역 변수의 생명 주기 => 함수가 호출되어 실행되는 동안에만 유효하다. 전역 변수의 생명 주기 => 애플리케이션의 생명 주기와 같다. 변..

✔️ 이번 정독을 통해 알게 된 것 스코프란 무엇인가요? 블록 레벨 스코프를 설명해보세요. 스코프 체인이 무엇인가요? 🤔 스코프가 무엇인가요? 🤓 스코프는 식별자가 유효한 범위를 말합니다. 모든 식별자(변수명, 함수명, 클래스명 등)는 자신이 선언된 위치에 의해 다른 코드가 식별자 자신을 참조할 수 있는 스코프가 결정됩니다. 🤔 블록 레벨 스코프를 설명해보세요. 🤓 함수 내부 뿐만 아니라 모든 코드 블럭(if, for, while, try/catch)이 지역 스코프를 만드는 것이 블록 레벨 스코프이고 let, const 가 이에 해당됩니다. 🤔 스코프 체인이 무엇인가요? 🤓 스코프가 계층적으로 연결된 것을 스코프 체인이라고 하는데, 모든 지역 스코프의 최상위 스코프는 전역 스코프입니다. 변수를 참조할 때..

✔️ 이번 정독을 통해 알게 된 것 함수가 왜 필요한가요? 함수 선언문과 함수 표현식은 어떤 차이가 있나요? 원시 타입 인수와 객체 타입 인수는 어떤 차이가 있나요? 함수형 프로그래밍은 무엇이고 왜 필요한가요? 🤔 함수가 왜 필요한가요? 🤓 함수는 몇 번이든 호출할 수 있으므로 코드의 재사용 측면에서 매우 유리하기 때문입니다. 그리고 유지보수의 편의성을 높이고 실수를 줄여서 코드의 신뢰성을 높이는 효과가 있습니다. 🤔 함수 선언문과 함수 표현식은 어떤 차이가 있나요? 🤓 함수 선언문과 함수 표현식 모두 자바스크립트의 특징으로 인하여 호이스팅이 일어난다는 특징이 있지만, (런타임 이전에 식별자를 생성함) 함수 선언문은 암묵적으로 생성된 식별자는 함수 객체로 초기화되어 선언문 이전에 호출하면 호출이 가능합니..

✔️ 이번 정독을 통해 알게 된 것 변수가 왜 필요한지? 호이스팅이란? 🤔변수가 왜 필요한가요? 🤓 자바스크립트를 해석하고 실행하는 자바스크립트 엔진이 코드를 평가하려면 변수 선언을 통해 자바스크립트 엔진에 식별자의 존재를 알려야 하기 때문입니다. 🤔호이스팅이란 무엇인가요? 🤓 변수 선언이 어디에 있든지 상관없이 어디서든 변수를 참조할 수 있습니다. 이것은 자바스크립트 고유의 특징이기 때문에 모든 변수, 함수, 클래스는 호이스팅이 일어납니다. (모든 선언문은 런타임 이전 단계에서 먼저 실행되기 때문!) ✔️ 변수 변수는 하나의 값을 저장하기 위해 확보한 메모리 공간 자체 혹은 그 메모리 공간을 식별하기 위해 붙인 이름을 말합니다. ▸ 변수에 값을 저장하는 것을 할당이라고 합니다. ▸ 변수에 저장된 값을 ..

제가 개발할 때 조금이라도 편하게 하게끔 기록해 놓은 css 모음집 입니다. ✔️ 버튼 기본 css 지우기button { border: 0; background-color: transparent;}✔️ 내용물을 가운데로 만들기display: flex;flex-direction: column;justify-content: center;align-items: center;✔️ 배경색 그라이데이션 효과 주기background: linear-gradient(180deg, #f3f186 0%, #f5c96b 100%);height: 100vh;✔️ 이미지 가운데로 꽉차게 입히기background-position: center;background-size: cover;✔️ 링크 태그에서 밑줄 없애기text-deco..