반응형

Event Loop에 대한 내용입니다.

이벤트 루프는 자바스크립트를 비롯한 비블록킹 I/O 연산을 포함한 여러 프로그래밍 언어에서 기본적인 개념으로, 주요 실행 스레드를 차단하지 않고 타이머, 네트워크 요청, 사용자 인터렉션 등의 비동기 연산을 효율적으로 처리할 수 있도록 하는 런타임 환경의 중요한 부분입니다.

 

자바스크립트에서 이벤트 루프가 작동하는 방식

  • 메인 쓰레드( Main Thread ): 자바스크립트는 싱글 쓰레드이므로 한 번에 하나의 작업만 실행할 수 있습니다. 메인 쓰레드는 자바스크립트 프로그램에서 사용자가 작성한 코드를 실행하는 역할을 합니다.
  • 콜 스택( Call Stack ): 콜 스택은 현재 실행 중인 함수나 작업을 추적하는 데이터 구조입니다. 함수가 호출되면 콜 스택에 푸시되고 완료되면 스택에서 제거됩니다. 이 스택은 함수가 호출되고 실행되는 순서를 추적하는데 사용됩니다.
  • 콜백 큐( Callback Queue ): 콜백 큐는 콜 스택이 비어 있을 때 실행하기 위해 함수와 작업이 배치되는 큐입니다. 콜백은 타이머, 네트워크 요청 및 사용자 상호 작용과 같은 비동기 작업에서 발생하는 경우가 많습니다.
  • 이벤트 루프( Event Loop ): 이벤트 루프는 콜 스택과 콜백 큐를 모니터링하는 연속적인 프로세스입니다. 콜 스택이 비어 있는지 확인합니다. 비어 있으면 이벤트 루프가 콜백 큐에서 첫 번째 함수나 작업을 가져와 실행하기 위해 콜 스택에 푸시합니다.

 

이벤트 루프 예제

console.log("시작");

setTimeout(function () {
  console.log("setTimeout 중간");
}, 0)

console.log("끝");

 

위 내용은 아래와 같습니다.

  1. 먼저 시작과 끝은 동기 작업이기 때문에 먼저 콘솔에 기록됩니다.
  2. setTimeout은 비동기 작업이기 때문에 아무리 0초의 지연이 있어도 동기 코드가 모두 실행된 후 콜백 큐에 배치가 됩니다.
  3. 이벤트 루프는 콜 스택을 검사하여 비어 있는 것을 확인한 다음 큐에서 콜 스택으로 콜을 이동합니다. 이때 setTimeout 중간 내용이 콘솔에 기록됩니다.

 

이벤트 루프를 통해 자바스크립트는 차단되지 않고 반응할 수 있습니다. 이를 통해 메인 쓰레드를 정지하거나 속도를 늦추지 않고 비동기 코드를 실행할 수 있기 때문에 사용자 인터페이스가 대화형으로 유지되고 장시간 실행되는 작업으로 인해 다른 작업이 차단되지 않습니다.

 

이벤트 루프는 타이머, 네트워크 요청 외에도 자바스크립트에서 이벤트, 상호작용, 약속 등을 처리하는 데에도 매우 중요하며, 특히 웹 개발 상황에서 효율적이고 응답성이 높은 자바스크립트 코드를 작성하는 데에는 이벤트 루프의 동작을 이해하는 것이 매우 중요합니다.

 

 


 

그림으로 보는 예제

 

반응형
반응형

Scope와 Scope Chain에 대한 내용입니다.

 

Scope

스코프는 프로그래밍에서 변수가 선언되고 사용되는 상황을 의미합니다.

코드에서 특정 변수나 식별자가 접근 가능하거나 표시되는 위치를 결정합니다. 스코프를 이해하는 것은 변수 수명을 관리하고 네임충돌을 방지하며 잘 구조화된 코드를 작성하는데 매우 중요합니다.

 

  • 전역 범위( Global Scope ): 전역 범위에 선언된 변수는 모든 함수와 코드 블록을 포함하여 프로그램 전체에서 접근이 가능합니다. 이 변수들은 전역 수명을 가지며 전역 상수로 간주될 수 있습니다.
  • 로컬[ Function ] 범위 ( Local Scope ): 함수 내에 선언된 변수는 로컬 범위를 갖습니다. 해당 함수 내에서만 액세스할 수 있습니다. 함수가 완료되면 이러한 변수는 일반적으로 소멸됩니다. ( 클로저에 캡처되지 않는 한 )

 

블록 범위: 블록 범위는 현대 자바스크립트에서 let과 const 키워드를 사용하여 도입되었습니다. block문에서 let과 const를 사용하여 선언된 변수는 블록 범위를 가지며 해당 블록 내에서만 액세스할 수 있습니다.

 

Scope Chain

스코프 체인은 자바스크립트에서 스코프의 계층입니다. 변수에 접근하면 현재 스코프에서 해당 변수를 검색한 다음 해당 변수를 찾거나 전역 스코프에 도달할 때까지 스코프 체인을 따라 이동합니다. 이 프로세스를 통해 변수가 올바른 스코프에서 해결되도록 보장합니다. 변수가 발견되면 자바스크립트는 검색을 중지하고 변수 값을 사용합니다.

 

 

자바스크립트의 scope와 scope chain의 예

const globalScope = "Global Scope";

function outer() {
  const outerScop = "Outer";

  function inner() {
    const innerScop = "Inner";

    console.log("가장 내부", globalScope);
    console.log("가장 내부", outerScop);
    console.log("가장 내부", innerScop);
  }

  inner();

  console.log("내부", globalScope);
  console.log("내부", outerScop);
  // console.log("내부", innerScop);
}

outer();

console.log("외부", globalScope);
// console.log("외부", outerScop);
// console.log("외부", innerScop);

