파일 구조 변경 : FSD 디자인패턴

정보처리기사 이론을 공부하며 디자인패턴과 결합도, 응집도에 대해 배우며 내 코드 파일을 되돌아보는 시간을 잠시 가졌다.

 

나는 지금까지의 코드 파일도 충분히 만족스럽고 스스로에게는 훌륭하다고 생각하는데, 이론에 적용해보니 결합도가 꽤나 높았다.

 

결합도가 높은 파일은 재사용성도 불편하지만, 가장 큰 이유는 이렇게 오랜만에 코딩 작업에 들어갈 때 폴더 구조가 너무 많아서 찾는데 시간이 조금 소요된다는 점이다.

매번 불편하다고 생각이 들어서 파일 구조를 틈날 때 더 발전을 시켜는 보았는데, 이번 실기 공부를 하며 결합도와 디자인패턴들을 암기하며 좋은 파일 구조로 분할해보고 싶어졌다. 결합도를 떨어뜨리고 데코레이터처럼!

 

 

 

유튜브에서 찾은 좋은 패턴 FSD

FSD는 7가지의 레이어 층으로 구별된 설계 구조다. 설명은 가지고 온 링크가 잘 해주어서 거두절미한다.

 

 

https://seo-tory.tistory.com/91

[디자인패턴] 요즘 가장 핫한 프론트엔드 디자인패턴: Feature Sliced Design (번역)

 

https://velog.io/@rewq5991/FSD-%EA%B0%84%EB%8B%A8%ED%95%98%EA%B2%8C-%EC%8B%9C%EC%9E%91%ED%95%B4%EB%B3%B4%EA%B8%B0

FSD 간단하게 시작해보기

 

 

내가 FSD 구조로 바꾸어야 겠다고 생각이 든 건 기존의 전통적인 구조로는 개발할 때 목적의 코드 파일을 바로 알아보기 어렵기 때문이다. FSD는 필요에 따라 7가지의 구조 안에서 ui와 model 등 용도로 구별짓는 세그먼트를 만들 수 있어서

기능 / 화면구조 에 따라 파일을 나눌 수 있다. 거기서 더 큰 구조로 나아가면 세부적인 기능들이 쪼개어서 7구조 안에 들어가있으니 파일 하나를 수정했을 때 오류사항이 발생할 일을 줄일 수 있다는 기대도 가질 수 있다.

 

 

지금은 가장 타격을 주지 않으면서도 주요 기능인 '검색' 기능을 FSD 구조로 변환하고 있다.

당장은 다른 컴포넌트 구조도 함께 있기 때문에 구조가 복잡해서 구조 변경이 쉽지는 않지만, 바꾸어 본 경험이 도움이 많이 될 것 같다.