본문 바로가기

Programming Language/Javascript

(7)
[Javascript] [ this ] call , apply , bind Method [ this ] call , apply , bind Method [ this ] 현재 실행 중인 함수 또는 매서드 내에서 사용되며, 해당 함수 또는 메서드가 호출된 객체를 참조한다. this 값은 실행 컨텍스트에 따라 동적으로 바인딩 되며, 다양한 상황에서 다른 객체를 참조할 수 있다. 객체 내부에서의 메서드 호출 객체 내부의 메서드에서 ‘this’를 사용하면 해당 메서드를 호출한 객체를 참조할 수 있다. 이것은 주로 객체 지향 프로그래밍에서 주로 사용된다. const person = { name: 'John', sayHello: function () { console.log(`Hello, my name is ${this.name}`); }, }; person.sayHello(); // "Hello, m..
[Javascript] 이벤트 버블링 (with handleOutsideClick) _ event.stopPropagation() 이벤트 버블링 이벤트가 시작된 곳에서 상위 요소로 이벤트가 계속해서 전파된다. 따라서 아래의 예제에서 버튼을 클릭하면 handleOutsideClick 함수가 실행되어 메뉴가 열리지 않는( 닫아버리는) 문제가 발생했다 . 이를 해결 하기 위해 event.stopPropagation() 을 사용할 수 있었다. { selectMenu(); }} > KPI 이력 최신 버전 사용중 Version 1.0.0
[Javascript] Observer 패턴 ( 관찰자 패턴 for 업데이트 ) Observer 패턴 ( 관찰자 패턴 for 업데이트 ) 관찰자 패턴을 사용하여 데이터 변경을 감지하고 관찰자(옵저버)들에게 변경을 통지하고 업데이트 한다. Javascript 에서 데이터 변경을 감지하고 UI 를 업데이트하는 전통적인 방법이다. 스벨트킷 에서는 ‘$:’ 문법이 있다. class Observable { constructor() { this.observers = []; } addObserver(observer) { this.observers.push(observer); } notifyObservers() { this.observers.forEach(observer => { observer.update(); }); } } const data = new Observable(); data.add..
[Javascript] 배열(Array) 반환 함수 & 메서드 [ Map (함수) : 결과를 반환 ] → 배열의 각 요소를 순회하며 해당 요소에 대한 변환 함수를 적용한 배열을 생성 한다. → 기존 배열은 변경되지 않으며 , 변환된 결과만을 포함 하는 새 배열을 반환한다. const numbers = [1, 2, 3, 4, 5]; const doubled = numbers.map((num) => num * 2); // doubled는 [2, 4, 6, 8, 10]을 포함하는 배열입니다. [ Filter (함수) : 조건을 만족하는 요소를 반환 ] → filter 함수는 주어진 조건을 만족하는 배열의 요소 만을 남기고 나머지 요소를 제거, 새로운 배열을 생성. → 조건을 만족하지 않는 요소는 새 배열에 포함되지 않는다. → 즉 , 조건을 만족하는 요소만 새 배열에 포..
[Javascript] 자바스크립트 원리 & 이벤트 루프 동작(순회) 구조 이벤트 루프는 브라우저 동작을 제어하는 관리자 : 브라우저의 동작 타이밍을 제어하는 관리자마치 순회(loop) 하는듯하여 이벤트 루프라 부르는 것이다 [ 자바스크립트 엔진 구동 환경] 자바스크립트를 실행하는 소프트웨어로는 우리가 잘 알고 있는 웹브라우저와 런타임인 Node.js 가 있다.싱글 스레드인 자바스크립트 엔진이 어느 곳을 거쳐 비동기 작업을 수행하는지 우선 이 둘의 내부 구성도를 눈에 익혀보자. [ 브라우저 내부 구성도 ]구성 요소로는 Web APIs, Event Table, Callback Queue, Event Loop 등이 있다.﹡ Call Stack : 자바스크립트 엔진이 코드 실행을 위해 사용하는 메모리 구조﹡ Heap : 동적으로 생성된 자바스크립트 객체가 저장되는 공간﹡ Web AP..
[Javascript] JavaScript 를 사용하는 도구 [ 코드 에디터 ]﹡ JavaScript 코드를 작성하는데 사용되는 편집기 [ 런타임 환경 ]﹡ JavaScript 코드를 실행하는 환경 , 브라우저와 Node.js 가 일반적이다.﹡ 브라우저 (클라이언트)주로 클라이언트 측 런타임 환경으로 사용되고 , 사용자 인터페이스를 관리하며 클라이언트 측 JavaScript 코드를 실행하는 역할을 한다. ﹡ Node.js (서버)주로 서버 측 런타임 환경으로 , 서버측 JavaScript 코드를 실행하고 처리한다.﹡ npm run devNode.js 환경 에서 개발서버를 시작하는데 사용되는 명령어 이며,JavaScript 로 작성된 웹 애플리케이션을 개발하기 위한 환경을 구축 할 수 있다.주로 Node.js 환경에서 실행 되며, 웹 애플리케이션의 개발 서버를 시작..
[Javascript] 배열(Array) 과 객체(Object) [ Array [ ] ]﹡ Array는 일련의 값들을 저장하는데 사용되며, 이 값들은 일련의 숫자 인덱스를 통해 액세스할 수 있다. ﹡ Array는 [] 대괄호 를 사용하여 정의하며, 각 항목은 쉼표로 구분된다.let fruits = ["apple", "banana", "orange"]; console.log(fruits[0]); // "apple" [ Array 안에 Object 정의하기 ]let students = [ { name: "John", age: 20 }, { name: "Jane", age: 22 }, { name: "Bob", age: 21 } ]; [ Object { } ]﹡ Object 는 키(key)와 값(value)을 쌍으로 가지는 데이터를 저장하는 데 사용된다. ﹡ 키를 사용하여..