FSD : Slices and segments

안녕하세요! 방금 전까지 우리는 **'계층(Layers)'**이라는 큰 층별 구분에 대해 이야기했죠? (1층 Shared, 2층 Entities...)

이번에는 그 층 안을 어떻게 정리하는지, 즉 **슬라이스(Slices)**와 **세그먼트(Segments)**에 대해 알아볼 차례입니다.

이건 마치 여러분의 **"책상 서랍 정리"**나 **"과목별 파일철 정리"**와 똑같습니다. 고등학생의 학교생활로 비유해서 아주 쉽게 설명해 드릴게요!

여러분이 공부를 잘하려면 국어 프린트와 수학 프린트를 섞어두면 안 되겠죠? 과목별로 파일철을 따로 만들어야 합니다. FSD에서는 이걸 **슬라이스(Slice)**라고 부릅니다.

정의: 코드를 **'주제(무엇에 관한 것인가?)'**별로 나누는 것입니다.
비유: [국어 파일], [수학 파일], [영어 파일].
특징:
- 국어 파일 안에는 국어 교과서, 국어 숙제, 국어 시험지가 다 들어갑니다.
- 수학 파일 안에는 수학 공식, 수학 문제집이 다 들어갑니다.
- 핵심 규칙: 국어 숙제를 하다가 갑자기 수학 공식을 가져오면 안 됩니다. 각 파일철은 서로 독립적이어야 합니다. (이걸 "슬라이스끼리는 서로 모르게 해라"라고 합니다.)

💻 코드로 보면?
features (기능) 계층 안에 이런 폴더(슬라이스)들이 생깁니다.

자, 이제 **[수학 파일(Slice)]**을 열어봅시다. 그 안에 종이들이 마구잡이로 섞여 있으면 찾기 힘들겠죠? 그래서 파일철 안에 투명 비닐이나 인덱스로 칸막이를 나눕니다. 이걸 **세그먼트(Segment)**라고 합니다.

정의: 슬라이스 안의 코드를 **'역할(어떤 기술인가?)'**별로 나누는 것입니다.
비유: 수학 파일 안에 있는 [공식 정리 칸], [문제 풀이 칸], [오답 노트 칸].
FSD의 표준 칸막이 이름들:
- ui: "눈에 보이는 것" (화면, 버튼, 컴포넌트)
- model: "머리로 생각하는 것" (데이터 처리, 상태 관리, 핵심 로직)
- api: "외부와 소통하는 것" (서버 요청)
- lib: "도와주는 도구들" (기타 보조 함수)

여러분이 "로그인(Login)" 기능을 만든다고 상상해 보세요.

1단계: 계층 (어디 층에 둘까?)
→ "로그인은 사용자의 행동이니까 3층 features에 두자!"

2단계: 슬라이스 (무슨 과목이지?)
→ "주제는 인증(Auth)이니까 auth라는 폴더(파일철)를 만들자!"

3단계: 세그먼트 (내용물 분리하자!)
→ features/auth 폴더 안에 칸막이를 칩니다.

📂 ui (화면)
- LoginForm.tsx (아이디/비번 입력창 그림)
- LoginButton.tsx (로그인 버튼 그림)
📂 model (로직/뇌)
- validation.ts (비밀번호가 8자리인지 검사하는 규칙)
- userState.ts (로그인 성공하면 상태를 '로그인됨'으로 바꾸는 기억 장치)
📂 api (통신)
- loginRequest.ts (서버에 아이디/비번 보내는 우편배달부)

FSD에서 슬라이스(Slices)를 나눌 때 가장 중요한 규칙이 있습니다.

"같은 층에 있는 슬라이스끼리는 서로 가져다 쓰면 안 된다!"

상황: features/cart (장바구니) 기능을 만들고 있는데, 갑자기 features/auth (로그인) 파일철에 있는 코드를 가져오고 싶습니다.
FSD의 호통: "안 돼! 장바구니가 고장 나면 장바구니만 고쳐야지, 왜 로그인까지 얽혀있어?"
해결법: 둘 다 공통으로 필요한 게 있다면?
- 더 아래층인 Shared나 Entities로 내리거나,
- 더 위층인 Widgets나 Pages에서 둘을 조립해야 합니다.
- 같은 층끼리는 '손절' 상태여야 코드가 깔끔해집니다.

programming