on
주기적 종속성 - 최신 JavaScript의 편리한 기능
주기적 종속성 - 최신 JavaScript의 편리한 기능
반응형
상호 작용하는 구성 요소
컨텐츠가 상호 종속적인 여러 탭이 있는 특이한 웹 애플리케이션을 상상해 보십시오. 사용자가 탭 중 하나를 누르면 다른 탭의 내용도 변경됩니다.
구성 요소 간의 상호 작용을 활성화하는 몇 가지 방법입니다. 예를 들어 자식 이벤트를 릴레이하는 추가 공통 상위 항목을 구성 요소 트리에 삽입할 수 있습니다. 그러나 구성 요소 간의 상호 작용을 활성화하는 가장 쉬운 방법은 공유 이벤트 이미터를 사용하는 것입니다.
탭과 같은 두 구성 요소가 서로 매개 변수를 설정할 수 있는 코드를 상상해 보겠습니다. 샘플 코드를 더 짧게 만들고 작업을 더 어렵게 하려면 응용 프로그램을 시작할 때 구성 요소가 로컬 저장소에서 사용자의 기본 설정을 독립적으로 읽을 수 있기 때문에 구성 요소 간에 즉시 호출해야 한다고 가정합니다.
각 탭은 여러 종속성을 집계하는 모듈에 의해 제어됩니다. 샘플 코드 단순화를 위해, 저는 작고 요점 있는 모듈로 복잡한 모듈을 표현합니다.
완전히 독립적인 모듈
루트 모듈 main.js는 다음과 같은 두 개의 상위 모듈을 로드합니다.
// main.js import './a.js'; import './b.js';
main.js에 지정된 모듈 실행 순서는 상호 작용하는 두 모듈 중 어떤 모듈이 로드될 때까지 기다려야 하는지를 결정합니다. 선두의 에이지는 b.js를 기다려야 한다.
실행되면 a.js는 SET_A 이벤트를 수신 대기하기 시작하고 모듈 b.js에 비동기 메시지를 예약합니다. b.js가 아직 실행되지 않았기 때문에 이벤트를 즉시 내보낼 수 없습니다.
// a.js import {on,emit} from './eventEmitter.js'; import {SET_A,SET_B} from './events.js'; function setA(val) { console.log(">setA", val); }; on(SET_A,setA); setTimeout(()=>emit(SET_B,'a'));
b.js는 SET_B 이벤트를 수신 대기하기 시작하고 즉시 a.js에 값을 보냅니다.
// b.js import { on, emit } from './eventEmitter.js'; import { SET_A, SET_B } from './events.js'; function setB(val) { console.log(">setB", val); }; on(SET_B, setB); emit(SET_A, 'b');
샘플 페이지 https://cyclicdependencies.onrender.com/js/1/index.html의 콘솔에서 main.js가 생성한 출력을 볼 수 있습니다.
>setA b >setB a
상호 종속 모듈이 단단히 결합됨
순환 종속성의 이론적 단점에도 불구하고 코드를 엄청나게 단순화할 수 있다. 따라서 a.js와 b.js 모듈은 보조 이벤트 수신기 없이 그리고 setTimeout으로 호출을 지연시키지 않고 바로 상호 작용할 수 있다. 그들이 처형되는 순서는 중요하지 않다.
a.js는 이벤트를 하나 덜 수신해야 하므로 샘플 코드에서는 이벤트 수신기를 전혀 사용하지 않는다.
// a.js import { setB } from './b.js'; export function setA(val) { console.log(">setA", val); }; setB('a');
마찬가지로, b.js는 한 사건을 덜 듣는다.
// b.js import {setA} from './a.js'; export function setB(val) { console.log(">setB", val); }; setA('b');
샘플 페이지 https://cyclicdependencies.onrender.com/js/2/index.html에서 출력을 확인할 수 있습니다. 코드는 더 단순하지만 출력은 위와 같다:
>setA b >setB a
순환 종속성이란 무엇인가?
순환 의존성 또는 순환 의존성은 여러 모듈이 직간접적으로 서로 의존할 때 형성된다. 예를 들어, 모듈 a를 가져오는 모듈 c를 가져오는 가져오기 모듈 b는 다음과 같습니다.
순환 종속성이 나쁜 이유
모든 단점은 상호 의존적인 모듈의 긴밀한 결합으로 인해 발생합니다. 단점은 너무 이론적이어서 주기적 의존성의 문제를 보여주는 샘플 코드를 상상하기 어렵다.
상호 종속 모듈이 계층 구조를 손상시킵니다.
모듈의 주된 목적은 복잡한 응용 프로그램을 단순한 개별 작업을 담당하는 더 작고 더 전문화된 코드 조각으로 나누는 것이다. 더 높은 수준의 작업이 더 작은 하위 수준의 작업을 취합할 때 코드는 계층화된 삼각형 구조를 갖는다. 각 레이어는 아래의 레이어에만 의존해야 합니다.
두 모듈이 서로 의존하면 분리할 수 없으며 여러 파일에 저장된 하나의 큰 모듈로 볼 수 있습니다. 따라서 주기적 의존성은 응용 프로그램을 별개의 작업으로 분리하는 것을 망친다. 더욱이, 다른 계층들의 모듈들 간의 주기적 의존성은 계층들로의 응용 프로그램의 분리를 망치기도 한다.
상호 종속 모듈이 이해하기 더 어려움
분명히, 의존성이 없는 모듈은 유닛 테스트로 이해하고 설명하는 것이 가장 쉽습니다. 그러나 추가적인 가져오기는 의존성이 있는 일반적인 모듈을 크게 복잡하게 만들지 않습니다.
상호 종속적인 모듈은 테스트하기가 더 어렵습니다.
유닛 테스트에서 모듈 의존성은 이상적으로 조롱되어야 합니다. 브라우저에서 코드를 테스트하면 복잡해집니다. 복잡한 수입 조롱이 자바스크립트 모듈의 단점이다. 이해와 마찬가지로, 추가적인 수입은 테스트를 많이 복잡하게 하지 않을 것입니다.
상호 의존적인 모듈은 재사용이 더 어렵습니다.
그것은 하위 레벨의 모듈에도 해당된다. 상호 종속 모듈은 분리할 수 없으며 여러 파일에 저장된 하나의 큰 모듈로 볼 수 있습니다. 그것들은 별도로 재사용할 수 없습니다. 그러나 전체 뷰를 제어하는 모듈과 같은 고급 모듈은 특정 애플리케이션의 기능이며 일반적으로 재사용되지 않습니다.
상호 종속적인 모듈은 유지 관리가 어렵습니다.
둘 중 하나를 바꾸면 다른 하나에 영향을 줄 수 있습니다. 그러나 순환 의존성에 한정되지 않은 또 다른 문제입니다. 공유 모듈을 변경하면 해당 모듈을 가져오는 모듈도 일부 조정이 필요할 수 있습니다.
순환 종속성이 양호한 이유
순환 종속성은 현대의 자바스크립트 기능이기 때문에 사용해야 한다.
프로토타이핑
주기적 의존성은 형편없이 조직된 코드에서 발생하며 결국 제거되어야 한다는 것을 부인할 수 없다. 하지만 퀵 프로토타입과 완제품의 차이도 있습니다. 순환 종속성을 일시적으로 유지함으로써 매일 코드를 리팩터링할 필요가 없다.
예를 들어, 새로운 기능을 구현해 달라는 요청을 받았습니다. 사양은 없고 고객이 곧 마음을 바꾸거나 여러 번 니즈를 조정할 것으로 알고 있습니다. 사업 요구가 예비 사항일 뿐이라면 코드를 확정하는 것은 의미가 없다. 코드를 재정비하는 것은 자유시간을 낭비하는 것이다.
큰 응용 프로그램
응용 프로그램이 작을 때 이상적인 계층 구조로 구성되는 것은 쉽다. 그러나 새로운 코드가 추가됨에 따라 주기적 종속성이 형성되어 최선의 해결책이 될 수 있다.
코드 리팩토링
성장하는 애플리케이션은 때때로 리팩터링되어야 합니다. 리팩토링하는 동안 임시 순환 종속성이 생성될 수 있습니다. 가장 간단한 예로, 너무 커진 모듈을 몇 개의 전문 모듈로 분할하려는 경우 모듈을 두 개의 상호의존적 모듈로 분할하는 것으로부터 리팩토링을 시작할 수 있습니다. 코드가 재구성될 때 애플리케이션이 작동한다는 점은 매우 편리하다.
짧은 샘플 코드는 https://github.com/marianc000/cyclicDependencies에서 다운로드하거나 샘플 웹 페이지 https://cyclicdependencies.onrender.com/에서 실행할 수 있습니다.
from http://recommend-sea.tistory.com/13 by ccl(A) rewrite - 2021-10-28 06:01:37