"모던 프론트엔드" 에 대해

 

---

 

 

 

회사에서 담당하는 서비스는 Vue.js 를 사용하고 있다. 같은 프론트엔드 팀의 다른 서비스를 맡고 있는 팀원들은 React 를 사용하고 계시다. 담당하는 서비스가 다르더라도 매주 수요일마다 프론트엔드 세션을 하는데 이해도를 높이기 위해서 나름대로 둘 다 스위칭이 가능할 정도로 학습이 필요하다고 생각했다. 

더 나아가 왜 이러한 프레임워크를 사용하며, 그 전에 바닐라 자바스크립트, HTML, CSS 기본이 되는 것들을 잘 이해한다면 어느 프레임워크를 사용하던지 잘 적응이 될거라 믿는다.  

그런 점에서 프론트엔드 생태계에서 롱런하기 위해 프레임워크 같은 도구에 너무 매몰되지 말아야 한다.

 

 

 

---

 

 

﹆﹆ 모던 프론트엔드 란?

 

dfdfddfddsfsdfdsfsdfdd

 

코파일럿 에게 물어보길

"Modern Frontend"는 일반적으로 Frontend 웹 개발에 사용되는 현재의 관행, 기술 및 도구를 의미합니다. 여기에는 웹팩, 바벨 및 npm과 같은 도구와 함께 React, Angular 또는 Vue.js와 같은 최신 자바스크립트 프레임워크 및 라이브러리 사용이 포함됩니다. 또한 반응형 디자인, 진보적인 웹 앱, 사용자 경험 및 성능에 대한 초점과 같은 개념이 포함됩니다. 저는 AI 프로그래밍 비서이며 제 전문 지식은 소프트웨어 개발 주제에 엄격히 제한되어 있습니다.

 

라고 한다.

 

chat gpt v3.5 에게 물어보면, 

"현대 프론트엔드"는 최신의 웹 개발 기술과 트렌드를 활용하여 사용자 경험을 향상시키고 웹 애플리케이션을 구축하는 것을 의미합니다. 이는 Vue.js, React, Angular와 같은 현대적인 프레임워크 또는 라이브러리를 사용하여 웹 애플리케이션을 개발하고, 반응형 디자인, SPA(Single Page Application), 모바일 친화적인 디자인 등의 기술을 적용하여 사용자에게 최적화된 경험을 제공하는 것을 중요시합니다. 또한, 최신 웹 표준과 웹 성능 최적화 기술에 대한 이해도가 필요합니다.

 

 

 

 

﹆﹆ 사용시 장점??

﹅ 렌더링 퍼포먼스 개선  ⚙︎ Virtual DOM

 

전체 프로세스를 비효율적으로 만드는 것은 직접적인 DOM조작만이 아니다. 그 후에 일어나는 일이다.

Virtual DOM 의 필요성을 이해 하기 위해 선행적으로 브라우저에서 어떻게 일어나는 지 알아야 한다. 

 

 

 

 

 

 

 

 

브라우저의 작업 흐름

 

1️⃣ DOM 트리 생성

브라우저가 HTML 파일을 수신하면 렌더링 엔진은 이를 구문 분석하고 HTML 요소와 일대일 관계를 갖는 노드의 DOM 트리를 생성한다. 

 

2️⃣ 렌더 트리 생성

동시에 외부 CSS 파일의 스타일과 요소의 인라인 스타일이 모두 구분 분석된다. 스타일 정보는 DOM 트리의 노드와 함께 렌더 트리라는 또 다른 트리를 만드는데 사용된다. 

 

- WebKit 에서는 노드의 스타일을 해결하는 프로세스를 "attachment" 라고 한다. DOM트리의 모든 노드에는 계산된 스타일 정보를 가져오고 렌더 객체(렌더러) 를 반환하는 "attach" 메서드가 있다.

- 연결은 동기식이며 DOM 트리에 노드를 삽입하면 새 노드 "연결" 메서드를 호출한다

- 이러한 렌더 객체로 구성딘 렌더 트리를 구축하려면 각 렌더 객체의 시각적 속성을 계산해야 한다. 이는 각 요소의 계산된 스타일 속성을 사용하여 수행된다.

 

3️⃣ 레이아웃 (리플로우 라고도 함)

렌더 트리가 구축되 후에는 "레이아웃" 프로세스를 거친다. 렌더 트리의 모든 노드에는 화면 좌표, 즉 화며에 나타나야 하는 정확한 위치가 제공된다. 

 

4️⃣ 페인팅

