본문 바로가기

Web/JavaScript

JavaScript ES6 & 객체 지향 문법 📒 왜? (사용 이유) ◼ JavaScript로 UI 같은 것은 매우 쉽게 만들 수 있지만, JavaScript 문법을 사용하다 보면 어렵고 불편한 문법들이 많다. ◼ ES6는 JavaScript 버전(2015)으로 대규모 업데이트가 진행되어, JavaScript를 조금 더 쉽고 편리하게 사용할 수 있도록 많은 문법들을 지원해 준다. 📒 Arrow function ◼ 함수를 만드는 방법에는 위 두 가지 방법이 존재한다. ◼ function 키워드 대신 ES6의 Arrow function을 사용해서 방법 2와 같이 함수를 만들 수 있다. ◼ this 값을 재정의 하지 않아도 될 때, 사용하는 것이 좋다. ✔ Arrow fucntion의 장점 ◼ 함수를 만들 때 가독성이 향상된다. ◼ 파라미터가 1개 있을 .. 더보기
[JavaScript] this 키워드 알아보기 📒 왜? ◼ JavaScript를 사용하면서 this를 사용했을 때, 어떤 경우에는 {window}가, 또 다른 경우에는 Object가 출력되었다. ◼ 이에 this에 대해 정리하고자 글을 작성한다. 📒 this 키워드 ◼ this는 상황에 따라서 뜻이 3~4 가지로 변경된다. ✔ 최상위 this & function에서 this 사용 ◼ 출력 결과는 window에 대한 정보가 표시된다. ◼ window는 전역 변수 보관소이다. ✔ strict mode에서 function에서 this 사용 ◼ strict mode (엄격한 실행)에서 일반 함수 안에 this를 사용하면 undefined가 출력된다. ✔ Object 안의 function에서 this 실행 ◼ Object 안의 함수에서 this를 실행하면, .. 더보기
JavaScript 기본 및 사용하기 📒 왜? (사용 이유) ◼ JavaScript를 쓰는 가장 큰 이유는 HTML 조작이 목적이다. ◼ 그 외로, 서버와 통신 가능, 클릭 및 타이핑 감지, 비동기 처리, 자료 다루기 등의 목적으로도 사용된다. 📒 JavaScript ◼ JavaScript는 Call Stack이 하나로, single thread로 동작한다. ◼ event loop를 이용해서 비동기 방식으로 동시성을 지원하는데, 이는 자바스크립트 엔진에서 지원하는 것이 아닌, 브라우저나 node.js에서 지원된다. ✔ JavaScript 구조 ◼ Heap & Call Stack: V8과 같은 JavaScript 엔진의 구성요소이다. ❗ Heap: JavaScript의 객체의 주소 값, 구조화되지 않은 메모리 영역이 쌓인다. ❗ Call St.. 더보기