위 내용은 아래와 같습니다.

  • globalScope는 전역 범위 내에 있으며 코드의 모든 부분에서 접근할 수 있습니다.
  • outerScope는 outer 함수의 범위에 속하며, 해당 기능과 내부 기능 내에서 접근할 수 있습니다.
  • innerScope는 inner 함수의 범위 내에 있으며, 해당 함수 내에서만 접근할 수 있습니다.

 

스코프 체인은 변수가 적절한 컨텍스트에서 해결되도록 보장하여 다른 스코프에서 동일한 이름을 가진 변수 간의 충돌을 방지해 줍니다. 스코프와 스코프 체인을 이해하는 것은 신뢰할 수 있고 유지 관리 가능한 자바스크립트 코드를 작성하는데 중요합니다.

반응형
반응형

Event Binding에 대한 내용입니다.

이벤트 바인딩은 웹 개발에서 일반적으로 사용되고 있으며, 특히 자바스크립트를 사용할 때 HTML 요소에 이벤트 리스너를 부착하여 사용자 상호 작용을 처리하고 이벤트에 응답하는 것을 포함합니다. 이는 대화형 및 동적 웹 애플리케이션을 구축하기 위한 기본 개념입니다.

이벤트 바인딩을 사용하면 버튼 클릭이나 양식 제출과 같은 요소에서 특정 이벤트가 발생했을 때 발생할 작업을 지정할 수 있습니다.

 

이벤트 바인딩의 주요 내용

  1. 이벤트 리스너( Event Listener ): 이벤트 리스너는 버튼이나 입력 필드와 같은 HTML 요소의 이벤트를 수신하는 자바스크립트 함수입니다. 이벤트가 발생할 때까지 기다린 다음 콜백 함수와 같은 지정된 코드 조각을 실행합니다.
  2. 이벤트 유형( Event Type ): 이벤트는 click, submit, keypress, mouseover등 다양한 유형이 될 수 있습니다. 각 유형은 특정 사용자 작업에 해당하며 이벤트 리스너를 요소에 연결하여 이러한 작업에 응답할 수 있습니다.
  3. 이벤트 대상( Event Target ): 이벤트 대상은 이벤트 리스너를 연결하는 HTML 요소입니다. 이 요소에서 지정된 이벤트가 발생하면 연관된 이벤트 리스너가 트리거 됩니다.
  4. 콜백 함수 ( Callback Function ): 콜백 함수는 이벤트가 발생했을 때 실행되는 코드입니다. 이는 애플리케이션이 이벤트에 응답하는 방법을 정의합니다. 사용자 정의 자바스크립트 함수를 이벤트 핸들러로 작성하여 사용자 인터페이스 업데이트 또는 서버에 데이터 전송과 같은 작업을 수행할 수 있습니다.

 

메서드를 사용하는 자바스크립트의 이벤트 바인딩에 대한 예제

const myButton = document.getElementById("myButton");

function handleClick() {
    alert("버튼 클릭");
};

myButton.addEventListener("click", handleClick);

위 내용은 아래와 같습니다.

  • getElementById 메서드로 HTML 버튼 요소를 선택하여 myButton 변수에 할당합니다.
  • handleClick 버튼을 클릭할 때 호출될 함수를 정의합니다. 이 경우 경고가 표시됩니다.
  • addEventListener 메서드를 사용하여 클릭 이벤트 리스너를 클릭하여 콜백 기능 핸들 클릭을 지정합니다. 버튼을 클릭하면 해당 기능이 실행됩니다.

이벤트 바인딩은 대화형 웹 응용 프로글매을 만드는데 중요합니다. 이를 통해 사용자 입력에 응답하고, 특정 이벤트에 대한 응답으로 작업을 트리거하고, 동적 사용자 인터페이스를 구축할 수 있습니다. button, form, input field 등과 같은 다양한 DOM 요소와 함께 이벤트 바인딩을 사용하여 반응성이 뛰어나고 매력적인 웹 애플리케이션을 만들 수 있습니다.

 

 


 

추가내용

이벤트 바인딩에 대표적 3가지 방식

  1. HTML 이벤트 핸들러
  2. 적통적인 DOM 이벤트 핸들러
  3. Event Listener를 이용한 이벤트 핸들러

 

1. HTML 이벤트 핸들러

HTML 요소에 이벤트 Attribute에 이벤트 핸들러를 대응시키는 방법입니다.

// HTML
<button onclick="clickBtn()">클릭</button>

// JS
function clickBtn() {
    alert("경고창");
};

옛날 코드들을 보게되면 위같은 방식을 사용한 코드들이 있습니다. 그래서 알아둘 필요는 있지만, 현재는 사용하지 않는 방식입니다.

위처럼 사용하게 되면 HTML과 자바스크립트가 혼용이 되기 때문에 사용하는 것을 피해야 합니다.

 

HTML 이벤트 핸들러의 this

// HTML
<button onclick="clickBtn()">클릭</button>

// JS
function clickBtn() {
    alert("경고창");

    console.log(this); // window
    console.log(event.currentTarget); // clickBtn
};

 

2. 전통적인 DOM 이벤트 핸들러

HTML 이벤트 핸들러의 혼용되는 문제는 해결이 되었습니다. 하지만 이벤트 핸들러에 하나의 함수만 바인딩 할 수 있다는 것과 함수에 인수를 전달 할 수 없는 점, 그리고 바인딩된 이벤트 핸들러가 2개 이상일 경우 제일 마지막에 추가된 코드의 바인딩된 이벤트 핸들러만 실행된다는 단점이 있습니다.

// HTML
<button id="clickBtn">클릭</button>

// JS
let myBtn = document.getElementById("clickBtn");

// 첫번쨰 바인딩 ( 실행되지 않음 )
myBtn.onclick = function() {
    alert("경고");
};

// 두번째 바인딩
myBtn.onclick = function() {
    alert("두번째 경고");
}

 

전통적인 DOM 이벤트 핸들러의 this

// HTML
<button id="clickBtn">클릭</button>

// JS
let myBtn = document.getElementById("clickBtn");

