본문 바로가기

📰 언어/JS

(15)

Ajax 책 를 기본으로 배운 자바스크립트 내용입니다. 목차 1. Ajax(Asynchronous JavaScript and XML) 2. JSON (JavaScript Object Notation) 3. XMLHttpRequest 1. Ajax(Asynchronous JavaScript and XML) 자바스크립트를 이용해서 비동기적(Asynchronous)으로 서버와 브라우저가 데이터를 교환할 수 있는 통신 방식 서버로부터 웹페이지가 반환되면 화면 전체를 갱신해야 하는데 페이지 일부만을 갱신하고도 동일한 효과를 볼 수 있도록 하는 것이 Ajax이다. 페이지 전체를 로드하여 렌더링할 필요가 없고 갱신이 필요한 일부만 로드하여 갱신하면 되므로 빠른 퍼포먼스와 부드러운 화면 표시 효과를 기대할 수 있다. 2. JS..

이벤트 책 를 기본으로 배운 자바스크립트 내용입니다. 목차 1. 이벤트 2. 이벤트 루프(Event Loop)와 동시성(Concurrency) 2-1) 브라우저 환경 2-2) 이벤트 예제 3. 이벤트의 종류(자주 사용되는 이벤트) 더 다양한 이벤트를 알고 싶다면 아래의 MDN사이트를 참고한다. https://developer.mozilla.org/en-US/docs/Web/Events 1. 이벤트 이벤트(event)는 DOM 요소와 관련된 어떤 사건을 의미한다. 이벤트가 발생하면 누군가 이를 감지할 수 있어야 하며 그에 대응하는 처리를 호출해 주어야 한다. 브라우저는 이벤트를 감지할 수 있으며 이벤트 발생 시에는 통지해 준다. 이 과정을 통해 사용자와 웹페이지는 상호작용(Interaction)이 가능하게 된다...

브라우저의 자바스크립트(2) - DOM 요소 접근, 조작 책 를 기본으로 배운 자바스크립트 내용입니다. 목차 1. DOM 요소에 접근 1-1) get메소드를 이용 1-2) DOM요소 쿼리 1-3) DOM Traversing(탐색) 2. DOM 요소 조작 2-1) 텍스트 노드에의 접근/수정 2-2) 어트리뷰트 노드에의 접근/수정 2-3) HTML 콘텐츠 조작(Manipulation) 2-4) DOM을 직접 조작 ※ innerHTML vs. DOM 조작 방식 DOM을 통해 웹페이지를 조작(manipulate)하기 위해서는 탐색과 조작 과정이 필요하다. 자바스크립트는 이것에 필요한 수단(API)을 제공한다. 조작하고자하는 요소를 선택 또는 탐색 선택된 요소의 콘텐츠 또는 어트리뷰트를 조작 1. DOM 요소에 접근 DOM요소를 탐색에는 아래와 같은 방법 세가지가 있다..

브라우저의 자바스크립트(1) - 문서 객체 모델 DOM 책 를 기본으로 배운 자바스크립트 내용입니다. 목차 1. 문서 객체 모델(DOM, document object model) 2. DOM API(Application Programming Interface) 3. DOM tree 3-1) DOM tree를 구성하는 네종류 노드 1. 문서 객체 모델(DOM, document object model) - HTML문서를 조작하는 핵심 텍스트 파일로 만들어져 있는 웹 문서를 브라우저에 렌더링하려면 웹 문서를 브라우저가 이해할 수 있는 구조로 메모리에 올려야 한다. 모든 요소와 요소의 어트리뷰트, 텍스트를 각각의 객체로 만들고 이들 객체를 부자 관계를 표현할 수 있는 트리 구조로 구성한 것 DOM은 자바스크립트를 통해 동적으로 변경할 수 있으며 변경된 DOM은 렌더..

정규 표현식 책 를 기본으로 배운 자바스크립트 내용입니다. 목차 1. 정규 표현식을 사용하는 이유? 2. 정규 표현식 만들기 3. 정규식 패턴 3-1) 패턴 작성하기 정규식 표현식(더보기 클릭! : 특수 문자 사용 예시) 자주 사용되는 특수 문자(더보기 클릭! : 기타 특수 문자) 4. 그룹 4-1) 그룹화 4-2) 캡처(capturing) 정규표현식 테스트 사이트 내용을 이해하면서 실제로 적용해 보는 것이 좋습니다. 아래의 사이트들을 이용하여 정규식을 테스트해 봅시다. 단, 각 사이트의 설정된 환경이 다르기 때문에 일부 작동하지 않거나 자바스크립트에서 다루는 정규식과 다르게 작동할 수 있으므로 사이트에서 테스트한 정규식의 결과를 맹신하지 말고 자신의 환경에 맞는지 꼭 테스트하세요. https://regex101.c..

