1. JavaScript 모듈화란?
모듈화는 코드의 특정 기능이나 부분을 분리하여 재사용 가능한 독립적 모듈로 작성하는 방법입니다. 모듈화를 통해 코드의 유지보수가 용이해지고, 여러 프로젝트 간에 코드 재사용성이 높아집니다.
2. ES6 모듈 시스템
ES6부터 JavaScript는 기본 모듈 시스템을 제공합니다. 이를 통해 여러 파일에 걸쳐 코드를 나누고, 필요에 따라 모듈을 가져오거나 내보낼 수 있습니다.
기본적인 export와 import
1) 모듈 내보내기 (export)
export 키워드를 사용하여 변수, 함수, 클래스 등을 모듈로 내보낼 수 있습니다.
math.js 파일:
export const add = (a, b) => a + b;
export const subtract = (a, b) => a - b;
export default function multiply(a, b) {
return a * b;
}- 기본 내보내기는 export default로 정의됩니다. 모듈당 하나의 기본 내보내기만 가능합니다.
- 이름 내보내기는 export를 사용하여 여러 개를 내보낼 수 있습니다.
2) 모듈 가져오기 (import)
import 키워드를 사용하여 다른 파일의 모듈을 가져옵니다.
main.js 파일:
import multiply, { add, subtract } from './math.js';
console.log(add(2, 3)); // 5
console.log(subtract(5, 2)); // 3
console.log(multiply(2, 3)); // 6- 기본 내보내기는 별도의 이름으로 가져올 수 있으며, 이름 내보내기는 중괄호를 사용합니다.
3. ES6+ 주요 문법
1) 템플릿 리터럴
템플릿 리터럴은 백틱(`)을 사용하여 문자열을 더 직관적으로 작성할 수 있습니다. 변수나 표현식을 ${}로 삽입할 수 있습니다.
const name = "John";
const age = 30;
console.log(`안녕하세요, 제 이름은 ${name}이고, 나이는 ${age}입니다.`);
// 출력: 안녕하세요, 제 이름은 John이고, 나이는 30입니다.2) 화살표 함수
화살표 함수는 간결한 함수 표현식으로, function 키워드를 사용하지 않고 함수를 정의할 수 있습니다.
const greet = (name) => `Hello, ${name}`;
console.log(greet("Alice")); // "Hello, Alice"3) 구조 분해 할당
구조 분해 할당은 객체나 배열의 속성을 쉽게 추출하여 변수에 할당할 수 있는 문법입니다.
// 객체 구조 분해
const user = { name: "Alice", age: 25 };
const { name, age } = user;
console.log(name); // "Alice"
console.log(age); // 25
// 배열 구조 분해
const numbers = [1, 2, 3];
const [first, second] = numbers;
console.log(first); // 1
console.log(second); // 24) 스프레드 연산자와 나머지 매개변수
스프레드 연산자(...)는 배열이나 객체를 펼치거나, 함수의 나머지 매개변수로 사용할 수 있습니다.
// 배열 병합
const arr1 = [1, 2];
const arr2 = [3, 4];
const merged = [...arr1, ...arr2];
console.log(merged); // [1, 2, 3, 4]
// 객체 복사
const user1 = { name: "John" };
const user2 = { ...user1, age: 30 };
console.log(user2); // { name: "John", age: 30 }
// 나머지 매개변수
function sum(...args) {
return args.reduce((total, num) => total + num, 0);
}
console.log(sum(1, 2, 3, 4)); // 104. 모듈 번들링과 개발 환경 설정
브라우저는 모듈을 직접 사용하기 위해 <script type="module">을 지원합니다. 그러나 실제 프로젝트에서는 Webpack, Rollup 등의 모듈 번들러를 사용해 여러 모듈을 하나의 파일로 병합하는 방식이 일반적입니다.
브라우저 모듈 사용 예시
<script type="module" src="main.js"></script>이렇게 모듈을 불러올 수 있으며, 모듈화된 코드는 ES6 이상을 지원하는 브라우저에서 실행됩니다.
5. 실전 예제: 모듈화된 코드로 간단한 애플리케이션 작성
utils.js 파일:
export function capitalize(str) {
return str.charAt(0).toUpperCase() + str.slice(1);
}
export function reverseString(str) {
return str.split("").reverse().join("");
}app.js 파일:
import { capitalize, reverseString } from './utils.js';
const input = "hello";
console.log(capitalize(input)); // "Hello"
console.log(reverseString(input)); // "olleh"index.html 파일:
<!DOCTYPE html>
<html lang="ko">
<head>
<title>JavaScript 모듈 예제</title>
</head>
<body>
<script type="module" src="app.js"></script>
</body>
</html>코드 설명
- utils.js 파일에 문자열 조작 함수를 작성하여 export한 후, app.js 파일에서 import하여 사용했습니다.
- index.html에서는 <script type="module">을 사용하여 app.js를 불러옵니다.
요약
이번 강의에서는 JavaScript 모듈화와 ES6+ 주요 문법을 배웠습니다. 모듈 시스템을 통해 코드의 재사용성과 유지보수를 높이고, ES6의 편리한 문법을 사용하여 코드를 더욱 간결하고 읽기 쉽게 작성할 수 있습니다. 다음 강의에서는 JavaScript의 오류 처리와 디버깅 기법을 학습하여, 코드를 더 견고하게 유지하는 방법을 알아보겠습니다.
'Study > JS' 카테고리의 다른 글
| JavaScript 기초 강의 9편: 브라우저 API 활용하기 (1) | 2024.12.09 |
|---|---|
| JavaScript 기초 강의 8편: 오류 처리와 디버깅 기법 (0) | 2024.12.08 |
| JavaScript 기초 강의 6편: DOM 심화 조작과 동적 이벤트 핸들링 (0) | 2024.12.06 |
| JavaScript 기초 강의 5편: 비동기 프로그래밍과 Promise, async/await (0) | 2024.12.05 |
| JavaScript 기초 강의 4편: 함수의 고급 사용법 (클로저, 콜백 함수, 화살표 함수) (0) | 2024.12.04 |