- 렌더 객체를 그린다. 렌더 트리를 탐색하고 각 노드의 "paint()" 메서드를 호출하여(브라우저의 플랫폼에 구애받지 않는 UI 백엔드 API 를 사용하여) 궁극적으로 콘텐츠를 화면에 표시한다.

 

 

따라서 위의 단계 흐름에서 볼 수 있듯이 DOM 을 변경할 때마다 흐름의 모든 다음 단계는 렌더 트리 생성부터 바로 수행된다. (모든 요소의 모든 스타일 속성을 다시 계산해야 한다) 레이아웃, 페인팅 단계까지 모두 다시 수행된다.

 

많은 수의 DOM 조작이 포함되는 복잡한 SPA 에서 이는 전체 프로세스를 비효율적으로 만드는 여러 계산 단계를 의미한다.

 

🔅 Virtual DOM 추상화 : 실제 DOM 에서 수행될 것으로 예상되는 모든 변경 사항은 먼저 Virtual DOM 에서 수행된 다음 실제 DOM으로 전송되므로 관련된 다음 계산 단계 수가 줄어든다. 

 

 

 

 

Virtual DOM

Virtual DOM 은 실제로 새로운 것이 아니지만 DOM에 "이중 버퍼링" 을 적용한 것이다.

이러한 변경은 각각 별도의 오프라인 DOM 트리에서 수행된다. 이것은 전혀 렌더링되지 않으므로 변경 비용이 저렴하다.  그런 다음 해당 변경 사항을 "실제 DOM에 덤프한다". 한 번만 수행하면 모든 변경 사항이 1로 그룹화 된다. 레이아웃 계산 및 재렌더링은 더 커지지만 한 번만 수행된다. 즉, 모든 변경 사항을 하나로 그룹화하면 계산이 줄어든다. 

 

그러나 실제로 이 특정 동작은 가상DOM 없이도 달성할 수 있다. DOM 조각의 모든 DOM 수정 사항을 수동으로 그룹화한 다음 이를 DOM에 덤프할 수 있다.

 

그렇다면 Virtual DOM 은 무엇을 해결하는가?

DOM 조각 관리를 자동화하고 추상화하므로 수동으로 관리할 필요가 없다. 그 뿐만 아니라 수동으로 수행할 때는 변경된 부분과 변경되지 않은 부분을 추적해야 한다. 그렇지 않으면 DOM 트리에서 필요하지 않은 거대한 부분을 새로 고치게 되기 때문이다.(새로고침)

따라서, Virtual DOM(올바르게 구현된 경우) 도 이를 자동화하여 어떤 부분을 새로 고쳐야하고 어떤 부분을 그렇지 않은지 파악해야 한다. 

 

아래의 링크는 브라우저 엔진의 내부를 더 깊이 파고들어 설명한 글이다. 시간을 투자해서 읽어볼 가치가 있는 글이니, 꼭 읽어보길 바란다.
https://web.dev/articles/howbrowserswork?hl=ko

 

 

 

 

 

 

 

﹅ 렌더링 접근 방식 

렌더링 접근 방식 간의 차이점을 통해 페이지 성능 관점에서 웹 렌더링의 장단점을 확인할 수 있습니다.

 

 

서버 측 렌더링 (SSR) : Server-Side Rendering

클라이언트 측 앱 또는 범용 앱을 서버의 HTML 로 렌더링

- 전통적으로 페이지 렌더링 하는 방식

 

클라이언트 측 렌더링 (CSR) : Client-Side Rendering

자바스크립트를 사용해 DOM을 수정하여 브라우저에서 앱을 렌더링

- 새로고침의 최소화, 상호작용성의 향상, App-like 한 사용자 경험 등을 목적으로 구현하는 방식

 

 

SPA : Single Page Application

SPA는 수많은 웹 페이지를 로딩하더라도 최신 업데이트를 신속하게 반영하면서 페이지 로딩 속도를 향상시키고 트래픽을 줄여 부드러운 페이지 전환과 함께 업데이트가 될 때까지 기다리는 시간을 단축시켜 사용자로 하여금 높은 몰입도와 생동감을 선사하는 서버에서 "필요한 데이터만 비동기로 받아와서 동적으로 현재 화면에 다시 렌더링하는 방식을 의미" 한다.

 

'모던'한 아키텍처이자 패러다임으로 구분되지만, SEO 가 어렵다거나 무거운 javascript 번들로 인해 초기 구동 속도와 관련한 문제 등이 있다.

 

 

 

 

﹅ 컴포넌트 기반 개발

 

