Scope란? Scope는 직역하면 "범위"라는 뜻입니다. JavaScript 에서 Scope(스코프)는 변수에 접근할 수 있는 범위를 말합니다. 식별자(변수)를 찾기 위한 규칙이라고도 합니다. var x = 'global'; function foo () { var x = 'function scope'; console.log(x); } foo(); // ? console.log(x); // ? 위 예제에서 x가 두번 선언되었는데, JavaScript는 각 x가 어떤 값을 가지는지 어떻게 구별할 수 있을까요? 위 예제에서 전역에 선언된 변수 x는 어디에든 참조할 수 있습니다. 하지만 함수 foo 내에서 선어도니 변수 x는 함수 foo 내부에서만 참조할 수 있고, 외부에서는 참조할 수 없습니다. 이러한 규칙..

1. 캐시 웹 프론트엔드에서 필요한 데이터를 매번 서버에 요청해서 가져와 사용하는 것은 비효율적입니다. 서버에 부담을 줄 뿐더러 시간도 오래 걸립니다. 만약 같은 요청에 같은 데이터를 응답하는 요청이라면 데이터를 메모리에 저장해놓고 쓰는 것이 효율적일 것입니다. 이렇게 응답 데이터의 사본을 저장하는 공간을 캐시라고 합니다. 2. 캐시의 종류 종류 위치 설명 브라우저 캐시 브라우저 한 번 받아온 리소스들을 재사용하여 속도가 빨라짐 프록시 캐시 브라우저와 ISP 조직 내에서 접속하는 웹 사이트의 리소스들을 캐시하여 속도가 빨라지고 네트워크 사용량을 줄임 트랜스패어런트 캐시 ISP ISP는 이 캐시를 이용하여 ISP간 대역폭 낭비를 줄임 리버스 프록시 캐시 ISP와 웹 서버 원본 서버로의 트래픽을 줄이고, 사..

1. 레이지로딩 (lazy loading)이란? 레이지 로딩이란 중요도가 떨어지거나 당장 화면에 보이지 않는 요소들의 로딩을 우선적으로 시행하지 않으면서 웹페이지 로딩 퍼포먼스를 최적화하는 기술을 의미합니다. 레이지 로딩의 목적은 (1) 최초 페이지 로딩 시간을 개선하고 당장 화면에 표시되지 않는 이미지, 영상 등의 리소스를 나중에 로딩하면서 (2) 최초 데이터 전달 양을 감소시키는 것입니다. SPA 기법에서 웹페이지를 로딩하는 기존 방식은 모든 리소스들을 한 번에 받는 것입니다. 이렇게하면 최초 로딩 시간이 더 커지게 되는데, 이러한 로딩 시간 증가는 인터넷 연결 속도가 느린 지역이나 디바이스를 사용할 때 특히 더 두드러지게 체감됩니다. 이 문제를 해결하기 위해 사용할 수 있는 테크닉이 레이지 로딩인 ..

자바스크립트 내에서 this는 '누가 나를 불렀느냐'를 뜻합니다. 즉, 선언이 아닌 호출에 따라 달라진다는 의미입니다. 그럼 각 상황별로 this가 어디에 바인딩되는지 알아보기 전에 중요한 내용인 window 객체는 무엇이고 언제 쓰이는지를 알아봅시다! 1. Window 객체란? window란 브라우저의 최상위 객체로 전역객체라고도 불립니다. 그리고 브라우저 화면이나 창을 컨트롤 할 수 있는 프로퍼티 및 메소드를 가지고 있습니다. 브라우저의 창 크기, 스크롤바 위치, 화면 구성 등등 모든 정보를 가지고 있는 객체입니다. 사실 위의 내용이 window 객체의 전부이지만 약간의 내용을 추가하자면, var로 선언하고 사용하는 변수나 메소드들은 전역 프로퍼티에 추가됩니다. 즉 window 객체의 프로퍼티가 됩니..

※ 본 글은 EXMAScript6 두고두고 보는 자바스크립트 표준 레퍼런스 (김영보 지음)을 정리한 글임을 알립니다. 2.1 var키워드 var 키워드는 변수를 선언할 때 사용합니다. 크게 로컬 변수와 글로벌 변수로 구분하는데 그 이유는 스코프 때문입니다. 로컬 변수는 함수 또는 오브젝트를 스코프로 사용하려는 의도이며, 글로벌 변수는 프로그램 전체에서 공용으로 사용하려는 의도입니다. 글로벌 변수는 다른 프로그램에서 같은 이름의 변수를 사용할 수 있으므로 의도하지 않는 값이 설정될 수 있으니 사용에 유의해야 합니다. 글로벌 변수 오해 글로벌 오브젝트에 작성한 변수는 글로벌 오브젝트가 스코프입니다. 글로벌 오브젝트에 작성했으므로 글로벌 변수라고 하는 것이지, 글로벌 오브젝트에서 보면 이는 로컬 변수입니다. ..

※ 본 글은 EXMAScript6 두고두고 보는 자바스크립트 표준 레퍼런스 (김영보 지음)을 정리한 글임을 알립니다. 1.1 ECMA-262 스팩 상태 자바스크립트 코드가 실행되려면 코드를 컴파일하고 실행할 자바스크립트 엔진이 필요합니다. 엔진은 자바스크립트 스펙을 기준으로 개발하는데, 스펙의 정식 명칭을 줄여서 ES2015를 ES6로, ES2016을 ES7으로 표기합니다. 공식적인 표기는 아니지만, 자바스크립트 개발자들 사이에 통용되는 표기입니다. 1.2 ES6의 방향성 ES6는 객체지향 언어의 장점을 적극적으로 도입했으며, 효율적인 메모리 사용에 중점을 두었다고 볼 수 있습니다. ES5가 프로그램 언어의 기본 기능에 중점을 두었다면, ES6는 이를 바탕으로 활용 기능에 중점을 두었다고 할 수 있습니다..