Web/JavaScript

들어가며 브라우저를 위한 스크립팅 언어로 만들어진 자바스크립트의 처음 모습과 지금의 모습은 많이 달라졌습니다.처음 나왔을 당시에는 자바스크립트를 이용하여 수십 줄 이상의 코드를 짜는 일도 많지 않았지만, 점차 유명세를 타게 되며 API를 확장하고 코드 줄 수가 많아짐에 따라 실행 엔진을 최적화하는 작업이 이루어졌습니다.  첫 자바스크립트의 시작은 인터프리터 언어였습니다. 하지만 지금은 컴파일러의 특성도 동시에 갖추고 있습니다. 정확히 무엇을 기점으로 변화하게 된 것일까요? 그것은 바로 V8 엔진입니다.   V8 엔진? V8 엔진은 Google 사의 오픈소스로 대중적으로 많이 사용되는 자바스크립트 엔진입니다. Node JS Runtime과 Chrome Browser 환경에서 사용되고 있습니다. 자바스크립트..

JavaScript 모듈 시스템에서 export default와 named export는 모두 모듈을 외부로 내보내는 방식입니다. 본 포스팅에서는 각 export의 차이점과 적절한 사용 방법에 대하여 이야기를 나누어보고자 합니다. 1. export defaultexport default는 모듈에서 기본으로 하나의 값만 내보낼 수 있게 합니다. 다음과 같은 상황에서 많이 사용됩니다.단일 값만 내보낼 때 적합 (예: 하나의 컴포넌트, 클래스, 함수 등).내보낸 모듈을 가져오는 쪽에서 임의의 이름으로 import가 가능.// math.jsexport default function add(a, b) { return a + b; }// 다른 파일에서import sum from './math'; // 임의의 이름으..

자바스크립트에서 숫자를 다루거나 연산을 하다보면 NaN 값을 가끔 마주할 때가 있습니다. NaN은 not-a-number의 약자로 자바스크립트에서 '산술 연산 불가'의 값임을 표현할 때 사용됩니다.우리가 자바스크립트를 사용하면서 NaN을 접하게 되는 상황들을 몇 가지 알아보면 다음과 같습니다.// 문자열을 숫자로 변환할 수 없으므로 NaN을 반환한다let x = 'Jiwon';console.log(+x); // NaN// undefined는 숫자로 타입 변환되지 않는다+undefined; // NaN1 + undefined; // NaN0 / 0; // NaN  이렇게 NaN 값이 반환되었을 때 isNaN 함수를 사용하여 해결할 수 있으며 isNaN은 매개변수가 숫자인지 검사하는 함수입니다.isNaN(v..

🚀 본 포스트는 '모던 자바스크립트 Deep Dive' 도서를 바탕으로 핵심 개념 및 내용을 요약한 포스트입니다. 07장 연산자 연산자는 하나 이상의 표현식을 대상으로 산술, 할당, 비교, 논리, 타입, 지수 연산 등을 수행하여 하나의 값을 만듭니다. 이때 연산의 대상을 피연산자라고 합니다. 이떄 피연산자는 값으로 평가될 수 있어야 한다는 조건이 있어야 하며, 피연산자와 연산자의 조합으로 만들어진 표현식도 값으로 평가될 수 있어야 합니다. 피연산자가 '값'이라는 명사의 역할을 한다면 연산자는 '피연산자를 연산하여 새로운 값을 만든다'라는 동사의 역할을 수행합니다. 7.1 산술 연산자 산술 연산자는 피연산자를 대상으로 수학적 계산을 수행하여 새로운 숫자 값을 만듭니다. 연산이 불가능한 경우에는 NaN(no..

🚀 본 포스트는 '모던 자바스크립트 Deep Dive' 도서를 바탕으로 핵심 개념 및 내용을 요약한 포스트입니다. 06장 데이터 타입 데이터 타입은 값의 종류를 의미합니다. JS의 모든 값은 데이터 타입을 가지고 있으며 JS(ES6)는 총 7개의 데이터 타입을 제공합니다. 또 이 7개의 데이터 타입은 크게 원시 타입, 객체 타입 2가지로 분류할 수 있습니다. 구분 데이터 타입 설명 원시 타입 숫자 타입 number 숫자, 정수와 실수 구분 없이 하나의 숫자 타입 number만이 존재 문자열 타입 string 문자열 불리언 타입 boolean 논리적 참과 거짓(true, false) undefined 타입 var 키워드로 선언된 값에 암묵적으로 할당되는 값 null 타입 값이 없다는 것을 의도적으로 명시할..

🚀 본 포스트는 '모던 자바스크립트 Deep Dive' 도서를 바탕으로 핵심 개념 및 내용을 요약한 포스트입니다. 05장 표현식과 문 5.1 값 값은 표현식이 평가되어 생성된 결과를 말합니다. 여기서 평가는 식을 해석하여 값을 생성하거나 참조하는 것을 의미합니다. 아래 예제는 표현식 10 + 20을 평가한 결과로 30이라는 숫자 값을 생성합니다. 10 + 20; // 30 모든 값은 데이터 값을 가지며 메모리에는 2진수(bit)의 연속으로 표현됩니다. 또한, 데이터 값에 따라 메모리에 저장된 값이 다르게 해석될 수 있음에 주의해야 합니다. 예를 들어 0100 0001이라는 값이 메모리에 저장되어 있을 때, 데이터 타입이 숫자인 경우에는 65, 문자인 경우에는 'A'으로 해석됩니다. 앞서 변수는 하나의 데..

🚀 본 포스트는 '모던 자바스크립트 Deep Dive' 도서를 바탕으로 핵심 개념 및 내용을 요약한 포스트입니다. 04장 변수 4.1 변수란 무엇이며 왜 필요할까? 우리가 사용하는 모든 애플리케이션은 모두 데이터를 다룹니다. 아무리 복잡한 애플리케이션이라도 결국 데이터를 입력 받아 처리하고 결과를 출력하는 것이 전부라고 볼 수 있습니다. 변수는 이러한 데이터를 관리하기 위한 핵심 개념이므로 변수가 무엇이고 왜 필요한지 이해하는 것은 매우 중요합니다. 그렇다면 아래와 같은 자바 스크립트 코드를 실행하면 컴퓨터에서는 어떤 일이 발생할까요? 10 + 20 컴퓨터(해당 경우에서는 JS 엔진)가 위 식을 평가하기 위해서는 10, 20, +라는 리터럴과 연산자가 가진 의미를 알고 있어야 하며 10 + 20 이라는 ..

🚀 본 포스트는 '모던 자바스크립트 Deep Dive' 도서를 바탕으로 핵심 개념 및 내용을 요약한 포스트입니다. 03장 자바스크립트 개발 환경과 실행 방법 3.1 자바스크립트 실행 환경 자바스크립트는 브라우저 환경 또는 Node.js 환경에서 실행이 가능합니다. 기본적으로 브라우저에서 동작하는 코드는 Node.js 환경에서도 동일하게 동작하지만 브라우저와 Node.js는 용도가 다르다는 점을 주의해야 합니다. 브라우저 - HTML, CSS, JS를 실행하여 웹 페이지를 브라우저 화면에 렌더링하는 것이 목적 Node.js - 브라우저 외부에서 자바스크립트 실행 환경을 제공하는 것이 목적 따라서, 브라우저와 Node.js는 모두 자바스크립트의 코어인 ECMAScript를 실행할 수 있지만 각 환경에서의 추..