프론트엔드에서 비즈니스 로직과 뷰 로직 분리하기 (feat. MVI 아키텍쳐)

프론트엔드 아키텍쳐의 변화

프론트엔드 아키텍쳐의 변천사 8줄 요약

1. HTML, CSS, JS의 탄생 → 관심의 분리와 느슨한 결합
2. JQuery 의 시대 → 일단 DOM 을 쉽게 접근해 사용하자
3. HTML + JS 를 합치는게 더 낫던데? → MVC 컴포넌트 방식의 탄생
4. 선언적으로 만들자. → 데이터 바인딩 + 템플릿 → MVVM 웹 프레임워크 춘추전국시대
5. 컴포넌트간 데이터 교환이 너무 복잡해요 → Container - Presenter 방식
6. Props Drill 문제 어떻게 할거임? (너무 깊은 Component) → FLUX와 Redux
7. 너무 복잡한데? → hooks 와 context, Recoil, Zustand, jotai
8. 어차피 대부분 서버 API 를 관리하려고 쓰는거 아님? → React Query, SWR, Redux Query

1. HTML, CSS, JS의 탄생 - 관심의 분리와 느슨한 결합

HTML 과 JS, 그리고 CSS 가 순서대로 탄생했고, 각자의 방식대로 성장하게 되었다.