프리온보딩 프론트엔드 3회차

이번 회차의 목표는 SOLID한 컴포넌트 만들기!

 

SOLID? 단단한? 고체? 그게 아니고 뭐였지? 정보처리기사시험 준비할 때 들어본거 같은데...

간단하게 설명하자면, 객체 지향 프로그래밍 시 필요한 원칙들의 줄임말이다. 자세한 내용은 차차 알아가보겠다.

 

우선 Ant Design이 제공하는 Form과 내가 만든 Form의 차이를 생각해보자.

  Q. 왜 내가 만든 Form은 어디에서나 자유롭게 사용할 수 없는가?
  A. 순수하지 않기 때문에! 의존성이 높기 때문에! 비즈니스 로직이 Form에 포함되어 있기 때문에! 공통 Form을 만들 때

      import 한 무언가 때문에! 등의 이유라고 볼 수 있다.

  Q. 그렇다면 우리는 이 문제를 어떻게 해결해야 하는가?
  A. 내부가 아닌 외부에서 접근할 수 있도록 바꿔주기! 어떻게? IoC(Inversion of Control), 즉 제어의 역전 시키기!

고민을 해봤으니 더 자세히 들어가보자

 

Tool Belt

  우리는 개발을 할 때 단순히 폴더와 텍스트 파일만으로 JavaScript, HTML, CSS를 작성하지 않는다. VSCode, IntelliJ, WebStrom 등 다양한 IDE를 활용하고, 이제는 없어서는 안 될 친구 GPT를 이용한다든가하는 등 다양한 도구들을 사용하고 있다. 그렇다면 코드를 작성할 때는 사용하는게 없겠는가? 당연히 있다. 다양한 방법들이 존재하고 있지만 있는지 몰라서 사용하지 않는 것이다. 아니면 이름만 들어보고 넘어가서 그럴수도 있다. 또한 도구들을 안다고해도 숙련도의 차이는 분명히 존재할 수 밖에 없다. 어떻게 숙련자가 도구를 사용하는지 보자.

  예를 들어 Context API의 경우 전역 상태 관리 도구로 유명하다. 그렇지만 해당 도구의 목적은 어떠한 맥락(context) 내부에서 상태를 공유할 수 있는 기능을 제공하는 것이다. Radix UI에서 제공하는 Dialog 코드를 보면 컴파운드 컴포넌트 형태로 사용되는 것을 알 수 있다. 사용할 때는 이렇게 사용하는 거구나하고 사용하지만, 다시 코드를 보면 상태가 밖으로 드러나지 않고 어떻게 닫고 열 수 있는지가 궁금해진다. 내부를 보면 Context API를 활용해 상태를 관리하는 것을 알 수 있다. 이 외에도 캡슐화, 추상화 등 다양한 도구가 존재한다.

  위와 같이 내가 알든 모르든 다양한 도구가 존재하고 있기에 나는 공부를 하고 적용해보면서 상황에 맞는 도구를 사용할 줄 알아야 한다.

 

SOLID

  학교에서 수업 시간에 들어보고, 정보처리기사 시험을 보며 들어보고 지나갔던 이름이 다시 나왔다. 백을 공부하는 애들은 신경쓰며 개발하는 것 같았는데, 프론트로 넘어오고 필요한가?라는 생각이 들었고 적용하는 방법을 모르겠네라는 결론이 나왔었다. 오늘 강사님이 프론트에서 적용할 부분으로 정리해 주었다.

• SRP(Single Resposibility Principle) : 단일 책임 원칙. 각 소프트웨어 모듈은 변경의 이유가 단 하나여야만 한다. 하나의 모듈은 하나의 사용자(이해관계자)에 대해서만 책임져야 한다.
• OCP(Open-Close Principle) : 개방-폐쇄 원칙. 기존 코드의 수정보다 새로운 코드를 추가하는 방식으로 시스템의 행위를 변경할 수 있도록 한다. CCP.
• LSP(Liskov Substitution Principle) : 리스코프 치환 원칙. 치환이 가능해야 한다. 어댑터 패턴.
• ISP(Interface Segregation Principle) : 인터페이스 분리 원칙. 필요한 것에만 의존해야 한다.
• DIP(Dependency Inversion Principle) : 의존성 역전 원칙. 구체적인 것에 의존하지 말고, 추상적인 것에 의존해야 한다. 예를 들어 쇼핑몰 웹에서 구매 로직을 만들 때 코트 구매 로직이 아닌 물품 구매 로직을 작성해야 한다.

IoC(Inversion of Control)

  제어의 역전, 말 그대로 제어가 역전된 것을 의미한다. 일반적으로 라이브러리를 사용하면 개발자가 라이브러리의 코드를 호출해 제어한다. 하지만 IoC의 경우 그 반대를 의미한다. 라이브러리 코드가 개발자가 작성한 코드를 호출하는 것이다.

  예를 들면, JavaScript를 사용할 때 Array 반복을 위한 for문과  map 함수를 생각해 볼 수 있다.

const arr = [1,2,3,...];

// IoC 미적용
for (const a of arr) {
	// 반복 동작...
}

// IoC 적용
arr.map(el => {
	// 반복 동작...
});

제어의 역전을 적절히 잘 사용한다면 코드의 결합도가 낮아지고, 가독성과 유지보수성이 올라가는 것을 느낄 수 있을 것이다. 제어의 역전을 좀 더 쉽게 이해하면 미룬다! 뭘? 설계와 인터페이스를 먼저 만들고, 구현을 미룬다라고 생각하면 느낌이 조금 더 잘 올 수 있다.

 

리액트에서 주로 사용하는 예제를 보면

- Compound Components Pattern

- Children Props

- Render Props

등이 있다.

 

기타

Radix UI, aschild prop, constate, Object.assign 사용시 new가 필요없다?, Single Store & Multi Store, VAC 패턴, 콘웨이 법칙, shadcn, VO-Vercel, ASP.NET, SWR

overlay : 모달 뒤에 깔리는 배경

학습: 23.12.13

느낀점: 공부할 때 너무 해당 기능에만 매몰되지 말고 원리를 이해하고 다양하게 적절히 사용하기.