모듈시스템
분리된 파일을 모듈이라고 부르며, 이것을 언제든지 불러올 수 있는 것을 모듈 시스템이라고 한다
출처: Check-in bini World
😶🌫️ 모듈 분리 하기
- 모듈 분리 없이 코드 작성 후
- 모듈을 분리하여 코드를 작성해보자
- 다른 방식으로 export해보자
1. 모듈 분리 하지않고 코드 작성
[003 > main.js]에 test 객체를 만들고
출력해보면
콘솔에 적은 apple과 banana가 정상출력된다
2. 모듈을 분리해보자
모듈을 분리한다는 것은 분리하고자 하는 코드의 부분을 별도의 js파일로 작성하는 것이다
module_fruits.js 파일을 만들어 위의 내용을 그대로 옮겨준다.
2-2. 여기서 잠깐!! 그럼 분리한 모듈은 어떻게 사용할까?
바로 '내보내기' 와 '불러오기' 를 사용해야한다 모듈을 불러오려면 require를 사용하여 파일의 경로를 불러오고, 모듈에서는 export를 사용하여 파일을 내보내기하여준다.
require가 아닌 import를 사용하기도 한다
바로 적용시켜 모듈을 사용해보자!
자 require를 했으니 이제 끝!!
이라고 생각한 사람 없죠?!
이렇게 하고 콘솔에 출력해보면 빈 객체만 출력된다. 이유는 내보내기를 안했기 때문
[003 > module_fruits.js]
이렇게 module.export 를 사용하여 test 객체를 내보내겠다고 써주어야한다
그럼 정상적으로 apple, banana가 출력~!!
3.다른 방법으로 내보내는 방법은?
위에 객체명을 지우고 바로 선언하여 사용하는 ㄳ도 가능하다!
또한 객체, 함수, 문자열 등 내보내기가 모두 가능!
4. 모듈을 불러오지 못하는 상황
const fruits = require('./module_fruits.js');
console.log(fruits);L15와 같이 내보내고, 위와같이 출력하게 되면
str1만 출력되는걸 볼 수 있다
그럼 어떻게 해야 여러개를 한 번에 내보낼 수 있을까?
이렇게 객체로 묶어서 exports 해주면 된다!
이때 key의 이름은 바뀌어도 된다. 하지만 알아보기 쉽게 같은 이름으로 해주는것이 좋겠다고 생각
main.js에서 fruits를 출력하면 아래와같이 모두 정상적으로 출력된다
만약 키와 밸류의 이름이 같은 경우 하나만 써줘도 쌍을 인식하여 출력한다.
이렇게 연결해서 apple함수만 출력할수도 있다
근데 여기서 의문점이 console.log안에 쓴 함수와 log를 안쓰고 호출한 함수가 다르게 출력되는데 이 이유를 모르겠다
위처럼 frutis모듈을 객체로 한 번에 내보낼때 객체로 구조분해할당하여 받을수도 있다
더하기, 빼기 연산 모듈을 불러와 사용하기
[1] 객체 밖에서 함수 만들기
[2] 객체 안에서 함수 설정
[3] 바로 함수 정의
Prototype 사용하여 객체내 고용 메서드 정의하고 별도 모듈로 분리하기
객체들의 공용 메서드를 만드는 방법은 객체 생성자 함수안에서 만들어도 되고, 외부에서 만들어도되는데 외부로 빼서 만드는 방법이 protopype 방식이다.
속도 향상, 메모리 효율성, 메서드 변경이 용이하다는 장점이 있다.
모든 '차'에는 엔진이 있으니 그 엔진에 대한 틀을 만들어두고 그 틀에 특정 차의 이름을 입력하면 해당 차의 엔진이 출력 되도록 효율적이게 코드를 작성하는 방법이였던 것 같다.
이걸 들으니 작년에 자바에서 한 게 기억이 난ㄷ ㅏ..... 그때도 차로 연습했었는데!
자세한 예시를 위해 코드로 연습해보자 !
prototype 사용하여 객체내 공용 메서드 정의하기
[1] name을 받는 Car함수를 만들어주었다. 이 함수의 carName은 파라미터로 받은 name이 할당된다.
[2] Car 함수를 prototype을 사용하여 honk라는 이름의 공용 메서드를 만들었다.
이 메서드는 honking이라는 경적소리를 파라미터로 받는다.
[3] 승용차와 엠뷸런스 두 개의 새로운 차(객체)를 만들어주고, 이에 맞는 honk 경적소리를 적어준다.
[4] 만약 공용 메서드를 수정하고싶다면 오버라이딩을 이용하자
위의 두개는 오버라이드를 하기 전이며, 다음 두개는 오버라이드를 한 후의 결과이다.
아주 잘 바뀐 것을 확인할 수 있다.
공용메서드를 별도의 모듈로 분리하기
[003 > module_test.js]에 MyCar 객체를 생성하는 모듈을 만들어준다.
그리고 export를 해주면 간단하게 끝!
[003 > main3.js]에는 생성자 함수를 모듈로 분리해놨으므로
[2] 모듈을 불러주고
[3] 객체를 새로 생성해준다
[4] 모듈을 외부에 분리했는데도 main에서 오버라이드가 되나요? 네 됩니당 짱신기
오버라이드로 멘트까지 바뀐걸 확인해주면 모듈로 분리하기 완.
결과
