📒 목차

• 📌 Tight-coupling & Dependency
• 📌 Loose-coupling & Dependency
• 📌 싱글톤 패턴
• 📌 DI(Dependency Injection/ 의존성주입)
• 📌 IoC(Inversion of Control / 제어의 역전)
• 📌 TypeScript 사용 이유 및 사용방법
• 📌 Decorator 원리
• 📌 TypeScript 사용 이유 및 사용방법
• 🌈 오늘 하루

📌 Tight-coupling & Dependency

강한 결합(Tight Coupling)은 클래스와 객체가 서로 의존(Dependency)하고 있다는 것을 의미한다.

✅ 강한 결합(Tight Coupling)의 특징

• 하나의 객체를 변경하게 되면 다른 객체들의 변경을 요구되기 때문에 변경점들을 쉽게 놓칠 수 있다.

• 결합이 강하게 되어있어 결합이 되어있지 않으면 사용 할 수 없다.

• new를 선언할 때마다 컴퓨터 메모리를 사용하게 된다. 따라서 비교적 강한 결합에서 new를 더 많이 사용하기 때문에 메모리를 많이 잡아먹게 된다.

// product.controller.js

import { CashService } from "./services/cash.service.js";
import { ProductService } from "./services/product.service.js";

export class ProductController {
  buyProduct = (req, res) => {
    // 1. 가진돈 검증하는 코드 (대략 10줄 => 2줄)
    const cashService = new CashService();
    const hasMoney = cashService.checkValue(); // true 또는 false 리턴

    // 2. 판매여부 검증하는 코드 (대략 10줄 => 2줄)
    const productService = new ProductService();
    const isSoldout = productService.checkSoldout(); // true 또는 false 리턴

    // 3. 상품 구매하는 코드
    if (hasMoney && !isSoldout) {
      res.send("상품 구매 완료!!");
    }
  };

  refundProduct = (req, res) => {
    // 1. 판매여부 검증하는 코드 (대략 10줄 정도)
    const productService = new ProductService();
    const isSoldout = productService.checkSoldout(); // true 또는 false 리턴

    // 2. 상품 환불하는 코드
    if (isSoldout) {
      res.send("상품 환불 완료!!");
    }
  };
}

위의 소스코드에서 ProductController가 CashService와 ProductService에 의존하고 있는 상태이다.

다른 말로는 강하게 결합되어 있다고 부르기도 한다.

📌 Loose-coupling & Dependency

느슨한 결합은 강한 결합의 반대 개념이며, 다른 클래스를 직접적으로 사용하는 클래스의 의존성을 줄이는 것이다.

✅ 느슨한 결합(Loose Coupling)의 특징

• 클래스/클래스를 느슨하게 결합되어 새로운 기능을 개발하거나 기존 기능을 수정하고 확장하는게 쉽다.

• 코드의 유지 보수가 쉽다.

• 테스트 대역으로 치환하기가 쉬워 유닛 테스트가 용이하다.

// index.js

// const express = require('express') // 옛날방식 => commonjs
import express from "express"; // 요즘방식 => module
import { ProductController } from "./mvc/controllers/product.controller.js";
import { CouponController } from "./mvc/controllers/coupon.controller.js";
import { ProductService } from "./mvc/controllers/services/product.service.js";

const app = express();

// 추가되는 부분
const cashService = new CashService();

// 상품 API
const productController = new ProductController(cashService);
app.post("/products/buy", productController.buyProduct);
app.post("/products/refund", productController.refundProduct);

// 쿠폰(상품권) API
const couponController = new CouponController();
app.post("/coupons/buy", couponController.buyCoupon);

app.listen(3000, () => {
  console.log("백엔드 API 서버가 켜졌어요!!!");
});

product.controller.js 파일에 있는 new CashService()를 밖에서 실행시켜줄 것인데, index.js 파일에서 실행시켜 줄 것이다.

추가 작성한 cashService를 ProductController() 안에 넣어줌으로써 밖에서 만들어서 안으로 넣어주게 되는 것이다.

즉, cashService를 생성자로 넣어준 것이다. 이렇게 함으로써 강한결합을 약한결합으로 바꿀 수 있다.

또한, 이러한 방법은 싱글톤 패턴이다.

📌 싱글톤 패턴

비즈니스 로직인 CashService 를 먼저 선언하였다.

이렇게 하면 new 한 번으로 모든 곳에서 사용 가능하게 된다.

이런 디자인 패턴을 Singleton Pattern(싱글톤 패턴)이라고 한다.

지금까지 살펴본 바와 같이 의존성주입으로 얻을 수 있는 싱글톤패턴의 장점으로는 2가지가 존재한다.

• new 한 번으로 모든 곳에서 사용 가능하다.

• 강하게 결합되어 있는 상태에서 느슨한 결합으로 풀리게 된다.

📌 DI(Dependency Injection/ 의존성주입)

DI(Dependency Injection) 의존성주입은 Tight Coupling(강한 결합)을 Loose Coupling(느슨한 결합)으로 전환 시키는 방법이며, 제어의 역전(Inversion of Control)의 기술 중 하나이다.

