[부스트캠프 웹・모바일 7기 Tech Talk] 발표자 : 안병준 캠퍼

1. ⓒ NAVER Connect Foundation
프론트엔드, 어쩌다 여기까지?...
부제) 프론트엔드 트렌드의 변화
2022.10.20
작성자 : J109 안병준

2. ⓒ NAVER Connect Foundation
1. HTML CSS JS
# 정적인 페이지와 동적인 움직임
2. jQuery의 등장
# 데이터를 DOM으로
# DOM을 쉽게 사용해보자.
3. 컴포넌트의 탄생
# 데이터 조작과 DOM 조작을 하나로
# HTML + JS
4. 템플릿 HTML 과 데이터 바인딩
# 데이터 변경? => 화면 변경!
# React, Vue, Angular
2
5. Container – Presenter 패턴
#로직과 화면의 분리
6. FLUX 패턴
# Props Drilling 어떡하지?
7. Hooks Context Recoil Zustand Jotai
# 더 쉽게
# 더 간결하게
8. React Query, SWR, RTK Query
# 클라이언트 상태관리 이게 맞나?
# 어차피 다 서버 상태 아닌가요?

3. ⓒ NAVER Connect Foundation
CHAPTER 1.
HTML, CSS, JS
정적인 페이지와 동적인 움직임

4. ⓒ NAVER Connect Foundation 4
# 정적인 페이지와 동적인 움직임
정적인 페이지 동적인 움직임

5. ⓒ NAVER Connect Foundation
CHAPTER 2.
jQuery 의 등장
DOM 사용을 더 쉽게

6. ⓒ NAVER Connect Foundation 6
# Ajax의 등장과 jQuery
AJAX
AJAX, DOM 조작

7. ⓒ NAVER Connect Foundation
CHAPTER 3.
컴포넌트의 탄생
데이터 조작과 DOM 조작은 한 곳에서

8. ⓒ NAVER Connect Foundation 8
# 데이터 조작과 DOM 조작을 한 곳에서
Page Component
Component

9. ⓒ NAVER Connect Foundation
CHAPTER 4.
탬플릿 HTML과 데이터 바인딩
웹 프레임워크 전성 시대

10. ⓒ NAVER Connect Foundation 10
# 데이터 바인딩과 탬플릿 HTML
Data View
React Vue
Angular
HTML 탬플릿과 데이터 바인딩

11. ⓒ NAVER Connect Foundation
CHAPTER 5.
Container–Presenter 패턴
로직과 화면의 분리

12. ⓒ NAVER Connect Foundation 12
#로직과 화면의 분리
Component
복잡도 재사용성
Container
Presenter
Props

13. ⓒ NAVER Connect Foundation
CHAPTER 6.
FLUX 패턴
Props Drilling을 해결해보자

14. ⓒ NAVER Connect Foundation 14
# Props Drilling 을 해결해 보자
A
B
D
C
Action
Action
Dispatcher Store View
Redux Vuex Mobx

15. ⓒ NAVER Connect Foundation
CHAPTER 7.
Hooks Context Recoil Zustand
Jotai
더 쉽게, 더 간결하게 사용하자

16. ⓒ NAVER Connect Foundation 16
# 더 쉽게, 더 간결하게
너무 많은 코드량
과한 문법 체계

17. ⓒ NAVER Connect Foundation
CHAPTER 8.
React Query, SWR, RTK Query
어차피 서버 상태 아닌가요?

18. ⓒ NAVER Connect Foundation 18
# 어차피 다 서버 상태 아닌가요?
Store는 클라이언트 전역 상태를 관리해야 하는데,
상태관리보다는 API 통신?
웹의 특성상 데이터의 보관, 조회, 수정이 서버에서 이루어짐
비즈니스 로직은 대부분 서버에 보관
반복되는 API 관련 상태
비슷한 구조의 API 통신 코드
그렇다면, 전역 스토어에서 상태 관리를 통해 비즈니스 로직을 관리 하는 게 아니라,
서버와 직접 연동을 하면서 상태 관리를 하면 되는 거 아닌가?
Fetching
Fresh
Stale
Inactive Deleted

19. ⓒ NAVER Connect Foundation 19
Thank
You

20. ⓒ NAVER Connect Foundation 20
Reference
테오의 프론트엔드
프론트엔드에서 비즈니스 로직과 뷰 로직 분리하기 (feat, MVI 아키텍쳐)
https://velog.io/@teo/MVI-Architecture
whitebear
[WEB] 프론트엔드 웹의 발전 과정 | HTML CSS JAVASCRIPT
https://white-world.tistory.com/48

21. ⓒ NAVER Connect Foundation 21
Q&A