.jpg)
TypeScript 기본기 다지기
Table of Content
1. 프로그래밍 배경에서의 모듈
프로그래밍 전반 관점의 모듈
•
모듈이란 프로그램을 구성하는 시스템을 기능 단위로 독립적인 부분으로 분리한 것
•
단순히 규모가 큰 것을 작게 여러 개로 나눈 조각이 아니라, 하나 이상의 논리적인 기능을 수행하기 위한 명령어들의 집합
•
모듈은 독립적인 프로그램 그 자체일 수도 있고 함수나 메서드일 수도 있음
•
모듈이 되려면 다른 것들과 구분될 수 있는 독립적인 기능을 가져야 하고 유일한 이름을 사용해야 한다.
•
다른 프로그램이나 또 다른 모듈에서 호출하여 사용할 수도 있어야 한다. 또, 모듈 자체로서 재사용될 수 있고 독립적으로 컴파일이 가능해야 한다는 중요한 특징을 포함해야 한다.
•
모듈은 다양한 형태로 존재할 수 있는데 용도가 비슷한 함수나 추상화된 자료, 객체(Object), 메서드(Method)등이 이에 해당한다.
•
무언가 독립적인, 재사용가능한, 다른부분에도 사용되는 일종의 부품과 같은 개념으로 기억
•
이런 기능적인 분리를 통해서 다른 프로그램을 개발할 때에도 유지보수와 코드 재사용성을 높여 소프트웨어를 설계하는 기법을 모듈화(Modularization)라고 함
독립적인 모듈이 가져야 할 특성
•
모듈은 응집도가 높아야 하며, 결합도와 의존도는 낮아야 한다.
◦
응집도 (Cohesion)
▪
정의: 모듈 내의 구성 요소들이 얼마나 밀접하게 관련되어 있는지를 나타내는 척도
▪
특징:
•
높은 응집도: 모듈이 하나의 특정 기능을 수행하고, 그 기능과 관련된 모든 요소가 모듈 내에 포함되어 있을 때.
◦
장점: 높은 응집도를 가진 모듈은 가독성과 유지보수성이 높아지며, 코드의 가독성이 높아짐
•
낮은 응집도: 여러 가지 기능이 혼합되어 있거나, 서로 관련 없는 작업들이 함께 포함된 경우.
◦
2. 결합도 (Coupling)
▪
정의: 모듈 간의 의존성을 나타내는 척도입니다. 한 모듈이 다른 모듈에 얼마나 의존하고 있는지를 나타냄
▪
특징:
•
낮은 결합도: 모듈이 서로 독립적으로 작동할 수 있고, 한 모듈의 변경이 다른 모듈에 영향을 미치지 않을 때.
◦
장점: 낮은 결합도를 가진 시스템은 유연성과 재사용성이 높아지며, 유지보수와 확장성이 높아짐
•
높은 결합도: 모듈 간의 의존성이 강할 경우, 한 모듈의 변경이 다른 모듈에 영향을 미치게 됨
◦
3. 의존도 (Dependency)
▪
정의: 한 모듈이 다른 모듈이나 컴포넌트에 의존하는 정도를 나타내는 척도입니다. 의존도는 모듈 간의 관계를 설명하며, 특정 모듈이 다른 모듈의 기능이나 데이터를 필요로 할 때 발생합니다.
▪
특징:
•
높은 의존도: 한 모듈이 다른 모듈에 강하게 의존할 경우, 변경 시 영향을 받을 가능성이 높음
•
낮은 의존도: 모듈이 다른 모듈에 대한 의존성이 적거나 없는 경우, 변경 시 영향이 적음
◦
장점: 낮은 의존도를 가진 시스템은 모듈 간의 독립성을 높여, 유지보수와 테스트가 용이해짐
2. TypeScript에서의 모듈
TypeScript에서의 모듈
•
위 개념적 특징들을 실제 코드에서 기술적으로 다루므로 동일한 목표와 가치관을 가지고 있음
•
자바스크립트 또는 타입스크립트 파일을 분리해서 만들어 놓고(독립적인 모듈)
•
서로 간에 필요한 변수나 함수를 가져다 사용(재사용성) 할 수 있도록 만드는 과정
◦
TypeScript는 JavaScript의 상위 집합으로, ES6(ECMAScript 2015) 스펙을 가지고 있음
◦
따라서 TypeScript에서의 모듈 시스템은 ES6의 모듈 시스템을 기반으로 하기 때문에 ES6에서 추가된 모듈 개념에 타입 시스템이 추가되어 더욱 강력한 객체지향프로그래밍 경험을 제공하고 있음
•
TypeScript의 모듈 특징
◦
모듈화:
▪
TypeScript에서는 파일 단위로 모듈을 정의, 각 파일은 독립적인 모듈로 간주되며, 이를 통해 코드의 구조를 명확히 하고 관리하기 쉽게 만듦
◦
재사용성:
▪
모듈을 사용하면 필요한 변수나 함수, 클래스를 다른 모듈에서 쉽게 가져다 사용할 수 있음. 이를 통해 코드의 재사용성을 높이고, 중복을 줄임
◦
의존성 관리:
▪
모듈 간의 의존성을 명확히 관리할 수 있음.
▪
각 모듈은 필요한 다른 모듈을 명시적으로 가져오기 때문에, 의존성이 명확해지고, 변경 시 영향을 받는 부분을 쉽게 파악할 수 있음
새로운 폴더(metaverse/greeter/src/modules)
•
mathOperations.ts 생성
// Define 4 basic operating functions
function add(a: number, b: number): number {
return a + b;
}
function substract(a: number, b: number): number {
return a - b;
}
function multiply(a: number, b: number): number {
return a * b;
}
function divide(a: number, b: number): number {
return a / b;
}
TypeScript
복사
◦
간단한 사칙 연산 함수를 생성했다.
•
modules.ts 생성
◦
이처럼 다른 파일에서 add() 함수를 사용 하고 싶을 때, export와 import를 통해서 사용 할 수 있다.
◦
아래와 같이 mathOperations.ts 에선 export로 내보낼 함수를 지정해주고
// Define 4 basic operating functions
function add(a: number, b: number): number {
return a + b;
}
function substract(a: number, b: number): number {
return a - b;
}
function multiply(a: number, b: number): number {
return a * b;
}
function divide(a: number, b: number): number {
return a / b;
}
export { add, substract, multiply, divide }
TypeScript
복사
▪
받고자 하는 파일인 module.ts에선 import를 통해 주입되고 사용할 수 있음
import { add, divide, multiply, substract } from "./mathOperations";
const input1 = 5;
const input2 = 3;
const result1 = add(input1, input2);
const result2 = substract(input1, input2);
const result3 = multiply(input1, input2);
const result4 = divide(input1, input2);
console.log("더하기:"+result1)
console.log("빼기:"+result2)
console.log("곱하기:"+result3)
console.log("나누기:"+result4)
TypeScript
복사
▪
IDE의 도움을 통해 자동으로 import 문에 추가되는 기능
•
이런 참조 기능은 불과 몇년 전에만 해도 없었음(ES6는 2015년에 도입 됨)
◦
과거에는 이전에는 <script> 태그를 사용하여 JavaScript 파일을 HTML에 포함시키는 방식으로 코드를 작성
◦
이 방식은 전역 스코프를 사용하므로, 여러 스크립트 파일 간에 변수나 함수가 충돌할 수 있는 문제가 있음
◦
사실 자바스크립트는 애초부터 서버가 아니라 브라우저에서 쓰려고 만든 언어였으므로, CSS, 라이브러리 등 리소스들을 이와 같은 방식으로 가져와서 사용 했었음
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.bundle.min.js"></script>
<script src="mathOperation.js"></script>
<script src="charactor.js"></script>
<!-- ... -->
</head>
<body>
<!-- ... -->
</body>
</html>
HTML
복사
▪
이것은 현재도 이 상태의 프로젝트가 상당히 많이 존재한다는 것을 인지
•
export 는 다음 처럼 함수에 직접 표기 할 수도 있음
// Define 4 basic operating functions
export function add(a: number, b: number): number {
return a + b;
}
export function substract(a: number, b: number): number {
return a - b;
}
export function multiply(a: number, b: number): number {
return a * b;
}
export function divide(a: number, b: number): number {
return a / b;
}
TypeScript
복사
Related Posts
Search
