JavaScript/Syntax (23) 썸네일형 리스트형 [Javascript] Custom Event - form에서 제출 버튼을 누르면 해당 url로 이동하는 기능을 구현함 1) 이벤트 생성 new CustomEvent const urlChange = new CustomEvent('urlChange', { bubbles: true, cancelable: true, detail: { href: '/home', }, }) option default: -bubbles(이벤트 버블링): false -cancelable(기본동작): false 2) 이벤트 발생 dispatchEvent const formEl = document.querySelector('form'); formEl.addEventListener('submit', e => { e.preventDefault(); formEl.dispatchEvent.. [JavaScript] Modules -모던 자바스크립트 프로그래밍에서는 모든 코드를 하나의 스크립트에서 작성하지 않는다. -프로젝트를 여러 파일로 분할하여 관리하는데, 이 분리된 파일을 모듈이라 부른다. -모듈은 직접 만들기도하고 외부에서 불러오기도 한다(외부 오픈 소스 모듈: Third-party module). -모듈은 보통 클래스 하나 혹은 특정한 목적을 가진 복수의 함수로 구성된 라이브러리 하나로 구성된다. -Third-part package는 내가 직접 코드를 처음부터 개발하는데에 힘쓰지 않고 핵심 비즈니스 논리에만 집중하도록 해준다. -외부 모듈 파일을 설치하는 방법은 직접 스크립트를 다운로드하거나 CDN url 링크를 삽입하는 방법이 있다. *CDN 방식은 외부 서버에서 파일을 로드하기 때문에 직접 관리할 필요도 없고, 무엇보.. [JavaScript] Promise 개요 -비동기 프로그램은 백그라운드에서 실행된다. (웹 APIs 등) -비동기 작업 결과를 처리하기 위한 handler로 callback을 사용한다. -작업의 결과는 요청한 데이터이거나 에러의 발생이다. *Callback Error Handling Design : 콜백에 error, data 두 인자를 전달하고, 조건에 따라 전달되는 인자를 달리하여 콜백이 실행되도록 한다 const fs = require("fs"); const getDataFromFile = function (filePath, callback) { fs.readFile(filePath, "utf-8", (err, data) => { if (err) callback(err, null); else callback(null, data); }.. [JavaScript] Asynchronous process 1. Concurrency Model : -자바스크립트 엔진이 동시에 발생하는 여러 작업을 처리하는 방법을 설명한다. -먼저, 자바스크립트는 Single-threaded engine이기 때문에 한 번에 한 가지의 일만 수행할 수 있다. -작업이 처리되는 main thread에서 각 작업들은 앞선 작업이 끝나야만 다음 작업이 수행된다. -이런 속성을 가진 작업 방식을 Synchronous program이라 부른다. 그리고 이런 작업을 요청하는 코드를 Synchronous code라 한다. *동기화란 사전적 의미로 작업들 사이의 수행 시기를 맞추는 것을 말한다. *이전 작업의 종료 시점과 다음 작업의 시작 시점이 항상 동일하다. -대부분의 자바스크립트 코드는 synchronous code이다. -문제는 lo.. [JavaScript] OOP3(the 4 fundamental principles) -OOP BASIC CONCEPT 1. 추상화(Abstraction) -복잡한 구현 방법은 숨기고, 노출되는 부분을 단순화 한 것 -자세한 세부 정보(작동원리, 불필요한 모든 정보)는 생략하고, 사용되는 부분과 관련하여 중요한 특성만 강조하여 객체를 정의 -클래스 정의시, 프로퍼티와 메소드만 정의한 것을 인터페이스라고 부른다 -프로퍼티와 메소드의 이름만 노출시켜서 인터페이스를 단순화한다 -추상화를 통해 복잡성을 줄이고 사용성을 높일 수 있다 *구체화의 반댓말이다. 같은 일을 하는 코드에서 공통점을 모아 함수를 만드는 것이 추상화의 좋은 예라고 볼 수 있다. 2. 캡슐화(Encapsulation) -개체의 데이터(속성)와 데이터를 처리 및 표현하는 행동(메소드)을 하나의 단위로 묶어 관리하는 것을 말한다... [JavaScript] BOM 1. BOM(Browser Object Model) 이란? -브라우저 창과 페이지에 접근하고 조작할 수 있게 하는 인터페이스이다. -현재 브라우저에 표시된 페이지와 별개의 컨텍스트에서 브라우저와 상호작용할 수 있다. 브라우저 창을 새로 띄움 창을 움직이거나 크기를 조절하고 닫음 브라우저 상세 정보를 반환하는 navigator 객체 불러온 페이지의 상세 정보를 반환하는 location 객체 사용자 화면에 대한 상세 정보를 반환하는 screen 객체 사용자가 방문한 페이지 기록을 반환하는 history 객체 XMLHttpRequest [JavaScript] OOP2 1. Inheritance between classes -DOM 엘리먼트는 다음과 같은 prototype chain 갖는다. -이와 같이, 한 객체는 여러 class로 부터 상속을 받을 수 있다. 이때, class 간에는 위계, 즉 parent-child 관계를 가짐 -객체 하나가 한 번에 여러 프로토타입 상속을 받는 것이 아닌, 위 그림처럼 chain 구조의 위계가 있는 class들로부터 유산처럼 내려온다. -prototype chain을 완벽히 이해하고 직접 관리할 수 있어야 한다! " jieun(instance)-> Student(child class) -> Person(parent class) (-> window.Object)" 1-1. Constructor functions const Perso.. [JavaScript] this keyword this.~ -모든 EC에 생성되는 특별한 변수로 현재 EC를 가리킨다. -일반적으로 this 키워드가 사용되는 함수의 소유자를 취한다. -호출될 때 this에 value가 동적으로 할당되며(선언될 때가 아님!), 호출되는 방식에 따라 가리키는 대상이 다르다. 1. Regular function : this -> undefined (in 'strict mode') *otherwise : this -> 전역 실행컨텍스트에서 호출된 함수에서는 항상 window object(global scope)를 가리킴 2. Method : this -> 호출한 객체를 가리킨다. 이때, 메소드가 작성된(선언된) 객체가 아님에 주의할 것 3. Event listener function : this -> event hand.. 이전 1 2 3 다음
