HTML 삽입 미리보기할 수 없는 소스 JSON(JavaScript Object Notation)은 JS에서 객체를 만들 때 사용하는 표현식과 동일한 문법을 갖는 데이터 포맷이다. 이 표현식은 사람과 기계가 이해하기 쉬우며 데이터의 용량이 적어 XML을 대체해 데이터 전송 등에 많이 사용된다. 변환 시에는 두가지 API가 있다. JSON.stringify : JS object를 json의 문자열 데이터로 변환하는 함수 stringify JSON.parse : json의 문자열 데이터를 JS object 로 변환하는 함수 parse가 있다. 직렬화(serialize)와 역직렬화(deserialize) 웹 어플리케이션에서 서버에 특정 object를 서버에 전송할 때 { key : value }의 string..

HTML 삽입 미리보기할 수 없는 소스 JSON Placeholder API를 사용하여 예제코드 살펴보기 언제 끝날지 모르는 서버와의 통신과 관련된 처리들은 비동기적으로 처리한다. 이때 promise (then, catch) 를 사용하는 이유는 비동기적인 작업을 처리할 때 작업의 성공과 실패 결과를 표준화된 방식으로 처리할 수 있도록 해주기 때문이다. 1. fetch() 함수의 return 값은 "Promise" 데이터 타입이다. 이 Promise 객체가 성공적으로 실행(resolve)이 되면 response object(객체)를 반환한다. fetch 함수는 default로 GET방식으로 동작한다. GET방식은 요청 body를 받지 않기 때문에, 두번째 파라미터(옵션인자) 없이도 API주소만 넘길 수 있..

개요 개발하는 애플리케이션의 크기가 커지면 파일을 여러 개로 분리해야 하는 시점이 온다. 이때 분리된 파일을 각각 '모듈(module)'이라 부르는데, 모듈은 대개 클래스 하나 혹은 특정한 목적을 가진 복수의 함수로 구성된 라이브러리 하나로 구성된다. 즉, 모듈은 단지 각각의 파일 하나에 불과하다. 스크립트 하나는 모듈 하나이다. 일반 스크립트와 모듈의 차이 모듈은 항상 엄격 모드(use strict)로 실행된다. 선언되지 않은 변수에 할당하는 등의 코드는 에러를 발생시킨다. 모듈 레벨 스코프 : 모듈은 자신만의 스코프가 있다. 따라서 모듈 내부에서 정의한 변수나 함수는 다른 스크립트에서 접근할 수 없다. 외부에 공개하려는 모듈은 export 해야 하고, 내보내진 모듈을 사용하려면 import 해줘야 한..

HTML 삽입 미리보기할 수 없는 소스 let, const 키워드 추가 (ES6+) 기존 var 키워드는 함수 레벨 스코프(유효범위)를 가지며, 암묵적 재할당이 가능 하였다. 이 단점을 보완하기 위해 블록 레벨 스코프를 가지는 let, const 키워드가 추가되었다. 변수의 중복 사용을 방지하기 위해 변수를 선언할 때 변하지 않는 값(상수)은 const, 변할 수 있는 값은 let 으로 선언해야 한다. let : let 없이 작성 시엔 가장 최근에 쓴 것으로 적용됨. ex) let name = "Sander"; const : 가급적 상수는 변수 이름을 대문자로 표기 ex) const MAX_SIZE = 100; / const PI = 3.14; / const BIRTH_DAY = '2020-01-01';..

HTML 삽입 미리보기할 수 없는 소스 0. 크롬 개발자도구 디버거툴을 이용하여 실습환경 세팅 실습 목표: 한 줄씩 실행하며 키워드와 실행 컨텍스트에 따른 scope와 call stack의 변화를 살펴보자. 실습 코드: https://gist.github.com/egoing/7e8bce3f04542e061629166be91598cc 실행 컨텍스트(Execute Context) 실행 컨텍스트는 실행 가능한 코드를 형상화하고 구분하는 추상적인 개념으로, 쉽게 말해 실행 가능한 코드가 실행되기 위해 필요한 환경을 말한다. 여기서 말하는 실행 가능한 코드는 일반적으로 전역 코드와 함수 내 코드이다. 자바스크립트 엔진은 코드 실행을 위해 필요한 여러 정보 (ex: 변수(전역변수, 지역변수, 매개변수, 객체의 프로..

call, apply, bind 는 함수 호출 방식과 관계 없이 this 를 지정할 때 사용하는 함수이다. .call(매개변수1, 매개변수2~) call 메서드는 모든 함수에서 사용할 수 있으며, this 를 특정값으로 지정할 수 있다. 첫번째 매개변수: this 로 사용될 값 두번째 매개변수~: 함수가 사용할 인수 .apply(매개변수1, [배열1, 배열2]) apply 메서드는 함수 매개변수를 처리하는 방법을 제외하면 call과 완전히 같다. call 은 일반적인 함수와 마찬가지로 매개변수를 직접 받지만, apply 는 매개변수를 배열로 받는다. 첫번째 매개변수: this 로 사용될 값 두번째 매개변수: 함수가 사용할 인수의 배열 apply 는 '배열 요소'를 함수의 매개변수로 사용할 때 유용하다...