본문 바로가기

전체 글134

JavaScript에서 클로저 (Closure) 이란? 클로저는 함수와 그 주변 상태(렉시컬 환경)에 대한 참조가 함께 묶인 조합입니다. 클로저를 생성하면 내부 함수에서 외부 함수의 스코프에 접근할 수 있습니다. 렉시컬 스코핑은 (lexical scope) 함수가 중첩될 때 파서가 변수 이름을 어떻게 해결하는지를 의미합니다. 소스 코드 내에서 변수가 선언된 위치가 그 변수가 사용할 수 있는 범위를 결정합니다. 중첩된 함수는 외부 스코프에서 선언된 변수에 접근할 수 있습니다. 클로저는 내부 함수가 외부 함수가 실행을 마친 후에도 외부 함수의 변수와 매개변수에 접근할 수 있을 때 형성됩니다. 이는 내부 함수가 자신이 생성된 렉시컬 환경에 대한 참조를 유지하기 때문에 가능합니다. 숫자를 세는 카운터 함수를 작성해 보겠습니다 상단에서 add() 함수를 3번 불렀지만.. 2024. 9. 23.
네이티브 객체 (Native Object) vs 호스트 객체 (Host Object) 네이티브 자바스크립트 객체는 자바스크립트 자체에서 제공하는 표준 자바스크립트 객체입니다. 이러한 객체들은 내장 객체, 사전 정의된 객체, 또는 전역 객체라고도 불립니다. ECMAScript 명세에서 의미론적인 부분을 완전히 정의해 놓은 객체들입니다. 하단에 객체 예 시들를 나열했습니다. - Object - Date- String()- Math - parseInt- eval- indexOf  호스트 자바스크립트 객체는 환경에 따라 달라지는 자바스크립트 객체로, 자바스크립트가 실행되는 기기의 환경에 따라 다를 수 있습니다. 한 환경에서 제공되는 객체가 다른 환경에서는 존재하지 않을 수도 있습니다. 호스트 객체는 ECMAScript 실행 환경을 완성하기 위해 호스트 환경 (브라우저, 서버) 에서 제공되는 객체.. 2024. 9. 22.
여백 상쇄 (Margin Collapse) 여러 블록의 위쪽 및 아래쪽 바깥 여백 (margin)은 경우에 따라 제일 큰 여백의 크기를 가진 단일 여백으로 병합됩니다. 이러한 현상은 좌우 여백에서는 발생하지 않으며, 오직 위쪽과 아래쪽 (top & bottom) 여백에서만 발생합니다. ** 플로팅 요소와 절대 위치를 지정한 요소의 여백은 절대 상쇄되지 않습니다.  인접 형제 요소간의 바깥 여백은 서로 상쇄됩니다. div.element2 요소의 마진이 더 크기 때문에 둘 사이의 간격은 40px가 되고 겹치게 됩니다.  부모 블록에 테두리 또는 패딩이 설정되지 않은 경우 자손을 분리할 여백이 존재하지 않는 경우 부모와 자손의 여백이 상쇄됩니다. 상쇄된 여백은 부모 블록 바깥에 위치하게 되고, 이 문제 해결하기 위해선 부모에 inline 콘텐츠, bo.. 2024. 9. 20.
CSS : 박스 모델 (Box Model) CSS의 박스 모델은 여백, 테두리, 패딩, 및 콘텐츠등 자체를 포함한 다양한 속성을 담고 있는 컨테이너입니다. 이러한 속성들은 함께 요소의 크기와 간격을 결정하여 페이지에서 볼 수 있는 박스를 생성하게 됩니다.  -  콘텐츠 (Content) : 콘텐츠가 표시되는 영역으로 그 크기를 width (넓이) & height (높이)와 같은 속성을 사용해서 정할 수 있습니다. - 패딩 (Padding) : 콘텐츠 주변을 마치 공백처럼 공간을 만들어줍니다. 패딩의 크기는 padding과 관련 속성을 사용해 제어할 수 있습니다. - 테두리 (Border) : 콘텐츠와 패딩까지 둘러싸고, 테두리의 크기, 색상, 테두리 넓이, 스타일등은 border와 관련 속성을 사용하여 제어할 수 있습니다. - 여백 (Margin.. 2024. 9. 20.
JavaScript에서 호이스팅(Hoisting)이란 JavaScript 호이스팅은 인터프리터가 코드를 실행하기 전에 함수, 변수, 클래스 또는 임포트(import)의 선언문을 해당 범위의 맨 위로 끌어올리는 것처럼 보이는 현상을 뜻합니다. 여기서 주의할 점은 "선언문" 이라는 것이며 "대입문"은 끌어올려지지 않습니다. JavaScript의 선언에는 3가지 방법이 있습니다. var : 변수를 선언. 추가로 동시에 값을 초기화let : 블록 스코프 지역 변수를 선언. 추가로 동시에 값을 초기화const : 블록 스코프 읽기 전용 상수를 선언 - var x = " " 와 같은 var 키워드로 변수를 선언이 가능하며, 실행 맥락에 따라 지역 및 전역 변수를 선언하는데 모두 사용될 수 있습니다. - let y - " " 와 같이 const 혹은 let 키워드로 변.. 2024. 9. 20.
스코프 (Scope) 이해 스코프는 프로그램에서 변수가 접근 가능한 영역을 나타냅니다. 이는 코드 내에서 변수, 함수, 객체의 가시성과 생명주기를 결정합니다. JavaScript에는 3가지 스코프 종류가 있습니다 :- 전역 범위 : 함수나 블록 외부에 선언된 변수나 함수가 해당되며, 프로그램 어디서든 접근할 수 있습니다.- 블록 범위 : 'let'이나 'const'를 사용하여 블록(중괄호 내)에서 선언된 변수는 블록 스코프를 가집니다. { } 에 있는 변수는 외부에서 접근이 불가합니다.- 함수 범위 : 각 함수는 새로운 스코프를 생성합니다. 이 변수는 그 함수 내에서만 접근할 수 있습니다. 전역 범위 : 함수 범위 :  ** 함수 스코프 내에 선언된 'let', 'var', 'const'는 비슷한 역할을 합니다.  블록 범위 : .. 2024. 9. 18.