myBtn.onclick = function() {
    alert("경고");

    console.log(this); // clickBtn
    console.log(event.currentTarget); // clickBtn
    console.log(this === event.currentTarget); // true
};

 

3. Event Listener를 이용한 이벤트 핸들러

addEventListener 함수를 이용해서 대상 요소( Event Target )에 이벤트를 바인딩 하고, 해당 이벤트가 발생했을 때 실행될 콜백 함수를 지정합니다.

<button id="clickBtn">클릭</button>

let el = document.getElementById("clickBtn");

el.addEventListener("click", function() {
    alert("경고");
}, false)

 

target.addEventListener(type, listener[, useCapture]);

addEventListener 함수의 인수

  • type: 이벤트 타입
  • listener: 이벤트 핸들러. 이벤트가 발생했을 때 실행될 콜백함수
  • useCapture: true면 Capturing, false면 Bubbling ( Default: false )

addEventListener를 이용한 이벤트 핸들러는 하나의 이벤트에 대해 하나 이상의 핸들러를 추가할 수 있으며, 캡처링과 버블링을 지원하며, HTML 요소뿐 아니라 모든 DOM 요소에 대해 동작한다는 장점이 있습니다.

// HTML
<input type="text" id="nick" />

// JS
let el = document.getElementById("nick");

el.addEventListener("blur", function() {
    alert("포커스");
});

addEventListener 함수 앞에 대상요소인 el을 지정하지 않으면 blur 이벤트는 전역객체인 window에 바인딩됩니다.

:: ) addEventListener 함수는 IE 9이상에서 동작하며, IE 8 이하에서는 attachEvent함수를 사용합니다.

 

EventListener를 이용한 이벤트 핸들러의 this

// HTML
<button id="clickBtn"></button>

// JS
let myBtn = document.getElementById("clickBtn");

myBtn.addEventListener("click", function(e) {
    console.log(this); // clickBtn
    console.log(event.currentTarget); // clickBtn
    console.log(this === event.currentTarget); // true
});

 

반응형
반응형

Prototype과 Prototype Chaining에 대한 내용입니다.

자바스크립트에서 프로토타입과 프로토타입 체이닝은 객체 지향 프로그래밍과 관련된 기본 개념입니다.

 

프로토타입( Prototype )

자바스크립트에서 모든 객체에는 해당 메서드와 속성을 정의하는 연관된 프로토타입( 또는 프로토타입 객체 )이 있습니다.

프로토타입은 상속을 구현하고 객체 간의 동작을 공유하는 방법입니다.

 

프로토타입에는 고려해야 할 두가지 주요 측면이 존재합니다.

  1. 객체 프로토타입
    - 배열 및 함수와 같은 내장 개체를 포함하여 자바스크립트의 각 개체에는 해당 개체의 인스턴스에서 액세스할 수 있는 메서드와 속성을 제공하는 프로토타입 개체가 있습니다. 예를 들어, 배열의 프로토타입에는 push, pop, length등의 방법이 포함되어 있으며, 이 방법은 모든 배열에서 사용할 수 있습니다.
  2. 생성자 함수의 프로토타입
    - 객체를 생성하는데 사용되는 생성자 함수는 프로토타입 속성을 갖습니다. 이 프로토타입 속성은 해당 생성자가 생성한 모든 인스턴스 간에 공유됩니다.
    - 생성자 함수의 프로토타입에 메서드 및 속성을 추가할 수 있으며 해당 생성자에서 생성된 모든 인스턴스에서 해당 메서드 및 속성에 액세스 할 수 있습니다.

EX :

function Person(name) {
    this.name = name;
}

Person.prototype.greet = function() {
    console.log(`Hello, 나의 이름은 ${this.name}`);
}

const person1 = new Person("Shiro");
const person2 = new Person("Jun");

person1.greet(); // Hello, 나의 이름은 Shiro
person2.greet(); // Hello, 나의 이름은 Jun

 

프로토타입 체이닝 ( Prototype Chaining )

프로토타입 체이닝은 객체가 프로토타입 객체로부터 속성과 메서드를 상속하고, 그 결과 다른 프로토타입으로부터 상속받을 수 있는 자바스크립트의 메커니즘을 나타냅니다. 이렇게 하면 프로토타입 체인이 생성되어 객체가 프로토타입 체인에 정의된 동작을 공유하고 액세스할 수 있습니다.

 

EX :

// 생성자 함수 정의
function Animal(name) {
    this.name = name;
}

// 프로토타입에 메서드 추가
Animal.prototype.speak = function() {
    console.log(`${this.name} 울음소리가 들립니다.`);
}

// 동물 인스턴스 생성
const cat = new Animal("고양이");

// 새로운 생성자 함수 생성
function Dog(name) {
    this.name = name;
};

// Dog prototype을 Animal의 한 예르 설정
Dog.prototype = new Animal("멍멍이");

// Dog 인스턴스 생성
const dog = new Dog("강아지");

// 프로토타입 체이닝을 통해 dog는 Animal의 method를 이어 받습니다.
dog.speak(); // 강아지 울음소리가 들립니다.

위 내용은 아래와 같습니다.

 

  • Animal과 Dog라는 두가지 constructor 기능을 갖고 있습니다.
  • 도그 컨스트럭터의 프로토타입은 애니멀의 인스턴스로 설정되어 프로토타입 체인이 생성됩니다.
  • 도그를 통해 생성된 도그 객체는 도그 생성자 또는 인스턴스에 직접 정의되지 않더라도 speak 메서드에 액세스할 수 있습니다.

 

프로토타입 체이닝은 자바스크립트에서 객체가 프로토타입으로부터 동작을 상속 및 공유할 수 있는 일종의 상속을 가능하게 하며, 언어에서 객체 지향 프로그래밍의 중심 메커니즘이며, 자바스크립트의 내장 객체 및 사용자 정의 객체 계층 구조와 함께 작업할 때 광범위하게 사용됩니다.

 

반응형
반응형

