본문 바로가기

⭐ Personal_Study97

동기와 비동기 동기와 비동기 동기(Synchronous) ✔ 모든 일을 순서대로 하나씩 처리하는 것 ✔ 요청과 응답을 동기식으로 처리하게 된다면? 요청을 보내고 응답이 올 때까지 기다렸다가 다음 로직을 처리 비동기(Asynchronous) ✔ 작업을 시작한 후 결과를 기다리지 않고 다음 작업을 처리(병렬적 수행) 비동기를 사용하는 이유 ✔ 사용자 경험 아주 큰 데이터를 불러온 뒤 실행되는 앱이 있을 때 동기로 처리한다면 데이터를 모두 불러온 뒤에야 앱의 실행 로직이 수행되므로 사용자들은 마치 앱이 멈춘 것과 같은 경험을 겪게된다. 비동기로 처리하면 먼저 처리되는 부분부터 보여줄 수 있으므로, 사용자 경험에 긍정적인 효과를 볼 수 있음 Single Thread 언어, JavaScript ✔ JavaScript는 한번에 .. 2022. 11. 4.

Callback & Promise Callback과 Promise 비동기 처리 방식의 문제점 ✔ 비동기 처리의 핵심은 Web API로 들어오는 순서가 아니라 작업이 완료되는 순서에 따라 처리된다는 것 ✔ 실행 결과를 예상하면서 코드를 짤 수 없다 콜백함수(Callback Function) ✔ 다른 함수의 인자로 전달되는 함수 ✔ 시간이 걸리는 비동기 작업이 왼료된 후 실행할 작업을 명시하는 데 사용되는 콜백 함수를 비동기 콜백(asynchronous callback)이라 부른다. 콜백함수를 사용하는 이유 ✔ 명시적인 호출이 아닌 특정한 조건 혹은 행동에 의해 호출되도록 작성할 수 있음 ✔ '요청이 들어오면', '이벤트가 발생하면', '데이터를 받아오면'등의 조건으로 이후 로직을 제어할 수 있음 ✔ 비동기 처리를 순차적으로 동작할 수 있게.. 2022. 11. 4.

JavaScript에서의 This This 개요 ✔ 어떠한 object를 가리키는 키워드 ✔ JavaScript의 함수는 호출될 때 this를 암묵적으로 전달 받음 ✔ JavaScript에서의 this는 일반적인 프로그래밍 언어와 다르게 동작 ✔ JavaScript는 해당 함수의 호출 방식에 따라 this에 바인딩 되는 객체가 달라진다. ✔ 즉 함수를 선언할 때 결정되는 것이 아니라, 함수를 호출할 때 함수가 어떻게 호출되었는지에 따라 동적으로 결정 this INDEX 전역 문맥에서의 this 함수 문맥에서의 this 단순 호출 Method(객체의 메서드로서) Nested 전역 문맥에서의 this ✔ 브라우저의 전역 객체인 window를 가리킨다. 전역 객체는 모든 객체의 유일한 최상위 객체를 의미 console.log(this) // .. 2022. 11. 3.

Event Event 개요 ✔ Event란 프로그래밍하고 있는 시스템에서 일어나는 사건(action) 혹은 발생(occurence)인데, 우리가 원한다면 그것들에 어떠한 방식으로 응답할 수 있도록 시스템이 말해주는 것 ✔ ex: 클립, 키보드 키 입력, 브라우저 닫기, 데이터 제출, 텍스트 복사 등등... Event object ✔ 네트워크 활동이나 사용자와의 상호작용 같은 사건의 발생을 알리기 위한 존재 ✔ DOM 요소는 Event를 '수신' ✔ 받은 Event '처리' Event 처리는 주로 addEventListner()라는 Event 처리기를 다양한 html 요소에 '부착' 해서 사용 Event handler - addEventListner() ✔ 대상에 특정 event가 발생하면, 할 일을 등록한다 Eve.. 2022. 11. 2.

JavaScript를 활용한 DOM 조작 기초 DOM 조작 개요 ✔ DOM 조작 순서 선택(select) 조작(maipulation) 선택 관련 메서드 document.querySelector(selector) ✔ 제공한 선택자와 일치하는 element 한 개 선택 ✔ 제공한 CSS selector를 만족하는 첫 번째 element 객체 반환(없다면 null 반환) document.querySelectorAll(selector) ✔ 제공한 선택자와 일치하는 여러 element를 선택 ✔ 매칭할 하나 이상의 셀렉터를 포함하는 유효한 CSS selector를 인자로 받는다. ✔ 제공한 CSS selector를 만족하는 NodeList 반환 선택 관련 메서드 실습 NodeList ✔ index로만 각 항목에 접근 가능 ✔ 배열의 forEach 메서드 및 .. 2022. 11. 2.

DOM (Document Object Model) DOM Browser APIs ✔ 웹 브라우저에 내장된 API로 웹 브라우저가 현재 컴퓨터 환경에 관한 데이터를 제공하거나, 오디오를 재생하는 등 여러가지 유용하고 복잡한 일 수행 가능 DOM Geolocation API WebGL DOM 개요 ✔ 문서 객체 모델(Document Object Model) ✔ 문서의 구조화된 표현을 제공하며 프로그래밍 언어가 DOM구조에 접근할 수 있는 방법을 제공 문서 구조, 스타일, 내용 등을 쉽게 변경할 수 있도록 도움 HTML 컨텐츠를 추가, 제거, 변경하고 동적으로 페이지에 스타일 추가하는 등 HTML/CSS 조작 가능 ✔ HTML 문서를 구조화 하여 각 요소를 객체(object)로 취급 ✔ DOM 은 문서를 논리 트리로 표현 ✔ 웹 페이지는 일종의 문서(docu.. 2022. 11. 1.

이전 1 ··· 9 10 11 12 13 14 15 ··· 17 다음

티스토리툴바