DEEPDIVE

FrontEnd/Deep Dive
[JS] DeepDive (45) 프로미스
자바스크립트는 비동기 처리를 위한 하나의 패턴으로 콜백함수를 사용한다. 이러한 콜백 패턴은 가동성이 나쁘고 에러처리가 곤란하다는 문제가 있다. 콜백 헬 GET요청에 의한 함수의 예시를 하나 보자 // GET 요청을 위한 비동기 함수 const get = url => { const xhr = new XMLHttpRequest(); xhr.open('GET', url); xhr.send(); xhr.onload = () => { if (xhr.status === 200) { // 서버의 응답을 콘솔에 출력한다. console.log(JSON.parse(xhr.response)); } else { console.error(`${xhr.status} ${xhr.statusText}`); } }; }; // id..
→2023.09.24
FrontEnd/Deep Dive
[JS] DeepDive(44) REST API
REST는 HTTP/1.0 과 1.1의 스펙 작성에 참여했으며 아파치 HTTP 서버 프로젝트의 공동 설립자인 로이필딩의 2000년 논문에서 처음 소개되었다. REST의 기본 원칙을 성실히 지킨 서비스 디자인을 RESTful이라고 표현한다. REST는 HTTP를 기반으로 클라이언트가 서버의 리소스에 접근하는 방식을 규정한 아키텍쳐이며 REST API는 REST를 기반으로 서비스 API를 구현한 것을 의미한다. REST API의 구성 API는 자원,행위,표현 세가지 요소로 구성된다. 자원(Resource) 자원 URI(엔드포인트) 행위(Verb) 자원에 대한 행위 HTTP 요청 메서드 표현(Representations) 자원에 대한 행위의 구체적 내용 페이로드 REST API 설계 원칙 1. URI : 리소..
→2023.09.22
FrontEnd/Deep Dive
[JS] DeepDive(43) Ajax
Ajax Ajax란 JS를 사용하여 브라우저가 서버에게 비동기 방식으로 데이터를 요청하고 서버가 응답한 데이터를 수신하여 웹 페이지를 동적으로 갱신하는 프로그래밍 방식이다. Ajax는 브라우저에서 제공하는 WebAPI인 XMLHttpRequest 객체를 기반으로 동작한다. Ajax이전의 웹 페이지는 html 태그로 시작해서 html 태그로 끝나는 완전한 HTML을 서버로부터 전송받아 웹페이지 전체를 렌더링했다 즉 화면이 전환될때마다 새로운 HTML을 전송받았다. 이러한 방식은 단점이 많았다. 1. 변경할 필요가 없는 부분까지 포함된 HTML을 서버로부터 매번 받아야 함 2. 변경할 피룡가 없는 부분까지 렌더링을 다시 해야함 -> 화면이 깜빡이는 현상 발생 3. 동기 방식으로 동작하기에 서버로부터 응답이 ..
→2023.09.22
FrontEnd/Deep Dive
[JS] DeepDive(42) 비동기 프로그래밍
동기 처리와 비동기 처리 함수를 호출하면 함수 코드가 평가되어 함수 실행 컨텍스트가 생성된다. 즉 함수는 호출된 순서대로 스택 자료구조인 실행 컨텍스트 스택에 푸시되어 실행된다. const foo = () => {}; const bar = () => {}; foo(); bar(); 위처럼 JS 엔진은 함수의 실행순서를 스택으로 관리한다. JS 엔진은 단 하나의 실행 컨텍스트 스택을 갖는다. 즉 함수를 실행할 수 있는 창구가 하나이며 동시에 2개 이상의 함수를 실행할 수 없다. JS 엔진이 싱글 스레드 방식으로 동작하기 때문에 시간이 걸리는 태스크를 실행하면 블로킹이 발생한다. 아래 sleep 함수를 구현해본 예제를 보자 // sleep 함수는 일정 시간(delay)이 경과한 이후에 콜백 함수(func)를..
→2023.09.22
FrontEnd/Deep Dive
[JS] DeepDive(41) 타이머
호출 스케줄링 함수를 명시적으로 호출하면 함수가 즉시 실행된다. 함수를 명시적으로 호출하지 않고 일정시간 이후에 실행되도록 하려면 타이머 함수를 활용한다. 이를 호출 스케줄링이라 한다. JS는 setTimeout,setInterval,clearTimeout,clearInterval을 제공한다. 이 함수들은 ECMAScript 사양에 정의된 빌트인 함수는 아니지만 브라우저 환경과 Node.js 환경에서 모두 전역 객체의 메서드로 타이머 함수를 제공한다. JS 엔진은 단하나의 실행 컨텍스트 스택을 갖는다. 즉 JS엔진은 싱글스레드인데 이러한 이유때문에 setTimeout과 setInterval은 비동기로 작동하게 된다. 타이머 함수 setTimeout / clearTimeout setTimeout 함수는 두..
→2023.09.22
FrontEnd/Deep Dive
[JS] DeepDive(40) 이벤트(2) - 이벤트 전파
이벤트 전파 DOM 트리 상에 존재하는 DOM 요소에서 발생한 이벤트는 DOM 트리를 통해서 전파된다. Apple Banana Orange li요소를 클릭하면 클릭 이벤트가 발생하며 이벤트 전파 과정은 3단계로 구분할 수 있다. ul요소에 이벤트 핸들러를 바인딩한 예제를 통해서 이해해보자. Apple Banana Orange 1. 캡처링 : 클릭이벤트가 발생하여 window에서 시작하여 이벤트 객체가 이벤트 타깃방향으로 전파되는 것 2. 타깃 : 이벤트 객체가 이벤트를 발생시킨 이벤트 타깃에 도달한다. 3. 버블링 : 이벤트 타깃에서 시작해서 window방향으로 전파하는 것 이벤트 핸들러 어트리뷰트/프로퍼티 방식으로 등록한 이벤트 핸들러는 타깃 단계와 버블링 단계의 이벤트만 캡처할 수 있으며 addEve..
→2023.09.20

• 이전
• 1
• 2
• 3
• 4
• 5
• 6
• 7
• ···
• 9
• 다음