FrontEnd, 클린코드에 대해서(객체지향 특징, 캡슐화, 모듈화, 컴포넌트화, SOLID 원칙, 디자인 패턴)

Jihu Kim·2024년 12월 28일
0

FrontEnd

목록 보기
9/13
post-thumbnail

클린 코드

가독성이 높고, 유지보수와 확장이 용이하며, 명확하고 간결하게 작성된 코드


클린 코드 작성 원칙

SOLID 원칙

객체지향 프로그래밍에서 클린 코드를 위한 대표적인 설계 원칙

  • S : 단일 책임 원칙 (Single Responsibility Principle)
    • 클래스나 함수는 하나의 책임만 가져야 한다.
  • O : 개방-폐쇄 원칙 (Open-Closed Principle)
    • 코드는 확장에는 열려 있어야 하고, 변경에는 닫혀 있어야 한다.
  • L : 리스코프 치환 원칙 (Liskov Subsitution Principle)
    • 자식 클래스는 부모 클래스를 대체할 수 있어야 한다.
  • I : 인터페이스 분리 원칙 (Interface Segregation Principle)
    • 클라이언트는 자신이 사용하지 않는 메소드에 의존하지 않아야 한다.
  • D : 의존성 역전 원칙 (Dependency Inversion Principle)
    • 상위 모듈은 하위 모듈에 의존해서는 안되고, 둘 다 추상화에 의존해야 한다.

캡슐화, 모듈화, 컴포넌트화

캡슐화, 모듈화, 컴포넌트화는 클린 코드를 만들기 위한 필수적인 요소이다. 기능별로 코드를 나누고 단일 책임을 갖도록 해 유지보수와 확장에 용이하도록 하기위해 사용한다.

  • 캡슐화 : 데이터와 로직을 보호하는 것
  • 모듈화 : 기능별로 코드를 분리하는 것
  • 컴포넌트화 : UI와 관련된 데이터와 로직을 캡슐화 하는 것

디자인 패턴

  • 생성 패턴
    • 싱글톤 패턴 : 단일 인스턴스 생성하고 재사용(getInstance)
  • 구조 패턴
    • 어댑터 패턴 : 서로 다른 인터페이스를 가진 클래스들을 호환되도록 변환
  • 행위 패턴
    • 옵저버 패턴 : 객체 상태 변화를 관찬자들에게 알림

객체지향 특징

재사용성, 유지보수성, 확장성을 높이기 위해 (추상화, 캡슐화, 상속, 다형성)등의 특징을 갖는다.

  • 추상화 :
    • 객체의 내부 구현을 숨기고, 외부에 필요한 인터페이스만 제공.
  • 캡슐화 :
    • 데이터와 메서드를 하나의 객체로 묶고, 외부로부터 데이터를 보호.
  • 상속 :
    • 기존 클래스(부모 클래스)의 속성과 메서드를 물려받아 새로운 클래스(자식 클래스)를 생성.
  • 다형성 :
    • 부모 클래스의 메서드를 자식 클래스에서 재정의(오버라이딩)하거나, 메서드 오버로딩을 통해 구현.

프론트엔드에서 객체지향적으로 설계하는 것에 대한 생각

객체지향적으로 설계를 한다면 모듈화를 통해서 재사용성과 유지보수성 확장성 등의 이점을 얻을 수 있다.
프론트엔드에서는 컴포넌트 기반 설계가 주를 이룬다.
함수형 컴포넌트 또는 클래스형 컴포넌트를 만들어 객체지향적 원칙을 적용할 수 있다.

  • 함수형 컴포넌트
    • 함수형 컴포넌트를 만들어 객체지향 원칙을 적용할 수 있다.
  • 클래스형 컴포넌트
    • ES6 부터 class 문법을 사용해 클래스형 컴포넌트를 만들어 객체지향 설계 원칙을 직접적으로 구현할 수 있다.
    • 클래스형 컴포넌트를 만들어 객체지향적으로 설계를 한다면 데이터 흐름이 복잡해질 수 있어, 불필요한 복잡성을 초래할 수 있다.
profile
Jihukimme

0개의 댓글