본문 바로가기

WEB(Front-End)/Javascript

(14)
10. async, await async와 await을 이용하면 promise를 조금더 간결하고 동기적으로 실행하는 것처럼 보이도록 해준다. syntactic sugar : 기존에 존재하는 것을 감싸서 우리가 좀 더 간편하게 쓸 수 있는 api를 제공하는 것을 말한다 ex)클래스도 해당 1. async : function 앞에 사용하여 다 처리될 때까지 비동기적으로 처리하도록 해준다. 2. await // async & await console.log('0. Promise 복습!'); // 사용자의 데이터를 네트워크 통신을 통해 백앤드에서 받아오는데 10초정도 걸리는 코드가 있다고 가정하고 // 10초 후에 우리가 받아온 값을 return 하는 함수 // 이 함수를 호출하고 출력을 하게되면 비동기적인 처리를 하지 않으면 동기적으로 자..
9. Promise (state, producer, consumer) 두 가지 고려 1. state(상태) : process가 operation을 수행하고 있는 중인지, 기능 수행이 완료된 후 성공했는지 실패했는지 2. producer, consumer의 차이점 (원하는 데이터를 제공하는 사람과, 제공된 데이터를 필요로 하는 사람에 대한 이해) ->Promise를 이용하여 callback 지옥 극복할 수 있다 - state (pending, fulfilled, rejected) pending (operation 수행 중)-> fulfilled(완료된 상태) or rejected(문제 발생) console.log("Promise 시작!!"); // 1.Producer // 2.Consumer : then, catch, finally // then (성공했을 때, resolv..
8. callback (비동기 처리) 자바스크립트는 동기적(synchronous)이다. hoisting : var, function declaration이 자동적으로 제일 위로 올라가는 것. 코드 블록은 호이스팅 된 다음 순서대로 실행된다. 'use strict'; console.log('async 시작!!'); console.log('비동기적인 실행 방법'); console.log('1'); //브라우저 api setTimeout호출 요청 -> 브라우저에서 1초지난 후 콜백함수 실행하라고 신호를 줌. setTimeout(function(){ console.log('2'); },1000); console.log('3'); // Synchronous callback // 매개변수가 어떤 함수인지는 모르지만 함수를 매개변수로 받아 호출 call..
7. JSON (Object to JSON, JSON to Object) 1. JSON.stringify(obj) : Object to JSON +원하는 property만 설정해줄 수 있다, 콜백함수를 이용하여 통제해줄 수 있다 2. JSON.parse(json) : JSON to Object console.log("JSON 시작!!"); //1. Object to JSON (객체 안에있는 함수는 json으로 변환되자않는다) ==> JSON.stringify(obj) console.log('1. Object to JSON'); let json=JSON.stringify(true); console.log(json); json=JSON.stringify(['apple','banana']); console.log(json); const rabbit={ name:'tori', col..
7-1. 배열실습 (array-api 이용) // Q1. make a string out of an array { const fruits = ['apple', 'banana', 'orange']; } // Q2. make an array out of a string { const fruits = '🍎, 🥝, 🍌, 🍒'; } // Q3. make this array look like this: [5, 4, 3, 2, 1] { const array = [1, 2, 3, 4, 5]; } // Q4. make new array without the first two elements { const array = [1, 2, 3, 4, 5]; } class Student { constructor(name, age, enrolled, score) { this...
7. 배열 Array Array, Map, Set, List 어떤 자료구조 알고리즘을 사용하면 삽입, 검색, 정렬, 삭제에 효율적인지 (BigO) 배열 (index : 0부터 시작) 1. 배열 선언 - new Array(); - [값,값,값] 2. 배열 index 접근 const fruits=['사과','바나나']; console.log(fruits); console.log(fruits.length); //2 console.log(fruits[1]); 3. for of, 4. forEach 바로 콜백함수를 받아온다 5. Addition, Deletion (push, pop, unshift, shift, splice, concat) 뒤에 추가 push(값) 뒤에서 빼는 것 pop() 앞에 값 추가 unshift(값) 앞에 값 ..
6. Object(Listerals and properties,Computed properties [],Property value shorthand And Constructor function, in operator, for .. in vs for .. of, cloning) 간편하게 데이터를 관리할 수 있다. 동적으로 코딩가능(property 추가, 삭제 가능) Object={key:value} : Object는 key와 value의 집합체이다. 1. Listerals and properties. 생성 방법 - const obj1={} : object literal syntax - const obj2=new Object(); objet constructor syntax 2. Computed properties [] 대괄호를 이용하여 property 접근도 가능 ['문자열값으로'] : 매개변수로 string값을 key값으로 받아서 value 값을 찾고 싶을 때 []를 이용 (dot을 이용하여 property 접근도 가능하지만 매개변수로 문자열값을 받아서 .key로 접근이 가능..
5. class 객체지향 ( 캡슐화, 상속, 다형성) getter,setter, public, private 클래스는 붕어빵을 만들 수 있는 틀 : 데이터는 들어있지 않고 틀만 정해놓는 것 선언 방법 (constructor, fields, methods) class 클래스명{ constructor(멤버변수1,멤버변수2){ this.멤버변수1=멤버변수1; this.멤버변수2=멤버변수2; } } Object는 만들어 놓은 틀 클래스를 이용하여 새로운 인스턴스를 생성하면 Object가 된다. (메모리에 올라간다) 만들어진 클래스를 이용하여 객체 생성하는 방법 1. 변수선언 후 new 키워드이용하여 선언 const 변수명=new 클래스명(값1,값2); Getter Setter public private(변수 선언시 #변수명) static : static 오브젝트에 상관없이 클래스에 연결되어있다. 클래스 자체에 붙어있다..