youtube
https://www.youtube.com/watch?v=pnMyvVK4B9E&t=25s 잘 정리된 강의 번역
00:00 ~ 0:21
웹 개발을 하고 계시고, 더 효율적이고 편리한 애플리케이션을 만드는 방법을 고민하고 있다면, 당신은 올바른 곳에 오셨습니다. 안녕하세요, 개발자 여러분! 오늘 우리는 두 가지 최고의 프로젝트 구성 방식을 깊이 있게 탐구할 예정입니다. 이 방법들은 오직 프론트엔드 개발에만 적용되며, 백엔드에서는 사용하지 않는 것이 좋습니다. 백엔드에는 그에 맞는 대안들이 있기 때문입니다. 여기서는 핵심 내용만 다룰 테니, 즐거운 학습이 되길 바랍니다!
0:21 ~ 1:00
학습을 시작하면서, 먼저 더 복잡한 방법론을 살펴보겠습니다. 이 방법론은 개발자들 사이에서 신뢰성과 우수한 확장성으로 입증되어, 대부분의 프로젝트에 적합합니다. 이미 Yandex, Foxford와 같은 대형 회사의 프론트엔드 개발자들이 이 방법론을 사용하고 있습니다.
Feature Sliced Design이라는 프로젝트는 레이어(layers)로 구성됩니다. 각 레이어는 슬라이스(slices)를 포함하며, 슬라이스는 다시 세그먼트로 나뉩니다. 이 개념이 약간 혼란스러울 수 있으니 차근차근 설명하겠습니다. 레이어는 애플리케이션의 상위 디렉토리, 즉 폴더 구조를 의미합니다.
1:00 ~ 1:24
애플리케이션의 각 레이어는 src 디렉토리 안에 배치됩니다. 현재 애플리케이션은 7개의 레벨로 나뉘어 있으며, 각 레벨은 고유한 역할을 수행합니다. 이 레벨들은 App, processes, pages, Widgets, features, entities, shared로 구성됩니다.
App: 애플리케이션의 설정을 포함하는 레이어입니다. 이 레이어는 애플리케이션이 제대로 동작하기 위해 필요한 중요한 컴포넌트들을 담고 있습니다. 예를 들어, 스타일이나 프로바이더 같은 것들이 여기에 포함됩니다.
1:26 ~ 1:50
process 레이어는 선택적이며, 여러 페이지에 걸쳐 실행되는 프로세스를 포함합니다. 예를 들어, 마켓플레이스에서 새로운 운동화를 구매할 때의 과정을 생각해 보세요. 먼저 상품을 장바구니에 넣고, 그다음 결제 페이지로 이동한 후, 마지막으로 성공적인 결제를 알리는 페이지로 이동합니다. 이러한 과정들이 모두 process 레이어에 포함됩니다.
1:53 ~2:30
pages 레이어는 애플리케이션의 완전한 페이지들을 포함하는 레이어입니다. 예를 들어, VK의 뉴스 피드, YouTube의 메인 페이지, Azone의 결제 페이지 등이 여기에 해당합니다. 이 레벨의 각 페이지는 가능한 단순한 로직을 포함해야 하며, 이후 설명할 컴포넌트들로 구성됩니다.
Widgets는 독립적인 블록들을 포함하는 레이어로, features, entities, 그리고 shared 레이어에서 가져온 요소들로 구성됩니다. 예를 들어, 헤더, 메시지 창, 상품 카드 등이 여기에 포함됩니다. 페이지를 보면, 이러한 독립적인 블록들을 쉽게 구분할 수 있습니다.
2:33 ~ 3:33
features는 사용자가 사이트에서 수행하고자 하는 중요한 행동들을 포함합니다. 예를 들어, 사용자가 이 비디오에 좋아요를 누르거나 피드백을 댓글로 남기는 것, 또는 Azone에서 상품을 장바구니에 담는 행위가 모두 features에 해당합니다.
entities는 애플리케이션에 고유한 객체들을 포함하는데, 이는 애플리케이션의 성격에 따라 달라집니다. 예를 들어, 소셜 네트워크를 만든다면 중요한 entities는 사용자와 게시물이 될 것입니다. 마켓플레이스에서는 상품이 entities가 되며, 뉴스 사이트라면 당연히 뉴스가 해당됩니다. 이 모든 것들이 entities에 속하는 중요한 요소들입니다.
shared 레이어는 주로 유틸리티 함수나 커스텀 훅과 같은 재사용 가능한 요소들을 포함합니다. 이제 소셜 네트워크 페이지를 예시로 들어서, 각 요소들이 어떻게 레이어로 분리되는지 살펴보겠습니다. 이를 통해 각 레이어가 어떻게 작동하는지 더 명확하게 이해할 수 있을 것입니다.
3:37 ~ 4:22
이제 페이지의 요소들을 레이어별로 나누어 설명하겠습니다. 아래로부터 위로, 즉 shared 레이어에서 시작해 App 레이어까지 다룰 것입니다.
shared 레이어는 재사용 가능한 요소들을 포함합니다. 여기에는 버튼, 다이얼로그 창, 입력 필드, 체크박스, 그리고 다양한 타입들이 있습니다. 페이지를 보면 가장 먼저 두 개의 버튼이 눈에 띕니다. 이 버튼들은 shared 레이어에 포함될 수 있습니다.
또한, 아이콘들도 shared 레이어에 속합니다. 예를 들어, '좋아요' 아이콘과 댓글 작성 아이콘 같은 요소들이 여기에 해당합니다. 이처럼 재사용 가능한 컴포넌트는 모두 shared 레이어로 분류됩니다.
shared 레이어에는 글꼴도 포함될 수 있습니다. 즉, 글꼴은 타이포그래피 컴포넌트로 정의되어 shared 레이어에 배치됩니다.
4:24 ~ 5:05
다음으로 entities 레이어로 넘어가 보겠습니다. entities는 애플리케이션에서 중요한 객체들을 포함합니다. 예를 들어, 소셜 네트워크 페이지를 보면, 사용자가 바로 하나의 중요한 entity입니다. 사용자는 친구 목록, 가입한 그룹, 게시한 사진, 작성한 게시물 등을 가지고 있습니다. 이러한 모든 것들이 entities 레이어에 속합니다.
그러나 페이지의 모든 블록이 entities로 분류되지는 않으며, 해당 레이어에 속하는 항목들을 잘 구분해 정리하는 것이 중요합니다.
05:09 ~ 05:34
features 레이어는 사용자가 수행할 수 있는 유용한 행동들을 포함합니다. 예를 들어, 사용자를 친구로 추가하거나, 메시지를 보내고, 게시물을 작성하거나 댓글을 남기는 등의 행동이 모두 features에 속합니다.
05:34 ~ 6:13
Widgets 레이어는 독립적인 블록들로, 하위 레이어에서 가져온 요소들로 구성됩니다. 페이지를 보면, 쉽게 Widgets를 구분할 수 있습니다. 예를 들어, 그룹, 친구 목록, 사진 등 각각이 독립적인 위젯으로 구분됩니다. 각 게시물도 위젯에 해당합니다. 따라서 이 모든 요소들은 Widgets 레이어로 옮길 수 있습니다.
참고로, 이전에 shared 레이어로 옮겼던 '좋아요' 아이콘을 기억하실 겁니다. 이 아이콘은 재사용 가능한 요소로 shared에 속하지만, 그것을 사용하는 실제 위젯은 Widgets 레이어에 속하게 됩니다.
6:19 ~ 7:00
pages 레이어는 애플리케이션의 완전한 페이지들을 포함합니다. 이 레이어는 위젯들로 구성되어 있으며, 복잡한 로직을 포함해서는 안 됩니다. 따라서 페이지 전체를 pages 레이어로 옮길 수 있습니다.
마지막으로, App 레이어에 대해 간단히 설명드리겠습니다. App은 애플리케이션의 설정을 포함하는 레이어로, 애플리케이션이 올바르게 작동하기 위해 필요한 요소들을 담고 있습니다. 예를 들어, 글꼴, 라우터 설정, Redux 설정, 레이아웃, 전역 스타일 등이 이 레이어에 속합니다. App 레이어는 애플리케이션의 기본 구조를 관리하는 중요한 역할을 합니다.
7:03 ~ 7:51
슬라이스(slices)는 레이어의 하위 디렉토리로 존재하며, 프로젝트의 스택에 따라 달라집니다. 각 슬라이스는 특정 기능에 대응하며, 특정 레이어에 종속되지 않습니다.
예를 들어, App 레이어는 애플리케이션의 초기화와 정적 리소스를 관리하는 레이어로, 슬라이스는 포함되지 않습니다.
반면, process 레이어는 여러 페이지에 걸친 작업 흐름을 다루는 슬라이스를 포함합니다. 예를 들어, 결제와 같은 작업을 처리하는 슬라이스가 여기에 속합니다.
pages 레이어는 애플리케이션의 전체적인 페이지 구조를 구현하는 슬라이스를 포함합니다. 이러한 슬라이스는 페이지의 전체적인 로직과 UI를 담당하며, 애플리케이션의 다양한 페이지를 구성합니다.
7:51 ~ 8:18
우리는 pages 레이어에서 슬라이스를 통해 다양한 UI 요소들을 제공합니다. 예를 들어, 독립적인 사용자 인터페이스를 구성하는 슬라이스에는 채팅 창(Chat Window), 헤더(Header), 툴바(Toolbar) 등이 포함됩니다.
features 레이어에는 사용자 시나리오를 구현하는 슬라이스가 포함됩니다. 예를 들어, 좋아요(Like), 게시물 작성(Create Post) 등이 여기에 해당합니다.
entities 레이어는 애플리케이션의 비즈니스 로직과 관련된 주요 블록을 담당하는 슬라이스를 포함합니다. 예를 들어, 사용자(User), 게시물(Post) 등이 해당됩니다.
08:22 ~ 09:01
shared 레이어는 추상적인 세그먼트들을 포함하는 레이어로, 특정 비즈니스 로직을 직접적으로 담고 있지는 않습니다. 이 레이어는 주로 재사용 가능한 추상화된 컴포넌트들을 다룹니다. 따라서 이 레이어에는 비즈니스 로직을 직접 배치할 수는 없습니다.
비즈니스 로직은 더 작은 모듈과 세그먼트로 나뉘며, 이를 통해 각 슬라이스를 구성할 수 있습니다. 여기에서는 유연성을 발휘할 수 있으며, 필요한 세그먼트를 추가하거나 불필요한 것은 제거할 수 있습니다.
React를 처음 배우는 사람들에게는 이러한 내용이 다소 복잡하게 느껴질 수 있지만, 지금은 깊이 파고들지 말고 천천히 익숙해지는 것이 좋습니다.
09:03 ~09:37
UI 세그먼트는 사용자가 페이지에서 보는 사용자 인터페이스를 포함합니다. 이는 사용자가 상호작용하는 모든 화면 요소를 담당합니다.
모델 세그먼트는 사용자에게 가치 있는 로직을 포함하며, UI 세그먼트와 상호작용하는 기능을 제공합니다. 여기에는 다양한 동작, 이펙트, 리듀서 등이 포함될 수 있습니다.
라이브러리 세그먼트는 슬라이스에 필요한 보조 함수나 유틸리티들을 포함하며, 슬라이스의 원활한 동작을 지원합니다.
마지막으로, 설정 세그먼트는 슬라이스의 설정 관련 로직을 포함하고 있으며, API 세그먼트는 서버와의 통신을 담당하는 로직을 포함합니다.
09:40 ~ 10:00 마지막으로, FSD 디자인을 올바르게 사용하려면 각 슬라이스와 세그먼트에 공용 API가 있어야 한다는 점을 알아야 합니다. 즉, 프로젝트의 다른 부분에서 이들을 사용하기 위해 내부 환경에 접근할 수 있는 진입점을 제공해야 합니다.
10:03 ~ 10:22
예를 들어, 인증 기능을 만들었다고 가정해 봅시다. 이 기능 안에 UI 세그먼트와 모델 세그먼트를 생성했다고 할 때, 이 두 세그먼트를 임포트하려면 다음과 같은 코드를 작성해야 할 것입니다.
이러한 임포트가 많아질 수 있으며, 프로젝트의 여러 다른 부분에서 사용될 수 있습니다. 그런데 만약 이 모듈들을 리팩토링하게 된다면, 각 부분마다 임포트를 변경하는 것은 매우 번거로운 작업이 될 수 있습니다.
10:25 ~ 10:45
모듈들을 리팩토링할 때 각 부분에서 임포트를 변경하는 것은 매우 번거로울 수 있습니다. 그래서 우리는 모든 임포트를 한 곳에 모아서 관리할 독립적인 장소가 필요합니다. 그 장소가 바로 index 파일입니다.
index 파일을 만들어서 필요한 모든 구성 요소들을 그 안에 모아둡니다. 그런 다음, 프로젝트의 다른 부분에서 이 index 파일을 통해 필요한 슬라이스나 세그먼트를 쉽게 임포트할 수 있게 됩니다.
10:47 ~ 11:01 이렇게 index 파일을 사용하면, 프로젝트 전반에서 임포트를 훨씬 더 편리하게 관리할 수 있습니다. 이제 모든 것이 깔끔해졌을 뿐만 아니라, 모듈을 리팩토링할 때도 안전합니다. 앞으로는 변경 사항을 index 파일에만 적용하면 되기 때문입니다.
Last updated