Javascript

1) Ajax란?Ajax(Asynchronous Javascript and XML)란 자바스크립트를 사용하여 브라우저가 서버에게 비동기 방식으로 데이터를 요청하고, 서버가 응답한 데이터를 수신하여 웹페이지를 동적으로 갱신하는 프로그래밍 방식을 말한다. Ajax는 브라우저에서 제공하는 Web API인 XMLHttpRequest 객체를 기반으로 동작한다. Ajax의 등장은 이전의 전통적인 패러다임을 획기적으로 전환했다. 즉, 서버로부터 웹페이지의 변경에 필요한 데이터만 비동기 방식으로 전송받아 웹페이지를 변경할 필요가 없는 부분은 다시 렌더링하지 않고, 변경할 필요가 있는 부분만 한정적으로 렌더링하는 방식이 가능해진 것이다.⇒ 빠른 퍼포먼스와 부드러운 화면 전환이 가능해짐 Ajax는 전통적인 방식과 비교했을..

sort Array.prototype.sort() - JavaScript | MDNsort() 메서드는 배열의 요소를 적절한 위치에 정렬한 후 그 배열을 반환합니다. 정렬은 stable sort가 아닐 수 있습니다. 기본 정렬 순서는 문자열의 유니코드 코드 포인트를 따릅니다.developer.mozilla.org원본 배열을 직접 변경하기 때문에 얕은 복사 후 사용하는 것을 권장한다. [...rowData].sort()기본적으로 오름차순으로 요소를 정렬한다.숫자 요소를 정렬할 때는 sort 메서드에 정렬 순서를 정의하는 비교 함수를 인수로 전달해야 한다. 🔎 sort 함수 숫자 기본 정렬const array1 = [1, 30, 4, 21, 100000];array1.sort();console.log(ar..

이유태그를 사용하면 지난 번 검색했던 내용이 자동완성으로 떠서 번거롭게 느껴지는 경우가 있다. SearchSelector의 경우 자동완성이 옵션 팝업을 일부 가리기 때문에 사용에 있어 불편함이 있다고 판단해 자동완성 기능을 꺼줬다.   방법 필드의 autocomplete 속성을 “off”로 설정해준다.  양식 자동 완성을 끄는 방법 - 웹 보안 | MDN이 문서는 웹사이트에서 양식 필드의 자동 완성을 비활성화하는 방법에 대해 설명합니다.developer.mozilla.org

1) 동기 처리와 비동기 처리자바스크립트 엔진은 단 하나의 실행 컨텍스트 스택을 갖는다. ⇒ 싱글 스레드싱글 스레드 방식은 한 번에 하나의 태스크만 실행할 수 있기 때문에 처리에 시간이 걸리는 태스크를 실행하는 경우 블로킹(작업 중단)이 발생한다. 현재 실행 중인 태스크가 종료할 때까지 다음에 실행될 태스크가 대기하는 방식을 동기(synchronous) 처리라고 한다.동기 처리 방식은 태스크를 순서대로 하나씩 처리하므로 실행 순서가 보장된다는 장점이 있지만, 앞선 태스크가 종료할 때까지 이후 태스크들이 블로킹되는 단점이 있다. 현재 실행 중인 태스크가 종료되지 않은 상태라 해도 다음 태스크를 곧바로 실행하는 방식을 비동기(asynchronous) 처리라고 한다.비동기 처리 방식은 현재 실행 중인 태스크가..

