ES6 자주 틀리는 세부사항 7가지
모듈화: 기본 내보내기와 변수 선언 분리
기본 내보내기는 값만 내보낼 수 있으며 변수 선언과 직접 결합할 수 없습니다.
잘못된 예시
export default const exampleObject = { title: 'ES6' };
올바른 해결책
const exampleObject = { title: 'ES6' };
export default exampleObject;
// 또는 객체 리터럴 직접 내보내기
export default { title: 'ES6' };
모듈 가져오 ...
8월 22일 00:38에 게시됨
자바스크립트 핵심 문법, 비동기 처리 및 DOM 조작 가이드
변수 선언과 스코프
자바스크립트에서는 var, let, const를 사용하여 변수를 선언합니다. 현대적인 개발에서는 블록 스코프를 지원하는 let과 const를 주로 사용합니다.
특성
var
let
const
스코프
함수 스코프
블록 스코프
블록 스코프
호이스팅
undefined로 초기화
...
8월 20일 04:09에 게시됨
JavaScript 비동기 처리의 이해: Promise, Async/Await 그리고 Generator
JavaScript에서 비동기 처리는 효율적인 어플리케이션 개발의 핵심입니다. 과거의 콜백(Callback) 지옥에서 벗어나 코드의 가독성과 유지보수성을 높이기 위해 도입된 Promise, Async/Await, 그리고 Generator의 핵심 개념과 활용법을 정리합니다.
1. Promise: 비동기 상태의 객체화
Promise는 비동기 작업의 최종 완료 또는 실패를 나타내는 객체입니다. 단순히 비동기 ...
8월 12일 06:26에 게시됨
자바스크립트 모듈 시스템: CommonJS, AMD, CMD, ES6
CommonJS
CommonJS는 서버 측에서 동기 방식으로 모듈을 로드하는 방식입니다. 로컬 디스크에 저장된 모듈 파일들은 매우 빠르게 접근할 수 있기 때문에 성능 문제는 없습니다. 하지만 브라우저 환경에서는 네트워크 지연을 고려해 비동기 방식이 더 적합합니다. 모듈의 인터페이스를 정의하기 위해 module.exports를 사용하고, 다른 모듈을 불러오기 위해서는 require를 ...
8월 3일 03:17에 게시됨
ES6 프로미스 기초 및 활용
프로미스는 비동기 작업의 결과를 관리하는 객체로, 콜백 함수 대신 사용하여 코드 가독성을 높입니다.
기존의 콜백 방식 예시
{
const fetchData = callback => {
console.log('작업 시작');
setTimeout(() => {
callback && callback();
}, 1000);
}
fetchData(() => {
console.log('타임아웃 완료');
});
}
ES6 프로 ...
7월 25일 23:57에 게시됨
ES6의 주요 기능과 활용
Vue나 React를 처음 사용할 때, 우리는 종종 ES6를 기술 스택에 추가하게 됩니다. 하지만 ES6에는 수많은 기능이 있는데, 모든 것을 다 마스터해야 할까요? 80/20 원칙에 따라, 일반적으로 사용되고 유용한 기능에 집중하면 빠르게 실력을 향상시킬 수 있습니다.
이제 ES6의 유용한 새로운 기능들에 대해 알아보겠습니다.
변수 선언: const와 let
ES6 이전에는 var 키워 ...
7월 22일 17:41에 게시됨
JavaScript 함수 상속과 클래스 상속의 차이점
1. 문법적 차이점
함수 상속 (프로토타입 체인 + 생성자 조합
함수 상속은 함수와 프로토타입을 활용하여 객체지향 상속을 구현하는 전통적인 방식입니다. 자바스크립트의 프로토타입 체인 메커니즘을 직접 활용하여 부모 객체의 메서드를 자식 객체가 상속받을 수 있도록 합니다.
구현 원리: 생성자 함수를 통해 객체를 생성하고, 프로토타입을 통해 메서드를 공유합니 ...
7월 21일 20:21에 게시됨
JavaScript Reflect API의 주요 메서드와 활용
JavaScript의 Reflect는 intercept 가능한 JavaScript 작업에 대한 메서드를 제공하는 내장 객체입니다. Math 객체와 유사하게 Reflect는 함수 객체가 아니며 생성자로 사용할 수 없습니다. 즉, new 연산자를 통해 인스턴스를 생성할 수 없으며 모든 메서드는 정적(static)으로 호출됩니다.
Reflect.apply()
대상 함수를 지정된 인수와 함께 호출합니다. 이는 Function.pr ...
7월 19일 21:04에 게시됨
JavaScript 핵심 문법과 내장 객체 완벽 가이드
JavaScript 개요
JavaScript는 웹 페이지를 동적으로 제어하는 스크립트 언어로 시작해, 현재는 서버(Node.js), 모바일, 데스크톱 등 다양한 환경에서 활용되는 범용 프로그래밍 언어로 발전했다. 프로토타입 기반의 객체 지향 패러다임을 따르며, 명령형·함수형·선언형 프로그래밍 스타일을 모두 지원한다.
1995년 Netscape의 Brendan Eich에 의해 개발되었으며, 당시 Jav ...
7월 13일 01:29에 게시됨
ES6 new.target를 활용한 생성자 호출 검증
ES5 환경에서 생성자 함수를 일반 함수처럼 호출하면 this가 전역 객체(window)를 가리켜 의도치 않은 동작이 발생했습니다. 이를 방지하기 위해 instanceof 연산자로 생성자 호출 여부를 판별하는 패턴이 널리 사용되었습니다.
ES5의 생성자 호출 검증 방식
function Member( name ){
if ( this instanceof Member ) {
this.nickname = name;
} else {
...
7월 4일 21:23에 게시됨