Ajax란 자바스크립트를 사용하여 브라우저가 서버에게 비동기 방식으로 데이터를 요청하고, 서버가 응답한 데이터를 수신하여 웹페이지를 동적으로 갱신하는 프로그래밍 방식을 말한다. Ajax는 브라우저에서 제공하는 Web API인 XMLHttpRequest 객체를 기반으로 동작한다. XMLHttpRequest는 HTTP 비동기 통신을 위한 메서드와 프로퍼티를 제공한다. Ajax의 등장은 이전의 전통적인 패러다임을 획기적으로 전환했다. 즉, 서버로부터 웹페이지의 변경에 필요한 데이터만 비동기 방식으로 전송받아 웹페이지를 변경할 필요가 없는 부분은 다시 렌더링하지 않고, 변경할 필요가 있는 부분만 한정적으로 렌더링하는 방식이 가능해진 것이다. Ajax는 전통적인 방식과 비교했을 때 다음과 같은 장점이 있다. 1...
객체는 상태를 나타내는 프로퍼티와 동작을 나타내는 메서드를 하나의 논리적인 단위로 묶은 복합적인 자료구조다.동작을 나타내는 메서드는 자신이 속한 객체의 상태, 즉 프로퍼티를 참조하고 변경할 수 있어야 한다. 이때 메서드가 자신이 속한 객체의 프로퍼티를 참조하려졈 먼저 자신이 속한 객체를 가리키는 식별자를 참조할 수 있어야 한다. 객체 리터럴 방식으로 생성한 객체의 경우 메서드 내부에서 메서드 자신이 속한 객체를 가리키는 식별자를 재귀적으로 참조할 수 있다.const circle = { // 프로퍼티 : 객체 고유의 상태 데이터 radius: 5, // 메서드 : 상태 데이터를 참조하고 조작하는 동작 getDiameter(){ // 이 메서드가 자신이 속한 객체의 프로퍼티나 다른 메..
고차 함수는 함수를 인수로 전달 받거나 함수를 반환하는 함수를 말한다.자바스크립트의 함수는 일급 객체 이므로 함수를 값처럼 인수로 전달할 수 있으며 반환할 수도 있다. 고차함수는 외부 상태의 변경이나 가변 데이터를 피하고 불변성을 지향하는 함수형 프로그래밍에 기반을 두고 있다. 함수형 프로그래밍은 조건문과 반복문을 제거하여 복잡성을 해결하고 변수의 사용을 억제하여 상태 변경을 피하려는 프로그래밍 패러다임이다. 조건문이나 반복문은 로직의 흐름을 이해하기 어렵게 하여 가독성을 해치고, 변수는 언제든지 변경 가능하여 오류 발생의 근본적 원인이 될 수 있기 때문에 결국 순수 함수를 통해 부수 효과를 최대한 억제하는 것이 중요하다. Array.prototype.sortsort 메서드는 배열의 요소를 정렬한다. 원..
해결과제1. 같은 선박의 항해 기록은 하나로 합치고, 총 운항 거리와 사용된 연료량을 누적한다.2. 각 선박의 연료 효율(km/L)을 계산한다. (distance/fuelUsed) => 소수점 2자리 각 객체의 새로운 key 값 efficiency를 추가하여 효율 값을 지정 한다.3. 선박들을 연료 효율(km/L) 기준으로 내림차순 정렬한다.4. 최종 결과를 반환한다. : {ships : [정리된 선박 배열], totalFuelUsed : 최종 연료 사용} 기본코드function analyzeShipFuelUsage(voyageRecords) { }const voyageRecords = [ { shipId: 1, shipName: "POSSM", distance: 1000, fuelUse: 200 }..
쇼핑몰에서 상품을 해당 조건으로 필터링 해서 상품 정렬하는 코드입니다. 상품 필터: 전체 가격순 이름순 const products = [ { id: 1, name: '상품 1', price: 10000 }, { id: 2, name: '상품 2', price: 20000 }, { id: 3, name: '상품 3', price: 30000 } ]; // 상품 목록을 표시하는 함수 function displayProductList() { const productListDiv = document.getElementById('product-list'); productListDiv.innerHTML = ''; // 상품 목록을 초기화합니다. products.forEach(product => { const pro..
쇼핑몰 페이지를 만들 때 자바스크립트로 상품 목록을 가져오는 코드입니다. // 서버에서 상품 목록을 가져와서 웹 페이지에 동적으로 표시하는 함수 function displayProductList() { // AJAX 요청을 보내고 상품 목록을 가져옵니다. // 실제로는 서버의 API 엔드포인트에 요청을 보내야 합니다. // 여기서는 가상의 데이터를 사용합니다. const products = [ { id: 1, name: '상품 1', price: 10000 }, { id: 2, name: '상품 2', price: 20000 }, { id: 3, name: '상품 3', price: 30000 } ]; const productListDiv = document.getElementById('product-l..
회원가입을 할 때 패스워드 유효성 체크 하는 기능을 구현해 보았다. 레이아웃은 'Bulma'(https://bulma.io/documentation/form/general/)에서 가져오고 유효성 체크 기능은 자바스크립트를 활용했다. input 태그의 id 값과 label 태그의 for 속성을 일치시켜 준다. 더보기 이름 닉네임 사용 가능한 닉네임 입니다. 비밀번호 비밀번호 확인 이메일 성별 여 남 회원 가입 약관 동의합니다. Yes No 가입하기 뒤로가기 더보기 /* join */ #wrap{width:800px; margin:0 auto; padding-top: 50px;} 회원가입 시 비밀번호 유효성 검사하기 1. HTML 문서에서 필요한 요소들을 querySelector를 사용하여 선택 제출 버튼(..
18.1 일급객체 다음과 같은 조건을 만족하는 객체를 일급 객체라고 한다. 무며의 리터럴로 생성할 수 있다. 즉 런타임에 생성이 가능하다. 변수나 자료구조(객체, 배열 등)에 저장할 수 있다. 함수의 매개변수에 전달할 수 있다. 함수의 반환값으로 사용할 수 있다. 자바스크립트의 함수는 다음 예제와 같이 위의 조건을 모두 만족하므로 일급 객체다. // 함수는 무명의 리터럴로 생성할 수 있다 // 함수는 변수에 저장할 수 있다. const increase = function(num){ return ++num; } const decrease = function(num){ return --num; } //함수는 객체에 저장할 수 있다 const predic = { increase, decrease, } // 함..
17장 생성자 함수에 의한 객체 생성 객체 리터럴을 사용하여 객체를 생성하는 방식과 생성자 함수를 사용하여 객체를 생성하는 방식과의 장단점을 살펴보자. 17-1 Object 생성자 함수 new연산자와 함께 Object생성자 함수를 호출하면 빈 객체를 생성하여 반환한다. 빈 객체에 프로퍼티나 메서드를 추가할 수 있다. // 빈 객체의 생성 const person = new Object(); // 프로퍼티 추가 person.name = 'Lee'; person.sayHello = function () { console.log('Hi! My name is ' + this.name); }; console.log(person); // {name: "Lee", sayHello: ƒ} p..
스코프란? 식별자 접근 규칙에 따른 유효 범위를 말한다. 식별자(변수, 함수, 클래스)에 접근할 수 있는 범위가 존재한다. 범위는 중괄호 또는 함수에 의해 나눠지고, 그 범위를 스코프라고 부른다. 스코프의 종류 스코프는 블록 스코프와 함수 스코프가 있다. (화살표 함수는 함수 스코프가 아니다.) 블록 스코프 블록 레벨 스코프란 코드 블록({…})내에서 유효한 스코프를 의미한다. 여기서 “유효하다”라는 것은 “참조(접근)할 수 있다”라는 뜻이다. ES6에서는 let과 const가 도입되면서 이 둘은 블록 스코프를 가진다. 함수 스코프 함수 레벨 스코프란 함수 코드 블록 내에서 선언된 변수는 함수 코드 블록 내에서만 유효하고 함수 외부에서는 유효하지 않다(참조할 수 없다)는 것이다. var 키워드가 함수 스..
