import로 가져오기
Coddy JavaScript 여정의 객체 지향 프로그래밍 섹션에 포함된 레슨 — 56개 중 9번째.
모듈에서 기능을 내보낸 후에는 다른 파일에서 사용하기 위해 이를 가져와야 합니다. import 문을 사용하면 다른 모듈에서 내보낸 값을 가져올 수 있습니다.
이름이 지정된 내보내기(named export)를 가져옵니다:
// 모듈에서 특정 함수를 가져오기
import { greet } from './greeting.js';
// 이제 greet 함수를 사용할 수 있습니다
greet('John'); // 출력: Hello, John!여러 개의 명명된 내보내기(named exports)를 한 번에 가져올 수 있습니다:
// 여러 개의 내보내기 가져오기
import { greet, farewell } from './greeting.js';
greet('John'); // 출력: Hello, John!
farewell('John'); // 출력: Goodbye, John!기본 내보내기(default export)를 가져옵니다:
// 기본 내보내기 가져오기 (중괄호가 필요하지 않음)
// 다른 파일에 export default functionName이 있을 때 이것을 사용하세요
import Person from './person.js';
// 새로운 Person 생성
const john = new Person('John');
챌린지
쉬움회원가입 양식을 만들고 있습니다. 유용한 이메일 유효성 검사 함수가 포함된 validation-utils.js 파일이 있습니다.
작업 내용:
main.js에서validateEmail함수를 가져옵니다(Import) (이것은 default export가 아닌 named export입니다)- 함수를 호출(Call)하고 user@example.com 이메일 주소를 전달합니다
console.log를 사용하여 결과를 출력(Print)합니다
치트 시트
다른 모듈에서 내보낸 값을 가져오려면 import 문을 사용하세요.
명명된 내보내기(named export) 가져오기:
import { greet } from './greeting.js';
greet('John'); // 출력: Hello, John!여러 개의 명명된 내보내기 가져오기:
import { greet, farewell } from './greeting.js';
greet('John'); // 출력: Hello, John!
farewell('John'); // 출력: Goodbye, John!기본 내보내기(default export) 가져오기 (중괄호가 필요하지 않음):
import Person from './person.js';
const john = new Person('John');직접 해보기
// TODO: 여기에 validateEmail 함수를 가져오세요 (이것은 명명된 내보내기입니다)
// TODO: 함수를 호출하고 user@example.com 이메일 주소를 전달한 다음 console.log를 사용하여 결과를 출력하세요
실력 점검이 레슨에는 짧은 퀴즈가 포함되어 있습니다. 레슨을 시작해 문제를 풀고 진행 상황을 기록하세요.