• 제어의 역전 : "내가 대신 제어해 줄게"

• 의존성주입 : "니가 정의한 코드(클래스, 변수 등등)를"

✅ 의존성 주입이면 싱글톤 패턴일까?

의존성주입이면 싱글톤패턴이 아니다.

new 를 밖으로 빼주게 되면서 싱글톤패턴이 된 것은 맞지만 의존성주입이라는 것은 밖에서 안으로 넣어주는 것이기에 같다고는 할 수 없다.

📌 IoC(Inversion of Control / 제어의 역전)

의존성주입으로 얻을 수 있는 장점 2가지의 과정이 NestJS 에서는 자동으로 이루어지게 된다!

따라서, new 를 사용하여 우리가 만들어줘야했던 것들, 의존성주입 등을 NestJS가 해주게 되면서 NestJS 쪽으로 제어가 역전(IoC)되었다.

제어의 역전(Inversion of Control)은 일반적인 디자인 패턴 중 하나다.

일반적으로 개발자가 프로그램의 흐름을 제어하는 주체였다면, IoC의 개념이 나오게 되면서 프레임워크가 dependency를 container화 시켜 생명주기를 관리하게 되었다.

즉, dependency의 제어권이 개발자에서 프레임워크로 넘어가게 되었으며 이를 제어권의 흐름이 변경되었다고 하여 IoC(Inversion of Control)라고 한다.

📌 TypeScript 사용 이유 및 사용방법

타입스크립트는 자바스크립트에 타입을 부여한 언어이다.

자바스크립트의 확장된 언어라고 볼 수 있다.

타입스크립트는 자바스크립트와 달리 브라우저에서 실행하려면 파일을 한번 변환해 주어야 한다.

이 변환 과정을 컴파일(complile) 이라고 부른다.

✅ Why TypeScript?

자바스크립트도 충분히 복잡하고 어려운데 왜 또 다른 언어를 배워야 할까? 단지 최신 기술이라서? 혹은 다른 회사도 많이 사용하니까 우리도 써야 하는 걸까? 라는 고민을 할 수 있다.

타입스크립트는 아래 2가지 관점에서 자바스크립트 코드의 품질과 개발 생산성을 높일 수 있다.

• 에러의 사전 방지

• 코드 가이드 및 자동 완성(개발 생산성 향상)

//* 타입추론
let aaa = "안녕하세요";
//처음 들어온 값으로 타입을 추론한다
// :타입 -> 굳이 안해도 된다
// aaa = 3; (X)

//* 타입명시
let bbb: string = "반갑습니다";
// bbb = 10; (X)

//* 타입 명시가 필요한 상황
// number 또는 string 타입
let ccc: number | string = 1000;
ccc = "1000원";

//* 숫자타입
let ddd1 = 10;
let ddd2: number = 10;
// ddd1 = "철수" (X)

//* 불린타입
let eee: boolean = true;
eee = false;
// eee = "false" ("false" -> true로 작동한다.)

//* 배열타입
let fff: number[] = [1, 2, 3, 4, 5];
let ggg: string[] = ["철수", "영희", "훈이"];
let hhh = ["철수", "영희", "훈이", 1]; // 타입을 추론해서 어떤 타입을 사용하는지 알아보기!!

//* 객체타입
interface IProfile {
  name: string;
  age: number | string;
  school: string;
  hobby?: string; // hobby? -> 있어도되고 없어도됨
}

const profile: IProfile = {
  name: "철수",
  age: 8,
  school: "다람쥐초등학교",
};

profile.name = "훈이"; // 타입 추론으로는 이것만 가능!!
profile.age = "8살";
profile.hobby = "수영";

//* any타입
let qqq: any = "철수"; //자바스크립트와 동일!
qqq = 123;
qqq = true;

//* 함수타입 => 어디서 누가 어떻게 호출할지 모르므로, 타입추론 할 수 없음 (반드시, 타입명시 필요!!)
function add(num1: number, num2: number, unit: string): string {
  // 끝에 :string -> return 타입
  return num1 + num2 + unit;
}
const result = add(1000, 2000, "원"); // 결과의 리턴 타입도 예측 가능!!!

//* 화살표 함수
const add2 = (num1: number, num2: number, unit: string): string => {
  // 끝에 :string -> return 타입
  return num1 + num2 + unit;
};
const result2 = add2(1000, 2000, "원"); // 결과의 리턴 타입도 예측 가능!!!

📌 Decorator 원리

데코레이터는 실행하려는 사용자가 구조를 수정하지 않고 기존 객체에 새로운 기능을 추가할 수 있도록 하는 디자인 패턴이다.

일반적으로 데코레이트 하려는 함수의 정의 전에 호출된다.

데코레이터는 함수를 인수로 얻고 대가로 새로운 함수로 돌려주는 callable(전달받은 object 인자가 호출 가능한지를 판단)구조 이다.

자바스크립트를 확장한 언어라고 할 수 있는 타입 스크립트에서는 실험적인 기능으로 데코레이터를 제공하고 있다.

따라서 커맨드 라인이나 tsconfig.json에서 experimentalDecorators 옵션을 추가해 줘야 한다.

