가장 마지막 팀프로젝트에서 프론트 아키텍처를 FSD로 개발을 했었다. 얼추 이해했지만, 대부분 cursor가 작업을 했었기에 구조를 절반도 이해하지 못한 것 같아서 짬짬히 공부하고 적용해보려고 한다.
우선은 알고리즘에 의해 발견된 영상 하나를 간략하게 요약해보려고 한다.
https://www.youtube.com/watch?v=pYAYTJ0vFfs
FSD의 풀네임은 Feature-Sliced Design. 기능별로 잘라서 디자인을 하겠다는 뜻이다. 그렇다고 개발자 위주로 나누는 것이냐? 아니 사용자의 이용을 중심으로 나누는 것이다.
(참고: https://feature-sliced.design/)
(출처: 구글검색)
이렇게 layer단위로 먼저 나누고, 레이어 안에는 slice, 그 안에는 segement로 이루어지게 된다. 같은 layer안에 있다 해도 슬라이스와 슬라이스는 참조할 수 없으며 같은 슬라이스 안에 있는 세그먼트더라도 세그먼트끼리는 참조할 수 있다. 오직 layer들 만이 위에서 아래방향으로 참조할 수 있다.
즉, app은 widget을 참조할 수 있지만 widget은 app을 참조할 수 없다.
그렇다면 각각의 layer는 무엇을 기준으로 나누느냐! 사실 이건 상대적인 것이다. 팀 내에서 소통을 통해 정하면 된다. 프로젝트 당시에도 features는 무엇이며 entities에는 무엇이 들어가는건지 감이 안잡혔었는데 논의가 필요한 부분이라고 해서 살짝 안심했다.
아마 제대로 이해하려면 간단한 토이프로젝트에 이 구조를 적용시켜봐야 조금이나마 더 이해한채로 글을 작성할 수 있을 것이다.
어쨋든 만들어본 사람입장에서 이야기 하자면 라우팅이 생각보다 편했고, 코드관리가 편했다. 다만 협업시에 책임범위를 명확히 나누는게 필요해 보이긴했다.(이건 이해를 제대로 못한 우리팀, 그리고 팀장이던 나의 문제긴 하다.) slice단위나 segment단위로 책임을 나누든 해서, 중복코드가 많아지는걸 방지하고 또 함부로 수정해서 전체 프로젝트가 망가지는 일을 줄이고 할 수 있지 않을까 싶었다.
다음편은 공식문서를 읽고 또 정리해봐야겠다.
