good_da22 's devLog

Front-End/JavaScript 7

ES6(ECMAScript 2015)

ES6(ECMAScript 2015) 공식 문서 var, let, const var 변수, 전역 스코프(함수레벨), 재선언 및 재할당 가능 let 변수, 해당 스코프(블록레벨), 재선언 불가능, 재할당 가능 const 상수, 해당 스코프(블록레벨), 재선언 및 재할당 불가능 객체 {} 또는 배열 []로 선언했을 경우 객체의 속성과 배열의 요소는 변경 가능 Scope 대부분의 프로그래밍 언어는 Block-level scope이나 JavaScript는 Function-level scope 함수 레벨 스코프(Function-level scope) 함수 내에서 선언된 변수는 함수 내에서만 유효하며 함수 외부에서는 참조 불가 함수 내부에서 선언한 변수는 지역 변수이며 함수 외부에서 선언한 변수는 모두 전역 변수 ..

AJAX

AJAX(Asynchronous Javascript And XML) Ajax(Asynchronous Javascript And XML)은 언어나 프레임 워크가 아닌 구현하는 방식을 의미 AJax는 웹(Web)에서 화면을 갱신하지 한고 데이터를 서버로부터 가져와 처리하는 방법을 의미 JavaScript의 XMLHttpRequest(XHR) 객체로 데이터를 전달하고 비동기 방식으로 결과를 조회 화면 갱신이 없으므로 사용자 입장에서는 편리하지만, 동적으로 DOM을 구성해야 하므로 구현이 복잡 일반 요청에 대한 응답 data를 입력 후 event 발생 Ajax를 적용하지 않은 요청은 서버에서 data를 이용하여 logic 처리 logic 처리에 대한 결과에 따라 응답 page를 생성하고 client에 전송(화면..

Event & Web Storage

이벤트(Event) 웹 페이지에서 여러 종류의 상호작용이 있을 때 마다 이벤트가 발생 사용자가 마우스를 클릭했을 때, 키보드를 눌렀을 때 등, 다양한 종류의 이벤트가 존재 JavaScript를 사용하여 DOM에서 발생하는 이벤트를 감지하여 이벤트에 대응하는 여러 작업 수행 이벤트는 일반적으로 함수와 연결이 되고, 함수는 이벤트가 발생되기 전에는 실행되지 않다가 이벤트가 발생할 경우 실행 이벤트 핸들러(Event Handler) 또는 이벤트 리스너(Event Listener)라 하며 함수에 이벤트 발생시 실행해야 하는 코드 작성 이벤트 발생 종류 웹 페이지가 로딩되었을 때 페이지를 스크롤 했을 때 브라우저 창의 크기를 조절 했을 때 마우스를 클릭 했을 때 키보드로 키를 입력 했을 때 form이 submit..

BOM & DOM

Window 객체 window 객체는 웹 브라우저에서 작동하는 JavaScript의 최상위 전역 객체 window 객체에는 브라우저와 관련된 여러 객체와 속성, 함수가 존재 JavaScript에서 기본으로 제공하는 프로퍼티와 함수도 포함 (ex. Number 객체, setInterval() 함수 등) BOM(Browser Object Model)으로 불린다. window 객체 사용 alert, confirm, prompt window 객체의 함수를 호출하면 브라우저에서 제공하는 창을 open alert() : 브라우저의 알림 창 confirm() : 브라우저의 확인/취소 선택 창 prompt() : 브라우저의 입력 창 navigator navigator 객체는 브라우저의 정보가 내장된 객체 navigat..

JavaScript 기본 문법 2

JavaScript 기본문법 객체(Object) 객체는 이름과 값으로 구성된 프로퍼티의 집합 문자열, 숫자, boolean, null, undefined를 제외한 모든 값은 객체 JavaScript의 객체는 키(Key)와 값(Value)으로 구성된 프로퍼티(Prooerty)들의 집합 전역 객체를 제외한 JavaScript 객체는 프로퍼티를 동적으로 추가하거나 삭제 가능 JavaScript의 함수는 일급 객체이므로 값으로 사용할 수 있다. 따라서 프로퍼티의 값으로 함수를 사용 가능 JavaScript 객체는 프로토타입(prototype)이라는 특별한 프로터피를 포함 객체 생성 객체 리터럴 가장 일반적인 방법 { } 를 사용하여 객체를 생성. { } 내에 1개 이상의 프로터피를 추가하여 객체를 생성 Obje..

JavaScript 기본 문법 1

JavaScript 기본문법 주석(comment) 주석은 JavaScript 코드에 대한 부연 설명이므로 실행 코드에 포함되지 않는다. JavaScript 주석은 한 줄 주석(Line Comment)과 블록 주석(Block Comment)이 있다. 한 줄 주석은 //code로 표기하고, 블록 주석은 /* code */ 로 표기한다. 가능하면 블록 주석보다 라인 주석을 사용한다. 변수(varidable) JavaScript는 변수를 선언할 때 타입을 명시하지 않고 var keyword를 사용하여 선언 JavaScript는 동적타입(Dynamic / Weak type) 언어. 변수의 타입 지정없이 값이 할당되는 과정에서 자동으로 변수의 타입이 결정 같은 변수에 여러 타입의 값을 할당 가능 변수의 이름은 함수..

JavaScript

JavaScript 웹 페이지 이벤트 담당(동작) JavaScript는 프로토타입 기반의 스크립트 프로그래밍 언어로 객체지향 개념을 지원한다. 웹 브라우저가 JavaScript를 HTML과 함께 다운로드하여 실행 웹 브라우저가 HTML 문서를 읽어 들이는 시점에 JavaScript Engine이 실행된다. 대부분의 JavaScript Engine은 ECMAScript 표준을 지원한다. JavaScript는 HTML, CSS와 함께 웹을 구성하는 요소 중 하나로 웹 브라우저에서 동작하는 유일한 프로그래밍 언어 JavaScript는 개발자가 별도의 컴파일 작업을 수행하지 않는 인터프리터 언어 각 브라우저별 JavaScript 엔진(ex. Chrome의 V8 엔진...)은 인터프리터와 컴파일의 장점을 결합하여..