클라이언트/JavaScript (49) 리스트형 [자바스크립트(JavaScript)] 변수 (const vs let vs var) //변수, variable - 변하는 값 - 대입 연산자를 활용하여 변수에 값을 대입한다. - JavaScript는 변수의 타입이 없다. - 변수는 모든 자료형의 데이터를 저장할 수 있다.(= 자바 Object 변수) - 자바스크립트는 초기화가 되지 않은 변수의 상태를 null이라고 하지 않고, undefined라고 한다. - 변수 선언문(var)을 사용하지 않고도 변수 생성이 가능하다. > However, 절대 하지 말 것 - 변수 영역, scope 1. 전역 변수 > HTML 페이지 전역 > 선언문 실행(생성) ~ 페이지 종료(소멸) 2. 지역 변수 > 블럭 영역 변수 X, 함수 영역 변수(O) > 함수만 지역으로 인식 > 제어문 인식 X let 변수명; var 변수명; const 변수명; // co.. CSS 조작 - Window Coordinate(좌표) // Window 좌표, Window Coordinate getBoundingClientRect() : 요소의 크기, 뷰포트에 대한 상대적인 위치 - top, right, bottom, left, width, height를 포함하는 DOMRect 객체 반환 // top, left - 왼쪽 상단에서부터의 상대적인 위치 pageX / pageY : document에 대한 절대 좌표 - 스크롤 해도 변경 x clientX / clientY : 뷰포트에 대한 상대 좌표 - 스크롤 하면 변경 o const circle = document.querySelector('.orange'); circle.addEventListener('click', (e) => { console.log(circle.getBoundingC.. CSS 조작 - Window Size // Window Size screen : 전체 스크린의 크기(디스플레이의 해상도) outerWidth / outerHeight : 브라우저 창의 외부 너비/높이 > 탭,스크롤바, 윈도우 테두리, 북마크 등을 포함한 전체 크기 innerWidth / innerHeight : 브라우저 창의 내부 너비/높이 (뷰포트) > 탭, 윈도우 테두리, 북마크 툴바는 포함하지 않고, 스크롤바만 포함한 크기 clientWidth / clientHeight : DOM 요소의 내부 너비/높이 > innerWidth에서 스크롤바를 제외한 크기 > padding은 포함되지만 border와 margin은 포함되지 않는다. ※ 그림에서 screen이 정확x 인 이유 - screen 객체는 모니터가 출력할 수 있는 전체 해상도를 의.. [자바스크립트(JavaScript)] 클래스 // class - 객체를 생성하는 공장 class 클래스명 { constructor() { } } - constructor 함수를 이용하여 객체의 초기 값을 설정할 수 있다. (항상 추가하기) > 자바스크립트는 객체 생성 시 자동으로 constructor 함수를 호출! ※ construnctor 함수 : 객체의 초기 값을 지정하기 위해서 객체가 생성될 때 실행되기로 약속된 함수 - 객체.prototype을 해주지 않아도 prototype에 method 입력이 되어 편하다. class Person { constructor(name, first, second){ this.name = name; this.first = first; this.second = second; } sum() { return 'cla.. [자바스크립트(JavaScript)] 팩토리 함수, 생성자 함수 // 팩토리 함수 - 패턴을 기반으로 한 객체를 만드는 방법 - 비어있는 상태로 시작하지만 주어진 인수를 기반으로 속성을 추가한다. function makeColor(r, g, b) { const color = {}; color.r = r; color.g = g; color.b = b; color.rgb = function () { const { r, g, b } = this; return `rgb(${r}, ${g}, ${b})`; }; color.hex = function () { const { r, g, b } = this; return '#' + ((1 [자바스크립트(JavaScript)] Prototype(프로토타입), __proto__ // 프로토타입, Prototype - JavaScript 객체가 서로 기능을 상속하는 방식의 매커니즘 - 템플릿 객체 역할을 하는 프로토타입 객체를 가질 수 있다. - 메소드나 특성을 추가하는 실제 객체 Array.prototype.pop = function () { return 'I will never pop it off'; }; // __proto__ - 각 객체가 실제로 상속받은 프로토타입 - 프로토타입에 대한 참조 - 직접 사용하는 것보다 Object.getPrototypeOf() 메소드를 사용하는 것이 권장된다. const nums = [2, 3, 4]; console.log(nums); [자바스크립트(JavaScript)] API, Ajax // API, Application Programming Interface - 컴퓨터가 여러 소프트웨어와 상호작용하거나 소통하는 모든 인터페이스를 의미 - 웹에서 사용하는 API > HTTP를 기반으로 하는 인터페이스인 WebAPI // Ajax - 비동기식 JavaScript와 XML - JavaScript를 사용해서 앱을 만드는 기술 - 데이터를 전달하거나 받을 수 있다. // QueryString - url에 추가 정보를 넣기 위해 사용하는 url? 뒤에 키-값 쌍을 이루는 텍스트 ~ https://url?키1=값1&키2=값2 - Ajax 통신 방법을 제공하는 API XHR Fetch API Axios // XHR, XMLHttpRequest - Ajax 요청을 생성하는 JavaScript API .. [자바스크립트(JavaScript)] 비동기 함수(Async Functions) // 비동기 함수, Async Functions - 비동기 코드를 깔끔하게 작성하도록 도와주는 함수 - Promise 위에 적용된다. - async와 await 키워드가 사용된다. // async - 함수 앞에 붙어 비동기 함수로 선언하는 키워드 - 따로 명시하지 않아도 항상 Promise를 반환한다. const sing = async () => { return 'LA LA LA LA'; }; sing() .then(data => { console.log('PROMISE RESOVOLVED WITH: ', data); }); const sing = async () => { throw new Error('FAILED'); return 'LA LA LA LA'; }; sing() .then(data => {.. < 1 2 3 4 5 ··· 7 >