Webpack, Babel, Polyfill에 대한 내용입니다.

Webpack

Webpack은 웹 애플리케이션의 다양한 자산과 종속성을 관리하고 번들링하는데 도움이 되는 인기 있는 오픈 소스 자바스크립트 모듈 번들러입니다. 주요 목적은 여러 자바스크립트 파일, CSS 파일, 이미지 및 기타 자산을 가져와 웹 브라우저에서 로드할 수 있는 최적화된 단일 패키지로 묶는 것입니다.

 

Webpack의 주요 기능과 개념

  1. 모듈 시스템: 웹팩은 강력한 모듈 시스템을 제공하므로 코드를 별도의 모듈로 구성하고 모듈 간의 종속성을 관리할 수 있습니다. 이는 모듈식 및 구성 요소 기반인 최신 자바스크립트 애플리케이션에 특히 유용합니다.
  2. 코드 분할: 웹팩은 코드 분할을 지원합니다. 즉, 코드를 여러 개의 작은 묶음으로 분할하여 로드 효율을 높이고 초기 페이지 로드 시간을 줄일 수 있습니다.
  3. 로더: 웹팩의 로더를 사용하면 다양한 유형의 파일( ex: ES6 자바스크립트, CSS, 이미지 )을 함께 묶을 수 있는 형식으로 변환할 수 있습니다.
  4. 플러그인: 웹팩 플러그인은 기능을 확장하여 축소, 코드 최적화 및 자산 관리와 같은 작업을 수행합니다. 일반적으로 UglifyJS, HtmlWebpackPlugin, CleanWebpackPlugin등의 플러그인이 사용됩니다.
  5. 개발 서버: 웹팩은 개발 프로세스를 간소화하기 위해 라이브 리로딩, 핫 모듈 교체 및 기타 기능을 제공하는 개발 서버와 함께 제공됩니다.
  6. 자산 처리: 글꼴, 이미지, 스타일을 포함한 다양한 자산 유형을 처리할 수 있으므로 프로젝트의 모든 자산을 관리하기 위한 다목적 도구가 됩니다.
  7. 구성: 웹팩은 번들링 프로세스의 작동 방식을 정의하는 구성 파일( 일반적으로 webpack.config.js )을 사용합니다. 이 구성 파일을 사용하면 프로젝트의 요구 사항에 맞게 빌드 옵션을 사용자 지정할 수 있습니다.

Webpack은 현대 웹 개발에서 코드를 묶음 및 최적화하고 종속성을 관리하며 개발 및 배포 프로세스를 간소화하는데 자주 사용됩니다.

 

Babel

Babel은 개발자가 ES6( ES2015 )이상을 포함한 최신 ECMAScript( ES )표준을 사용하여 코드를 작성하고 해당 코드를 모든 브라우저에서 실행될 수 있는 이전 버전의 자바스크립트로 변환할 수 있게 해주는 자바스크립트 컴파일러입니다. 최신 언어 기능을 지원하지 않습니다.

 

Babel의 주요 기능과 개념

  1. 변환: 바벨은 최신 자바스크립트 코드를 다양한 브라우저에서 실행할 수 있는 이전 버전( 일반적으로 ES5 )으로 변환합니다. 이를 통해 다양한 환경에서의 호환성이 보장됩니다.
  2. 플러그인 시스템: 바벨은 개발자가 특정 변환을 활성화하거나 비활성화할 수 있는 플러그인 시스템을 사용합니다. 필요한 변환만 적용하도록 바벨을 구성할 수 있습니다.
  3. 새로운 기능 지원: 바벨은 최신 자바스크립트 기능 및 제안을 지원하므로 개발자는 이전 브라우저 환경에서도 최신 구문 및 언어 기능을 사용할 수 있습니다.
  4. 통합: 바벨은 웹팩과 같은 다양한 빌드 도구 및 프레임워크에 통합되어 빌드 단계에서 변환 프로세스를 자동화 할 수 있습니다.
  5. 사용자 정의: 개발자는 프로젝트 요구 사항에 따라 사전 설정과 플러그인을 구성하여 바벨의 동작을 사용자 정의할 수 있습니다.

Babel은 애플리케이션이 다양한 브라우저 및 플랫폼과 호환되도록 하면서 최신 자바스크립트 기능을 사용하려는 개발자에게 필수입니다.

 

Polyfill

polyfiller의 약자인 polyfill은 특정 기능이나 API에 대한 지원이 부족한 구형 브라우저에 최신 기능을 제공하는 코드 조각( 일반적으로 자바스크립트 )입니다. polyfill은 이전 브라우저와 최신 브라우저 사이의 격차를 해소하여 개발자가 더 광범위한 사용자 기반과의 호환서을 유지하면서 최신 웹 기술을 사용할 수 있도록 합니다.

 

Polyfill의 작동 방식

  • 기능 지원 감지: 폴리필은 브라우저가 특정 기능이나 API를 기본적으로 지원하는지 먼저 확인하고, 지원하는 경우에는 폴리필이 적용되지 않습니다.
  • 폴리필 적용: 브라우저에서 기능이 지원되지 않으면 누락된 기능을 제공하는 폴리필이 실행됩니다.

Polyfill은 최신 자바스크립트 기능을 사용하여 개발된 애플리케이션이 이전 브라우저에서 올바르게 실행되도록 보장하기 위해 종종 Babel 및 Webpack과 함께 사용됩니다. 새로운 자바스크립트 메서드, HTML5 기능, CSS속성과 같은 기능에 특히 유용합니다.

 

요약해보자면, Webpack은 번들러이자 빌드 도구이고 Babel은 자바스크립트 트랜스파일러이며, Polyfill은 이전 브라우저에서 최신 기능을 활성화하는 코드 조각입니다. 이들은 함께 웹 개발자가 최신 웹 기술을 활용하면서 브라우저 간 호환 응용 프로그램을 구축하고 유지 관리하도록 돕습니다.

 

반응형

