Today Hailie Learned

✔️ 이번 정독을 통해 알게 된 것 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; ✔️ 링크 태그에서 밑..

CSS 1. 배경화면에 이미지 넣고, 꽉찬 설정으로 하기 background-size: cover; background-size: auto; 2. 바디의 모든 설정 가운데로 설정하기 body { margin: 0; font-size: 2rem; display: flex; flex: 1; min-height: 100vh; align-items: center; } 3. transform 요소 ✔️ rotate 회전 중심, 원점을 지정하기 transform-origin: 100% ➥ transform 에서 rotate(), skew() 등 회전, 변형 속성 사용하기 전에 설정해야한다. 백분율(%) 0% left 0% top 50% center 100% right 100% bottom ✔️ 이미지 회전 시키기 ..

1. 오디오, 비디오 재생하기 ✔️ html에서 오디오를 연결할 때는 태그를 쓰고 src로 오디오 소스를 지정한다. ✔️ 그리고 이를 플레이 시킬때는 .play()를 사용한다. audio.play(); ✔️ 오디오, 비디오 일시정지 시키기 audio.pause(); 2. 오디오, 비디오 재생 시점 설정하기 audio.currentTime = 0; ➥ 초 단위이고, 0 값인 경우 처음부터 음악을 재생한다. 3. 명시된 클래스 추가, 제거하는 메서드 ✔️ 명시된 클래스 추가하기 샐렉터.classList.add("playing"); ➥ playing이라는 클래스를 추가하기 ✔️ 명시된 클래스 제거하기 샐렉터.classList.remove("playing"); ✔️ 클래스가 있으면 제거하고 false를 반환하고..