컴포넌트 주도 개발 = CDD (Component-Driven Development) ? 관심사, 역할에 따라 작은 단위로 분리된 컴포넌트를 중심으로 UI 빌드 프로세스를 구축하고 웹 애플리케이션을 구조화하는 개발 방법론이다. 

 

재사용성, 모듈성, 효율성, 확장성의 장점이 있다.

 

컴포넌트 기반의 프론트엔드 개발은 프로그램의 복잡성 증가와 상태 관리의 어려움, 신규 프레임워크에 대한 학습, 렌더링 이슈 등의 단점이 있음에도 애플리케이션 개발에 넓게 활용되고 있다. 개발자들에게 더 나은 개발 경험과 효율성을 제공하기 때문이다.

 

 

 

﹅ 반응형 웹 디자인 및 웹 접근성

 

반응형 웹 디자인은 다양한 디바이스와 화면 크기에 맞춰 웹사이트의 레이아웃과 콘텐츠가 자동으로 조정되는 디자인 접근 방식이다. 이는 사용자가 어떤 기기를 사용하든 최적의 사용자 경험을 제공하기 위해 필수적인 요소가 되었다.

반응형 웹 디자인은 사용자 경험을 개선하고, 웹사이트의 접근성을 높이며, 검색 엔진 최적화(SEO)에 긍정적인 영향을 미친다. 모든 사용자가 어떤 기기를 사용하든 일관된 경험을 제공함으로써, 사용자 만족도를 높일 수 있다.

 

읽을거리
Vue, 'Reactivity in Depth" 'https://vuejs.org/guide/extras/reactivity-in-depth.html

 

 

 

 

 

정리해보면, 모던프론트엔드 생태계에서 개발자가 갖추어야 하는 것은 

1. 깊은 이해와 경험: HTML, CSS, JavaScript를 비롯한 기본 웹 기술에 대한 깊은 이해와 경험이 필요하다. 또한 최신 프레임워크 및 도구에 대한 경험이 중요하다.
2. 코드 품질과 유지보수성: 깔끔하고 효율적인 코드 작성 능력은 필수적이다. 모듈화, 재사용 가능성, 그리고 테스트 가능한 코드를 작성할 수 있어야 한다.
3. 디자인 이해: UI/UX 디자인에 대한 이해가 있어야 한다. 사용자 경험을 개선하고 직관적인 사용자 인터페이스를 디자인할 수 있어야 한다.
4. 반응형 및 크로스 브라우징: 다양한 기기와 환경에서 웹 애플리케이션이 잘 작동하도록 하는 반응형 및 크로스 브라우징 기술에 대한 이해가 필요하다.
5. 프로젝트 관리 및 협업 능력: Git 및 협업 도구를 사용하여 효율적으로 프로젝트를 관리하고, 다른 개발자와 협업할 수 있는 능력이 필요하다.
6. 문제 해결 능력: 복잡한 기술적 문제를 해결할 수 있는 능력과 창의적인 사고가 필요하다.
7. 지속적인 학습과 성장: 웹 기술은 지속적으로 발전하므로, 새로운 기술 및 도구에 대한 학습과 적용 능력이 중요하다.
8. 커뮤니케이션 스킬: 개발팀 내외에서 명확하고 효과적으로 의사 소통할 수 있는 능력이 필요하다.
9. 프로젝트 관리 능력: 일정을 관리하고 우선순위를 결정할 수 있는 능력이 중요하다.
10. 시스템 아키텍처 이해: 백엔드와의 상호작용 및 전반적인 시스템 아키텍처에 대한 이해가 있어야 한다.

 

 

 

 

아래의 참고사이트들은 꼭 읽어보길 바란다. 모던 프론트엔드 개발 생태계에서 필수로 이해하고 가야할 내용들이다.  

 

 

---

출처 : 

https://saiki.hashnode.dev/the-one-thing-that-no-one-properly-explains-about-react-why-virtual-dom

The one thing that no one properly explains about React — Why Virtual DOM

https://web.dev/articles/rendering-on-the-web?hl=ko

웹에서 렌더링  |  Articles  |  web.dev

 

글이 너무 좋아 참고하게 된 velog 글 (꼭 읽어보기): 

https://velog.io/@sejinkim/%EB%AA%A8%EB%8D%98-%EC%9B%B9-%ED%94%84%EB%A1%A0%ED%8A%B8%EC%97%94%EB%93%9C%EC%9D%98-%EC%9D%B4%ED%95%B4

모던 웹 프론트엔드의 이해

 

 

모던 CSS-in-JS

https://pozafly.github.io/css/explore-how-to-apply-modern-css/

모던 CSS 적용 방법 둘러보기(CSS-in-JS with zero-runtime)