'IT > IT ★★★' 카테고리의 다른 글

[ JS ] Event Binding에 대하여  (0) 2023.10.16
[ JS ] Prototype과 Prototype Chaining에 대하여  (0) 2023.10.16
[ Web ] DOM과 Virtual DOM에 대하여  (0) 2023.10.12
[ JS ] ESLint에 대하여  (0) 2023.10.11
[ JS ] Promise에 대하여  (1) 2023.10.11
반응형

DOM과 Virtual DOM에 대한 내용입니다.

DOM ( Document Object Model )

DOM( 문서 객체 모델 )은 웹 문서를 위한 프로그래밍 인터페이스입니다. 이는 웹 페이지의 구조와 콘텐츠를 트리와 같은 개체 구조로 나타내며 프로그램이나 스크립트가 문서의 콘텐츠, 구조 및 스타일과 상호 작용하고 조작할 수 있도록 합니다.

DOM은 웹 개발의 중요한 구성 요소이며 동적인 대화형 웹 페이지를 가능하게 합니다.


DOM의 중요 내용

  1. 트리 구조: DOM은 웹페이지를 트리 구조로 표현합니다. 각 HTML 요소, 속성 및 텍스트 콘텐츠는 이 트리에서 노드로 표시됩니다.
  2. 자바스크립트 상호 작용: 개발자는 자바스크립트를 사용하여 DOM에 액세스하고, 수정하고, 조작할 수 있습니다. 예를 들어 HTML 요소의 콘텐츠를 변경하거나, 요소를 추가 또는 제거하거나, 사용자 상호 작용에 응답할 수 있습니다.
  3. 크로스 플랫폼: DOM은 플랫폼에 구애받지 않으며 다양한 프로그래밍 언어와 함께 사용할 수 있지만 가장 일반적으로 자바스크립트와 함께 사용됩니다.
  4. 동적 업데이트: DOM의 주요 목적 중 하나는 웹 페이지에 대한 동적 업데이트를 허용하는 것입니다. 전체 페이지를 다시 로드할 필요 없이 대화형 기능을 만들고, 콘텐츠를 업데이트하고, 사용자 작업에 응답할 수 있습니다.
  5. 이벤트 처리: DOM을 사용하면 이벤트 리스너를 등록하여 click, keypress, mouse move와 같은 사용자 작업에 응답할 수 있습니다.
  6. 순회: DOM Tree를 순회하여 노드 사이를 이동하고, 특정 요소를 찾고, 문서 구조를 탐색할 수 있습니다.

 

Virtual DOM

Virtual DOM은 React와 같은 웹 개발 프레임워크의 맥락에서 주로 사용되는 개념이자 기술입니다.

이는 표준이나 별도의 기술이 아니라 웹 애플리케이션의 렌더링을 최적화하기 위한 패턴입니다. Virtual DOM은 실제 DOM을 추상화한 형태로 존재하며 웹 애플리케이션의 성능을 향상시키는데 사용됩니다.

 

Virtual DOM의 주요 내용

  1. 메모리 내 표현: 가상 DOM은 실제 DOM을 메모리 내 표현합니다. 실제 DOM Tree의 경량 복사본입니다.
  2. 조정: 애플리케이션의 상태가 변경되면 가상 DOM을 사용하여 새 상태와 이전 상태 간의 차이를 계산합니다. 이 과정을 조정이라고 합니다.
  3. 일관 업데이트: 가상 DOM 업데이트는 일반적으로 함께 일괄 처리되며 직접적인 DOM 조작보다 더 효율적인 방식으로 수행됩니다.
    이 일괄 처리는 실제 DOM에 대한 실제 변경 횟수를 줄여줍니다.
  4. 향상된 성능: 가상 DOM은 실제 DOM에 대한 업데이트 횟수를 줄임으로써 웹 애플리케이션의 성능을 크게 향상시켜 보다 원활한 사용자 경험을 제공할 수 있습니다.
  5. 컴포넌트 기반: 가상 DOM은 React와 같은 컴포넌트 기반 라이브러리 및 프레임워크에서 자주 사용됩니다. 각 구성 요소는 가상 DOM 표현을 유지하며 구성 요소 수준에서 효율적으로 변경이 이루어집니다.

 

React에서 Virtual DOM이 작동하는 방식

  1. 구성 요소의 상태가 변경되어 다시 렌더링이 시작됩니다.
  2. React는 업데이트된 구성 요소와 그 하위 항목을 나타내는 새로운 Virtual DOM Tree를 구성합니다.
  3. React는 새로운 Virtual DOM Tree를 이전 트리와 비교하고 차이점을 계산합니다.
  4. 업데이트된 상태를 반영하기 위해 실제 DOM에 필요한 변경 사항만 적용됩니다.

 

Virtual DOM은 실제 DOM에 대한 업데이트를 최적화함으로써 웹 애플리케이션, 특히 복잡한 사용자 인터페이스를 갖춘 웹 애플리케이션의 성능을 향상시키는데 도움이 됩니다. 이는 현대의 자바스크립트 프레임워크와 라이브러리에서 핵심적인 기능이지만 가장 일반적으로 React와 연관되어 있습니다.

 

반응형
반응형

ESLint에 대한 내용입니다.

ESLint는 자바스크립트 코드의 문제를 식별하고 수정하기 위한 오픈 소스 정적 코드 분석 도구입니다.

이는 코딩 표준을 시행하고 프로젝트에서 일관된 코딩 스타일을 유지하는데 도움이 됩니다.

ESLint는 자바스크립트 커뮤니티에서 널리 사용되며 텍스트 편집기, 빌드 도구 및 CI( 지속적 통합 )시스템을 포함한 다양한 개발 워크플로에 통합될 수 있습니다.

 

