[JavaScript] 모듈

Front/JavaScript

[JavaScript] 모듈

ddo04 2024. 7. 7. 01:05

728x90

📲 모듈

코드를 모아놓은 하나의 파일을 의미
재사용성이나 유지보수성 등을 위해서 사용
큰 목적 하나를 달성하기 위해서 관련된 조각 코드들이나 관련된 함수들을 모아서 하나의 모듈로 작성
하나의 자바스크립트 파일
모듈을 사용하기 위해 imfort 명령어를 사용하여 외부에 있는 모듈을 가지고 올 수 있음
export 명령어를 사용하여 현재 모듈을 내보낼 수도 있음

📲 모듈 생성 및 내보내기

작성한 함수를 밖으로 내보내기 위헤서는 가장 앞에 export라는 키워드를 붙이면 가능
내보낼 변수나 함수 키워드 앞에 export만 붙이면 모듈로서 내 보낼 수 있음

export function greeting(){
    console.log('Hello');
}

📲 type = "module"

내보낸 greeting 함수를 자바스크리트 파일에서 가져와 사용하려면
html 문서에서 src 태그 부분에 type이라는 속성을 추가하고 값을 모듈로 지정

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button>클릭</button>
    <button class="remove">이벤트를 삭제하세요</button>

    <script type="module" src="test.js"></script>

    <h1>JavaScript 연습</h1>
    <p>많이 힘들고 어렵더라도 열심히 하면 희망이 온다</p>
</body>
</html>

📲 외부 모듈 가져오기 (import)

{} 중괄호를 열고 가져올 모듈의 이름을 작성
모듈이 속해 있는지 해당 파일의 경로를 지정

import { greeting } from "./hello.js";

greeting();

📲 내보내기 방식 차이

기본 내보내기 방식과 이름이 정의된 내보내기 방식이 있음
이름이 정의된 내보내기 방식은 함수나 변수, 클래스 등의 선언 키워드 앞에다가 export 명령어를 붙여주는 방법을 Named Exports라고 함
이름이 정의된 내보내기 방식을 사용하면 하나의 모듈에서 여러 개의 함수나 객체, 변수 등을 내보낼 수 있고 가져올 때는 중괄호 안에사용하려는 모듈의 정의된 이름을 나열하기만 하면 됨
모듈을 가져올 때 다른이름을 사용하고 싶다면 as 키워드를 사용하여 별칭 지정 가능
기본 내보내기 방식이라는 모듈에서 하나의 함수나 객체, 변수들을 기본으로 내보내고자 할 때 사용하는 방법
export 뒤에 default 키워드 추가
기본 내보내기 방식을 사용하면 이름이 정의된 내보내기 방식과 다르게 가져와서 사용할 때 중괄호를 생략할 수 있음
모듈이 정의된 이름이 아니라 사용자가 사용하려는 이름으로 사용할 수 있음

export function greeting(){
    console.log('Hello');
}

export dafault function greeting(){
    console.log('Hello');
}

📲 선언부와 export 분리

내보내기 작업을 할 때 함수나 객체, 클래스 등을 선언하는 부분과 별개로 모두를 선언하는 부분과 내보내기를 정의하는 부분을 분리하여 표현할 수 있음
이름이 정의된 내보내기 방식을 사용할 때는 default 키워드를 지우고 중괄호 적용

function greeting(){
    console.log('Hello');
}

export default greeting;

export function greeting(){
    console.log('Hello');
}

export{ greeting };

'Front > JavaScript' 카테고리의 다른 글

[JavaScript] 자료형 (0)	2024.08.04
[JavaScript] 객체 축약 문법 (0)	2024.07.23
[JavaScript] 이벤트 (0)	2024.07.07
[JavaScript] DOM (0)	2024.07.06
[JavaScript] 구조분해할당 (0)	2024.07.06

현재글[JavaScript] 모듈

DDOstory

https://github.com/dohee12

250x250

컴포넌트, javascript, DBMS, 인스턴스, 프론트엔드, 배열, state, HTML, 자바스크립트, js, 객체, DB, 웹 개발, 리액트, css, React Hooks, React, 데이터베이스, 속성, Java,

Today :
Yesterday :

일	월	화	수	목	금	토
					1	2
3	4	5	6	7	8	9
10	11	12	13	14	15	16
17	18	19	20	21	22	23
24	25	26	27	28	29	30
31

DDOstory

[JavaScript] 모듈

📲 모듈

📲 모듈 생성 및 내보내기

📲 type = "module"

📲 외부 모듈 가져오기 (import)

📲 내보내기 방식 차이

📲 선언부와 export 분리

'Front > JavaScript' 카테고리의 다른 글

'Front/JavaScript'의 다른글

티스토리툴바

[JavaScript] 모듈

📲 모듈

📲 모듈 생성 및 내보내기

📲 type = "module"

📲 외부 모듈 가져오기 (import)

📲 내보내기 방식 차이

📲 선언부와 export 분리

'Front > JavaScript' 카테고리의 다른 글

'Front/JavaScript'의 다른글

관련글

티스토리툴바