FE 인싸들이라면 알고 있어야 하는 프레임워크 기술들
2019년 FE 프레임워크를 배우는 기분(FE 인싸들이라면 알고 있어야 하는 프레임워크 기술들)
NAVER Engineering
tv.naver.com
모던 프론트엔드 개발에서 기본적으로 알고 있어야 하는 개념 혹은 모던 프레임워크들의 특징에 대해 한 번씩 짚고 넘어갈 수 있는 영상이다. 또한 새로운 기술에대한 교훈을 주는 영상이기도 하다.
1. 프레임워크의 분류
프레임워크는 얼마 만큼의 작업영역을 프레임워크가 처리하는지에 따라 분류할 수 있다.
React: Small Scope
>프레임워크가 비교적 적은 영역을 처리한다.
>단순한 컨셉과 유연성 -> 활발한 생태계
>작은 메인터넌스 영역(개발자가 작은 단위로 개발/유지보수 가능) -> 개발팀이 새로운 아이디어 구현에 집중하게함
-단순한 컨셉은 오히려 복잡한 문제 해결에 많은 작업 필요
-일부 아키텍처들은 시간이 지남에 따라 필수 요소가됨(ex. React 개발 시 Redux, CSs in JS 필수)
-생태계가 너무 빠르게 발전하여 파편화 발생(수 많은 관련 라이브러리에서 알맞은 라이브러리 고르기 쉽지 않음)
Angular: Large Scope
>일반적인 문제들은 빌트인을 통해 해결(프레임워크 안에 이미 해결방법이 있음)
>중앙 집중화식 디자인 -> 일관성 유지
-높은 학습비용
-빌트인 해결책이 사용자 상황이 맞지 않을 수 있음
-새로운 core적/fundamental인 아이디어에 대해 도입비용이 높아짐
2. 프레임워크의 요소
(Functional)Reactivity: 시간에 따라 변화하는 데이터에 대한 것. 사용자의 입력에 최대한 빠르게 응답
Observableity: 특정 값이 변했을 때 자동으로 반응하는 것
3. Loading/Build
Code Splitting: 초기 번들사이즈를 줄이고 분할된 파일들의 점진적 로딩 전략
분리 기준: 벤더(lodash, React) / 엔트리 포인트 / 다이나믹(import) / 라우팅
Tree Shaking: 실제 사용되는 코드만 번들링하고 불필요한 코드는 제거
DIfferential Loading: 2개의 빌드를 생성하고 모던 / 레거시로 나누는 전략.
-서비스가 모든 브라우저를 지원할 때 A브라우저에 필요한 Polyfill이 B브라우저에는 필요없으므로 2개를 따로 빌드
4. Rendering
렌더링 시점을 앞당기거나 비용을 줄여야 한다.
SSR: 초기 화면 구성에 필요한 코드를 서버에서 미리 렌더링하여 전달한다. -> 초기 페이지 로딩 속도 빠름
CSR: 필요한 컴포넌트만 전달한다.
렌더링 기법: Server Rendering > Static SSR > SSR with (Re)hydration > CSR with Prerendering > Full CSR
5. Virtual DOM(VDOM)
JavaScript 객체로 표현된 DOM(UI 표현식) 구조
React에서는 데이터(모델) 변경 시 실제 DOM트리와 VDOM을 비교하여 업데이트가 필요한 부분만 렌더링한다.
Diffing: 실제 DOM 트리와 VDOM 트리의 다른 점을 찾기위한 탐색과정
-상태가 변경되면 매번 모든 UI에 대한 디핑작업을 수행해야한다.
Reconcilitation: React Diffing과정에서 사용되는 알고리즘 참고
Time Slicing: 특정 작업이 전체 앱을 블럭하지 않도록 작업을 잘게 나누어 처리
-JS는 Single Thread이므로 어떤 작업이 진행중이라면 새로운 작업은 현재 작업이 완료될 때까지 실행 불가능
-Diffing작업은 Time Slicing이 적용하여 성능개선
6. Scheduling
React에서 setState()호출 시 즉시 실행되는 것이 아니라 가장 이상적인 시점에 UI를 업데이트 하게 됨
방법
-Push Based: 개발자가 직접 실행시점 지정
-Pull Based: 프레임워크가 알아서 실행시점 지정
우선순위: 이벤트처리 vs 데이터 구독(Redux) vs 애니메이션
-사용자 경험을 해칠 수 있는 애니메이션의 우선순위를 높여 처리하자.
-애니메이션이 끊기는 경우 사용자는 성능에 대한 의심을 할 수밖에 없음
우선순위 동시성: 우선순위가 낮은 작업을 진행 중에 높은 순위 작업이 들어온 경우
-낮은 순위 작업 일시 중지 > 높은 순위 처리 > 중단된 작업으로 돌아가 나머지 처리
-React 작업중지 = 함수 호출을 일시 중지한다.
-React는 이를 위한 가상 stack 프레임이 구현되어있음
7. Template Compilation
SVELTE: 컴파일러가 훌륭한 사용자 경험 코드를 생성할 수 있다는 주장. 효율적 명령 코드로 변환하여 DOM 업데이트
-VDOM의 diffing이 필요없음. 컴파일을 통해 빌드 시간에 앱에서 변경사항이 어떻게 발생했는지 알고있음.
8. 효율적 코드 작성
React Hooks: 특정 위치의 코드의 실행을 낚아 채 다른 동작을 하도록 만든다.
-> 훨씬 간결한 코드 작성 가능
9. CLI
최근 라이브러리들은 CLI를 거의 지원하고 있음
-commander.js 라이브러리를 이용하여 CLI를 지원구현
10. 컴포넌트 구조 기반 설계
CBD: 컴포넌트를 조립해서 하나의 새로운 애플리케이션을 만드는 소프트웨어 개발 방법론
-컴포넌트 기반 설계는 새로운 것이 아니라 이미 있던 방법이다.
11. 정적 타입 시스템
TS의 성장 요인
-JS의 슈퍼셋으로 문법적 차이가 거의 없음 -> 학습 비용 절감
-사용자가 타입 사용여부 결정 가능(반드시 모든 요소를 타입을 사용할 수 있는 것은 아님)
-강력한 도구와 생태계: VSCODE, DefiniteTyped(TS 라이브러리 대부분이 타입정의파일 제공)
12. 오늘날 모던 프레임워크 구성셋
- CLI
- 상태 관리자
- 라우터
- SSR / 정적 사이트 개발 도구
- Universal Framework
- 네이티브앱(Desktop / Mobile) 개발도구
13. Universal Framework
-Next.js, Nuxtjs, nest
- SSR
- Routing
- Static file Serving
- Automatic Code Splitting
- Built-in CSS: CSS-in-JS, styled-jsx(분리된 CSS 스코프)
14. RFC(Request For Comments)
프레임워크에 대해 자유롭고 투명한 기능 제안과 토론 -> 향후 프레임워크의 개발 방향성을 미리 엿볼 수 있음
React Native: 사용자 피드백을 듣고 엔지니어들이 코멘트를 달아줌
-이러한 점이 개발 스택으로 React Native를 쓰는 이유가 될 수도 있다.
이 영상은 각 기술들에 대해 짚고 넘어가는 부분도 좋지만 결론이 더 중요하다고 본다. 영상의 처음은 '요즘 FE 개발 트랜드가 대체 뭘까? 요즘엔 새로운 프레임워크를 배우는 것에 대한 피로감이 심해서 급기야 남들 하는대로 따라하기가 최고의 전략이 되고 있는 실정' 로 시작한다. 그러나 영상의 마지막에는 지금까지 설명한 모던 프레임워크 특징을 과거와 비교하며 이는 반전된다. 사실 SSR은 웹의 등장, ASP, JSP시대 때부터 있는 개념이다. 과거 야후는 HTTP요청을 줄이기 위해 여러 스크립트를 하나로 합치라는 주장을 했다. 또한 과거에는 인라인 이벤트 바인딩은 UI와 JS가 섞여있으므로 불편한 패턴이라 생각하기도 하였다. 그러나 지금은 반대로 CodeSplitting으로 스크립트를 분리하고, 디테일한 처리방법은 다르지만 CSS-in-JS라는 방법으로 UI와 JS가 섞여있는 형태로 코드를 작성한다. 즉, 새로운 정의, 용어, 기술이 등장하지만 알고보면 원래 있던 것에 새로운 이름을 붙인 것뿐이라는 점이다. 이와 비슷하게 최근 모든 라이브러리가 CLI를 지원하는 것도 그렇다. CLI가 불편해서 GUI가 나온건데 우리는 다시 CLI로 회귀하고 있다. 패션이 돌고 도는 것처럼 말이다. 개발자는 계속 새로운 기술이 나오기 때문에 평생 공부해야해서 힘들다는 인식이 있는데, 꾸준히 개발 공부를 하다보면 새로운 기술에 대해 두려움과 피로감보다 익숙함이 느껴지는 시점이 오지 않을까 하는 생각이 든다.