ESLint의 주요 측면은 아래와 같습니다.

  1. 정적 코드 분석: ESLint는 정적 코드 분석을 수행합니다. 즉, 소스 코드를 실행하지 않고 검사합니다. 코드의 구조와 패턴을 분석하여 잠재적인 문제, 코딩 오류, 코딩 표준 편차를 식별합니다.
  2. 사용자 정의 가능한 규칙: ESLint를 사용하면 개발자는 프로젝트의 특정 요구사항에 따라 코딩 규칙을 정의하고 구성할 수 있습니다.
    코딩 스타일 및 기본 설정에 맞게 개별 규칙을 활성화, 비활성화 또는 사용자 정의할 수 있습니다.
  3. 코딩 표준 및 스타일 가이드: ESLint는 Airbnb, Google, Standard와 같은 널리 사용되는 자바스크립트 코딩 표준 및 스타일 가이드를 지원합니다. 사전 설정된 구성을 선택하거나 팀의 기본 설정에 맞는 사용자 정의 구성을 생성할 수 있습니다.
  4. 개발 도구와의 통합: ESLint는 코드 편집기 및 IDE( ex: Visual Studio Code, Sublime Text, WebStorm ), 빌드 도구( ex: Webpack, Gulp ) 및 버전 제어 시스템 ( ex: Git )을 포함한 다양한 개발 도구와 통합될 수 있습니다.
  5. 자동 코드 수정: ESLint는 문제를 식별할 뿐만 아니라 많은 문제를 자동으로 수정할 수 있습니다. 이 기능을 사용하면 깔끔하고 일관된 코드를 유지하는데 필요한 시간과 노력을 크게 줄일 수 있습니다.
  6. 확장성: ESLint는 특정 프로젝트 요구 사항이나 코드 패턴을 수용하기 위해 사용자 정의 플러그인 및 규칙을 사용하여 확장될 수 있습니다. 이러한 확장성을 통해 광범위한 자바스크립트 프로젝트를 위한 다목적 도구가 됩니다.
  7. 광범위한 커뮤니티 채택: ESLint는 자바스크립트 생태계에서 가장 인기 있고 널리 채택되는 린팅 도구 중 하나입니다. 광범위한 커뮤니티 지원을 통해 지속적으로 업데이트되고 유지 관리됩니다.
  8. 오류 메시지: ESLint는 개발자가 특정 규칙을 위반한 이유와 이를 수정하는 방법을 이해하는데 도움이 되는 명확하고 유익한 오류 메시지를 제공합니다. 이렇게하면 코드 문제를 더 쉽게 디버깅하고 수정할 수 있습니다.

 

ESLint의 기본 구성 예

// .eslintrc.js
module.exports = {
    extends: "eslint:recommended",
    rules: {
        "no-console": "warn",
        "indent": ["error", 2]
    }
};

위 내용은 아래와 같이 수행합니다.

  • extends: 'eslint:recommended'는 ESLint의 권장 규칙을 기본 구성으로 사용합니다.
  • rules를 사용하면 필요에 따라 특정 규칙을 재정의하고 사용자 지정할 수 있습니다.

ESLint를 개발 워크플로우에 통합하면 코드 품질을 유지하고, 코딩 표준을 적용하며, 개발 프로세스 초기에 잠재적인 문제를 파악할 수 있으며, 자바스크립트 프로젝트를 수행하는 팀들에게 중요한 도구가 되어 일관성과 코드 유지성을 보장할 수 있습니다.

 

반응형
반응형

Promise에 대한 내용입니다.

Promise는 비동기 작업의 최종 완료 또는 실패와 그 결과 값을 나타내는 자바스크립트의 개체입니다.

비동기 코드 작업을 위한 보다 구조화되고 관리 가능한 방법을 제공하기 위해 프로미스가 도입되었습니다.

일반적으로 원격 서버에서 데이터 가져오기, 파일 읽기 또는 타이머 처리와 같이 완료하는데 다소 시간이 걸릴 수 있는 작업에 사용됩니다.

 

Promise에는 3가지 상태가 있습니다.

  1. Pending: 초기 상태입니다. 이는 비동기 작업이 계속 진행중이며, 아직 값이나 오류가 해결되지 않았음을 나타냅니다.
  2. Fulfilled ( Resolved ): 비동기 작업이  성공적으로 완료되었을 때 Promise의 상태입니다. 결과 값을 전달합니다.
  3. Rejected: 비동기 작업에 오류가 발생하거나 실패했을 때 Promise의 상태입니다. 실패 내용을 담고 있습니다.

Promise는 비동기 작업이 성공되거나 실패 했을때 발생해야 하는 작업을 정의하기 위해 .then().catch() 메서드와 함께 사용됩니다.

프로미스는 비동기 작업을 처리하는 구조화된 방법을 제공하며 콜백 지옥 또는 pyramid of doom를 피하는데 도움이 됩니다.

 

자바스크립트에서 프로미스를 사용하는 방법에 대한 예

const fetchData = new Promise((resolve, reject) => {
    // API에서 데이터를 가져왔다고 가정하기 위한 내용입니다.
    setTimeout(() => {
        const data = { message: "Data Fetch Successfully" };

        if (data) resolve(data);
        else reject("Fetch Fail");
    }, 2000);
});

fetchData
.then(data => {
    console.log("Success: ", data);
})
.catch(err => {
    console.log("Err: ", err);
})

위 내용은 아래와 같습니다.

  • setTimeout함수를 사용하여 비동기 작업을 시뮬레이션하는 fetchData Promise를 생성합니다. 지연 후 성공 메시지로 해결하거나 오류 메시지로 실패합니다.
  • .then()을 사용하여 프로미스가 이행( resolve )되었을때 성공 메시지를 보여줍니다.
  • 프로미스가 거절( reject )되었을 때 어떻게 처리할 것인지를 정의하기 위해서 .catch() 메서드를 사용해서 에러 메시지를 보여줍니다.

