Answer 1. 코드의 간결성 2. 콜백함수 this에 값을 참조시킬때 (this 값에 lexical scope를 참조시킬 때) 3. map 사용할 때 this를 넘격주어 코드를 더 쉽게 작성할 수 있음. 들어가기전 자바스크립트에서 일반 함수는 함수를 선언할 때 this에 바인딩할 객체가 동적으로 결정된다. 즉, 함수를 호출할 때 함수가 어떻게 호출되었는지에 따라 this에 바인딩할 객체가 결정된다. this에 대해선 아래 링크 참고 poiemaweb.com/js-this 반면, 화살표 함수에서는 함수를 선언할 때 this에 바인딩할 객체가 정적으로 결정된다. 일반 함수와 달리 언제나 상위 스코프의 this를 가리킨다. 이를 Lexical this라고 한다. this와 Arrow function thi..
프론트엔드
require vs import (CommonJs와 ES6) 기본적으로 require와 import는 모듈 키워드입니다. 외부 파일이나 라이브러리를 불러올 때 사용합니다. require는 NodeJS에서 사용되고 있는 CommonJS 키워드이고, import는 ES2015에서 새롭게 도입된 키워드입니다. 둘다 다른 파일의 코드를 불러온다는 같은 목적을 가지고 있지만, 다른 문법 구조 지니고 있습니다. const library = require("library") import library from "library" 최근 ES6(ES2015) 모듈 시스템인 import가 많이 사용되고 있지만, 아직까지는 import 키워드가 100% 대체되어 사용될 수 없습니다. 태그를 사용하는 브라우저 환경과, Node..
들어가기전 렌더링이란? 어떠한 웹 페이지 접속시 그 페이지를 화면에 그려주는 것. SSR(Server Side Rendering) 사용자가 요청시마다 서버측에 새로운 페이지에 대한 요청을 하고, 서버측에서 렌더링 후 사용자에게 반환하는 방식입니다 CSR(Client Side Rendering) 최초 1번 서버측에서 전체 페이지를 로딩 이 후, 사용자의 새로운 요청이 있을 때마다 자바스크립트 파일을 이용해 브라우저측에서 렌더링하는 방식입니다. CSR & SPA (Single Page Application) SPA는 CSR 방식을 이용하고 있는 대표적인 방법이다. 모바일의 비중이 커지는 시기가 오면서 모바일에 최적화된 환경이 필요해졌다. 컴퓨터와 달리 성능이 낮은 모바일에 최적화 시키기 위해 나온 것이 SP..
개요 실행컨텍스트는 코드가 실행되는 환경을 말합니다. 크게 전역 컨텍스트와 함수 컨텍스트가 있는데, 우선 코드가 실행되면 (브라우저가 스크립트를 로딩해서 실행할 때) 모든 것을 포함하고 관리하는 전역 컨텍스트가 생깁니다. 페이지가 종료 될때까지 유지됩니다. 다음 함수 컨텍스트는 함수 호출시마다 생성됩니다. 이 실행컨텍스트들은 생성될때마다 변수객체, 스코프체인, this가 생성됩니다. 컨텍스트 생성 후 함수가 실행되는데 사용되는 변수들은 변수 객체 안에서 값을 찾고 없으면 스코프 체인을 따라 올라가며 찾습니다. 함수 실행이 마무리되면 해당 컨텍스트는 사라집니다. (클로저 제외) 페이지가 종료되면 전역 컨텍스트가 사라집니다. 먼저 전역 컨텍스트 하나 생성 후, 함수 호출 시마다 컨텍스트가 생깁니다. 컨텍스트..
