전체 글
호이스팅은 var 에서만 일어난다구요?
참조 에러가 아닌 undefined? 개념을 공부할때 가장 쉽게 이해할수 있는 방법 중 한 가지는 코드를 통해 확인해보는것입니다. 먼저 아래의 코드를 통해 살펴보도록 하겠습니다. console.log(name); // undefined var name; 선언되지 않은 변수를 참조할 수 있을까요? 선언되지 않은 변수를 참조하려 한다면 이를 알려주는 가장 대표적인 에러로 참조 에러인 ReferenceError가 발생해야 합니다. 하지만 자바스크립트에서는 참조 에러 대신 undefined가 출력되는 것을 확인할 수 있습니다. 그 이유는 바로... 이런 현상이 발생하는 이유는 자바스크립트에서의 변수 선언문은 런타임이 아닌 런타임 이전 단계에서 먼저 실행되기 때문입니다. 자바스크립트의 엔진은 소스코드를 실행하기 ..
(충격) 클로저는 사실 최약체다?
클로저는 어렵지 않아요 사실 클로저는 그렇게 어려운 개념은 아닙니다. 차근차근 클로저의 정의를 따라가다 보면 쉽게 이해가 가능합니다. 먼저 MDN 에서 한 번 그 정의를 찾아볼까요? 클로저는 중첩 함수가 상위 스코프 식별자를 참조하면서 외부 함수보다 중첩 함수가 더 오래 유지되는 경우에 이 중첩 함수를 클로저라고 부릅니다. ...???? ....??? ㅠㅠㅠㅠ 왜 클로저는 어려운걸까?? 클로저를 이해하기 위해서는 사실 선행 지식이 필요합니다. 이를 제쳐두고 바로 클로저는 무엇일까? 라는 궁금증에 클로저를 보게 된다면 앞에서 이해해야할 많은 지식들을 거꾸로 돌아가면서 이해하려 들게 됩니다. 문제는 이 사전지식들이 어려운 편에 속한다는 점입니다. 사실 사전지식부터 열심히 공부하고 난 다음에 클로저를 이해하려..
아 다르고 어 다른 자바스크립트의 this 바인딩
동적으로 결정되는 this 바인딩 자바나 C++ 같은 클래스 기반 언어와 다르게 자바스크립트는 함수 호출 방식에 따라 this 바인딩이 결정됩니다. 그렇기 때문에 this 바인딩이 되는 상황을 알기 위해서는 다양한 방식의 함수 호출 방식을 먼저 알아야 합니다. 아 다르고 어 다르다! 자바스크립트는 다양한 방식으로 함수 호출이 가능합니다. 하지만 주의해야할 점은, 동일한 함수를 다른 방식으로 호출이 가능하다는 것입니다. 즉 같은 함수라도 다르게 호출된다면 하는 역할이 달라지게 됩니다. 같은 말이라도 아 다르고 어 다르게 될 수 있으니 주의하셔야 합니다. 함수 호출 방식과 this 바인딩 이제 다양한 자바스크립트의 함수 호출 방식에 대해서 알아보고 이때의 this 는 어떻게 바인딩 되는지에 대해서 알아보겠습..
ESlint 설치해서 사용해보기
ESlint 란 무엇인가요? ESlint 는 ES (ECMAScript) + Lint (에러 코드 표식) 을 조합한 단어로 코드에 특정한 스타일을 적용해서 사전에 문제가 발생하지 않도록 예방할 수 있게 도와주는 정적 분석 툴입니다. ESlint 를 사용하면 다양한 플러그인들을 사용해 규칙들을 추가하고 사용자의 설정에 맞게 커스텀 하는것이 가능합니다. 이를 미리 정해놓고 개발을 시작하면, 그룹간의 같은 환경에서 개발을 진행할 수 있다는 장점이 있습니다. 대부분의 협업에서는 먼저 ESlint 부터 설치하고 규칙들을 미리 정해놓는것부터 시작합니다. 따라서 ESlint 를 미리 사용해보는것은 추후에 진행할 프로젝트에 대비하기 좋은 경험이 될 수 있습니다. ESlint 설치해보기 ESlint 설치의 공식문서에서 ..
ESlint 적용이 안되는 경우 해결법
ESlint 적용이 안 될 경우 위와 같이 설정한 경우에도 ESlint 가 적용되지 않는 경우에 output 을 확인시 아래와 같은 에러메세지가 출력되는 분들이 있을 수 있습니다. 이 경우 node 버전이 낮아서 생기는 문제로 추가적으로 import plugin 을 설치해주셔야 정상적으로 동작합니다. npm install D eslint-plugin-import 에러 메세지가 사라지고 정상적으로 ESlint 가 동작하는 것을 확인할 수 있습니다.
[프로그래머스] K번째수
문제 설명 [i, j, k] 를 원소로 가진 2차원 배열 commands 가 주어지면 i 부터 j 번째까지 배열을 자르고 정렬한 후에 k 번째에 있는 수를 배열에 담아서 return 해주는 문제입니다. 문제 풀이 먼저 commands 에 들어있는 값들을 i, j, k 라는 변수에 담아주고 싶었습니다. 이왕이면 i, j, k 라는 변수 이름보다는 의미있는 네이밍을 통해 start, end, asnwerIdx 라는 변수에 담아주었습니다. 이때 배열 디스트럭처링을 사용했습니다. 배열 디스트럭처링을 사용하면 간결하고 보다 더 가독성이 좋아진다는 장점이 있습니다. const [start, end, answerIdx] = command; start 부터 end 까지의 배열을 복사하고 정렬해주었습니다. 이때 slic..
브라우저의 렌더링 과정
node.js 의 등장으로 JS 는 웹 브라우저를 벗어나 서버 사이드 앱 개발도 가능한 범용 개발 언어가 되었습니다. 하지만 역시 JS 가 가장 많이 사용되는 분야는 웹 브라우저 환경에서 동작하는 웹페이지나 애플레키이션의 클라이언트 사이드입니다. 웹 애플리케이션의 클라이언트 사이드 JS 는 브라우저에서 HTML/CSS 와 함께 동작합니다. 즉, 브라우저 환경을 고려한다면 더 효율적인 자바스크립트 프로그래밍이 가능합니다. 이를 위해 브라우저는 아래와 같이 HTML/CSS/JS 로 작성된 문서를 파싱하여 브라우저에 렌더링합니다. 1. 브라우저는 HTML/CSS/JS, 이미지, 폰트 파일등 렌더링에 필요한 리소스를 요청하고 서버로부터 응답받습니다. 2. 브라우저의 렌더링 엔진은 서버로부터 응답받은 HTML/C..
[자바스크립트] Map
Map 이번에는 JS 에서 지원하는 자료구조인 Map에 대해서 살펴보려고 합니다. Map의 특징과 여러가지 메서드를 살펴보면서 정리해보도록 하겠습니다. Map 객체는 키와 값이라는 쌍으로 이루어진 컬렉션입니다. Map 은 객체와 비슷하지만 아래와 같은 차이가 있습니다. 1. 키로 객체를 포함한 모든 값을 사용할 수 있다. 2. 이터러블이다. 3. map.size 로 요소 개수의 확인이 가능하다. Map 객체 생성해보기 Map객체는 Map생성자 함수로 생성합니다. 만약 인수를 전달하지 않으면 빈 Map객체가 생성됩니다. const map = new Map(); console.log(map); // Map(0) {} Map 생성자 함수는 인수로 이터러블을 받습니다. 인수로 전달되는 이터러블은 키와 값의 쌍으..