자바스크립트 2023. 7. 9.
PEG.js 란? 개념과 사용법 (feat. Peggy)
📣 들어가며 이번 포스팅에선 PEG.js 의 설치 및 사용법에 대해 다룬다. PEG.js 란? PEG.js 는 Parsing Expression Grammer(PEG) 를 기반으로 하는 자바스크립트 파싱 라이브러리이다. PEG.js 를 사용하면 문자열이 특정 문법 규칙을 따르는지 검사하거나, 구문을 분석하여 구조화 데이터로 변환하는 작업을 수행할 수 있다. PEG.js 설치 및 사용 방법 PEG.js 설치 PEG.js 는 어떤 변환 작업을 수행하는 컨버터이다. pegjs 라는 명령어로 .pegjs 라는 확장자 명을 가진 파일을 javascript 로 변환 시킬 수 있다. 또는, 프로젝트 내에서 PEG.js 를 주입하여 런타임 중 변환을 시킬 수도 있다. pegjs 명령어를 통해 변환을 시키려면 pegjs..
자바스크립트 2022. 8. 8.
Node.js란? NPM이란? NVM이란? (feat. Express.js)
🐸 Node.js 란? 공식 문서에 따르면, "Node.js는 Chrome V8 JavaScript 엔진으로 빌드된 JavaScript 런타임입니다." 라고 설명하고 있다. 💡 Chrome V8 JavaScript 엔진 구글에서 제작한 자바스크립트 엔진 여기서 자바스크립트 엔진이란 자바스크립트 코드를 실행하는 프로그램 또는 인터프리터를 뜻한다. 💡 JavaScript 런타임 런타임은 프로그래밍 언어가 구동되는 환경을 말한다. 즉, JavaScript 언어가 구동되는 환경. 종합하자면, Node.js는 Javascript 를 실행 시킬 수 있도록 하는 오픈소스 서버 환경이다. 로컬 컴퓨터에서 JavaScript 로 개발을 하고싶다면 Node.js 를 설치해야한다. 🤓 Java를 개발하기 위해 JRE(JVM..
자바스크립트 2021. 9. 7.
[JavaScript] use strict? 엄격 모드란?
📢 들어가기 전에 본 포스팅에선 모던 JavaScript 튜토리얼을 학습/복습한 내용을 다룬다. 😈 엄격모드란? 자바 스크립트는 기존 기능을 변경하지 않으면서 새로운 기능을 추가해왔기 때문에 호환성 문제가 없었다. 하지만 ES5부터 새로운 기능이 추가되고 기존 기능의 일부가 변경되었다. 기존 기능이 변경되어 호환성에 문제가 생기게 되었고, 이를 방지하기 위한 것이 엄격 모드(strict mode) 이다. 👉 엄격 모드를 쓰지 않으면 과거 스크립트와의 호환성을 유지할 수 있기 때문에 지금의 문법과 맞지 않는 과거의 코드가 작동할 수 있게된다. 👉 엄격 모드를 활성화하면 모던 자바스크립트가 기준이 되어 과거에 짜 놓은 코드가 동작하지 않게될 수도 있다. 😈 엄격모드 사용 방법 스크립트 최상단에 단순한 문자열..
자바스크립트 2021. 6. 24.
[JavaScript] 자바스크립트란? (개념 및 특징)
📢 들어가기 전에 본 포스팅에선 모던 JavaScript 튜토리얼을 학습/복습한 내용을 다룬다. 💛 자바스크립트란? 자바스크립트는 웹 페이지에 생동감을 붙어넣기 위해 만들어진 프로그래밍 언어이다. 스크립트 자바스크립트로 작성한 프로그램을 스크립트라고 부른다. 스크립트는 웹페이지의 HTML안에 작성할 수 있는데, 웹 페이지를 불러올 때 스크립트가 자동으로 실행된다. 스크립트는 컴파일러 없이 보통의 문자 형태로 작성/실행할 수 있다. "자바"스크립트라고 불리는 이유 위 스크립트의 특징을 보면, 자바(JAVA)랑은 매우 다른 언어임을 알 수 있다. 하지만 왜 자바스크립트라고 불리는걸까? 처음 자바 스크립트가 만들어졌을 때는, LiveScript 라는 이름으로 불렸다. 그런데 그 당시 자바의 인기가 아주 높은 ..
자바스크립트 2021. 6. 13.
[JavaScript] 실행 컨텍스트, 스코프 체인과 클로저
🚗 브라우저란? 인터넷 상에서 웹에 연결 시켜주는 윈도우 기반의 소프트웨어이다. 그 예로, 크롬, 파이어폭스, 사파리, 엣지 등을 브라우저라고 부른다. 🚗 브라우저 구성 사용자 인터페이스 주소 표시줄, 이전/다음 버튼, 북마크 메뉴 등 브라우저 엔진 사용자 인터페이스와 렌더링 엔진 사이의 동작을 제어 렌더링 엔진 요청한 콘텐츠 표시. 예를 들어 HTML을 요청하면 HTML과 CSS를 파싱하여 화면에 표시함 통신 HTTP 요청과 같은 네트워크 호출에 사용됨 자바스크립트 해석기(엔진) ✔ 자바스크립트 코드를 해석하고 실행한다. 브라우저마다 이 엔진이 다르다. V8, Rhino, SpiderMonkey, Nashron 등이 있다. UI 백엔드 콤보 박스와 창 같은 기본적인 장치를 그림. 플랫폼에서 명시하지 않..
자바스크립트 2021. 6. 13.
[JavaScript] Scope란? (스코프 체인, 실행 컨텍스트...)
🛒 Scope란? Scope는 직역하면 "범위"라는 뜻이다. JavaScript 에서 Scope(스코프)는 변수에 접근할 수 있는 범위를 말한다. 식별자(변수)를 찾기위한 규칙이라고도 한다. var x = 'global'; function foo () { var x = 'function scope'; console.log(x); } foo(); // ? console.log(x); // ? 위 예제에서 x가 두번 선언되었는데, JavaScript는 각 x가 어떤 값을 가지는지 어떻게 구별할 수 있을까? 위 예제에서 전역에 선언된 변수 x는 어디에든 참조할 수 있다. 하지만 함수 foo 내에서 선어도니 변수 x는 함수 foo 내부에서만 참조할 수 있고, 외부에서는 참조할 수 없다. 이러한 규칙을 스코프 라..
자바스크립트 2021. 6. 1.
[JavaScript] 구조 분해 할당(Desturcting)이란? - ES6
👯♀️ 구조 분해 할당 Destructing : 파괴, 분해 ES6부터 추가된 기능이다. 배열인 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 JavaScript이다. 기존의 객체 및 배열 리터럴 표현식을 사용하면 일반적으로 쉽게 데이터 뭉치를 만들 수 있다. var arr = [1, 2, 3, 4, 5]; 구조분해할당을 사용하면 위와 비슷하지만, 할당문의 좌변에서 사용하여 원래 변수에서 어떤 값을 분해해 할당할지 정의할 수 있다. var x = [1, 2, 3, 4, 5]; var [y, z] = x; console.log(y); // 1 console.log(z); // 2 let, a, b, rest; [a, b] = [10, 20]; console.log(a); // 10 co..
자바스크립트 2021. 5. 31.
[JavaScript] for ...in, for ...of의 차이
결론부터 말하면 for...of 는 배열의 반복에서 사용되고, for...in은 객체의 반복에서 사용된다. 💫 for...of var arr = [1, 2, 3]; for (var item of arr) { console.log(item); // 1, 2, 3 } for...of 는 배열을 순환할 때 사용된다. 배열이 아닌 객체에 사용한다면 어떤 결과가 나올까? var obj = { a: 1, b: 2, c: 3 }; for (var item of obj) { console.log(item); } Uncaught TypeError: obj is not iterable 반복 불가능하다는 TypeError를 뱉어낸다. 💫 for...in var obj = { a: 1, b: 2, c: 3 }; for (va..
자바스크립트 2021. 5. 31.
[JavaScript] ECMAScript란? ES5와 ES6의 차이
💛 ECMAScript 란? JavaScript가 넷스케이프 커뮤니케이션즈로부터 개발되고 나서, MS에서 JScript를 개발하였다. 두 언어는 서로 호환되지 못하는 경우가 있어 크로스 브라우징 이슈가 발생하였다. 크로스 브라우징 이슈 기능이 모든 브라우저에서 동일하게 동작하지 않는 이슈 이 크로스 브라우징 이슈를 해결하기 위해 JavaScript를 표준화를 했다. 그게 바로 ECMAScript 이다. (ECMAScript라고 불리는 이유는 비영리 표준화기구인 인터내셔널이 Javascript 표준화 요청을 했기 때문이다.) 우리가 흔히 사용하는 ES5, ES6은 버전 숫자를 붙여 ECMAScript를 줄여쓰는 말이다. 참고로 2015년에 나온 것이 ES5이고 2016년에 나온 것이 ES6라고 착각할 수 ..
자바스크립트 2021. 5. 31.
[JavaScript] 데이터 타입 - undefined, string... (typeof - 타입 확인 방법)
💕 타입 💓 원시타입(Primitive type) 숫자(number) 정수와 실수를 따로 구분하지 않고 모든 수를 실수 하나로만 표현한다. 매우 큰 수나 작은 수를 표현할 경우 e 표기법을 사용할 수 있음 var firstNum = 10; // 소수점을 사용하지 않은 표현 var secondNum = 10.00; // 소수점을 사용한 표현 var thirdNum = 10e6; // 10000000 var fourthNum = 10e-6; // 0.00001문자열(string) 큰따옴표나 작은따옴표로 둘러싸인 문자의 집합 var firstStr = "이것도 문자열입니다."; // 큰따옴표를 사용한 문자열 var secondStr = '이것도 문자열입니다.'; // 작은따옴표를 사용한 문자열 ..
자바스크립트 2021. 5. 28.
[JavaScript] 호이스팅(Hoisting)이란? (호이스팅의 개념과 예제)
🎣 Hoisting 🐟 Hoisting 이란? Hoist는 직역하면 들어(끌어)올리다 라는 뜻이다. 함수 안에 있는 선언들을 모두 끌어올려서 해당 함수 유효 범위의 최상단에 선언하는 것. 자바스크립트 함수는 실행되기 전에 함수 안에 필요한 변수값들을 모두 모아서 유효 범위 의 최상단에 선언한다. 자바 스크립트 Parser가 함수 실행 전 해당 함수를 한번 훑고, 함수 안에 존재하는 변수/함수선언에 대한 정보를 기억하고 있다가 실행시킨다. 유효 범위 : 함수 블록(중괄호 : {}) 안에서 유효 즉, Hoisting이란 자바 스크립트 Parser가 함수 내에서 아래쪽에 존재하는 내용 중 필요한 값들을 끌어올리는 것이다. 🚨 실제로 코드가 끌어올려지는 건 아니며, 자바스크립트 Parser 내부적으로 끌어올려서..