Promise는 비동기 연산을 처리하기 위한 보다 깨끗하고 구조화된 방법을 제공하며, 많은 자바스크립트 API 및 라이브러리의 기본 구성 요소입니다. 특히 Ajax 요청, 비동기 I/O 연산, 비동기 이벤트의 복잡한 흐름을 처리할 때 유용합니다. 프로미스는 자바스크립트 및 기타 프로그래밍 언어에서 비동기 코드를 관리하기 위한 기본 도구가 되었습니다.

반응형
반응형

비동기 함수에 대한 내용입니다.

비동기 프로그래밍 또는 비동기/대기라고도 하는 비동기 함수는 현대 프로그래밍, 특히 자바스크립트와 같은 언어의 기본 개념입니다.

이를 통해 전체 프로그램을 중단하고 작업이 완료될 때까지 기다리지 않고 네트워크 요청, 파일 I/O 또는 타이머와 같은 비차단 작업을 수행할 수 있는 코드를 작성할 수 있습니다.

비동기 기능은 반응성이 뛰어나며, 효율적인 애플리케이션을 구축하는데 필수입니다.

 

비동기 함수의 주요 구성 요소

1. 비동기 작업

  • 비동기 함수는 원격 서버에서 데이터를 가져오거나 디스크에서 대용량 파일을 읽는 등 완료하는데 시간이 오래 걸릴 수 있는 작업을 수행하는데 사용됩니다.

2. 콜백함수

  • 초기 비동기 프로그래밍에서는 비동기 작업의 결과를 처리하기 위해 콜백 함수가 일반적으로 사용되었습니다. 개발자는 콜백 함수를 비동기 작업에 대한 인수로 전달하고 작업이 완료되면 콜백이 실행됩니다.

3. 프로미스

  • 비동기 작업 처리를 개선하기 위한 약속이 도입되었습니다. 프로미스는 비동기 작업의 최종 완료 또는 실패를 나타내는 개체입니다. 작업이 완료되면 성공과 오류를 처리하기 이한 핸들러( .then().catch() )를 연결할 수 있습니다.

4. 비동기/대기

  • async/await은 자바스크립트를 포함한 많은 프로그래밍 언어에 최근 추가된 것입니다. async 비동기 함수를 정의하는 키워드와 awiat 대기 중인 작업이 완료될 때까지 함수를 일시 중지하는 키워드를 사용하여 비동기 코드를 사용하는 보다 읽기 쉽고 구조적인 방법을 제공합니다.

 

async/await을 사용하는 자바스크립트의 비동기 함수의 예

async function fetchData() {
    try {
        const res = await fetch("api.example.com");

        if (!res.ok) throw new Error("Fetch Data Err");

        const data = await res.json();
        return data;
    } catch(err) {
        console.log("Fetch Err", err);
        return null;
    }
}

fetchData()
.then(res => {
    if (res) console.log("Data Received: ", res);
    else console.log("Error");
})

 

위 내용에서 fetchData 함수는 비동기 키워드를 사용하여 비동기 함수로 선언됩니다.

함수 내에서 await 키워드를 사용하여 fetch 작업이 완료되고 응답이 수신될 때까지 기다립니다.

try...catch문을 사용하여 오류를 처리합니다.

마지막으로 함수는 가져온 데이터를 반환하거나 null인 경우 에러를 반환합니다.

 

비동기 기능은 특히 네트워크 요청, 데이터베이스 또는 기타 I/O 작업을 처리할 때 응답성이 높은 웹 애플리케이션을 구축하는데 필수입니다.

이 기능은 애플리케이션의 메인 스레드가 잠재적으로 시간이 많이 소요되는 작업이 완료될 때까지 기다리면서 사용자 상호 작용에 응답할 수 있도록 보장합니다.

 

반응형

'IT > IT ★★★' 카테고리의 다른 글

[ JS ] ESLint에 대하여  (0) 2023.10.11
[ JS ] Promise에 대하여  (1) 2023.10.11
[ Web ] 객체 지향 프로그래밍이란 ?  (0) 2023.10.10
[ Web ] HTTP와 HTTPS에 대하여  (2) 2023.10.10
[ Web ] MVVM 모델에 대하여  (0) 2023.10.09
반응형

객체 지향 프로그맹에 대한 내용입니다.

객체 지향 프로그래밍( OOP: Object-Oriented-Programming )은 컴퓨터 프로그램을 어떤 데이터를 입력받아 순서대로 처리하고 결과를 도출하는 명령어들의 목록으로 보는 시각에서 벗어나 여러 독립적인 부품들의 조합, 즉 객체들의 유기적인 협력과 결합으로 파악하고자 하는 컴퓨터 프로그래밍의 패러다임을 의미합니다.

 

객체 지향 프로그래밍의 장점

먼저 가장 큰 이점 중에 하나는 객체 지향적 설계를 통해 프로그램을 보다 유연하고 변깅이 용이하게 만들 수 있다는 점입니다. 소프트웨어를 설계할 때 객체 지향적 원리를 잘 적용해 둔 프로그램은 각각의 부품들이 각자의 독립적인 역할을 갖기 때문에 코드의 변경을 최소화하고 유지보수를 하는데 유리합니다.

좀 더 나아가, 코드의 재사용을 통해 반복적인 코드를 최소화하고, 코드를 간결하게 표현할 수 있습니다.

 

객체 지향 프로그래밍의 4가지 특징

객체 지향 프로그래밍은 소프트웨어 시스템을 설계하고 구현하기 위해 추상화, 상속, 다형성, 캡슐화의 개념이 존재합니다.

 

1. 추상화

  • 추상화는 불필요한 세부 사항을 숨기고 객체의 본질적인 특성을 기반으로 클래스를 모델링하여 복잡한 현실을 단순화하는 프로세스입니다.
  • 개체가 어떻게 수행하는지보다는 개체가 수행하는 작업에 중점을 두어 복잡한 시스템 작업을 더 쉽게 만들어줍니다.

2. 상속

  • 상속을 사용하면 클래스가 다른 클래스에서 속성과 메서드를 상속할 수 있습니다. 이는 코들 재사용성을 촉진하고 기존 클래스의 기능을 확장하는 특수 클래스 생성을 촉진합니다.

