■ Front-End/- JavaScript & TypeScript
-
[Javascript] Hoisting 호이스팅■ Front-End/- JavaScript & TypeScript 2019. 7. 23. 00:25
Hoisting이란? 함수를 선언하기 전에 호출하는 것. 예) 그런데 함수를 변수에 할당하여 호출하면 TypeError가 발생한다. 왜 이런 에러가 발생하는걸까? 먼저 자바스크립트 실행 과정을 알아야 한다. 자바스크립트는 코드를 해석하는 단계와 코드를 실행하는 단계로 나뉜다. 코드를 해석하는 단계에서는, 선언 문장을 초기화하면서 스코프를 형성한다. 실행하는 단계에서는, 값을 할당하거나 계산을 하는 행위를 한다. 해석 단계에서 hello2 변수를 선언하는 문장이 먼저 초기화 되면서 hello2 변수에는 undefined 값이 할당된다. 그래서 실행 단계에서 hello2(); 를 호출하면 undefined가 리턴된다.
-
[Javascript] Closure■ Front-End/- JavaScript & TypeScript 2019. 6. 22. 09:00
클로저는 반환된 내부함수가 자신이 선언됐을 때의 환경(Lexical environment)인 스코프를 기억하여 자신이 선언됐을 때의 환경(스코프) 밖에서 호출되어도 그 환경(스코프)에 접근할 수 있는 함수를 말한다. 이를 조금 더 간단히 말하면 클로저는 자신이 생성될 때의 환경(Lexical environment)을 기억하는 함수다 예시 위 코드를 실행 컨텍스트로 표현하면 아래와 같다. 사실 아직까지 업무에 closure를 적용해본 경험은 없다. closure를 적용할만한 기능이 있지 않고, 특히 주니어 개발자에게 closure를 실무에 적용해보는건 아직 어렵다(=두렵다);; 예제 클로저를 이용한 간단한 예제로는 카운터가 있다. 위 코드를 실행하면, 변수 increase에 할당된 즉시 실행 함수가 호출된..
-
[Javascript] 실행 컨텍스트(Execution Context)■ Front-End/- JavaScript & TypeScript 2019. 6. 21. 09:00
실행 컨텍스트는 Javascript에서 중요한 scope, hoisting, this, function, closure 등의 동작 원리를 담고 있는 핵심 원리이다. 실행 컨텍스트는 실행 가능한 코드가 실행되기 위해 필요한 환경이라고 볼 수 있다. 실행 컨텍스트의 3가지 객체 1. Variable Object(변수 객체) 변수, 매개변수와 인수정보, 함수 선언(함수 표현식은 제외) 의 정보를 담고 있는 객체이다. 전역 컨텍스트의 경우, 전역 객체(Global Object)를 가리킨다. 예제 코드 위 코드를 실행하면 최초에는 전역 컨텍스트가 생성되고, 해당 컨텍스트의 변수 객체는 전역 객체를 가리킨다. 함수 컨텍스트를 가리키는 경우에는 활성 객체(Activation Object)를 가리킨다. 2. Scope..
-
[WEB] 세션(Session)과 쿠키(Cookie)■ Front-End/- JavaScript & TypeScript 2019. 6. 21. 00:00
예전에 랜딩 페이지 작업을 하면서 임시로 팝업을 띄워야할 때가 있었다. 팝업 하단에는 '오늘 하루 팝업 보지 않기'와 같은 기능이 있었다. 쿠키를 사용해서 해결했는데, 개발한 김에 세션과 쿠키에 대해서 정리해보려고 한다. 세션과 쿠키를 사용하는 이유 HTTP 프로토콜 특성 상 서버와 클라이언트의 통신이 끝나면 상태 정보는 유지하지 않는다. 그래서 쿠키와 세션이 필요하다. 예를 들어, 쇼핑몰에서 옷을 구매하려고 로그인했음에도 불구하고, 세션과 쿠키가 없으면 페이지를 이동할 때마다 계속 로그인을 해야한다. 쿠키란? 클라이언트(브라우저) 로컬에 저장되는 키와 값이 들어있는 작은 데이터 파일이다. 사용자 인증이 유효한 시간을 지정할 수 있으며, 유효 시간이 정해지면 브라우저가 종료되어도 인증이 유지된다. (그래..
-
[ES6] iterator, generator, async/await에 대하여■ Front-End/- JavaScript & TypeScript 2019. 6. 20. 09:00
Iterator 배열 순회의 역사 //ES5 이전 for (var index = 0; index < myArray.length; index++) { console.log(myArray[index]); } //ES5 이후 myArray.forEach(function (value) { console.log(value); }); //ES6 이후 for (var value of myArray) { console.log(value); } iterable 객체란? Symbol.iterator 심볼을 속성으로 가지고 있고, 이터레이터 객체를 반환하는 객체이다. Iterator 객체란? next() 메서드를 구현하고 있고, done과 value 속성을 가진 객체를 반환하는 객체이다. for of 루프는 순회를 시작하기..
-
[WEB] CORS에 대하여■ Front-End/- JavaScript & TypeScript 2019. 6. 20. 09:00
실무에서 프론트 개발을 하다보면 가장 자주보게 되는 에러는 CORS이다. 입사한지 얼마 안됐을 때, 이 에러가 발생하면 숨이 턱턱 막혔다. 또 이 에러야? 하면서 다시 구글에 CORS를 쳐보면서 해결 방법을 찾아보기 시작했다. 그래서 이제는 여기에 제대로 정리해보려고 한다. CORS란? Cross-Origin Resource Sharing 시스템 수준에서 타 도메인 간 자원(img, data) 호출을 승인/차단을 결정하는 것. 다른 도메인으로부터 리소스가 요청될 경우, 해당 리소스는 cross-origin HTTP 요청에 의해 요청된다. 보안 상의 이유로, 브라우저들은 스크립트 내에서 초기화되는 cross-origin HTTP 요청을 제한한다.(이를 Same-Origin-Policy라고 한다.) 개발자들..
-
[ES6] Promise에 대하여■ Front-End/- JavaScript & TypeScript 2019. 6. 19. 18:21
Promise란? ES6에서 비동기 처리를 위한 패턴. 전통적인 콜백 패턴이 가진 단점을 보완하고, 비동기 처리 시점을 명확하게 표현한다. 아래 코드는 전통적인 콜백 패턴이 가진 단점을 보여준다. 위 코드를 개선하기 위해 Promise를 사용한다. Promise의 생성 Promise의 후속 처리 메서드 1. then then 메소드는 두 개의 콜백 함수를 인자로 전달 받는다. 첫 번째 콜백 함수는 성공(fulfilled, resolve 함수가 호출된 상태) 시 호출되고 두 번째 함수는 실패(rejected, reject 함수가 호출된 상태) 시 호출된다. 2. catch 예외(비동기 처리에서 발생한 에러와 then 메소드에서 발생한 에러)가 발생하면 호출된다. 따라서 에러 처리는 catch 메서드를 사용..
-
[자료구조] Javascript로 Tree와 Tree 순회 구현하기■ Front-End/- JavaScript & TypeScript 2019. 5. 24. 09:00
얼마 전에 Java로 Tree 클래스를 만들어봤는데, Javascript도 만들어두면 좋을 것 같아서 작성해보았다. 순회까지 간단하게 추가했다. class Tree { constructor(val) { this.val = val; this.leftNode = null; this.rightNode = null; } getVal() { return this.val; } setVal(val) { this.val = val; } setLeftNode(node) { this.leftNode = node; } getLeftNode(node) { return this.leftNode; } setRightNode(node) { this.rightNode = node; } getRightNode(node) { retur..