[항해 플러스 프론트엔드 3기] 6주차 WIL

Q1. 과제

  테오가 말아주는 클린 코드!! 항해 플러스에서 경험할 수 있는 특별한 시간이었습니다! 그 마지막 챕터가 마무리되었는데요. 마지막 주제는 FSD(Feature Sliced Design)이었습니다! FSD는 FE 진영에서 아주 핫한 디자인 패턴이라고 볼 수 있습니다. 공식 문서가 있는 Design Pattern이 있다..? 조만간 프론트엔드 개발의 표준이 될 수도 있는 패턴이고 FSD가 제안하는 철학을 이해하는 것만으로도 좋은 개발자가 되기에 충분히 필요한 부분이라고 느꼈습니다.

  디자인 패턴이 백엔드에 비해 프론트엔드에서는 크게 중요성을 인정받지 못하는 느낌인데요. 공부를 하면서 React와 FSD 조합이 큰 규모의 개발에 있어서 앞으로의 시장을 이끌어 갈 것 같다는 느낌을 받았습니다! FSD를 들어만 보았지 이렇게 직접 해볼 수 있는 경험을 어떻게 해볼 수 있을까요? 내 옆에 FSD를 알려주는 선임이 없다면 지금 당장 항해 플러스를 신청하세요! ㅋ-ㅋ

Q2. 시도

  app.tsx에 모두 작성되어 있는 코드를 FSD를 적용하여 리팩토링하는 작업을 진행했습니다! 상태관리에는 tanstack query와 jotai를 적용했고 점진적으로 코드 분리를 진행하였습니다.

Q3. 문제점

  분리를 하는 과정에서 feature와 entity의 구분이 이해가 잘 되지 않았던 것 같습니다. 테오 코치님도 어느 정도 맥락에 따라 그 역할이 구분될 수도 있다고 말씀해주셨고 일단은 제 기준대로 그리고 코치님이 알려주신 가이드대로 작성을 시도해 보았습니다.

Q4. 해결

Entity의 특징
1. 주로 id등의 식별자를 가지는 코어한 데이터(상태) 또는 로직
2. 대개 CRUD의 단순한 생명주기를 가진다.
3. axios, fetch 등 실제 서버로 요청하는 api를 관리
4. 무언가를 변경 시키지도 스스로 변하지도 않는 고정된 UI

Feature의 특징
1. 유저의 행위와 비즈니스 로직 중간 지점(!?) 역할 예를 들면 eventHandler 처리
2. 코어한 비즈니스 로직이 아닌 상황에 따라 변경될 수 있는 기능들
3. tanstack query 등 서버 요청 결과를 선언적으로 관리할 수 있도록 훅을 생성
4. 유저와 상호작용하며 시시각각 변화하는 UI

Q5. 6주차 느낀 점

  FSD를 현업에서 내가 쓸 일이 있을까라는 의문이 많이 들기는 합니다. 하지만 FSD가 제안하는 철학 자체는 코드를 바라보는 시각을 넓혀주기에 충분하다고 생각합니다. 그리고 또 언제가 될 지는 모르지만 정말로 FSD가 FE 개발의 메인 스트림이 되었을 때 대응할 수 있는 개발자가 되기 위해 미리미리 준비해둘 필요가 있다고 생각합니다.

  매주 항해를 하면서 내가 얼마나 부족한 지 느끼고 있습니다. 그렇기에 포기하기 보다는 더 나아가기 위해 노력해보려고 합니다!!