본문 바로가기
[자바스크립트] 달력 만들기 예제 HTML, CSS, 그리고 JavaScript를 이용하여 달력을 구현하는 방법에 대해 설명해드리겠습니다. 1. HTML과 CSS를 이용한 달력 구현 HTML과 CSS를 이용하여 달력을 구현하려면 다음과 같은 단계를 거칩니다. HTML로 기본적인 달력 틀을 만듭니다. CSS를 이용하여 달력의 스타일을 지정합니다. JavaScript로 오늘 날짜 기준으로 달력을 채웁니다. 1) HTML로 달력 틀 만들기 2023년 3월 일 월 화 수 목 금 토 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 위의 코드에서는 div 태그를 이용하여 달력을 구성했습니다. 달력의 가장 바깥쪽에 있는 div 태그에는 calenda.. 2023. 3. 10.
[자바스크립트] 프라미스 (promise) 자바스크립트 Promise는 비동기 처리를 위한 객체로, 비동기적으로 실행되는 작업의 결과를 대기하고 있을 수 있게 해줍니다. Promise를 사용하면 비동기 작업을 보다 쉽게 관리할 수 있으며, 비동기적으로 실행되는 코드의 가독성도 높아집니다. 1. Promise의 3가지 상태 (state) 대기(pending): 비동기 처리가 아직 완료되지 않은 상태 이행(fulfilled): 비동기 처리가 완료되어 결과값을 반환한 상태 거부(rejected): 비동기 처리가 실패하거나 오류가 발생한 상태 Promise 객체를 생성할 때는 new 키워드를 사용합니다. Promise 객체의 생성자 함수는 인자로 executor 함수를 받습니다. executor 함수는 resolve와 reject 두 개의 콜백 함수를 .. 2023. 3. 9.
[자바스크립트] 콜백 함수 (callback function) 콜백(callback) 함수는 자바스크립트에서 가장 많이 사용되는 함수 중 하나입니다. 콜백 함수는 다른 함수의 인자로 전달되는 함수로, 이 함수는 해당 함수 내부에서 호출됩니다. 이를 통해 비동기적으로 처리되는 작업의 결과를 처리할 수 있습니다. 1. 간단한 설명 예를 들어, setTimeout() 함수를 사용해 일정 시간이 지난 후에 특정 코드를 실행할 수 있습니다. 이때 setTimeout() 함수의 첫 번째 인자로 콜백 함수를 전달하면, 지정된 시간이 지난 후에 콜백 함수가 실행됩니다. setTimeout(function() { console.log('3초 후에 실행됩니다.'); }, 3000); 위의 코드에서는 3초 후에 콘솔에 '3초 후에 실행됩니다.' 라는 문자열이 출력됩니다. setTime.. 2023. 3. 9.
[자바스크립트] 클로저 (closure) 자바스크립트 클로저(closure)는 함수와 함수가 선언됐을 때의 렉시컬 환경(lexical environment)의 조합입니다. 이를 이해하기 위해서는, 자바스크립트에서의 변수 스코프(scope)와 렉시컬 환경에 대한 이해가 필요합니다. 스코프는 변수가 유효한 범위를 나타내며, 자바스크립트에서는 전역 스코프(global scope)와 지역 스코프(local scope)로 나눠집니다. 전역 스코프는 코드 전체에서 접근 가능한 스코프이며, 지역 스코프는 함수 내부에서 선언한 변수가 접근 가능한 스코프입니다. 렉시컬 환경은 변수와 값의 매핑을 저장하는 객체입니다. 함수가 호출될 때마다 새로운 렉시컬 환경이 생성되며, 그 함수 내에서 선언한 변수와 값이 저장됩니다. 또한, 함수가 선언될 때의 렉시컬 환경을 기.. 2023. 3. 9.
[자바스크립트] 렉시컬 환경 (Lexical Environment) 자바스크립트에서 Lexical Environment는 변수, 함수 등의 식별자를 평가하고 참조할 때 사용되는 정보를 담고 있는 객체입니다. 이 객체는 실행 컨텍스트가 생성될 때 만들어지며, 해당 실행 컨텍스트에서 사용 가능한 변수와 함수 등의 식별자 정보를 저장하고 관리합니다. 1. 간단한 설명 Lexical Environment는 기본적으로 두 가지 정보를 포함하고 있습니다. 1) 환경 레코드(Environment Record) 현재 컨텍스트에서 선언된 변수, 함수 등의 정보를 담고 있습니다. 이 환경 레코드는 일반적으로 객체 형태로 구현되며, 변수 이름과 값, 함수 등을 저장합니다. 2) 외부 렉시컬 환경 참조(Outer Lexical Environment Reference) 현재 실행 컨텍스트가 참.. 2023. 3. 9.
[자바스크립트] 콜스택 (Call stack) 자바스크립트에서 함수를 호출할 때, 이를 호출 스택(Call Stack)에 쌓아놓고 실행합니다. 호출 스택은 함수 호출의 순서를 기억하며, 스택의 맨 위에 있는 함수가 현재 실행되고 있습니다. 함수가 실행을 완료하면, 스택에서 제거됩니다. 1. 코드 예시 예를 들어, 다음과 같은 코드가 있다고 가정해보겠습니다. function greet(name) { console.log(`Hello, ${name}!`); } function sayHello() { const name = "John"; greet(name); console.log("Finished saying hello."); } sayHello(); 위 코드에서 sayHello 함수가 호출되면, 호출 스택에 sayHello 함수가 쌓입니다. 그리고 s.. 2023. 3. 9.