Web/JavaScript

1. AJAX (Asynchronous JavaScript and XML)란?비동기 방식의 자바스크립트와 XML을 사용하는 개발 패턴(기술)서버와 통신하고 값을 받아오는 중에도 다른 일을 수행 가능 2. XMLHttpRequest비동기 요청을 수행하기 위한 JavaScript APIfetch() 이전에 사용하던 방식브라우저가 제공하는 Web API → Node.js에서 사용 불가 ❌⚠️ Web API란?- Web API = 브라우저가 JS에게 제공하는 기능들XMLHttpRequest ↓HTTP 요청 document ↓DOM 조작 setTimeout() ↓타이머 localStorage ↓브라우저 저장소1) XMLHttpRequest 메서드메서드설명open(method, url, async)요청 초기화...

1. 동기와 비동기구분설명동기 (Synchronous)코드가 순서대로 실행. 앞 작업이 끝나야 다음 작업 시작비동기 (Asynchronous)앞 작업이 끝나기를 기다리지 않고 다음 작업 바로 실행// 동기console.log("1");console.log("2");console.log("3");// 출력: 1 → 2 → 3 (순서 보장)// 비동기console.log("1");setTimeout(() => console.log("2"), 1000);console.log("3");// 출력: 1 → 3 → 2 (2는 1초 후 실행)💡 서버에 데이터를 요청할 때 응답을 기다리는 동안 아무것도 못 하면 사용자 경험이 나빠짐 → 그래서 네트워크 요청은 대부분 비동기로 처리 2. Promise 객체비동기 작업의..

[자바스크립트 객체]문자열(String), 숫자(Number), 배열(Array), 함수(Function) 등 1. 내장객체(built-id)Number, String, Date, Array, Boolean, Math, RegExp, JSON, BOM, DOMBOM 윈도우 히스토리2. 사용자 정의 객체1) Object 인스턴스 생성 후 정의var person = new Object();person.name = "홍길동";person.age = 30; 2) 생성자 함수function Person(name, age) { this.name = name; this.age = age; this.setName = function(newName) { this.name = newName; }}자바에서는 생성자를 함수..

[렉시컬(Lexical) ]1) 렉시컬(Lexical)코드가 어디에 작성되어 있는지를 기준으로 동작이 결정되는 것2) 렉시컬 스코프 (Lexical Scope)변수의 접근 범위가 함수가 선언된 위치에 의해 결정되는 것var data = 10;function print() { console.log(data);}function test() { var data = 20; print();}test(); //10Global ├ data = 10 ├ print() └ test()→ print()는 Global에서 선언된 함수이므로 test() 안에서 호출되더라도 test의 data가 아니라 global의 data를 사용 var data = 10;function outer() { var data = 20; ..

[ JQuery ]자바스크립트 프레임워크 또는 라이브러리브라우저에 상관없이$표시를 쓰기 때문에 Vue나 React에선 못씀(순수 Javascript 써야함) 1. jQuery 라이브러리 사용1) 라이브러리를 직접 다운인터넷 없이도 사용 가능uncompressed(압축되지 않아 보기 편), minified, slim, slim minified 2) CDN 사용⚠️ CDN을 사용하는 이유- 이미지와 스크립트를 여러 서버에 분산해 사용자가 더 빠르게 로드가능- 많은 사이트가 같은 CDN을 사용하므로 방문자 브라우저에 이미 캐시되어 있을 가능성이 높아 다운로드 없이 바로 사용 가능할 수도 있음 2. JavaScript와 JQuery 차이JavaScript는 속성(property)으로 접근하는 방식JQuery는 ..

1. ECMAScript란?JavaScript의 표준 명세버전주요 버전ES5 (2009)strict mode, JSONES6 (2015)class, arrow function, let/const, 구조분해, 모듈, PromiseES8 (2017)async/awaitES2023toSorted, toReversed, findLast 등 2. 클래스 Class함수의 한 종류이지만 function 키워드 대신 class 키워드 사용생성자 : constructor() → 객체 생성 시 자동 호출변수를 따로 선언하지 않고 this.변수명 으로 바로 사용extends를 쓴 자식 클래스는 반드시 super()를 먼저 호출해야 this를 사용 가능class Car { constructor(name) { this...

1. 이벤트 Event클릭, 마우스 올리기 등 사용자 행위로 발생하는 상호작용 신호HTML에서는 onxxx 형식으로 정의 2. 이벤트 핸들러이벤트를 처리하는 함수HTML에서는 onxxx형식으로 정의(클릭→onclick)1) 이벤트 핸들러 등록HTML 태그 속성으로 등록요소 객체 메서드로 등록이벤트 중복 등록 불가 : 마지막 것만 실행캡처링/버블링 설정 불가이벤트 제거 불가⚠️ window.onload를 사용하는 이유- HTML 요소가 로드되기 전에 JS가 실행되면 요소를 못 찾기 때문- ( 2) 이벤트 핸들러 특징이벤트 핸들러 함수는 인자로 event 객체가 자동 전달됨이벤트 핸들러가 false를 반환하면 event.preventDefault()와 같음 (false반환 대신 preventDefault사..

[ 기본 문법 ]문장 끝에 세미콜론(;) 권장주석 : // (한줄), /* */ (여러 줄) [ 변수 ]1. 변수 선언var a = 10; // 함수 스코프, 재선언 가능 (비권장)let b = 20; // 블록 스코프, 재선언 불가 (권장)const c = 30; // 블록 스코프, 재선언·재할당 불가구분varletconst재선언✅❌❌재할당✅✅❌스코프함수블록블록let 과 const 권장 let 과 const 사용 권장⚠️ 변수 선언 없이 선언한다면? - 함수 내부에서도 전역변수가 됨.function method() { var a = 10; b = 20; // 전역변수!}console.log(b); // 20console.log(a); // ReferenceError​2.스코프 (Scope)변..

1. Webkit 렌더링 엔진이란?HTML과 CSS를 해석하여 웹 페이지를 화면에 렌더링하는 오픈소스 웹 렌더링 엔진HTML → HTML Parser → DOM Tree → Attachment → Render Tree → Layout → Painting → Display브라우저 구성요소구성요소역할예시 Browser UI주소창, 뒤로가기, 탭 등 사용자 인터페이스Chrome의 주소창, Safari의 탭 UIBrowser EngineUI와 렌더링 엔진 사이를 연결Chrome의 브라우저 프로세스Rendering EngineHTML, CSS를 해석해서 화면을 그림Blink (Chrome, Edge), WebKit (Safari), Gecko (Firefox)JavaScript EngineJavaScript 코드..