반응형 자바스크립트24 43장 Ajax 브라우저에서 웹페이지 요청을 하거나 링크를 클릭하면 화면 갱신이 발생하는데, 이는 브라우저와 서버와의 통신에 의한 것이다. 이 과정에서 비동기적 데이터 교환 통신 방식인 Ajax를 사용할 수 있다. Ajax (Asynchronous JavaScript and XML) - 자바스크립트를 사용하여 브라우저가 서버에게 비동기 방식으로 데이터 요청을 하고, 서버가 응답한 데이터를 수신하여 웹페이지를 동적으로 갱신하는 프로그래밍 방식을 말한다. - 브라우저에서 제공하는 Web API인 XMLHttpRequest 객체를 기반으로 동작한다. - XMLHttpRequest는 HTTP 비동기 통신을 위한 메서드와 프로퍼티를 제공한다. - XMLHttpRequest는 1999년 마이크로소프트가 개발했고, 구글이 구글 맵스.. 2022. 11. 27. 16장 프로퍼티 어트리뷰트 * 해당 글은 모던 자바스크립트 Deep Dive를 공부하며 정리한 글입니다. * 내부 슬롯과 내부 메서드 - 자바스크립트 엔진의 구현 알고리즘을 설명하기 위해 사용하는 것 - ECMAScript 사양에 정의된 대로 구현되어 자바스크립트 엔진에서 실제로 동작하지만 개발자가 직접 접근할 수는 없음 - 단, 일부 내부 슬롯과 내부 메서드는 접근 가능함 // 모든 객체는 [[Prototype]] 이라는 내부 슬롯을 가짐 const a = {}; o.__proto__ // Object.prototype 자바스크립트 엔진은 프로퍼티를 생성할 때 프로퍼티의 상태를 나타내는 프로퍼티 어트리뷰트를 기본값으로 자동 정의한다. 프로퍼티의 상태는 프로퍼티의 값, 값의 갱신 가능 여부, 열거 가능 여부, 재정의 가능 여부를 .. 2022. 10. 17. 13장 스코프 * 해당 글은 모던 자바스크립트 Deep Dive를 공부하며 정리한 글입니다. * 스코프 - 유효범위, 자바스크립트에서 크게 예시로 드는 것은 var와 let, const 차이 - 모든 식별자(변수, 함수, 클래스 이름 등) 자신이 선언된 위치에 의해 다른 코드가 식별자 자신을 참조할 수 있는 유효 범위를 말한다. - 식별자가 유효한 범위 var 와 let의 비교 코드 // var 예시 function foo() { var x = 1; // 여기서 자바스크립트 엔진이 아래 코드를 var가 없는 x 재할당으로 인식하고 동작한다. var x = 2; console.log(x); // 2 } foo(); // let 예시 function bar() { let x = 1; // let, const 로는 같은 스.. 2022. 10. 12. 자바스크립트 기본 - Part 1 이 글은 유데미 강좌인 https://www.udemy.com/course/the-complete-javascript-course/ 수강하면서 정리할 내용이나 다시 알게된 내용을 작성했습니다. 개인적으로 아는 부분은 따로 적지 않아서 순서는 뒤죽박죽! // 콘솔창에는 object 라고 찍히지만, null은 object가 아님 // 이는 자바스크립트 내부에 있는 버그다. console.log(typeof null); let, const, var 간단한 차이 let : 변수명을 정의하고, 재할당 할 수 있음, 초기값을 주지 않아도 사용 가능 const : 변수명을 정의하고 초기값을 반드시 줘야 함, 재할당 할 수 없으므로 변하지 않을 값에 사용해야 함 기본적으로 const를 사용하는 것으로 생각하되, 변수값.. 2022. 8. 29. map, filter, reduce map // map (고차함수) // 함수에서는 처리한 결과값을 리턴하게 된다 const map = (f, iter) => { let res = []; for (const a of iter) { res.push(f(a)); } return res; }; // 예제 1 let names = []; for (const p of products) { names.push(p.name); } console.log(names); // map을 이용해서 다시 작성한 예제 1 console.log(map(p => p.name, products)); // 예제 2 let prices = []; for (const p of products) { prices.push(p.price); } console.log(prices).. 2021. 11. 24. 제너레이터와 이터레이터 1) 제너레이터와 이터레이터 제너레이터 : 이터레이터이자 이터러블을 생성하는 함수, well-formed iterator를 리턴하는 함수 어떠한 값들을 제너레이터를 통해서 이터러블로 만들고, for.. of 문을 통해 순회를 할 수 있게 만들 수 있다는 것! function *gen() { yield 1; yield 2; yield 3; } let iter = gen(); console.log(iter[Symbol.iterator]() == iter); // true 반환 예제 10까지의 홀수만 뽑아내는 제너레이터 함수 function *odds(l) { for(let i = 0; i < l; i++) { if (i % 2) yield i; } } let iter2 = odds(10); console.l.. 2021. 11. 24. Vanila JavaScript로 Countdown Timer 만들기 결과물 먼저 공개하자면.. 내가 창작한 것은 아니고 자바스크립트 문법은 어느정도 익혔다고 생각해서 능숙하게 사용하고 싶어서 유튜브를 통해 튜토리얼을 찾아서 완성해봤다. 구체적으로 자바스크립트 뿐만 아니라 HTML, CSS 작성까지 따라서 해보니까 어느 상황에서 어떤게 쓰이는지 좀 파악이 되어서 좋았다. 타이머 말고도 다른 프로젝트들도 클론코딩하면서 감을 더 익혀야겠다. 출처는 https://youtu.be/dtKciwk_si4 내가 작성한 코드는 https://github.com/Jung-Ah-C/countdown-timer 2021. 11. 23. 드림코딩 엘리 - 자바스크립트 기초 강의(ES5+) (13편) async / await 1. Promise로 비동기 네트워크 호출 코드 만들기 function fetchUser() { // resolve나 reject를 호출하지 않으면 Promise가 pending 상태에 머무르게 된다. return new Promise((resolve, reject) => { // do network request in 10 secs.. resolve('ellie'); }); } // 동기적으로 처리하게 되면 네트워크와 통신하는 10초 동안 사용자는 빈 화면을 보게 된다. const user = fetchUser(); user.then(console.log); console.log(user); 2. async // async // 함수 앞에 async라는 키워드를 쓰면 자동으로 .. 2021. 11. 19. 드림코딩 엘리 - 자바스크립트 기초 강의(ES5+) (12편) Promise - 자바스크립트에서 제공하는 비동기를 간편하게 처리할 수 있게 하는 Object - 정해진 기능을 성공적으로 처리하면 메세지와 함께 결과값을 반환, 처리하지 못하면 에러를 전달해줌 - 콜백함수 대신에 유용하게 쓰일 수 있음 파일을 읽어오거나, 네트워크 요청 하는 것들은 시간이 걸리는 작업이기 때문에 비동기로 처리하는 것이 좋음 만약, 동기적으로 처리하게 된다면 작업을 하는 동안 다음 코드가 실행되지 않는 번거로움이 발생하기 때문이다. Promise는 만드는 순간에 excuter 함수를 실행하기 때문에, 원하지 않을 때도 네트워크 통신이 일어날 수 있음을 유의해야 한다. 'use strict'; // Promise is a JavaScript object for asynchoronous op.. 2021. 11. 18. 이전 1 2 3 다음 반응형
