본문 바로가기

javascript

 (38)
<메모리> V8 엔진의 메모리 1. 소개 * 소개 - V8 엔진은 웹 브라우저를 만드는 데 기반을 제공하는 오픈 소스 자바스크립트 엔진이다. 자바스크립트는 인터프리터 언어이기 때문에 코드를 해석하고 실행하는 엔진이 필요하다. V8은 자바스크립트를 컴파일하고 실행한다. - 필자는 웹 프론트 분야를 공부하며 자바스크립트를 사용하기 때문에 V8 엔진의 메모리 관리에 대해 공부하며 정리하고자 한다. - V8엔진은 노드JS, Deno, Electron과 같은 런타임 뿐만 아니라 크롬, 크로미움, 오페라, 엣지 등의 브라우저에서도 사용되므로 V8 엔진의 메모리 관리를 공부하는 것은 매우 중요하다. 2. 메모리 구조 * V8 메모리 구조 - 자바스크립트는 단일 스레드이고, V8 역시 자바스크립트 컨텍스트 당 단일 프로세스를 사용한다. - 실행 중..
<ES7> ES2016(ES7) Features 1. 소개 ES7은 2016년에 발표된 ECMAScript2016 을 의미한다. 정식명칭은 ES7이 아닌 ES2016이다. 저번 포스팅해서 언급했듯이 TC39는 2015년부터 매년 새로운 버전의 ECMAScript를 릴리즈하기로 했었다. ES2015에 수많은 기능이 추가된지 1년밖에 안되서 그런 것인지는 모르겠지만 ES2016에서는 2개의 기능만 명세에 추가되었다. 하지만 나중에 등재되는 Async Await의 키워드나, Object values, etries등의 키워드가 등장하였다. 그리고 padStart, padEnd로 익히 사용되는 기능이 ES2016에서 padLeft, padRight라는 키워드로 등장하였다. 이들은 모두 ES2017에서 명세에 추가된다. 2. 기능 * Exponentiation ..
<ES6> ES2015(ES6) Features (2) 1. 소개 - 지난 포스팅에서 ES2015의 등장에 대해서 간단히 짚었다. ES2015(ES6)은 ES5가 소개된 후, 무려 6년이나 지나서 나타난 만큼 무수히 많은 기능들이 추가되었다. - 지난 번에 알아본 기능들을 나열해보면 Arrow Function, let, const, Default Parameters, Template Literals, Object Initialize, Destructuring Assignment 이 있다. 2. 기능 이번 포스팅을 끝으로 ES2015의 소개를 마칠 것이므로 모든 기능을 소개할 수는 없을 것 같다. 대표적인 나머지 기능들을 알아보고, 그 외에는 기타로 빼두었다. * Class - 대부분의 객체지향언어(C, Javs, Python)등과 달리 자바스크립트는 Clas..
<ES6> ES2015(ES6) Features (1) 1. 소개 이번 글을 시작으로 ECMA Script의 변화들을 정리해볼 예정이다. 먼저 ES6로 흔히 알려진 ES2015의 변화들과 그 기능들로 시작해보려한다. ES6은 위와 같은 짤이 있을정도로 자바스크립트에 엄청난 진화를 이루어냈다. 이 때를 시작으로 JQuery의 몰락이 시작되기도 했다. JQuery가 2006년 소개된 이후로 프론트 생태계에 엄청난 영향을 끼친 것은 사실이나, JS를 완전히 대체할 수 없었던 점, 노드JS의 등장과 리액트와 뷰와 같은 Virtural DOM의 사용등은 ES5를 사용한 Jquery를 누르기에 충분했다. 필자는 Jquery를 사용해본 적이 없으므로 이 내용은 일단 넘어가자... ES6은 이미 모든 브라우저(IE는 브라우저가 아니다. 응가다.)에서 지원할 정도로 표준화되..
<노드JS> 노드 JS란 1. 노드 JS란 * 정의 - 노드 js는 크롬 V8 자바스크립트 엔진으로 빌드된 자바스크립트 런타임이다. (Node.js is a JavaScript runtime built on Chrome's V8 JavaScript engine. ) - 위 문구는 노드js 공식사이트에서 노드js를 설명하는 문장이다. 흔히 노드js를 서버라고 오해하는 경우가 많으나 노드js는 단지 js코드를 실행시켜주는 도구 중 하나이다. - 노드외의 런타임을 예시로 알아보자면 웹 브라우저(크롬, 엣지, 사파리, 파이어폭스 등)들이 있다. - js가 브라우저에 한정된 언어라는 단점을 극복하기 위해 js 런타임을 만들기 위한 다양한 시도들이 있었으나 엔진 속도 문제를 극복하지 못하였다. 그러나 크롬 V8 엔진이 엄청난 속도를 보여주..
<자바스크립트> 콜백 1. 콜백 * 소개 - 실무에서 비동기 동작처리를 할 때 생기는 문제를 먼저 살펴보자. - 대표적인 비동기 동작으로 스크립트나 모듈을 로딩하는 것이 있다. function loadScript(src) { let script = document.createElement('script'); script.src = src; document.head.append(script); } - 위는 src에 있는 스크립트를 불러와서 다큐먼트에 추가하는 함수이다. 이 안에는 우리가 사용하고 싶은 harryFunc라는 함수가 들어있다고 가정하자. loadScript('/harry/script.js'); harryFunc(); - 위에서 정의한 함수를 사용하여 스크립트를 불러오고 함수를 실행했다. 그러나 안타깝게도 에러가 발..
<자바스크립트> JSON과 메서드 1. JSON - 복잡한 객체를 다룰 때, 객체를 보내거나 출력하는 상황에서 객체는 문자열로 전환되어야 한다. 이러한 상황을 유연하게 대처하기위해 JSON이 등장했다. - JSON(JavaScript Object Notation)은 값이나 객체를 나타내주는 범용 포맷이다. - 현재에는 라이브러리를 이용하여 다른 언어에서도 사용하게 되어 JSON을 데이터 교환 목적으로 많이 사용한다. - 대표적인 메서드로 .stringfy(객체를 JSON으로 변경)와 .JSON.parse(JSON을 객체로 변경)이 있다. 2. JSON.stringfy * stringfy - stringfy메서드는 말 그대로 객체를 문자열인 JSON으로 변경하는 메서드이다. let student = { name: 'Harry', age: ..
<자바스크립트> 구조 분해 할당 * 배열 분해 - 개발을 하다보면 객체나 배열의 원소들을 변수로 받아야 할 상황이 있다. 이 때 유용하게 쓰이는 것이 구조 분해 할당이다. - 배열의 원소가 변수로 각각 할당되는 예시를 보자. let arr = ["Harry", "Yoon"] let [firstName, lastName] = arr; console.log(firstName) // Harry console.log(lastName) // Yoon - 배열의 원소가 각각 firstName과 lastName에 순서대로 할당되었음을 알 수 있다. - 이렇게 하면 배열의 요소를 인덱스로 이용해서 하나하나 할당하는 것보다 훨씬 효율적이다. - 위의 경우 배열 대신 "Harry Yoon".split(' ') 을 넣더라도 동일하게 동작할 것이다. - 배..
<자바스크립트> 맵과 셋 1. 맵 * 기본 메서드 - 맵은 키가 있는 컬랙션을 저장한 '객체'나 순서가 있는 컬랙션을 저장한 '배열'과 다른 좀 더 현실적인 자료구조이다. - 맵에서의 기본적인 메서드와 프로퍼티는 다음과 같다. - new Map() : 맵을 만든다. - map.set(key, value) : key를 이용하여 value를 저장한다. - map.get(key) : key에 해당하는 value를 반환한다. - map.has(key) : key가 존재하는지 불리언 값을 반환한다. - map.delete(key) : key에 있는 값을 삭제한다. - map.clear() : 맵 내의 요소들을 모두 삭제한다. - map.size : 요소의 갯수를 반환한다. - 코드로써 맵을 좀 더 알아보자. let map = new Ma..
<자바스크립트> 배열 (1) 데큐, 추가, 삭제 메서드 - 이번 장에서는 배열에서 사용하는 다양한 메서드들을 알아보자. 1. 데큐 메서드 * 데큐 메서드 - 자바스크립트는 데큐 자료구조형의 메서드를 기본적으로 제공한다. - arr.push(...items) - 마지막 요소 추가 - arr.pop() - 마지막 요소 제거 - arr.shift() - 처음 요소 제거 - arr.unshift(...items) = 처음 요소 추가 2. 제거 메서드 * delete - 먼저 객체의 프로퍼티를 지우는 연산자 delete를 사용해보자. let arr = ["HARRY", "IU", "SUZY"] delete arr[1]; console.log(arr); // ["HARRY", empty, "SUZY"] - delete는 원하는 요소를 지울 수 있다. 그러나 key를 이..

티스토리툴바