📌 public / private / protected 와 readonly

✅ public

class Monster2 {
// power;         => public, private, protected, readonly 중 1개라도 있으면 생략 가능

  constructor(public power) {
    // this.power = power; 
    // => public, private, protected, readonly 중 1개라도 있으면 생략 가능
  }

  attack1 = () => {
    console.log("공격하자!!");
    console.log("내 공격력은" + this.power + "야!!!"); // 안에서 접근 가능
    this.power = 30; // 안에서 변경 가능
  };
}

class 공중몬스터2 extends Monster2 {
  attack2 = () => {
    console.log("공격하자!!");
    console.log("내 공격력은" + this.power + "야!!!"); // 자식이 접근 가능
    this.power = 30; // 자식이 변경 가능
  };
}

const myMonster22 = new 공중몬스터2(20);
myMonster22.attack1();
myMonster22.attack2();
console.log(myMonster22.power); // 외부에서 접근 가능
myMonster22.power = 50; // 외부에서 변경 가능

✅ private

class Monster2 {
  // power;   => public, private, protected, readonly 중 1개라도 있으면 생략 가능

  constructor(private power) {
    // this.power = power;          
    // => public, private, protected, readonly 중 1개라도 있으면 생략 가능
  }

  attack1 = () => {
    console.log("공격하자!!");
    console.log("내 공격력은" + this.power + "야!!!"); // 안에서 접근 가능
    this.power = 30; // 안에서 변경 가능
  };
}

class 공중몬스터2 extends Monster2 {
  attack2 = () => {
    console.log("공격하자!!");
    console.log("내 공격력은" + this.power + "야!!!"); // 자식이 접근 불가
    this.power = 30; // 자식이 변경 불가
  };
}

const myMonster22 = new 공중몬스터2(20);
myMonster22.attack1();
myMonster22.attack2();
console.log(myMonster22.power); // 외부에서 접근 불가
myMonster22.power = 50; // 외부에서 변경 불가

✅ protected

class Monster2 {
  // power; => public, private, protected, readonly 중 1개라도 있으면 생략 가능

  constructor(protected power) {
    // this.power = power;          
    // => public, private, protected, readonly 중 1개라도 있으면 생략 가능
  }

  attack1 = () => {
    console.log("공격하자!!");
    console.log("내 공격력은" + this.power + "야!!!"); // 안에서 접근 가능
    this.power = 30; // 안에서 변경 가능
  };
}

class 공중몬스터2 extends Monster2 {
  attack2 = () => {
    console.log("공격하자!!");
    console.log("내 공격력은" + this.power + "야!!!"); // 자식이 접근 가능
    this.power = 30; // 자식이 변경 가능
  };
}

const myMonster22 = new 공중몬스터2(20);
myMonster22.attack1();
myMonster22.attack2();
console.log(myMonster22.power); // 외부에서 접근 불가
myMonster22.power = 50; // 외부에서 변경 불가

✅ readonly

class Monster2 {
  // power; => public, private, protected, readonly 중 1개라도 있으면 생략 가능

  constructor(readonly power) {
    // this.power = power;          
    // => public, private, protected, readonly 중 1개라도 있으면 생략 가능
  }

  attack1 = () => {
    console.log("공격하자!!");
    console.log("내 공격력은" + this.power + "야!!!"); // 안에서 접근 가능
    this.power = 30; // 안에서 변경 불가
  };
}

class 공중몬스터2 extends Monster2 {
  attack2 = () => {
    console.log("공격하자!!");
    console.log("내 공격력은" + this.power + "야!!!"); // 자식이 접근 가능
    this.power = 30; // 자식이 변경 불가
  };
}

const myMonster22 = new 공중몬스터2(20);
myMonster22.attack1();
myMonster22.attack2();
console.log(myMonster22.power); // 외부에서 접근 가능
myMonster22.power = 50; // 외부에서 변경 불가

✅ private-readonly

class Monster2 {
  // power; => public, private, protected, readonly 중 1개라도 있으면 생략 가능

  constructor(private readonly power) {
    // this.power = power;          
    // => public, private, protected, readonly 중 1개라도 있으면 생략 가능
  }

  attack1 = () => {
    console.log("공격하자!!");
    console.log("내 공격력은" + this.power + "야!!!"); // 안에서 접근 가능
    this.power = 30; // 안에서 변경 불가
  };
}

class 공중몬스터2 extends Monster2 {
  attack2 = () => {
    console.log("공격하자!!");
    console.log("내 공격력은" + this.power + "야!!!"); // 자식이 접근 불가
    this.power = 30; // 자식이 변경 불가
  };
}

const myMonster22 = new 공중몬스터2(20);
myMonster22.attack1();
myMonster22.attack2();
console.log(myMonster22.power); // 외부에서 접근 불가
myMonster22.power = 50; // 외부에서 변경 불가

🌈 오늘 하루

오늘은 타입스크립트에 대하여 학습한 날이다. 타입스크립트를 통해 기존 자바스크립트보다 명확하게 자료형을 선언하고 데이터를 다룰 수 있게 되면서 앞으로 학습할 네스트js에 대해 준비하는 날이었다.