FRONT-END/JavaScript 4

use strict

use strict암묵적인 "느슨한 모드(sloppy mode)"를 해제하고, 명시적인 "엄격 모드(Strinct Mode)"를 사용하는 방법 ECMAScript 5부터 추가된 use strict는 JS의 제한된 버전을 선택함으로써 런타임 시, JS 코드에 대하여 향후 버전의 ECMAScript에서 사용될 수 있는 일부 구분을 제외하는 등 보다 엄격한 parsing 및 error handling을 자발적으로 시행하도록 적용함으로써 일반적인 코딩 실수나 안전하지 않은 동작을 포착한다. Strict 모드에서는 일반적인 JavaScript의 의미에 몇 가지를 변경한다.JavaScript 오류는 아니지만 함정이 될 어떤 일을 오류가 발생하도록 변경하여 제거한다.즉, 코드의 문제를 더 빨리 알리고 소스로 더 빨리..

async와 await

async & await 비동기 처리 패턴 중 콜백 함수와 프로미스의 단점을 보완하여 가장 최근에 나온 문법 var user = { id: 1, name: 'Josh' }; if(user.id === 1){ console.log(user.name);// Josh } ▲ 개발자에게 읽기 좋은 코드 user라는 변수에 객체를 할당한 뒤 조건문으로 아이디를 확인하여 콘솔에 사용자 name을 출력하는 코드이다. 이와 같이 위에서부터 한 줄씩 읽으면서 사고할 수 있는 코드가 읽기 좋은 코드라고 할 수 있다. var user = fetchUser('domain.com/users/1'); if(user.id === 1){ console.log(user.name); } fetchUser()라는 메소드를 호출하면 사용자..

Promise

Promise 자바스크립트 비동기 처리에 사용되는 객체를 말하며 주로 서버에서 받아온 데이터를 화면에 표시할 때 사용한다. 일반적으로 웹 애플리케이션을 구현할 때 서버에서 데이터를 요청하고 받아오기 위해 아래와 같은 API를 사용한다. $get('url 주소/products/1', function(response){ // ... } 위와 같은 API가 실행되면 서버에 데이터를 요청한다. 데이터를 받아오기 전에 화면에 데이터를 표시하려 하면 오류가 발생하거나 빈 화면이 출력된다. 이와 같은 문제점을 해결하기 위해서 Promise를 사용한다. 프로미스 코드 function getData(callbackFunc){ $.get('url주소/products/1', function(response){ callbac..

비동기 처리와 콜백 함수

비동기 처리 특정 코드의 연산이 끝날 때까지 코드의 실행을 멈추지 않고 다음 코드를 먼저 실행하는 자바 스크립트의 특성을 말한다. #1. ajax function getData(){ var tableData; // ajax 통신 부분 $.get('https://domain..com/products/1', function(response) { tableData = response; }); return tableData; } console.log(getData()); // undefined ajax 통신을 통해 서버에서 받아온 데이터를 response 인자에 담은 후 변수 tableData에 저장한다. 이 때 console.log에서는 undefined을 출력한다. $.get()로 데이터를 요청하고 값을 받..