본문 바로가기

Front-End/JAVASCRIPT7

[ JavaScript ] 자바스크립트 응용 ③ [ promise, 콜백 지옥 ] 콜백 지옥 : 연속되는 비동기 함수들을 처리할 때 비동기 처리의 결과 값을 사용하기 위해 콜백이 깊어지는 현상 콜백 지옥을 해결하기 위해서 promise 객체를 사용하게 되면은 비동기 처리 함수에 콜백을 줄지어 전달하지 않아도 된다. 비동기 작업 : 먼저 지시된 작업이 종료될 때 까지 기다리지 않고 다음 작업을 실행하는 방식 1. Pending( 대기 상태 ) : 비동기 작업이 진행 중이거나 작업이 시작할 수 없는 문제가 발생했음 2. Fulfilled( 성공 ) : 비동기 작업이 의도대로 정상적으로 동작된 상태 3. Rejected( 실패 ) : 비동기 작업이 모종의 이유로 인해 실패한 상태 ex) 서버 미응답, 시간 초.. 2022. 9. 12.
[ JavaScript ] 자바스크립트 응용 ② [ 동기 & 비동기 ] 자바 스크립트는 코드가 작성된 순서대로 작업을 처리한다. 이전 작업이 진행 중 일 경우 다음 작업을 수행하지 않고 기다린다. 즉, 먼저 작성된 코드를 먼저 다 실행한 후에 뒤에 작성된 코드를 실행하는 방식을 동기적 방식이라 한다. 또한 이전 작업이 수행 중일 때 다른 작업을 동시에 할 수 없는 것을 블로킹 방식이라 한다. * 쓰레드 : 연산 과정을 수행하는 것 동기 처리 방식의 단점은 하나의 작업이 너무 오래 걸릴 경우 모든 작업이 오래 걸리게 되고, 하나의 작업이 종료되기 전까지 다른 작업들이 올 스탑되기 때문에 전반적인 흐름이 느려진다. 코드를 실행하는 쓰레드를 여러 개 사용하는 방식인 MultiThread.. 2022. 8. 31.
[ JavaScript ] 자바스크립트 응용 ① [ Truthy & Falsy ] let a = "chaechae"; if( a ){ console.log("True") }else{ console.log("False"); } //True 자바스크립트의 조건식에는 Boolean 타입을 적어주지 않아도 참과 거짓을 구분할 수 있는 성질이 있다. Truthy : 배열, 객체, 숫자 값, 문자열, Infinity * 빈 배열, 빈 객체도 포함 Falsy : null, undefined, 0, Nan, ""( 빈 문자열 ) 함수의 파라미터로 전달받은 인자가 객체인지 혹은 undefined / null이 아닌지 판단해야할 경우 Truthy와 Falsy를 이용할 수 있다. const getName = (person) =>{ if( person === undefin.. 2022. 8. 27.
[ JavaScript ] 자바스크립트 기본 ④ [ 배열 ] 배열은 객체와 함수처럼 Non-Primitive Data Type에 해당한다. * Non-Primitive Data Type : 여러 개의 고정되지 않는 동적 공간을 사용하여 한번에 여러 개의 값을 가질 수 있다. 배열 : 순서있는 요소들의 집합, 여러 개의 항목이 들어있는 리스트 1. 배열 생성하기 let arr1 = new Array(); let arr2 = []; // 배열 리터럴 배열은 객체와 마찬가지로 []안에 들어가는 값이 아무 자료형이나 들어가도 상관이 없다. let arr = [ 1, "@", true, null, undefined, {}, [], function(){} ]; console.log(arr); // [ 1, '@', true, null, undefined, {},.. 2022. 8. 25.
[ JavaScript ] 자바스크립트 기본 ③ [ 객체 ] 객체는 Non-Primitive Type( 비원시타입 )에 해당하는 자료형이다. * Non-Primitive Type( 비원시타입 ) : 한번에 여러 개의 값을 가질 수 있고 여러 개의 고정되지 않은 동적 공간 사용 - 객체를 생성하는 방법 1. 객체 생성자 let person = new Object(); 2. 객체 리터럴 방식 : {}를 사용해서 객체 생성 let person = {}; // 객체 리터럴 방식 let person = { key1 : "value1", // 프로퍼티 ( 객체 프로퍼티 ) key2 : 123, key3 : true, key4 : undefined, key5 : [ 1.2 ], key5 : function(){} }; console.log(person); //{ .. 2022. 8. 21.
[ JavaScript ] 자바스크립트 기본 ② [ 조건문 ] 1. if문 let a = 3; if( a > 7 ){ console.log("1등"); } else if( a > 4 ){ console.log("2등"); } else{ console.log("꼴등"); } 2. switch문 let country = "ko"; switch(country){ case "ko" : console.log("한국"); break; case "jp" : console.log("일본"); break; case "cn" : console.log("중국"); break; default : console.log("미분류"); } * break를 사용하지 않는다면 조건에 일치하는 부분 밑으로 다 수행해야하는 코드로 인식되기 때문에 적절한 위치에 break문을 작성해줘야.. 2022. 8. 21.
[ JavaScript ] 자바스크립트 기본 ① 자바스크립트 : 웹사이트를 실질적으로 움직이게 만드는 언어 → 웹사이트에서 일어나는 일을 수행 ex) 버튼을 클릭했을 때 경고창을 띄우기, 서버로부터 데이터를 받아오거나 전송하기 자바스크립트는 자바스크립트 엔진이 실행시켜줌 ( 엔진이 없으면 실행이 안됨 ) * 자바스크립트 엔진 : 사파리, 파이어폭스, 크롬, 엣지, 오페라 등 같은 웹 브라우저에 포함되어있음 * V8 : 크롬의 자바스크립트 엔진 웹 브라우저는 자바스크립트가 실행될 수 있는 환경으로 Runtime이라 부를 수 있음 [ 변수와 상수 ] 1. 변수 let age = 25; * var : 같은 이름의 변수를 재선언이 가능해지기 때문에 문제가 생길 가능성이 매우 높음 반면에 let은 변수를 중복해서 선언하는 것을 허용하지 않기 때문에 var 대신.. 2022. 8. 18.

티스토리툴바