FSD : Authentication

안녕하세요! 개발 공부를 하다 보면 **"로그인 기능을 어디에, 어떻게 넣어야 깔끔할까?"**라는 고민에 빠지게 되는데요. Feature-Sliced Design(FSD)이라는 설계 방법론에서 인증(Auth) 기능을 어떻게 정리하는지, 고등학생도 이해하기 쉽게 비유를 들어 설명해 드릴게요.

---

🏫 학교 출입 시스템으로 이해하는 FSD 인증(Auth)

우리가 학교에 들어갈 때(로그인)부터 교실에 앉을 때까지의 과정을 상상해 보세요. FSD는 이 과정을 역할별로 아주 잘게 쪼개서 정리하는 방법입니다.

그냥 "로그인 기능"이라고 뭉뚱그려 만들면 나중에 코드가 꼬이기 십상이거든요. FSD는 아래처럼 서랍을 나눠서 정리합니다.

1. 🧱 Shared (도구 상자): "출입증 리더기 부품"

• 역할: 아주 기초적인 도구들입니다.
• 내용: 서버에 "로그인 시켜줘!"라고 요청을 보내는 기본적인 함수(api)나, 토큰(출입증)을 브라우저에 저장하는 기능(lib)들이 여기 들어갑니다.
• 비유: 학교 정문에 있는 카드 리더기의 전선이나 센서 같은 거예요. 누가 쓰든 상관없는 가장 기초 부품이죠.

2. 👤 Entities (데이터/정보): "나의 학생증" (entities/session 또는 user)

• 역할: '나'에 대한 정보를 담고 있는 곳입니다.
• 내용: "지금 로그인된 사용자가 누구지?", "아이디는 뭐고 이름은 뭐지?" 같은 데이터와 상태를 관리합니다. 여기서 중요한 건, 여기선 **로그인 버튼을 누르는 동작(Action)**은 다루지 않아요. 오직 **정보(Data)**만 다룹니다.
• 비유: 주머니 속의 학생증입니다. 학생증은 가만히 있어도 내 이름과 학번을 보여주죠? "내가 누구인가"를 증명하는 핵심 데이터입니다.

3. ⚙️ Features (기능/동작): "출입 게이트 통과하기" (features/auth)

• 역할: 사용자가 실제로 하는 행동을 다룹니다.
• 내용: 로그인 폼(아이디/비번 입력), 로그인 버튼 클릭, 회원가입 처리 같은 비즈니스 로직이 여기 들어갑니다. 여기서 2번(Entities)의 정보를 업데이트합니다.
• 비유: 정문에서 카드를 찍고 **"삐빅, 문이 열립니다"**라고 작동하는 게이트 시스템입니다. 내가 행동을 해야 반응하는 부분이죠.

4. 🧩 Widgets (조립된 덩어리): "교무실 앞 게시판" (widgets/header)

• 역할: 위의 정보와 기능을 합쳐서 화면에 크게 보여주는 덩어리입니다.
• 내용: 웹사이트 상단 메뉴(Header)를 생각해보세요. 로그인을 안 했으면 '로그인 버튼'을 보여주고, 로그인을 했으면 '내 프로필 이미지'를 보여줘야겠죠? Entity(내 정보)를 확인해서 Feature(로그인/로그아웃)를 적절히 보여주는 곳입니다.
• 비유: 학교 복도의 전자 게시판입니다. 선생님이 지나가면 선생님 공지사항이, 학생이 지나가면 급식 메뉴가 뜨는 것처럼 상황에 맞춰 덩어리들을 보여줍니다.

5. 🛡️ App (규칙과 보안): "학교 규칙" (app/providers)

• 역할: 앱 전체에 적용되는 규칙을 정합니다.
• 내용: "로그인 안 한 사람은 마이페이지에 들어갈 수 없어!" 같은 보호막(Router Guard) 역할을 합니다.
• 비유: 학교의 선도부 형/누나들입니다. "여기서부터는 학생증 없으면 못 들어가!"라고 막아주는 역할을 하죠.

---

💡 핵심 요약: 왜 이렇게 쪼개나요?

보통 초보 때는 Auth라는 폴더 하나에 로그인 화면, 내 정보 관리, 서버 통신 코드를 다 때려 넣습니다. (이걸 '스파게티 코드'라고 해요 🍝).

하지만 FSD 방식대로 나누면 장점이 생깁니다:

1. 재사용성: "내 정보(Entity)"는 로그인 페이지뿐만 아니라, 마이페이지나 결제 페이지에서도 가져다 쓸 수 있습니다.
2. 수정의 편리함: 로그인 디자인을 바꾸고 싶으면 Widget이나 Feature만 건드리면 됩니다. 데이터(Entity)는 건드릴 필요가 없죠.
3. 명확함: "로그인이 안 되네?" 하면 Feature를 보면 되고, "내 이름이 잘못 뜨네?" 하면 Entity를 보면 됩니다.

📝 한 줄 정리

"로그인 기능을 통째로 만들지 말고, 내 정보(Data)와 로그인 동작(Action)과 화면(UI)을 레고 블록처럼 따로 만들어서 조립해라!"

이것이 해당 문서가 말하는 가장 중요한 핵심입니다.

 

* 본 문서는 google ai studio로 생성되었습니다.