본문 바로가기

JavaScript40

Fetch API Request Fetch API는 네트워크 통신을 포함한 리소스 취득을 위한 인터페이스가 정의되어 있습니다. AJAX를 구현하는 방법은 여러 가지 방법이 존재하는데, 기존의 XMLHttpRequest, jquery의 $(). ajax, 가장 최신의 방법이라고 할 수 있는 Fetch API입니다. 이러한 여러 API중 Fetch API는 리소스 취득을 위한 인터페이스가 정의되어 있기 때문에, 좀 더 강력하고, 유연한 조작이 가능하다고 합니다. Fetch에는 일반적인 오브젝트로 Request와 Response가 포함되어 있습니다. 그중 Request객체 부터 차근차근 알아볼 생각입니다. Request 객체 - Fetch API의 request는 요청 리소스를 표현해주는 인터페이스입니다. Request객체의 속성에는 다음과.. 2021. 10. 16.
Preparation before Using "Promise" Promise를 사용하고 고전적인 콜백 함수를 통한 비동기 네트워크 통신을 개선하기 전, promise의 개념을 다시 한번 잡고, 코드를 리팩터링 하기 위해 MDN 방문. Promise를 주요 주제로 잡고 공부를 진행할 것이나 중간 중간 생소한 문장과, 단어에 하이퍼링크가 걸려있는 건 고추참치.. Promise 객체는 비동기 작업이 맞이할 미래의 완료 혹은 실패를 의미한다. 기본적으로 promise는 함수에 콜백을 전달하는 대신에, 콜백을 첨부하는 방식의 객체이다. 음.. 보통 비동기함수에서 성공 시 익명 함수 인자로 return값을 받아서 처리하는 데, 이 모델이 아니라 promise객체 내부에 콜백 함수를 첨부한 후 promise객체 자체를 return 하는 개념인 것 같다. "그러면 어떤 이점이 존.. 2021. 10. 12.
인스턴스 생성 자바스크립트에서 인스턴스를 생성하는 방법은 두 가지가 존재한다. 1. function이라는 이전 방식을 사용해 인스턴스를 만드는 방법 2. class문법을 통해 인스턴스를 만드는 방법 각각의 흐름과 두 가지의 차이점과 공통점을 알아보자 function을 통해 인스턴스를 만드는 청사진을 구성하는 것은 상당한 암묵적인 메커니즘이 녹아있다. function Person(){ this.age = ''; this.name = ''; this.marry = []; } Person.prototype.getName = function() { return this.name; }; Person.prototype.setMarry = function(marry, date) { this.marry.push({...marry, .. 2021. 8. 2.
[ES8] async, await -- 2022-01-16 최근 JS를 공부하면서 async의 await을 제대로 이해하기 위해선 Symbol, 이터러블, 이터레이터, 제너레이터의 개념이 필요하다고 느꼇다. 공부 후 재정리 예정 -------------------------------------------------------------------------------------------------------- promise를 좀 더 간결하고 간편하고 동기적으로 실행하는 것처럼 만들어주는 아이입니다. then으로 엮여있는 promise들은 코드가 난잡해질 수 있기에 좀 더 간단한 api로 async, await을 사용하면 우리가 순차적으로 코드를 작성하는 것처럼 보이게 도와줍니다. async & await clear style of u.. 2020. 7. 3.
[ES6] Promise 콜백을 대체해서 어떻게 깔끔하게 정리할까요? Promise는 비동기를 간편하게 처리하도록 도와주는 오브젝트입니다.정해진 장시간의 기능을 수행하고 나서 정상적이라면 성공의 메시지와 전달 값을 전달해주며기능을 수행하다 예상치못한 문제가 발생하면 에러를 발생합니다. 1.state우리가 지정한 오퍼레이션을 실행 중일때는 pending상태이며 성공적으로 오퍼레이션을 끝냈다면 fulfilled상태이며문제가 발생하면 rejected상태가됩니다. 2.Producer원하는 기능을 수행해서 해당하는 데이터를 만들어내는 producer = promise 오브젝트 3.Consumer원하는 데이터를 소모하는 consumer 프로미스는 클래스이기 때문에 New라는 키워드를 이용해 오브젝트를 생성할 수 있습니다.const prom.. 2020. 7. 2.
생성자와 프로토타입 생성자 생성자 함수는 객체를 생성하는 함수입니다. ES6에서는 class를 사용할 수 있지만 ES5에서는 class가 존재하지 않습니다. function Shield(selector) { this.parent = document.querySelector(selector); this.dom = null; } 함수를 사용하는 방법과 별로 다르지 않는데 차이점은 대문자로 시작한다는 것입니다. 생성자를 바탕으로 객체를 생성할 수 있습니다. 객체를 생성할 때는 new라는 키워드를 사용해서 생성합니다. 사람이라는 생성자를 만들어 본다면 function Person(name, age){ this.name = name; this.age =age; } 이렇게 만들 수 있습니다. 여기서 this라는 키워드는 중요합니다. .. 2020. 5. 28.
JSON JavaScript는 모든 데이터가 객체라는 형태로 만들어지며 그것을 참조하기 위한 변수가 필요합니다. JavaScript Object JavaScript Object Notation(JSON) Boolean var n = new Boolean(true) var n = true; Number var n = new Number(3); var n = 3; String var n = new String("안녕"); var n = "안녕"; , var n = '안녕'; Array var ar = new Array(); var ar =[]; Object var obj = new Object(); var obj ={}; 자바 스크립는 대입이라는 개념이 존재하지 않습니다. n은 값을 저장할 수없으며 참조 변수이므로 .. 2020. 5. 27.
Javascript(3) 자바스크립트 엔진 자바스크립트의 대중적인 엔진은 구글의 V8 엔진입니다.V8엔진은 크롬과 노드 안에서 동작하며 Memory Heap과 Call Stack으로 이루어져 있습니다. 메모리 힙: 프로그램이 실행될때 선언된 객체는 힙 메모리 영역에 할당됩니다.변수, 객체에 대한 모든 메모리 할당이 발생되는 곳입니다. 호출 스택 : 코드가 실행될때 호출 스택이 쌓입니다. 실행 환경(Runtime) 브라우저에서 자바스크립트 개발자에게 제공하는 API가 존재합니다. 브라우저는 엔진 하나만으로 구성되어 있지 않고 DOM, Ajax, setTime~~ 등등의 브라우저에서 제공하는 Web API들이 존재합니다. 이러한 Web API의 호출을 통제하기 위한 Event Queue와 Event Loop도 존재하고 있습니다. 호.. 2020. 5. 26.
JavaScript (2) 자바스크립트의 문법들은 다른 언어와 유사합니다.if , switch 분기문이나, for, while문은 크게 다른 부분이 없으며문자 열처리는 정규표현식을 제공하며 또한 문자열에서 제공하는 다양한 함수들이 존재합니다. if 보통 우리는 조건문을 사용할 때 밑의 예 저처럼 사용한다.if(조건){ 참일경우 }else{ 그렇지않을경우 }브레이스를 제외하고 한 줄 코딩을 할 수 있습니다.if(조건)console.log(true) else console.log(false)분기 - switch 로직을 분기하기 위해서 if문 이외에도 switch문을 통해서도 해결할 수 있다. switch (expresstion){ case 1: case1 처리하는 구문 break; case 2: case2 처리하는 구문 break; .. 2020. 5. 13.
JavaScript 버전 2018년을 중심으로 ES6를 지원하는 브라우저가 많아서 몇 년간 ES6문법이 표준으로 쓰이는 상황입니다.다만 feature별로 지원하지 않는 브라우저가 있을 수 있다. 변수변수는 var, let, const로 선언할 수 있으며 각 변수마다 scope의 유효범위가 달라집니다. var 의경우 변수명이 중복으로 페이지에서 선언되어도 작동const, let은 중복변수명이 존재할 경우 오류const는 java의 final 속성과 유사하며 선언과 동시에 값 할당 필수let은 선언 이후 값 할당이 자유로움연산자 연산자 우선순위를 표현하기 위해서는 ()를 사용합니다.수학 연산자는 +,-,*,/,%가있다.논리 연산자, 관계 연산자, 삼항 연산자가 존재합니다. a || b -> a가 참이라면 a만 실행한다. a &.. 2020. 5. 12.

티스토리툴바