3. 다형성

  • 다형성을 통해 서로 다른 클래스의 객체를 공통 슈퍼클래스의 객체로 처리할 수 있습니다. 이를 통해 동적 메서드 호출 및 메서드 재정의가 가능해지며, 특정 구현에 따라 서로 다른 객체가 동일한 메서드 호출에 다르게 응답할 수 있습니다.

4. 캡슐화

  • 캡슐화는 데이터( 속성 )와 해당 데이터에 대해 작동하는 메서드( 함수 )를 클래스라는 단일 단위로 묶는 개념입니다.
  • 객체의 내부 상태에 대한 액세스를 제한하여 잘 정의된 인터페이스( 공용 메서드 )를 통해 제어된 액세스를 허용합니다.

 

 

예제로 보는 객체 지향 프로그래밍

 

item이라는 반복되는 객체가 존재할 때의 예입니다.

let name = "Jun Store";

let item = {
    name: "삼성TV",
    price: 100,
    size: "24inch"
}

let item2 = {
    name: "LG TV",
    price: 500,
    size: "56inch"
}

위처럼 item이라는 객체를 반복적으로 생성할 때 사람은 실수를 할 수 있습니다. 예를들어 name을 빼먹는다던지, price를 빼먹는 다던지.

이런 실수를 막기위한 것이 class입니다.

 

class는 어떤 속성과 기능이 있는지 정의해둔 지시서입니다. 아래처럼 표현할 수 있습니다.

// 클래스
class Items {
    name = "";
    price = 0;
    size = "";
    // 생성자 ( Items를 생성할 때는 name, price, size가 꼭 포함되어야 한다. )
    constructor(name, price, size) {
        this.name = name,
        this.price = price,
        this.size = size
    }
};
  • constructor: 클래스에 있는 속성들에 값을 초기화 시켜주는 함수 생성자입니다.
  • this: this를 사용해서 구분 지을 수 있습니다 ( ex: this.name은 class내부의 name이다 라는것을 알려줌. )

 

class를 가지고 item을 생성하기

let item = new Items("삼성TV", 100, "24inch");
let item2 = new Items("LG TV", 500, "56inch");

console.log(item);
console.log(item2);

/*
Items { name: '삼성TV', price: 100, size: '24inch' }
Items { name: 'LG TV', price: 500, size: '56inch' }
*/

 

class 상속( extends )

// 추상화
class Product {
    name = "";
    price = 0;
    constructor(name, price) {
        this.name = name,
        this.price = price
    }
}

// 상속
class Items extends Product {
    size = "";
    constructor(name, price, size) {
        // super()는 내 상위 클래스를 부를 때 사용합니다.
        super(name, price),
        this.size = size
    }
};

class Phone extends Product {
    size = "";
    type = "";
}

class Computer extends Product {
    model = "";
    status = "";
}

extends를 사용하게되면 Product의 내용을 가져와서 사용할 수 있도록 확장시켜줍니다.

위처럼 사용하게 되면 항상 겹치는 내용인 name과 price를 extends 시켜서 매번 클래스를 생성할 때 추가 시키지 않아도 됩니다.

이런 작업이 필요한 이유는 Computer를 판매할 때 상품번호, 제조사, 브랜드, 원산지, 종류, CPU종류, 속도 등등 여러가지 내용을 추가 시켜 주어야 하는데 이렇게 공통된 부분을 빼주게 된다면 간략화 시킬 수 있습니다.

 

이후에 공통된 정보가 추가 되었을 때 Product에만 추가를 시켜주면 extends된 부분에서 사용할 수 있게 됩니다.

 

Items에서 사용하던 this.name과 this.price는 상위 클래스로 넘어갔기 때문에 this를 사용할 수 없게 됩니다. 그래서 상위 클래스를 부를 수 있는 super()를 사용해서 상위 클래스에서 name과 price를 불러와줍니다.

 

class에 함수 추가하기

class Product {
    name = "";
    price = 0;
    constructor(name, price) {
        this.name = name,
        this.price = price
    };
    getPrice() {
        return this.price + "만원";
    };
}; // 캡슐화

let item = new Items("삼성TV", 100, "24inch");

console.log(item.getPrice()); // 100만원

위처럼 삼성TV의 가격이 100인 경우 원인지 만원인지 알 수 없기 때문에 함수를 사용해서 바꿔줄 수 있습니다.

이렇게 변수들과 변수에 관련된 함수들을 같은 클래스에 정의를 해서 패키지처럼 사용할 수 있는 것을 캡슐화라고 합니다.

 

class에 악의적인 내용 방지하기

위 같은 내용으로 결과값을 받으면 문제점이 있습니다.

item.price = -500;
console.log(item.getPrice());

위처럼 중간에 개발자가 실수로 -를 넣게되면 위처럼 -500만원이라는 금액이 표기됩니다.

이런것을 방지하기 위해 아래처럼 사용할 수 있습니다.

 

class Product {
    name = "";
    price = 0;
    constructor(name, price) {
        this.name = name,
        this.price = price
    };
    getPrice(price) {
        if (price < 0) return console.log("Minus Err!!!");

        return this.price = price + "만원";
    }
}

let item = new Items("삼성TV", 100, "24inch");

console.log(item.getPrice(500)); // 500만원
console.log(item.getPrice(-500)); // Minus Err!!!

이렇게 표현을 해주면 중간에 실수를 해도 바로바로 확인이 가능해집니다.

 

 

반응형

'IT > IT ★★★' 카테고리의 다른 글

[ JS ] Promise에 대하여  (1) 2023.10.11
[ JS ] 비동기 함수에 대하여  (0) 2023.10.11
[ Web ] HTTP와 HTTPS에 대하여  (2) 2023.10.10
[ Web ] MVVM 모델에 대하여  (0) 2023.10.09
[ Web ] MVC 모델에 대하여  (0) 2023.10.04

+ Recent posts