본문 바로가기

Front-end/JS31

자바스크립트 정규표현식 RegExp 📌 정규 표현식 ? 일정한 패턴을 가진 문자열의 집합을 표현하기 위해 사용하는 형식 언어formal language이다. 자바스크립트의 고유 문법은 아니다. 대부분의 프로그래밍 언어와 코드 에디터에 내장되어 있다. 정규표현식은 문자열을 대상으로 패턴 매칭 기능을 제공하기 때문에 반복문이나 조건문을 사용하지 않고도 간단히 체크할 수 있다. 다만, 여러가지 기호를 혼합하여 사용하기 때문에 가독성이 좋지 않다. ^!^ 📌 정규 표현식 생성 ◾ 정규 표현식 리터럴 const target = 'Is this all there is?'; // 패턴: is // 플래그: i => 대소문자를 구분하지 않고 검색한다. const regexp = /is/i; // test 메서드 // target 문자열에 대해 정규 표현.. 2021. 9. 27.
자바스크립트 네이티브 객체와 호스트 객체 Native Object & Host Object 📌 자바스크립트 객체의 분류 (3) 자바스크립트 객체는 크게 네이티브 객체, 호스트 객체, 사용자 정의 객체 이렇게 3가지로 분류할 수 있다. 📌 네이티브 객체 Native Objects / Built-in Objects / Global Objects 란 ? ECMAScript(자바스크립트 언어 규약) 명세에 정의된 객체를 말한다. 애플리케이션의 환경과 관계 없이 언제나 사용할 수 있다. 애플리케이션 전역의 공통의 기능을 제공한다. ex. Object, String, Number, Function, Array, RegExp, Date, Math 📍 네이티브 객체(Global Objects)와 전역 객체(Global Object)는 다르다. 전역 객체는 모든 객체의 최상위 객체를 의미한다. ex. 브라우저.. 2021. 9. 22.
자바스크립트 프로미스와 비동기 처리 Promise & Asynchronous 프로미스를 이해하기 위해서는 자바스크립트가 자료를 어떻게 비동기적으로 받아오는 지, 해당 원리를 이해할 필요가 있다. 2021.09.18 - [개발 공부/Browser] - Event Loop & Task queue 이벤트 루프와 태스크 큐 Event Loop & Task queue 이벤트 루프와 태스크 큐 📌 브라우저 환경 📍 자바스크립트 엔진 (싱글 스레드) 대부분의 자바스크립트 엔진은 크게 2가지 영역으로 구분할 수 있다. ✔ 콜 스택 call stack (실행 컨텍스트 스택) 소스코드 평가 과정에서 code-designer.tistory.com 📌 프로미스 등장 배경 2021.09.20 - [개발 공부/JS] - 자바스크립트 콜백 함수와 비동기 처리 Call back func & Asynchron.. 2021. 9. 21.
자바스크립트 콜백 함수와 비동기 처리 Call back func & Asynchronous 콜백 함수를 이해하기 위해서는 자바스크립트가 자료를 어떻게 비동기적으로 받아오는 지, 해당 원리를 이해할 필요가 있다. 2021.09.18 - [개발 공부/Browser] - Event Loop & Task queue 이벤트 루프와 태스크 큐 Event Loop & Task queue 이벤트 루프와 태스크 큐 📌 브라우저 환경 📍 자바스크립트 엔진 (싱글 스레드) 대부분의 자바스크립트 엔진은 크게 2가지 영역으로 구분할 수 있다. ✔ 콜 스택 call stack (실행 컨텍스트 스택) 소스코드 평가 과정에서 code-designer.tistory.com 📌 비동기 함수에 콜백 함수가 필요했던 이유 // 여기서 흔히 말하는 callback 함수는 successCallback & failureCallback.. 2021. 9. 20.
자바스크립트 비동기 프로그래밍 Asynchronous Programming 비동기 프로그래밍 공부 전에 자바스크립트 코드 동작 원리인 실행 컨텍스트 개념부터 잡고 들어가면 좋겠다. 자바스크립트 실행 컨텍스트 Execution Context 뜯어 보기 📌 실행 컨텍스트 공부해야하는 이유 실행 컨텍스트는 자바스크립트 동작 원리를 담고 있는 핵심 개념이다 ⭐⭐⭐ ✔ 자바스크립트가 스코프를 기반으로 식별자와 식별자에 바인딩 된 값을 관 code-designer.tistory.com 📌 자바스크립트가 비동기적으로 작동해야하는 이유 변수를 선언하거나 함수를 호출하면, 자바스크립트에서는 실행 컨텍스트를 생성한다. 이때 생성된 실행 컨텍스트는 실행 컨텍스트 스택 (콜스택)에 push 되고 함수 코드가 실행된다. 함수 코드의 실행이 종료되면 실행 컨텍스트는 실행 컨텍스트 스택에서 pop 되어 .. 2021. 9. 6.
자바스크립트 실행 컨텍스트 Execution Context 뜯어 보기 📌 실행 컨텍스트 공부해야하는 이유 실행 컨텍스트는 자바스크립트 동작 원리를 담고 있는 핵심 개념이다 ⭐⭐⭐ ✔ 자바스크립트가 스코프를 기반으로 식별자와 식별자에 바인딩 된 값을 관리하는 방식 ✔ 호이스팅이 발생하는 이유 ✔ 클로저의 동작 방식 ✔ 태스크 큐와 함께 동작하는 이벤트 헨들러 ✔ 비동기 처리의 동작 방식 실행 컨텍스트를 이해했을 때, 이 모든 것을 자연스럽게 습득할 수 있다. 📌 실행 컨텍스트execution context 코드가 실행되려면 스코프, 식별자, 코드 실행 순서 등의 관리가 필요하다. ✔ 선언에 의해 생성된 모든 식별자(변수, 함수, 클래스..)들을 스코프를 구분하여 등록하고 상태 변화(식별자에 바인딩된 값의 변화)를 지속적으로 관리해야 한다. ✔ 스코프는 중첩 관계에 의해 스코.. 2021. 9. 5.
자바스크립트 돔 DOM 조작 연습 📌 JS가 받아오는 데이터 요약 더보기 const menu = [ { type: 'group', name: '음료', children: [ { type: 'group', name: '콜드 브루', children: [ { type: 'item', name: '나이트로 콜드 브루' }, { type: 'item', name: '돌체 콜드 브루' }, { type: 'item', name: '제주 비자림 콜드 브루' }, { type: 'item', name: '콜드 브루' }, ], }, { type: 'group', name: '프라푸치노', children: [ { type: 'item', name: '애플 쿠키 크림 프라푸치노' }, { type: 'item', name: '더블 에스프레소 칩 프라푸.. 2021. 8. 31.
자바스크립트 클래스 Class 입문 Achivement Goals ✅ 클래스와 인스턴스라는 용어를 이해할 수 있다. ( new 키워드 사용법 / class 키워드 사용법 ) ✅ 객체 지향 프로그래밍 특징을 이해할 수 있다. ( 캡슐화 / 상속 / 추상화 / 다형성 ) ✅ JavaScript에서 객체 지향 프로그래밍을 구현할 수 있다. ✅ Prototype이 무엇인지 이해할 수 있다 ✅ 객체 지향 프로그래밍의 상속(Inheritance)의 개념을 이해하고 코드로 작성할 수 있다. ✅ 현실 세계의 모델을 바탕으로 클래스의 메소드와 속성을 디자인하고 상속 관계를 가진 모델을 코드로 작성할 수 있다. ✅ Prototype chain을 이해하고 설명할 수 있다. (__proto__) 📌 돌아보기 ◾ 메서드 호출 : 1번만 쓸 수 있음 (단순)객체 .. 2021. 8. 29.
자바스크립트 클로저 활용 Closure private 변수, 메서드 흉내 내기 📌 Closure 활용 방법 대표적인 이점 중 하나가, private 변수나 메서드를 흉내낼 수 있다는 점이다. // counter에 할당된 이 익명 함수는 정의되는 즉시 실행된다. // 이 lexical environment는 privateCounter라는 변수와 changeBy라는 함수를 포함한다. // 2개 다 private item이다. 익명 함수 외부에서 접근될 수 없는 아이들이다. // 대신 익명 함수에서 반환된 3개의 public 함수를 통해서만 접근할 수 있다. let counter = (function() { let privateCounter = 0; function changeBy(val) { privateCounter += val; } return { // counter.increas.. 2021. 8. 28.

티스토리툴바