비동기적 프로그래밍(1) - 동기vs비동기, 콜백 책 를 기본으로 배운 자바스크립트 내용입니다. 목차 1. 자바스크립트의 비동기적 프로그래밍 2. 콜백 2-1) 스코프와 비동기적 실행 2-2) 오류 우선 콜백 2-3) 콜백 헬 동기식 처리 모델(Synchronous processing model)은 직렬적으로 태스크(task)를 수행한다. 즉, 태스크는 순차적으로 실행되며 어떤 작업이 수행 중이면 다음 작업은 대기하게 된다. 서버에 데이터를 요청하고 데이터가 응답될 때까지 이후 태스크들은 블로킹(blocking, 작업 중단)된다. #동기식으로 동작 - 순차적으로 실행됨. function func1() { console.log('func1'); func2(); } function func2() { console.log('func2'); func3(); }..

ES6의 심볼, 이터레이터와 제네레이터 책 를 기본으로 배운 자바스크립트 내용입니다. 목차 1. Symbol 2. 심볼의 생성 2-1) 대표적인 상용심볼 1. 이터레이터(Iteratoe) 1-1) 이터레이션 프로토콜 2. 제너레이터(generator) 1. Symbol ES6에서 새로 선보인 원시 타입이다. typeof Symbol(); // 'symbol' 객체에 Unique한 속성을 만들어 다른 라이브러리와의 충돌을 막기 위해 Symbol이 필요하다. 원래 객체의 속성 이름은 문자열로 표현했다. 그러나 새로 추가한 라이브러리가 Array 같이 범용적으로 쓰이는 타입을 확장했다고 했을 때, 내가 확장한 것과 같은 이름으로 확장했다면? 심볼은 Unique하기 때문에, description이 같아도 충돌하지 않는다. 내가 Array의 속성의 갯..

map과 set 책 를 기본으로 배운 자바스크립트 내용입니다. 목차 1. Map 1-1) Map vs Object 2. WeakMap 2-2) WeakMap vs Map 3. Set 1. Map Map 객체는 요소의 삽입 순서대로 원소를 순회한다. for...of 반복문은 각 순회에서 [key, value]로 이루어진 배열을 반환한다. const u1 = {name : 'jackson'} const u2 = {name : 'olive'} //맵 생성 const userRoles = new Map(); //맵의 set() 사용해 사용자 역할 할당 ###### userRoles.set(u1, 'User') userRoles.set(u2, 'Admin') ###또는### userRoles .set(u1, 'User') .se..

객체지향 프로그래밍(OOP) 책 를 기본으로 배운 자바스크립트 내용입니다. 목차 1. 객체지향 프로그래밍 용어 2. 자바스크립트의 언어적 특징 1. 객체 생성 2. 클래스(ES5 vs ES6) 생성 3. 인스턴스 생성 4. construnctor(생성자) 5. 프로토타입 체인과 메소드 정의 6. 상속 - 의사 클래스 패턴 상속, 프로토타입 패턴 상속 7. 캡슐화, 추상화, 다형성 1. 자바스크립트의 언어적 특징 자바스크립트는 멀티-패러다임 언어로 명령형(imperative), 함수형(functional), 프로토타입 기반(prototype-based) 객체지향 언어이다. 자바스크립트는 이미 생성된 인스턴스의 자료구조와 기능을 동적으로 변경할 수 있다는 특징이 있다. 객체 지향의 상속, 캡슐화(정보 은닉) 등의 개념은 프로토타입 체인..

객체 지향 언어 - 프로토타입 기반 언어(JS) 책 를 기본으로 배운 자바스크립트 내용입니다. 목차 클래스 기반 언어 vs 프로토타입 기반 언어(JS) 1. property 2. 프로토타입 (개념 설명) 3. 프로토타입 기반 언어 객체 지향 언어는 크게 두 가지 줄기로 나눌수 있다. 클래스 기반 언어(C++, Java, C#, Ruby, Python 등) 프로토타입 기반 언어(JavaScript, ActionScript, JScript 등) 클래스 기반 & 프로토타입 기반 객체 지향 언어 자바스크립트의 모든 객체는 자신의 부모 역할을 담당하는 객체와 연결되어 있다. 그리고 이것은 (마치 객체 지향의 상속 개념과 같이) 부모 객체의 프로퍼티 또는 메소드를 상속받아 사용할 수 있게 한다. 이러한 부모 객체를 Prototype(프로토타입) 객체 또는 줄여서..

이전 1 2 다음

티스토리툴바