Front-end/JavaScript16 [JS] 자바스크립트 모듈 모듈 (Module) 모듈이란 개발하는 애플리케이션의 크기의 증가로 인해 파일을 여러 개로 분리할 때 분리된 파일을 뜻한다. 모듈은 파일 하나이며, 클래스 또는 여러 함수로 구성된 라이브러리로 구성된다. export & import export와 import를 사용하면 다른 모듈에 있는 변수나 함수에 접근하여 외부 모듈의 기능을 사용할 수 있다. html 파일에서 모듈을 import할 때에는 script에 type="module"을 설정하여야 한다. export (모듈 내보내기) 외부 모듈의 변수나 함수에 접근할 수 있다. import (모듈 가져오기) 외부 모듈의 기능을 가져올 수 있다. //module.js export function alertName(name) { alert(`${name}님 안녕.. 2022. 3. 17. [JS] 자바스크립트 scope 들어가기 전 스코프(scope)는 범위의 뜻을 가지며, 해당 변수가 접근할 수 있는 변수, 객체, 함수의 집합을 의미한다. 스코프를 이해하기 위해서는 먼저 전역 변수와 지역 변수를 이해해야한다. 전역 변수와 지역 변수 변수는 유효 범위(variable scope)에 따라 다음과 같이 구분된다. 지역 변수(local variable) 전역 변수(global variable) 지역 변수(local variable) 지역 변수란 함수 내에서 선언된 변수를 의미한다. 지역 변수는 변수가 선언된 함수 내에서만 유효하며, 함수가 종료되면 메모리에서 사라진다. 전역 변수(global variable) 전역 변수란 함수의 외부에서 선언된 변수를 의미하며, window 객체에 변수를 생성하는 것이다. 전역 변수는 어느 .. 2022. 3. 2. [JS] 자바스크립트 클래스 클래스 (Class) 클래스는 특정 객체를 생성하기 위해 변수와 메소드를 정의하는 일종의 템플릿이라고 볼 수 있다.. 이러한 클래스는 객체가 아니며 객체를 생성하는 생성자 함수와 같이 함수의 한 종류이다. //클래스 class User { constructor(name) { this.name = name; } info() { alert(this.name); } } //클래스는 함수이다. console.log(typeof User); //function //클레스는 생성자 함수와 동일하다. console.log(User === User.prototype.constructor); //true //클래스 내부에서 정의한 메소드는 prototype에 저장된다. console.log(User.prototype.i.. 2022. 3. 2. [JS] 자바스크립트 객체 객체 (Object) 객체란 JS 데이터 유형 중 하나이며, 프로퍼티(속성)와 메서드(함수)의 집합이다. 따라서 JS에서 프로퍼티나 메서드를 지정할 수 없는 프리미티브를 제외한 거의 모든 것이 객체라 볼 수 있다. 프리미티브 (primitive) 사용되는 기초 요소를 프리미티브라고하며, JS의 프리미티브는 객체가 아니다. JS의 프리미티브는 5가지 기본 데이터 유형인 string, number, boolean, null, undefined 이다. 프로퍼티(property) 프로퍼티는 속성이라고도 불리며, 객체에서 값을 지정한 변수를 프로퍼티라 한다. 다음 예제는 person이라는 객체를 리터럴로 생성하는 것으로, 프로퍼티는 다음과 같다. const person = { firstName: "홍", //fi.. 2022. 2. 23. [JS] 자바스크립트 AJAX AJAX (Asynchronous JavaScript And XML) 란? AJAX란 서버와 통신하기 위해 XMLHttpRequset 객체를 사용하며, 이를 통해 동적인 웹 페이지를 개발하는 기법이다. 즉 AJAX를 사용하면 서버와 통신하여, 데이터를 받아와 새로고침 없이 일부분만 갱신할 수 있게 할 수 있다. AJAX로 서버와 전송가능한 데이터 형태는 다음과 같다. JSON XML HTML Text 파일 등 AJAX 장점 & 한계 장점 웹 페이지 전체를 새로고침하지 않고, 웹 페이지 일부분만 갱신 가능 웹 페이지가 로드된 후 서버로 데이터 요청 및 수신가능 백그라운드 영역에서 서버로 데이터 전송 가능 한계 AJAX는 클라이언트 풀링 방식을 사용하므로, 서버 푸시 방식의 실시간 서비스 구현 불가 바이너리.. 2022. 2. 15. [JS] 자바스크립트 DOM 이벤트 DOM 이벤트 DOM 이벤트는 HTML 요소를 클릭할 때와 같이 이벤트가 발생할 때 실행할 자바스크립트를 설정하는 것이다. 이 때 발생할 수 있는 대표적인 이벤트는 다음과 같다. 마우스 이벤트 - mouseenter, mouseover, onclick... 폼 이벤트 - reset, submit, focus... 키보드 이벤트 - keydown, keyup... 문서 이벤트 - DOMContentLoaded... CSS 이벤트 - transitionend... 드래그 앤 드롭 이벤트 - dragstart, drag, dragleave, drop... 더 많은 HTML DOM 이벤트 확인하기 이벤트 핸들러 핸들러(handler)란 이벤트가 발생하였을 때 실행되는 함수이다. 따라서 이벤트 핸들러는 이벤트 발.. 2022. 2. 10. [JS] 자바스크립트 DOM HTML DOM (Document Object Model) HTML DOM은 HTML 문서에서 요소를 생성, 변경 및 제거할 수 있는 프로그래밍 인터페이스이다. 이러한 요소에 이벤트를 추가하여 페이지를 동적으로 생성할 수 도 있다. HTML DOM의 정의는 다음과 같다. HTML 요소 HTML 요소의 속성 HTML 요소에 엑세스 방법 HTML 요소에 대한 이벤트 HTML 요소 접근 자바스크립트에서 HTML 요소를 조작하기 위해 해당 요소에 접근하는 방법은 다음과 같은 방법들이 있다. ID 태그 이름 클래스 이름 CSS 선택자 HTML 개체 ID DOM에서 요소의 ID를 사용하여 요소에 접근하는 방법이다. let findID = document.getElementById("testID"); 태그 이름 DO.. 2022. 2. 7. [JS] 자바스크립트 제어문 (반복문) 반복문(Iteration Statements) 반복문은 똑같은 작업을 일정 횟수만큼 반복하여 수행하도록 제어하는 제어문이다. 반복문을 사용함으로 반복되는 작업에 대해 더 빠르게 해당 작업을 완료할 수 있다는 이점이 있다. 반복문의 형태는 다음과 같다. while 문 do / while 문 for 문 for / in 문 for / of 문 while 문 지정된 조건이 참인 동안 코드 블록을 반복한다. while 문에서는 조건에 사용된 변수를 늘리지 않으면 루프가 끝나지 않는다. 예제 let i = 0; while ( i < 10 ) { console.log( i + "번 째 출력" ); i++; } do / while 문 do / while 문은 while 루프의 번형으로, 조건이 참인지 확인하기 전에 코.. 2022. 1. 30. [JS] 자바스크립트 제어문 (조건문) 제어문(Control Flow Statements) 제어문이란 프로그램의 순차적인 프름을 제어해야 할 때 사용하는 실행문을 뜻한다. 대표적인 제어문들은 다음과 같다. 조건문 반복문 조건문(Conditional Statements) 조건문이란 주어진 조건식의 결과에 따라 서로 다른 작업을 수행하도록 제어하는 명령문이다. 조건문 중 기본이 되는 명형문은 if 문이며, 대표적인 조건문들은 다음과 같다. if else else if switch if 문 지정된 조건이 true인 경우 실행할 코드 블록을 지정하는 데 사용된다. 코드 블록(Code Block) 한 쌍의 중괄호( { } )로 구성되어 0개 이상의 구문을 묶을 때 사용된다. //예제 var x = 10, y = 20; if ( x > y ) { con.. 2022. 1. 29. 이전 1 2 다음
