export, import // javascript 학습 문서

export와 import는 3월쯤 자바스크립트 오픈소스를 뜯어보다가 처음 접한 후 대충 알게 됐다.

 

그때 느낀 바는 특정 기능을 담당하는 함수들이 모여있는 파일이 있고 외부에서 사용될 함수들을 export한 다음 이를 다른 파일에서 import하여 사용하는 것으로 모듈을 기능별로 잘 분류해야 좋은 코딩의 형태가 되겠구나 였다.

 

export는 자바스크립트의 값, 함수, 딕셔너리(객체) 또는 자바스크립트 파일 자체를 외부로 내보내는 키워드 이고 import는 반대로 자바스크립트 파일 안으로 가져오는 키워드이다.

 

 

---

 

 

util.js파일

export function times(x) {
  return x * x;
}
export function plusTwo(number) {
  return number + 2;
}

 

index.js파일

import { times, plusTwo } from './util.js';
console.log(times(2));
console.log(plusTwo(3));

 

 

 

 

또는 

// in util.js
export default function times(x) {
  return x * x;
}
// in app.js
import k from './util.js';
console.log(k(4)); // returns 16

 

 

이런 식으로 한 파일에서 export한 것들을 다른 파일이 import하여 사용할 수 있다.

 

 

---

 

 

자바스크립트를 필요한 부분만 대충 배웠고 제대로 공부하고싶다면

https://developer.mozilla.org/ko/docs/Web/JavaScript

JavaScript | MDN

맘편하게 문서를 읽기로 하자! 

HTML

https://developer.mozilla.org/ko/docs/Learn/HTML/Introduction_to_HTML

HTML 소개 - Web 개발 학습하기 | MDN

 

CSS

https://developer.mozilla.org/en-US/docs/Learn/CSS/First_steps

CSS first steps - Learn web development | MDN