프론트엔드와 SOLID 원칙(카카오)

https://articlemoa.tistory.com/3

SOLID 원칙으로 리액트 훅 작성하기(Korean FE Articale)

이전 읽었던 SOLID원칙으로 리액트 훅 작성하는 것에 대해서 추가적으로 프론트엔드의 SOLID 아키텍처에 대해서 학습하고자 해당 아티클을 선택했습니다.

 

https://fe-developers.kakaoent.com/2023/230330-frontend-solid/

프론트엔드와 SOLID 원칙 | 카카오엔터테인먼트 FE 기술블로그

 

 

우선 서두로 해당 아티클에서는 콘웨이법칙을 설명하며 SOLID 원칙을 쓰면 좋은 이유를 설명하였습니다.

“소프트웨어 구조는 해당 소프트웨어를 개발한 조직의 커뮤니케이션 구조를 닮게 된다.” - 콘웨이

 

콘웨이법칙에 대한 첫 기억은, 당근출신 멘토님이 '회사에 처음 들어가면 회사의 코드를 파악하려 해라, 그러면 조직에 대해서 알게 될 것이다' 라고 말해주신 것이었습니다. 사람이 습관이 있듯이 조직도 습관이 있으니 코딩 스타일과 컨벤션이 조직 문화랑 닮을 수 박에 없다 라고 느꼈습니다.

그런데 해당 아티클에서는  “소프트웨어 구조가 조직의 커뮤니케이션 구조와 다르다면 어딘가 잘못된 구조다” 라고 말하셨는데, 같은 법칙이라도 다양한 해석이 가능하구나라고 느꼈습니다.

 

이러한 콘웨이 법칙에 입각해 소프트웨어 구조를 조직의 커뮤니케이션 구조와 유사하게 만들 수 있도록 도와주는 원칙이 바로 SRP(Single Responsibility Principle) 원칙 이라고  말합니다.

 

내용 자체는 결국 SOLID원칙일 뿐이고 이를 어떻게 풀어가는지가  아티클마다 차이점이라 생각하는데, 카카오페이지의 코드와 뷰를 예시로 제공해서 이해하기 수월한 아티클이었습니다.

 

아티클 내용

해당 아티클에서는 필자가 생각하는 각각의 원칙을 역할에 따라 분류하고 코드로 보여주는 게 좋았습니다.

 

 Single Responsibility Principle 
SOLID의 핵심, 잘 정의되면 Front뿐 아니라 UX, Designer, 기획자와의 소통에도 도움됨

 

 Open/Closed Principle 

요구사항이 변경될 때 기존 코드를 변경하는 것이 아니라 새로운 코드를 추가하는 방향을 추구하는데, 이를 위해 필요함

 

 Liskov Substitution Principle

실제로 디버깅 할 때 레이더로 사용하면 많이 도움이 됨. 동일 코드를 너무 여러 곳에서 사용하려다보면 위배가 되는 경우가 생김

 

Interface Segregation Principle 와 Dependency Inversion Principle

잘 짜인(SRP에 부합하게) 컴퍼넌트를 조합하기 위해서 필요함

 

이외에도 BFF에서 어떻게 하면 SOLID원칙을 준수할 지에 대해서 설명하는데 흥미로웠습니다.

 

느낀점

좋은 개발자들은 소통을 잘한다라고 생각합니다. 결국 머리속에 체계적으로 추상화할 수 있고, 이를 풀어서 타인이 이해할 수 있는 언어로 풀기 때문이라고 생각합니다.

 

예를 들면  리스코드 치환법칙에서 “상속(is-a)으로 이어진 관계에서 예상 못할 행동을 하지 말라”. 라고 간단히 비유하였는데, 굉장히 쉽게 잘 설명했다고 생각이 들었습니다. 마찬가지로 각각의 법칙을 코드로 비유하여 이해하기 쉽게 설명해주셔서 좀 더 와닿는 아티클이었습니다.

 

개인적으로 최근에 OCP에 위배된 코드를 작성했는데, 막연하게 느꼈던 불편함을 직접 눈으로 맞이하고 해결하는 과정을 보니 흥미로웠습니다.