개발개굴🐸

Ajax란? Ajax(Asynchronous JavaScript and XML)란 자바스크립트를 사용하여 브라우저가 서버에게 비동기 방식으로 데이터를 요청하고, 서버가 응답한 데이터를 수신하여 웹페이지를 동적으로 갱신하는 프로그래밍 방식을 말합니다. 브라우저에서 제공하는 Web API인 XMLHttpRequest 객체를 기반으로 동작 XMLHttpRequest는 HTTP 비동기 통신을 위한 메서드와 프로퍼티를 제공 이전의 웹페이지는 완전한 HTML을 서버로부터 전송받아 웹페이지 전체를 처음부터 다시 렌더링 하는 방식으로, 변경할 필요가 없는 부분까지 다시 렌더링되는 단점이 있었습니다. 하지만 Ajax의 등장은 이전의 전통적인 패러다임을 획기적으로 전환했습니다. 서버로부터 웹페이지의 변경에 필요한 데이터만..

호출 스케줄링 함수를 명시적으로 즉시 호출하지 않고 일정 시간이 경과된 이후에 호출되도록 함수 호출을 예약하려면 타이머 함수를 이용해야 합니다. 이를 호출 스케줄링이라 합니다. 자바스크립트는 타이머를 생성/제거할 수 있는 타이머 함수를 제공합니다. 이는 ECMAScrip 사양에 정의된 빌트인 함수가 아니며 브라우저/Node.js 환경에서 전역 객체의 메서드로서 제공하는 호스트 객체입니다. 타이머를 생성하는 setTimeout과 setInterval 타이머 함수는 비동기 처리 방식으로 동작합니다. 타이머 함수 setTimeout / clearTimout setTimeout 함수는 두번째 인수로 전달받은 시간(ms, 1/1000초)으로 단 한 번 동작하는 타이머를 생성하고 이후 타이머가 만료되면 첫 번째 인..

이벤트 드리븐 프로그래밍 브라우저는 처리해야 할 특정 사건(클릭, 키보드 입력, 마우스 이동 등)이 발생하면 이를 감지하여 이벤트를 발생시킵니다. 이때, 애플리케이션이 특정 타입의 이벤트에 대해 반응하여 어떤 일을 하고 싶다면 해당하는 타입의 이벤트가 발생했을 때 호출될 함수를 브라우저에게 알려 호출을 위임합니다. 이벤트 핸들러 : 이벤트가 발생했을 때 호출될 함수 이벤트 핸들러 등록 : 이벤트가 발생했을 때 브라우저에게 이벤트 핸들러의 호출을 위임하는 것 Click me! 위 예제와 같이 브라우저는 사용자의 사건(클릭)을 감지하여 이벤트를 발생시키고 이벤트 핸들러를 호출하도록 이벤트 핸들러 등록을 할 수 있습니다. 즉, 이벤트와 그에 대응하는 함수(이벤트 핸들러)를 통해 사용자와 애플리케이션은 상호작용..

브라우저의 렌더링 엔진은 HTML 문서를 파싱하여 브라우저가 이해할 수 있는 자료구조인 DOM을 생성합니다. 이때 생성되는 DOM(Document Object Model)은 HTML 문서의 계층적 구조와 정보를 표현하며 이를 제어할 수 있는 API(프로퍼티와 메서드)를 제공하는 트리 자료구조입니다. 노드 HTML 요소와 노드 객체 HTML 요소는 HTML 문서를 구성하는 개별적인 요소를 의미합니다. 이러한 HTML 요소는 렌더링 엔진에 의해 파싱되어 DOM을 구성하는 요소 노드 객체로 변환됩니다. 이때, HTML 요소의 어트리뷰트는 어트리뷰트 노드로, HTML 요소의 텍스트 콘텐츠는 텍스트 노드로 변환됩니다. HTML 문서는 중첩 관계를 가지는 HTML 요소들의 집합(텍스트 뿐만 아니라 다른 HTML 요..

[문제] https://school.programmers.co.kr/learn/courses/30/lessons/17677 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 뉴스 클러스터링 여러 언론사에서 쏟아지는 뉴스, 특히 속보성 뉴스를 보면 비슷비슷한 제목의 기사가 많아 정작 필요한 기사를 찾기가 어렵다. Daum 뉴스의 개발 업무를 맡게 된 신입사원 튜브는 사용자들이 편리하게 다양한 뉴스를 찾아볼 수 있도록 문제점을 개선하는 업무를 맡게 되었다. 개발의 방향을 잡기 위해 튜브는 우선 최근 화제가 되고 있는 "카카오 신입 개발자 공채" 관련 기사를 검색..

자바스크립트가 가장 많이 사용되는 분야는 웹 브라우저 환경에서 동작하는 웹페이지/애플리케이션의 클라이언트 사이드입니다. 따라서 대부분의 프로그래밍 언어는 OS나 VM위에서 실행되는 반면 자바스크립트는 브라우저에서 HTML, CSS와 함께 실행되기 때문에 브라우저 환경을 고려할 때 효율적인 클라이언트 사이드 자바스크립트 프로그래밍이 가능합니다. 브라우저는 HTML, CSS, JS로 작성된 텍스트 문서를 파싱(해석)하여 브라우저에 렌더링합니다. 파싱 : 프로그래밍 언어의 문법에 맞게 작성된 텍스트 문서를 읽어 들여 실행하기 위해 텍스트 문서의 문자열 토큰으로 분해하고, 토큰에 문법적 의미와 구조를 반영하여 트리 구조의 자료구조인 파스 트리를 생성하는 일련의 과정 렌더링 : HTML, CSS, JS로 작성된 ..

Set Set 객체는 중복되지 않는 유일한 값들의 집합으로, 배열과 유사하지만 다음과 같은 차이가 있습니다. 구분 배열 Set 객체 동일한 값을 중복하여 포함할 수 있다. O X 요소 순서에 의미가 있다. O X 인덱스로 요소에 접근할 수 있다. O X 이처럼 Set 객체의 특성은 수학적 집합의 특정과 일치하며 Set은 수학적 집합을 구현하기 위한 자료구조임을 알 수 있습니다. 따라서 Set 을 통해 교집합, 합집합, 차집합, 여집합 등을 구현할 수 있습니다. Set 객체의 생성 Set 객체는 Set 생성자 함수로 생성합니다. Set 생성자 함수에 인수를 전달하지 않으면 빈 Set 객체가 생성 Set 생성자 함수는 이터러블을 인수로 전달받아 Set 객체를 생성함 인수로 전달받은 이터러블의 중복된 값은 S..

디스트럭처링 할당(destructuring assignment, 구조 분해 할당)은 구조화된 배열과 같은 이터러블 또는 객체를 destructuring(비구조화, 구조 파괴)하여 1개 이상의 변수에 개별적으로 할당하는 것을 말합니다. 배열과 같은 이터러블 또는 객체 리터럴에서 필요한 값만 추출하여 변수에 할당할 때 유용합니다. 배열 디스트럭처링 할당 배열의 각 요소를 배열로부터 추출하여 1개 이상의 변수에 할당할 때, 배열 디스트럭처링 할당의 대상(할당문의 우변)은 이터러블이어야 하며, 할당 기준은 배열의 인덱스입니다. // ES6 const arr = [1, 2, 3]; // ES6 배열 디스트럭처링 할당 // 변수 one, two, three를 선언하고 배열 arr을 디스트럭처링하여 할당한다. // ..