프론트엔드 관심사 분리

컴포넌트 분리 과제가 팀에 주어졌는데, 3주째 이어지는 과정 속에서 점점 어떻게 해야할지 감조차 못잡겠고 키보드 칠 엄두가 도저히 나지 않을 지경에까지 이르러서(고백하자면 이틀간 생각만 주구장창함)

그간 내가 얻었던 지식들을 정리하고 외부 문서들의 도움을 받아 '관심사 분리'라는 핵심 키워드가 대체 뭔지 짚고 넘어가려 한다

1차(1주차)

'관심사 분리' 명목 하에 Atomic Design Pattern을 적용했음. 피드백으로 '방향성은 맞으나 우리 팀에서 아토믹 디자인 패턴을 그대로 쓸게 아니기 때문에 섣불리 atom-molecules-organisms로 결정짓고 분리하기보다, 일단 다 풀어해쳐놓고 함께 합의하면서 우리만의 기준을 세울 수 있게 해달라'고 하셨음

더불어 내가 molecules로 분류했던 컴포넌트는 컴포넌트가 아니라 유틸 함수만으로도 충분히 대체할 수 있어서 이정도까지 분리하는건 과할 수 있다고 하셨다

2차(2~3주차)

진전 x

HTML CSS JavaScript

• 얘넨 웹페이지 만들려고 설계된 애들이 아니라 문서를 잘 보여주기 위해 설계된 구조다
• 그래서 초기엔 HTML 따로 - CSS 따로 - JS 따로 관리하는 멘탈모델이 지배적이었고 그것의 정점이 jQuery였다
• 그런데 Ajax가 탄생하고 웹앱이 고도화되면서 컴포넌트 멘탈모델이 주류가 되었고 React가 패러다임 선두주자로 군림하게 된 것 이미지 출처

컴포넌트에도 계층이 필요해

• 컴포넌트 멘탈모델로 개발하다보면 다음과 같은 문제를 마주하게 된다
  1. 컴포넌트의 비대화
  2. 컴포넌트 간 강한 결합성
  3. 유지보수의 어려움
• 우리 팀은 3번까지의 모든 문제를 안고 있는 소스코드를 가지고 있었고 그래서 작년 말부터 차근차근 해체해가며 정리를 시작함
  • 잘못 쓰이고 있는 (작성 중) https://velog.io/@teo/separation-of-concerns-of-frontend