6) 자바스크립트 모듈

멜론쿵야65 웹개발·2024년 3월 11일
0

1. 모듈이란?

  • 공통된 기능이나 특별한 목적에 따라 각각의 파일로 분리하는 과정
  • 효율적으로 관리, 재활용 가능

2. 모듈 파일의 조건

  • 모듈스코프
    : 모듈파일이 가지고 있는 독립적인 스코프 ( 파일안에 선언된 변수는 모듈파일 안에서만 사용)
  • html의 script 태그에서 모듈 타입 정해주기 : (type: “module”)
  • 모듈 스코프는 서버에서 보기

3. 모듈 문법

: 모듈 문법을 사용하면 모듈스코프안의 변수, 함수들을 다른 파일에서 사용할 수 있다.

  • export{ }: 베출하기
  • import: 불러오기 ( import{변수,함수} from 경로 )
  • 특징
    : 결국 모듈화된 파일들은 서로 연결되어있기 때문에 html파일에서는 시작이 되는 한 자바스크립트 파일만 선언한다.

4. 이름 바꾸기 (as)

  • 변수나 함수를 불러왔을 때 기존의 파일에 존재하던 변수와 이름이 같을 경우를 방지하여 사용
  • ex) import {변수 as 다른이름, 함수} from ‘경로’
  • export에서도 사용가능

5. import 한꺼번에 다루기 (named export)

import * as 이름 from ‘경로’

  • (wildcard Character)
    : 경로에서 export한 요소들을
    로 모두 import하고 이름으로 사용
  • 이름은 객체처럼 사용가능 (각각 요소들을 속성으로 불러온다)
  • 필요할 때 적절하게 사용하기

6. dafault export

export default

: 모듈파일 내에서 한번만 사용가능

  • import할때는 꼭 as사용해서 사용해줘야됨
  • default값은 as 뒤에 정해준 이름만으로도 중괄호 밖에 따로 빼줄 수 있음
  • 중괄호 기준으로 named랑 default 구분 가능

0개의 댓글

관련 채용 정보