JavaScript (6) 썸네일형 리스트형 JavaScript CommonJS, ES6 모듈 시스템 * 아래의 글은 JavaScript 프롤로그 및 목차를 먼저 읽으신 후 읽으시기를 권장합니다. 본 글에서 다룰 내용 모듈 CommonJS ES6 모듈? 모듈이란 여러 기능들에 관한 코드가 모여있는 하나의 파일로 아래와 같은 것들을 위해 사용합니다. 유지보수성 : 기능들이 모듈화가 잘 되어있다면, 의존성을 그만큼 줄일 수 있기 때문에 어떤 기능을 개선한다거나 수정할 때 훨씬 편하게 할 수 있습니다. 네임스페이스화 : 자바스크립트에서 전역변수는 전역공간을 가지기 때문에 코드의 양이 많아질수록 겹치는 네임스페이스가 많아질 수 있습니다. 그러나 모듈로 분리하면 모듈만의 네임스페이스를 갖기 때문에 그 문제가 해결됩니다. 재사용성 : 똑같은 코드를 반복하지 않고 모듈로 분리시켜서 필요할 때마다 사용할 수 있습니다... JavaScript 자바스크립트 엔진이 코드를 실행하는 과정 * 아래의 글은 JavaScript 프롤로그 및 목차를 먼저 읽으신 후 읽으시기를 권장합니다. 본 글에서 다룰 내용 자바스크립트 엔진이 코드를 실행하는 과정 자바스크립트를 실행하기 위해선 자바스크립트 엔진이 필요하고, 웹 브라우저는 자바스크립트 엔진을 내장하고 있습니다. 브라우저마다 엔진의 종류가 다르지만 코드를 실행하는 방식은 비슷하기 때문에 보통 어떻게 실행하는지 알아두는 것이 좋습니다. 대표 엔진들 크롬 - V8 (오픈 소스, 구글이 개발) 사파리 - 웹킷 (오픈 소스, 애플이 개발) 스파이더몽키 - 파이어폭스 (최초의 자바스크립트 엔진) 차크라 - 마이크로스프트 엣지 자바스크립트 엔진이 코드를 실행하는 과정 소스코드를 만나면 파싱하여 AST(Abstract Syntax Tree)로 변환한다. 인터.. JavaScript 함수 바인딩 * 아래의 글은 JavaScript 프롤로그 및 목차를 먼저 읽으신 후 읽으시기를 권장합니다. 본 글에서 다룰 내용 함수 바인딩이 필요한 이유 및 예시 함수를 바인딩 할 수 있는 방법 요약 사라진 'this' 객체 메서드가 객체 내부가 아닌 다른 곳에 전달되어 호출되면 this가 사라집니다. setTimeout을 사용한 아래 예시에서 this가 어떻게 사라지는지 살펴봅시다. let user = { firstName: "John", sayHi() { console.log(`Hello, ${this.firstName}!`); } }; setTimeout(user.sayHi, 1000); // Hello, undefined! this.firstName이 "John"이 되어야 하는데, 콘솔창에는 undefine.. JavaScript 클린 코드, 닌자 코드 * 아래의 글은 JavaScript 프롤로그 및 목차를 먼저 읽으신 후 읽으시기를 권장합니다. 본 글에서 다룰 내용 권장하지 않는 코드 작성 방법(닌자 코드) 코드 품질을 높이는 클린 코드 작성 방법(클린 코드) 아래의 글에서는 권하지 않는 코드 작성 방법들을 알려드리겠습니다. 코드 짧게 쓰기 조건부 연산자 '?'를 사용한 예시를 살펴봅시다 // 출처: https://ko.javascript.info/ninja-code i = i ? i < 0 ? Math.max(0, len + i) : i : 0; 이렇게 작성한다면 이 코드를 접한 다른 개발자는 i가 나타내는 게 뭔지 파악하는데 꽤 많은 시간을 소모하고, 결국엔 답을 찾기 못해 당신에게 찾아올 것입니다. 그렇다면 싸움의 지름길이 되겠죠😀 글자 하나만 .. JavaScript 기초 문법 요약 * 아래의 글은 JavaScript 프롤로그 및 목차를 먼저 읽으신 후 읽으시기를 권장합니다. 본 글에서 다룰 내용 var vs let vs const function 변수 변수는 아래와 같은 키워드를 이용해 선언할 수 있습니다. let const var 많은 분들이 let, const, var의 차이점을 잘 모르시는 것 같습니다. 저 역시 그랬고.. 그래서 이 세 키워드의 차이점을 알아보겠습니다. 스코프란? - 자바스크립트 엔진이 참조의 대상이 되는 식별자를 검색할 때 사용하는 규칙의 집합이다. 즉, 어떤 변수를 사용하거나 함수를 호출하려고 할 때 해당하는 식별자로 사용하는데, 그 식별자를 검색하는 매커니즘이라고 이해하면 된다. 스코프 규칙 var은 함수 스코프를 갖는다. let과 const는 블록 스.. JavaScript 프롤로그 및 목차 안녕하세요😀 황대성입니다. 저는 프론트엔드 개발자이고, 사용하는 주 언어는 JavaScript입니다. 그리고 React, ReactNative와 같은 프레임워크를 사용하여 프론트엔드 개발을 하고있습니다. 개발을 하던 중 JavaScript에 대한 지식이 부족함을 느꼈고, 그래서 제가 평소에 긴가민가 했던 지식들부터 새롭게 알게 된 지식들을 모두 기록하려 합니다. 매일매일 틈틈히 JavaScript에 관한 지식들을 작성하려고 하니, 많은 관심 가지고 봐주셨으면 좋겠습니다. 이 글들이 저 뿐만 아니라 JavaScript를 공부하시는 많은 분들에게 도움이 되었으면 좋겠습니다. 긴 글 읽어주셔서 감사합니다😀 일단 세부적인 사항을 공부하기 전에 JavaScript가 무엇인지 간단히 알아보겠습니다. 아래의 내용을 .. 이전 1 다음
