[PEC] 4주차 세션 돌아보기

컴포넌트 설계

컴포넌트를 왜 설계해야 하는 것일까?

• 재사용성
• 유연함
• 생산성
• 기타 등등

컴포넌트 설계의 궁극적인 목적은 Performance(생산성)이라고 할 수 있다.

여기서 얘기하는 Performance는 시스템의 성능이 아닌 개발자가 단위 시간당 수행할 수 있는 작업의 양을 말한다.

생산성이 높아지면 작업의 양이 늘어나고 제품의 가치가 더욱 빠르게 사용자에게 전달될 수 있다.

 

회사에서 일을 하다보면 일을 많이 하기 어려워지는 경우가 있다.

그 이유는 소프트웨어의 요구사항이 변경되기 때문이다.

요구사항이 변경되면 기획을 다시 해야하고, 디자인을 다시 해야하고, 개발을 다시 해야하고, QA를 다시 해야한다.

 

그러나 소프트웨어의 변경은 당연한 것이라고 볼 수 있다.

변경이라는 것 자체는 우리가 제어할 수 없는 영역이다.

우리는 변경을 어떻게 잘 다룰지에 대한 고민을 해야하고 이에 대한 답은 '설계'라고 얘기할 수 있다.

 

퍼포먼스를 높이기 위해서는 변화에 대응할 때 최소한만 수정할 수 있어야 한다.

변화에 대응하기 쉬운 유연한 구조를 가진 설계를 해야한다.

 

궁극적으로 퍼포먼스를 높이게 되면 많은 이점들을 얻을 수 있다.

• 돈을 많이 벌 수 있다.
• 문제 해결을 쉽고 빠르게 할 수 있다.

FSD(Feature Sliced Design)

컴포넌트를 잘 설계하기 위해서 FSD 방법론을 도입합니다.

출처: https://feature-sliced.design/docs/get-started/overview

 

FSD에서는 기능 단위로 애플리케이션의 전체적인 구조를 작성하게 됩니다.

컴포넌트 또한 각각의 기능(feature)단위로 분류가 되면서 코드를 쉽게 찾을 수 있게 하고 효율적으로 협업을 할 수 있도록 돕습니다.

 

저는 기능 단위로 분류가 되면 왜 이러한 이점을 가지게 되는지에 대해서 개인적으로 생각을 해봤습니다.

"이해하기 쉽다"라는 것은 직관적이라는 것을 의미한다고 볼 수 있을 것 같고

"직관적이다"라는 것은 생각할 필요가 없이 바로 알아볼 수 있는 것이라고 볼 수 있을 것 같습니다.

 

우리가 어떤 서비스를 생각할때는 개발자든, 사용자든 기능을 중심으로 생각을 시작하는 것 같은데요.

예약을 하거나, 송금을 하거나, 제품을 구매하는 것과 같이 기능에서 생각이 시작을 하기 때문에 소스코드도 기능을 단위로 분리가 되면 생각할 필요 없이 바로 해당 기능의 폴더를 직관적으로 찾아볼 수 있을 것 같습니다.

 

또한 비즈니스의 요구사항에 대응하는 관점에서도 항상 특정 기능에서부터 시작을 한다고 생각하는데요.

이 경우에도 소스코드를 추가하거나 수정할 때 기능에서 부터 시작할 수 있어서 생각의 흐름이 일치하는 것 같습니다.

 

FSD의 폴더 위계는 Layers, Slices, Segments와 같이 이루어집니다.

layers의 각 폴더의 종류를 간략하게 설명하면 아래와 같습니다.

• app: React의 Provider, Router, global style, global type등
• pages: 페이지 컴포넌트
• widgets: 페이지에 사용되는 UI 컴포넌트, features로 구성
• features: 비즈니스 로직을 담당하는 컴포넌트
• entities: 데이터, api layer
• shared: 도메인에 종속적이지 않는 공통 모듈(component, hooks, helper등)

layer가 참조하는 방향은 무조건 단방향이어야 하며 또한 위에서 아래로 참조해야 합니다.

아래쪽에 위치한 layer일수록 더 많은 곳에서 사용됩니다.

 

slice는 특정 비즈니스 엔티티를 기준으로 나누게 됩니다.

 

segment는 목적에 맞게 slice의 코드를 나누게 됩니다.

• api
• ui
• model
• lib
• config
• consts

FSD는 Public API를 가지며 index.ts 파일을 두어서 외부에 export할 것들을 표현해줍니다.

나머지는 private하게 격리하여 내부에서만 사용하게 됩니다.

 

4주차에는 FSD 방법론을 통해 실제로 컴포넌트 설계를 진행하게 됩니다.