반응형 Web/Javascript4 [JavaScript] 동기 & 비동기 및 콜백 개념 정리 동기(Synchronous) - 모든 일을 순차적으로 처리하는 것 (이전 작업이 끝나면 → 다음 작업 시작) - 어떤 요청을 보내면 그 요청이 끝날 때까지 기다림 console.log('시작') console.log('중간') console.log('끝') /* 시작 중간 끝 */ 비동기(ASynchronous) - 작업을 시작한 후 결과를 기다리지 않고 다음 작업을 처리하는 것 (병렬 수행) - 비동기로 처리 시 먼저 처리되는 부분부터 보여주므로 사용자 경험에 긍정적인 효과 - 비동기 동작은 Call stack, Web API, Task Queue, Event Loop 등으로 구성 Call Stack - 요청이 들어올 때마다 순차적으로 처리하는 Stack Web API - JavaSecript 엔진이.. 2023. 4. 30. [JavaScript] DOM 조작 및 이벤트 처리 정리 DOM(Document Object Model) - 문서의 구조화된 표현 제공 - HTML 문서를 구조화하여 각 요소를 객체 취급 - DOM의 구조(문서를 논리 트리로 표현) - DOM은 HTML 요소, 속 텍스트 등 모든 것을 Node로 구성 Window Object - DOM을 표현하는 창으로 가장 최상위의 객체를 의미 Document Object - 브라우저가 불러온 웹 페이지 - document는 window의 속성 선택 관련 메서드 // 제공한 선택자와 일치하는 요소 1개 선택 // 제공한 CSS Selector를 만족하는 첫번쨰 요소를 반환(없으면 null) document.querySelector(selector) // 제공한 선택자와 일치하는 여러 요소 선택 // 제공한 CSS Select.. 2023. 4. 27. [JavaScript] 함수, 배열 메서드, this, 객체 개념 정리 함수 (function) - 함수 선언식 //일반적인 함수 선언식 function 함수명(매개변수){ //내용 작성 } function plus(a, b) { return a + b } // 함수 표현식 변수키워드 함수명 = function(매개변수){ //내용 작성 } const myplus = function(a, b){ return a+b } - 기본 인자 및 매개변수 개수 불일치 // 기본 인자 : 인자 작성 시 = 문자 뒤에 기본 인자 선언 가능 const hi = function (name = 'Tom'){ return `Hi ${hi}` } hi() // Hi Tom // 매개변수보다 인자가 많을 경우 해당 갯수 만큼만 출력 // 에러를 발생하지 않음 const Args = function(.. 2023. 4. 25. [JavaScript] 자바스크립트 기초 문법 및 호이스팅 정리 식별자 정의 작성 특징 - 카멜 케이스 (camelCase) : 변수, 객체, 함수에 사용 // 변수 let cat let name // 객체 const info = {animal : 'cat', age : '3'} //함수 function add(){} function name(){} - 파스칼 케이스 (PascalCase) : 클래스, 생성자에 사용 // class class Person{ constructor(options){ this.name = options.name } } // 생성자 함수 function Person(options){ this.name = options.name } - 대문자 스네이크 케이스(SNAKE_CASE) : 상수에 사용하고, 보통 변경될 가능성이 없는 값을 의미 .. 2023. 4. 25. 이전 1 다음 반응형
