[Vue] 모듈화 / Import & Export

 

1. 모듈? 모듈화?

 

모듈 

• 보다 작고 이해할 수 있는 단위로 나뉜 것
• 소프트웨어 설계에서 기능 단위로 분해하여 재사용 및 공유 가능한 수준으로 만든 단위
• 각 모듈은 논리적 혹은 기능적으로 분리되어 독립적인 일을 수행

 

모듈화

• 프로그램 제작 시 생산성과 최적화, 관리에 용이하도록 모듈 (기능) 단위로 분할하는 것
• 소프트웨어 성능을 향상시키거나 시스템의 디버깅, 테스팅 등의 과정을 용이하도록 하는 설계 기법
• 거대한 것을 작은 조각들로 나누어 다루기 쉽도록 하는 과정

 

 

등등 설명하는 말은 많지만,,,

 

프로그래밍 언어에서 모듈화는 쉽게 말해 A를 수행하는 기능과 B를 수행하는 기능을 분리해 두는 것이다.

 

 

 

 

2. 모듈화를 하는 이유  ★

 

기능의 분리가 가능

-> 전체적인 시스템을 이해함에 있어 용이성이 증가하고 복잡성은 감소한다.

-> 모듈의 재사용 가능으로 인해 개발과 유지보수 용이

-> 오류 발생 시 발생 지점을 찾기 용이하며 분리되어 있기 때문에 오류의 범위를 최소화할 수 있다

 

-> 프로그램의 효율적인 관리 및 성능 향상

-> 소프트웨어 테스트, 수정 시 용이성 제공

 

실제로 복잡한 프로그램일수록 유지보수와 관리, 재활용성을 높이기 위해 코드를 모듈화 하는 것이 중요하다.

 

 

 

 

 

 

3. Import & Export

 

Import와 Export는 자바스크립트의 코드를 모듈화 할 수 있는 중요한 문법이다.

 

[ 기본 문법 ]

 

1-1)  export default

 

export default [{

}];

 

• js 파일에서 export를 해야 다른 js 파일에서 import해서 가져올 수 있다.
• export default는 파일 가장 마지막에 딱 한번 사용 가능하다.

 

 

1-2) import

 

import 임의작명 from '파일 경로';

 

• export 된 파일이 있는 경로를 적어준다.
• 뭐라고 불러와서 사용할지는 편한 대로 작명이 가능하다.

 

 

 

 

2-1) export { }

 

export { 변수, 함수 }

 

여러개의 변수나 함수를 내보내고 싶은 경우에는 이런 식으로 중괄호 안에 export 할 요소를 작성해주면 된다.

 

 

2-2) import

 

import { 불러올 변수 또는 함수 이름 } from '파일 경로';

 

이 경우, import 할 때 임의로 작명이 불가능하며 불러올 변수 혹은 함수의 이름을 동일하게 적어야한다.

 

 

 

 

 

 

3) 동시에 사용 가능

 

위 두 경우를 동시에 사용하는 것도 가능하다.

 

 

let a = 1;
let b = 2;
let c = 3;

export {a, b};
export default c;

 

 

<script type="module">
        import c, {a, b} from './main.js'

        console.log(a,b,c) // 1 2 3
</script>

 

import 할 때에는 export default 한 것을 왼쪽에 적고, 그다음에export { 변수명 } 을 작성해야 한다.

 

 

 

 

 

 

4. 예제

 

1. 임의의 데이터 파일을 생성

 

App.vue 파일에 엄청난 양의 데이터를 넣게 되면 코드의 가독성도 떨어질뿐더러 오류 발생 시 찾기도 힘들고.. 지끈지끈할 것이다.

그렇기 때문에 우린 데이터를 따로 저장할 파일을 하나 생성하여 거기에 수납해 둘 것이다.

 

data.js 파일 생성

이렇게 파일을 생성하고,

 

 

이런 여행지에 관한 정보가 여러 개 있는 데이터를 넣어두었다.

 

 

 

 

2. export 하기

 

위 데이터들을 다른 파일에서 사용하기 위해서는 export를 해야 한다.

 

전체 코드를 export로 감싸 내보내준다.

 

 

 

 

 

 

 

3. import 하기

 

난 위 데이터들을 App.vue에서 작업하고 싶기 때문에, 우선 작업하고자 하는 파일로 이동한다.

 

script 태그 내부에

 

 

 

 

위와 같이 import 한 뒤 파일이 존재하는 주소를 적어주면 된다.

export default로 내보냈기 때문에 불러올 때 원하는 대로 작명이 가능하다. ( data로 지었

다. )

 

 

 

 

 

4. data 추가

 

 

 

data를 불러왔으니 사용하기 위해서는 해당 정보를 script 태그 안 데이터 저장소에 저장해 준다.

이렇게 되면 App.vue에서도 그 많던 데이터 정보들을 가져와서 사용할 수 있는 상태가 된 것이다.

 

 

 

 

 

 

5. 데이터바인딩

 

data.js에 들어있는 데이터를 보면 

[ { }, { }, { }, { }, { }, { } ]

이렇게 배열 형식으로 저장되어 있다.

 

{{ }} 으로 데이터 바인딩을 하면 된다.

 

 

 

  <div v-for="( i, index ) in datas" :key="index"> <!--메인화면내용-->
    <img :src="i.image">
    <h4>{{ i.title }}</h4>
    <p>주요 관광지 : {{ i.content }}</p>
    <p>가격 : {{ i.price }}원</p>
  </div>

 

 

이런 식으로 반복문을 돌려서 6개의 여행지 정보가 차례대로 나올 수 있도록 설정했다.

 

 

 

---

 

결과 화면