1) 호출 스케줄링함수를 명시적으로 호출하지 않고 일정 시간이 경과된 이후에 호출되도록 함수 호출을 예약하려면 타이머 함수를 사용한다. 이를 호출 스케일링이라 한다.자바스크립트 엔진은 싱글 스레드로 동작한다. 이런 이유로 타이머 함수 setTimeout과 setInterval은 비동기 처리 방식으로 동작한다.  2) 타이머 함수setTimeout / clearTimeoutsetTimeout 함수의 콜백 함수는 두 번째 인수로 전달받은 시간 이후 단 한 번 실행되도록 호출 스케일링된다.const timeoutId = setTimeout(func|code[, delay, param1, param2, ...]); 매개 변수설명func타이머가 만료된 뒤 호출될 콜백 함수delay타이머 만료 시간 (밀리초(ms)..

1) 이벤트 드리븐 프로그래밍이벤트가 발생했을 때 호출될 함수를 이벤트 핸들러라 하고, 이벤트가 발생했을 때 브라우저에게 이벤트 핸들러의 호출을 위임하는 것을 이벤트 핸들러 등록이라 한다. “언제 함수를 호출해야 하는가”→ 함수를 언제 호출할지 알 수 없으므로 개발자가 명시적으로 함수를 호출하는 것이 아니라 브라우저에게 함수 호출을 위임하는 것이다. 프로그램의 흐름을 이벤트 중심으로 제어하는 프로그래밍 방식을 이벤트 드리븐 프로그래밍이라 한다.    2) 이벤트 타입마우스 이벤트이벤트 타입 이벤트 발생 시점click마우스 버튼을 클릭했을 때dbclick마우스 버튼을 더블클릭했을 때mousedown마우스 버튼을 눌렀을 때mouseup누르고 있던 마우스 버튼을 놓았을 때mousemove마우스 커서를 움직였을..

빙디용이 자바로 로또 번호 생성 프로그램 짠거보고 따라해봤다.어떤 게 더 정확한지 겨뤄보자고 /** * 범위 내의 임의의 정수 값을 구하는 함수 * * @param {number} min 최소값(포함) * @param {number} max 최대값(미포함) * @returns randomNumber */const getRandomNumber = (min, max) => { return Math.floor(Math.random() * (max - min) + min);};/** * 중복 없는 임의의 정수로 이루어진 배열을 생성하는 함수 * * @param {number} num * @returns num개의 난수로 이루어진 배열 */const getNumbers = (num = 6) => { cons..

브라우저의 렌더링 엔진은 HTML 문서를 파싱하여 브라우저가 이해할 수 있는 자료구조인 DOM을 생성한다. DOM(Document Object Model)은 HTML 문서의 계층적 구조와 정보를 표현하며 이를 제어할 수 있는 API, 즉 프로퍼티와 메서드를 제공하는 트리 자료구조다.  1) 노드HTML 요소와 노드 객체HTML 요소는 HTML 문서를 구성하는 개별적인 요소를 의미한다.HTML 요소는 렌더링 엔진에 의해 파싱되어 DOM을 구성하는 요소 노드 객체로 변환된다.HTML 문서는 HTML 요소들의 집합으로 이뤄지며, HTML 요소는 중첩 관계를 갖는다. 트리 자료구조트리 자료구조는 부모 노드와 자식 노드로 구성되어 노드 간의 계층적 구조(부자, 형제 관계)를 표현하는 비선형 자료구조를 말한다.트리..

[ Quasar ] q-input mask로 숫자 포매팅q-input의 mask를 잘만 이용하면 정규표현식 등을 사용하지 않고도 입력 데이터 값의 포매팅을 진행할 수 있다. Input | Quasar Framework The QInput Vue component is used to capture text input from the user. quasar.dev 내가zodev.tistory.com 소수점 2자리를 가진 숫자를 표현하기 위해 지난 번에는 Quasar Input 컴포넌트가 기본으로 제공하는 mask 속성을 활용했다.그러나 mask 속성의 단점은 입력이 조금 부자연스럽고 점 위치가 고정된다는 것이다. 그래서 이 부분을 바꿔달라는 요청이 들어왔고 mask를 버렸다...! 요구사항점 위치가 고정된 ..

자바스크립트가 가장 많이 사용되는 분야는 웹 브라우저 환경에서 동작하는 웹페이지/애플리케이션의 클라이언트 사이드다. 브라우저가 HTML, CSS, 자바스크립트로 작성된 텍스트 문서를 어떻게 파싱(해석)하여 브러우저에 렌더링❓ 파싱(parsing) = 구문 분석 프로그래밍 언어의 문법에 맞게 작성된 텍스트 문서를 읽어 들여 실행하기 위해 텍스트 문서의 문자열을 토큰으로 분해하고, 토큰에 문법적 의미와 구조를 반영하여 트리 구조의 자료구조인 파스 트리를 생성하는 일련의 과정 일반적으로 파싱이 완료된 이후에는 파스 트리를 기반으로 중간 언어인 바이트코드를 생성하고 실행한다. 렌더링(rendering) HTML, CSS, 자바스크립트로 작성된 문서를 파싱하여 브라우저에 시각적으로 출력하는 것 브라우저 렌더링 과..