[5, 6주차/다일] 워크북 제출합니다.

[RyuDongHo]

✅ 워크북 체크리스트

• 모든 핵심 키워드 정리를 마쳤나요?
• 핵심 키워드에 대해 완벽히 이해하셨나요?
• 이론 학습 이후 직접 실습을 해보는 시간을 가졌나요?
• 미션을 수행하셨나요?
• 미션을 기록하셨나요?

✅ 컨벤션 체크리스트

• 디렉토리 구조 컨벤션을 잘 지켰나요?
• pr 제목을 컨벤션에 맞게 작성하였나요?
• pr에 해당되는 이슈를 연결하였나요?(중요)
• 적절한 라벨을 설정하였나요?
• 파트장에게 code review를 요청하기 위해 reviewer를 등록하였나요?
• 닉네임/main 브랜치의 최신 상태를 반영하고 있는지 확인했나요?(매우 중요!)

📌 주안점

[RyuDongHo]

todoList 리팩토링은 recoil로 했습니다.
애초에 리팩토링 할 게 없기도 했고, contextAPI나 recoil이나 사용 방법은 거의 비슷하다고 생각합니다.
평소 recoil을 잘 안 쓰기도 해서, 공부할 겸 사용해봤습니다.

[lsy1307]

다일 수고하셨습니다! debounce, throttle을 커스텀 훅으로 구현 잘 해주셨네요 ㅎㅎ 워낙 잘하시니까... 별로 드릴 말씀은 없구 폴더 구조가 신기한데 혹시 어떻게 구성하셨는지 댓글 한 번만 달아주실 수 있나요??

[RyuDongHo]

기본적으로 FSD 디자인패턴을 적용한 것인데,

• FSD
  : 소개
  -> React를 설계하는 디자인 패턴
  : 응집도와 결합도
  -> 응집도가 높으면 재사용성이 높아지며, 테스트성이 좋아짐
  -> 대신 코드의 흐름을 해석하기가 어려움
  -> React는 응집도를 추구하는 패키지
  -> React는 기본적으로 응집도를 높게 설계해야하지만 그렇다고 결합도를 버릴 수도 없음
  -> 게다가 React는 자유도가 매우 높음
  -> 그래서 디자인 패턴이 필요

• 결합도가 높은 대표적인 구조
  -component
  -hook
  -constant
  -asset
  : 뭐 한개를 수정하려면 위 폴더를 다 뒤져봐야 함
  : 뭐 하나를 수정했을 때, 어디에 영향이 갈 지 특정하기 어려움

• FSD Pattern
  : 응집도와 결합도를 둘 다 사용하며
  : 레이어라는 가상의 단위를 두고, 레이어등급이 높은 쪽으로 갈 수록 결합도가 높아지며
  레이어 등급이 낮은 쪽으로 갈 수록 응집도가 높아지게 설계함
  : 구조
  -> Layer > Slice > Segment
  Layer: 응집도와 결합도의 단계를 나타내는 단위
  - 상위 레이어는 하위 레이어를 가져다 쓸 수 있음
  - 하위 레이어는 상위 레이어를 가져다 쓰면 안됨
  - 레이어의 구성: App > Page > (Process) > Widget > (Feature) > Entity > Shared
  Widget = 혼자 작동하는 컴포넌트 1개.. ex) commentList, loginArea ...
  Page = ... ex) home, shorts, ...
  Shared = 공용파일 ex) button.js/css, 낮은 레벨의 기능(정규표현식 체크 등)
  Slice: 해당 레이어에 포함되는 종류
  -> Page 레이어에 존재할 수 있는 Slice
  : HomePage, ShortsPage, VideoDetailPage ...
  -> Widget에 존재할 수 있는 Slice
  : LoginAream SingupForm, CommentList ...
  -> 어떤 Slice는 같은 레이어에 있는 Slice를 참조하면 안됨
  ex) LoginPage에서 SignupPage로 이동하고 싶을 때 > LoginPage에서 SignupPage를 Import하는 게 아닌, 상위 레이어인 App에서 합쳐지는 구조
  : 이런 복잡한 규칙등을 통해, 내가 뭔가를 수정하면 영향이 가는 건 이를 사용하는 상위 레이어로 한정 짓겠다는 의미
  Segment: 해당 Slice를 구성하는 파일 종류
  -> ui, style, model, lib, asset 등
  -> 해당 Segment를 가지고 있는 Slice안에서만 참조 가능
  정리: 역할에 맞게 "고립" 시킨다

• 주의사항
  1. 상위 레이어에서는 하위 레이어 접근이 가능하지만, 반대는 안됨 ( 상위 레이어가 하위 레이어의 slice를 가져다 씀 )
  1-2. App과 Page레이어 에서만 index.js가 존재함
  2. 같은 레이어의 slice들 끼리는 접근되면 안되며, 오직 상위 레이어에서 조립이 되어야 함
  3. segment들 끼리는 서로 접근 가능함. 단 다른 slice의 segment는 아님'
  4. 같은 역할에 맞게 "고립"을 시킨다 <<. 1파일 1목적**

여기까지가 제가 FSD를 공부하면서 기록했던 내용들이고
지금 프로젝트에 적용된 방식은 FSD에 몇 가지 컨벤션을 추가했습니다.

1. Layer는 App > Page > Widget > Shared 4가지로 축약한다
2. segment는 사용되는 범위에 맞게 최대한 고립시킨다. 즉 Movie컴포넌트가 MovieList에서만 쓰인다면, MovieList 컴포넌트의 ui로서 즉 slice/segment의 segment로 깊이를 깊게 가져가더라도 응집도/고립을 높게 한다

그리고 FSD는 이런 Layer, Slice 구조를 위해 기본적으로 하나의 요소는 1개의 폴더로서 존재하고 내부에 segment가 존재하여
index.jsx를 통해 import->export되는 방식입니다.
그래서 인터넷에 자료를 찾아보면 index에는 진짜 import/export만 딱 2줄 존재하게 하는 경우가 있는데
저는, 그러면 index 없애버려도 되는 거 아닌가? 왜 필요하지? 라는 생각이 있었기때문에
index자체를 해당 Layer/Slice의 최고 컴포넌트처럼 사용하고 있습니다.

[RyuDongHo]

FSD패턴 자체가, 디자인 패턴 치고 러닝커브가 좀 있는 편이지만,
똑바로 적용만 된다면, 개인적으로 리액트와 가장 잘 맞는 구조라고 생각해서 자주 사용하고 있습니다.