본문 바로가기
분류 전체보기
 (410)
[자바스크립트(JavaScript)] 변수 (const vs let vs var) //변수, variable - 변하는 값 - 대입 연산자를 활용하여 변수에 값을 대입한다. - JavaScript는 변수의 타입이 없다. - 변수는 모든 자료형의 데이터를 저장할 수 있다.(= 자바 Object 변수) - 자바스크립트는 초기화가 되지 않은 변수의 상태를 null이라고 하지 않고, undefined라고 한다. - 변수 선언문(var)을 사용하지 않고도 변수 생성이 가능하다. > However, 절대 하지 말 것 - 변수 영역, scope 1. 전역 변수 > HTML 페이지 전역 > 선언문 실행(생성) ~ 페이지 종료(소멸) 2. 지역 변수 > 블럭 영역 변수 X, 함수 영역 변수(O) > 함수만 지역으로 인식 > 제어문 인식 X let 변수명; var 변수명; const 변수명; // co..
렌더링 순서(트리 생성, 레이아웃, 페인트) 서버 사이드 렌더링, 클라이언트 사이드 렌더링과 같이 '렌더링'에 대한 이야기는 굉장히 많이 접했으나 정확히 그에 대해 알지는 못했다.구글 chrome 브라우저에 렌더링에 관한 설명이 잘 정리되어 있어 참고해 보았다. // 렌더링-   웹 브라우저가 HTML, CSS, JavaScript 등을 해석하여 사용자에게 보여지는 페이지로 변환하는 과정Loading- HTML, CSS 파일, 외부 스크립트와 같은 모든 자원들을 받아온다.Scripting1) 서버에서 받아온 HTML을 파싱하여 DOM 트리를 생성한다.2) CSS 같은 스타일들을 읽어 CSSOM 트리를 생성한다.3) 초기 페이지 로딩 시, 생성된 DOM 트리를 자바스크립트가 동적으로 구성하거나 수정한다. Rendering - DOM 트리와 CSSOM..
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 ..

티스토리툴바