[vue] 렌더링 된 DOM에 개입하는 Vue.js

DOM(Document Object Model)이란

• DOM은 웹 개발에서 사용되는 개념이다.
• DOM은 HTML 문서의 구조를 프로그래밍적으로 조작하고 상호작용하기 위한 모델이라고 할 수 있다. DOM은 HTML 문서의 요소들을 표현하고, 이들 간의 관계를 나타낸다.
• DOM은 HTML 문서의 구조를 트리 구조로 표현한다. HTML 문서의 각 요소는 DOM에서 노드로 표현된다. 웹 페이지의 텍스트, 이미지, 링크 등도 모두 각각의 노드이다. 이러한 노드들은 계층 구조로 이루어져 있어, 부모 노드와 자식 노드 사이의 관계를 가진다.
• 자바스크립트와 같은 프로그래밍 언어를 사용하여 DOM을 조작할 수 있다. (웹 페이지의 내용을 변경하거나, 새로운 요소를 추가하거나 삭제할 수 있다.)
• 예들 들어 설명해보자면,
  HTML 문서를 레고 블록으로 만든 건물 모델이라고 한다면, 이 건물은 다양한 크기와 색상의 블록으로 구성되어 있다. 이 레고 블록들은 건물의 벽, 문, 창문 등을 나타낸다.
  이 건물을 개조하려면 원하는 레고 블록에 접근한 뒤 원하는 대로 개조해야 한다. 이때 DOM이 등장한다. DOM은 건축가의 도면과 같은 역할을 한다. JavaScript와 같은 프로그래밍 언어를 사용하면 DOM을 통해 HTML 문서의 요소들에 접근하고 변경할 수 있다. 예를 들어, 문을 열거나 창문을 추가하거나 벽의 색상을 변경할 수 있다.

 

렌더링 된 DOM

웹 브라우저는 HTML 문서를 해석하고 렌더링하여* 사용자가 볼 수 있는 웹 페이지로 표시합니다. 이 때, 웹 페이지의 시각적인 내용은 렌더링된 DOM에 기반하며, 이것이 실제로 화면에 표시되는 것입니다.
"렌더링된 DOM"은 HTML 문서를 기반으로 웹 페이지의 모양, 레이아웃, 스타일, 이미지, 텍스트 등이 어떻게 화면에 표시되는지를 나타내는 것입니다. 이것은 사용자가 실제로 보는 것과 일치하는 웹 페이지의 시각적인 표현을 의미합니다.
렌더링된 DOM은 웹 페이지가 동적으로 업데이트되거나 사용자와 상호작용하는 동안 변경될 수 있습니다. 예를 들어, JavaScript 코드를 사용하여 새로운 내용을 추가하거나 기존 내용을 변경할 때 렌더링된 DOM이 업데이트됩니다.

 

* 웹 브라우저가 렌더링 할 수 있는 이유

웹 브라우저에는 웹 페이지를 해석하고 표시하는 엔진이 포함되어 있습니다. 이 엔진은 웹 브라우저의 핵심 기능 중 하나이며, 웹 페이지의 HTML, CSS, JavaScript 코드를 처리하고 렌더링합니다. 다양한 웹 브라우저가 다른 엔진을 사용하며, 가장 널리 알려진 웹 브라우저 엔진에는 다음과 같은 것들이 있습니다:

1. **Blink**: Blink 엔진은 Google Chrome과 Opera 웹 브라우저에서 사용됩니다. 이 엔진은 웹 페이지를 파싱하고 렌더링하는 데 사용됩니다.

2. **WebKit**: WebKit은 Apple의 Safari 웹 브라우저에서 사용됩니다. 이 엔진은 HTML과 CSS를 해석하고 렌더링하는 데 사용됩니다. Google Chrome은 Blink 엔진 위에 WebKit의 일부를 사용하고 있었으나, 이후 Blink로 전환했습니다.

3. **Gecko**: Mozilla Firefox 웹 브라우저는 Gecko 엔진을 사용합니다. 이 엔진은 HTML, CSS, JavaScript를 처리하고 웹 페이지를 렌더링합니다.

4. **Trident**: Microsoft Internet Explorer 웹 브라우저는 Trident 엔진을 사용했으며, 이후에는 Microsoft Edge에서 EdgeHTML 엔진을 사용했습니다. 그러나 Microsoft Edge는 Blink 엔진으로 전환하였습니다.

이러한 웹 브라우저 엔진은 웹 페이지를 해석하고 렌더링하여 사용자가 볼 수 있는 형태로 표시합니다. 엔진은 HTML 문서를 파싱하고 DOM 트리를 생성하며, CSS 스타일을 적용하고 JavaScript 코드를 실행하여 웹 페이지의 동적 기능을 구현합니다. 엔진은 웹 브라우저의 핵심 부분 중 하나이며, 브라우저의 성능과 기능을 결정하는 중요한 역할을 합니다.

웹 브라우저가 렌더링하는 순서

웹 브라우저는 웹 페이지를 렌더링하기 위해 다음과 같은 과정을 수행합니다:

1. **HTML 해석**: 웹 브라우저는 서버로부터 받은 HTML 문서를 해석합니다. 이 HTML 문서는 웹 페이지의 구조와 내용을 정의합니다.

2. **DOM 트리 구축**: 웹 브라우저는 HTML 문서를 파싱하여 Document Object Model (DOM) 트리를 구축합니다. DOM은 HTML 요소와 그들 간의 관계를 표현하는 트리 구조로, 웹 페이지의 구조를 프로그래밍적으로 다루기 위한 모델입니다.

3. **CSS 해석**: 웹 브라우저는 HTML 문서에 포함된 CSS 스타일 시트를 해석하고, 각 HTML 요소에 대한 스타일 규칙을 적용합니다. 이로써 웹 페이지의 레이아웃과 디자인이 결정됩니다.

4. **렌더 트리 생성**: DOM 트리와 CSS 스타일 정보를 결합하여 렌더 트리(Render Tree)를 생성합니다. 렌더 트리는 실제로 화면에 표시되는 요소들을 나타냅니다.

5. **레이아웃**: 렌더 트리의 각 요소의 크기와 위치를 계산하여 웹 페이지의 레이아웃을 생성합니다.

6. **페인팅**: 화면에 표시될 부분을 그리고, 화면에 렌더링됩니다. 이 단계에서 실제로 화면에 그림을 그리는 작업이 수행됩니다.

7. **재귀적 업데이트**: 사용자와 상호작용하거나 JavaScript를 통해 웹 페이지의 내용이 변경될 때, 브라우저는 위의 과정을 다시 수행하여 변경사항을 반영하고 화면을 업데이트합니다.

이러한 과정을 통해 웹 브라우저는 HTML, CSS, JavaScript 등을 해석하고 렌더링하여 사용자가 볼 수 있는 웹 페이지를 생성합니다. 이 과정은 웹 페이지의 초기 렌더링부터 동적으로 변화하는 상황까지 반복적으로 수행됩니다.

 

렌더링 된 DOM에 개입하는 Vue.js - SPA일 경우

Vue.js는 일반적으로 "렌더링된 DOM" 뒤에 개입합니다. Vue.js는 가상 DOM(Virtual DOM)이라는 개념을 사용하여 실제 DOM을 업데이트하는 것이 아니라 가상 DOM을 업데이트하고 그 후에 실제 DOM과 비교하여 필요한 변경사항만을 최소한으로 적용합니다. 이것은 Vue.js를 렌더링된 DOM의 후 처리로 생각할 수 있습니다.

 

1. 초기 로드: SPA는 브라우저에 최초로 로드될 때 하나의 HTML 파일만 다운로드합니다. 이 HTML 파일은 애플리케이션의 기본 레이아웃 및 스크립트를 포함합니다. 이때 Vue.js 엔진도 함께 다운로드*됩니다.
2. Vue.js 초기화: HTML 파일이 로드되면 Vue.js가 초기화되고, 루트 Vue 컴포넌트가 렌더링됩니다. 이것이 SPA의 첫 번째 페이지입니다. Vue 컴포넌트는 Vue.js 엔진을 사용하여 초기 DOM을 렌더링*합니다.
3. (라우팅: SPA는 일반적으로 클라이언트 측 라우팅을 사용합니다. 사용자가 다른 페이지 또는 라우트로 이동하면 Vue.js는 필요한 컴포넌트를 동적으로 로드하고 해당 페이지를 렌더링합니다. 이때 Vue 라우터 라이브러리를 사용하여 URL과 컴포넌트 간의 매핑을 처리합니다.)
4. (상태 및 데이터 변경: SPA는 사용자와 상호작용하거나 서버로부터 데이터를 가져와서 상태를 변경할 수 있습니다. Vue.js의 데이터 바인딩 및 상태 관리 기능을 사용하여 데이터가 변경되면 Vue 컴포넌트의 화면이 업데이트됩니다.)
5. Vue 엔진 개입: Vue.js 엔진은 데이터 변경 및 라우팅 변화에 따라 가상 DOM을 업데이트하고 변경된 부분을 실제 DOM에 적용합니다. 이 과정에서 브라우저의 렌더링 엔진과 협력하여 화면을 업데이트합니다.
6. 화면 업데이트: 변경된 부분이 실제 DOM에 적용되면 사용자는 변경된 내용을 볼 수 있습니다. 화면은 다시 그리는 대신 변경된 부분만을 업데이트하므로 빠르게 반응하고 부드러운 사용자 경험을 제공합니다.

요약하면, SPA는 브라우저에 최초로 로드된 후 Vue.js와 함께 작동하여 동적으로 페이지를 로드하고 화면을 업데이트합니다. Vue.js 엔진은 데이터 변경 및 라우팅 변화를 관리하고 브라우저의 렌더링 엔진과 협력하여 웹 애플리케이션을 구현합니다.

 

* vue.js는 브라우저에 다운로드된다.

네, Vue.js 엔진은 웹 애플리케이션을 사용자의 브라우저에서 실행되도록 JavaScript 파일로 다운로드되어 있어야 합니다. Vue.js는 클라이언트 측에서 동작하는 JavaScript 라이브러리 및 프레임워크이며, 브라우저에서 웹 페이지와 함께 실행됩니다.
일반적으로 Vue.js를 사용하는 웹 애플리케이션은 다음과 같은 방식으로 동작합니다:
1. 사용자는 웹 브라우저를 열고 웹 애플리케이션을 방문합니다.
2. 웹 서버에서는 웹 페이지의 HTML 파일과 Vue.js 라이브러리 등을 포함하는 JavaScript 파일을 사용자의 브라우저로 전송합니다.
3. 사용자의 브라우저는 HTML 파일을 해석하고 렌더링한 후, JavaScript 파일을 다운로드하고 실행합니다.
4. Vue.js 엔진은 웹 애플리케이션을 초기화하고 Vue 컴포넌트를 렌더링합니다.
5. 사용자가 애플리케이션과 상호작용하거나 페이지를 이동할 때, Vue.js 엔진은 가상 DOM을 업데이트하고 변경된 부분을 실제 DOM에 적용하여 화면을 업데이트합니다.

* Vue가 렌더링을 할 수 있는 이유

Vue.js는 자체적인 엔진을 가지고 있다. 이 엔진이 Vue 컴포넌트의 렌더링 및 업데이트를 관리한다. Vue.js 엔진은 가상 DOM(Virtual DOM)을 사용하여 효율적인 렌더링 및 데이터 변경 감지를 수행하며, 사용자 인터페이스를 동적으로 업데이트합니다.

1. 가상 DOM 관리: Vue.js 엔진은 가상 DOM을 생성하여 렌더링된 DOM과의 비교를 통해 변경된 부분을 최소한으로 실제 DOM에 적용합니다.
2. 데이터 바인딩: 엔진은 데이터와 Vue 컴포넌트의 템플릿 간의 양방향 데이터 바인딩을 관리하며 데이터가 변경될 때 화면에 자동으로 반영됩니다.
3. 이벤트 처리: Vue.js 엔진은 이벤트 처리 및 사용자 입력을 관리하며, 컴포넌트 간의 통신과 상호작용을 지원합니다.
4. 라우팅 및 상태 관리: 라우팅 및 상태 관리를 위한 Vue.js의 추가 모듈 및 라이브러리도 엔진과 함께 사용할 수 있습니다.

---

Vue.js는 서버인가?

아니요, Vue.js는 클라이언트 측에서 동작하는 JavaScript 프레임워크 및 라이브러리입니다. Vue.js는 웹 브라우저에서 실행되며, 사용자의 컴퓨터 또는 기기에서 작동합니다. Vue.js 자체로는 서버 기능을 제공하지 않습니다.

vue-cli-service serve

vue-cli-service serve는 Vue CLI*를 사용하여 Vue.js 프로젝트를 개발할 때 제공되는 명령어입니다. Vue CLI는 Vue.js 프로젝트를 시작하고 구성하는 도구로, 프로젝트의 초기 설정 및 개발 서버를 관리하는 데 사용됩니다. vue-cli-service serve 명령어는 로컬 개발 서버를 시작*하여 개발자가 애플리케이션을 개발 및 디버깅할 수 있게 합니다. 이 명령어는 개발 환경을 설정하고 실시간 리로딩을 지원하는 데 도움을 줍니다.

 

* vue CLI

The CLI (@vue/cli) is a globally installed npm package and provides the vue command in your terminal. It provides the ability to quickly scaffold a new project via vue create. You can also manage your projects using a graphical user interface via vue ui.

 

https://cli.vuejs.org/guide/

* vue.js의 로컬 개발 서버

Vue.js 개발 서버는 Vue.js 애플리케이션을 개발하는 동안 사용되는 로컬 웹 서버를 의미합니다. 이 서버는 주로 Vue CLI (Vue Command Line Interface)를 사용하여 프로젝트를 생성하고 관리할 때 제공됩니다.

Vue.js 개발 서버의 주요 목적은 다음과 같습니다:

1. 로컬 환경에서 애플리케이션 실행: 개발 서버를 사용하면 Vue.js 애플리케이션을 개발자의 로컬 컴퓨터에서 실행할 수 있습니다. 이것은 애플리케이션을 원격 서버에 배포하지 않고도 개발 및 디버깅을 수행할 수 있도록 합니다.
2. 실시간 리로딩: Vue.js 개발 서버는 소스 코드의 변경을 감지하고, 변경이 발생할 때마다 애플리케이션을 자동으로 다시 로드합니다. 이로써 개발자는 변경 내용을 브라우저에서 즉시 확인할 수 있습니다.
3. 개발 환경 설정: 개발 서버는 로컬 개발 환경에 필요한 설정을 제공합니다. 이를 통해 개발자는 서버 포트, 호스트 주소, 소스맵 생성 여부 등을 구성할 수 있습니다.
4. 프록시 설정: 필요한 경우, 개발 서버에서 API 요청을 프록시할 수 있도록 설정할 수 있습니다. 이것은 개발 환경에서도 실제 API 서버와 통신할 수 있도록 도와줍니다.
5. 웹팩과 통합: Vue CLI 및 Vue.js 개발 서버는 웹팩(Webpack)을 기반으로 하며, 프로젝트 빌드, 모듈 번들링, 로더 설정 등 웹팩의 기능을 활용할 수 있습니다.

---

aws amplify를 사용하여 vue.js 서버 띄우기

Amplify는 / AWS 서비스와 연동하여 / 클라우드에서 정적 파일을 호스팅하고 배포하는 데 중점을 두며

Node.js*는 서버 측 로직을 구현하고 애플리케이션을 서버에 배포하는 데 사용됩니다. Node.js를 사용하여 Vue.js 애플리케이션의 서버를 띄울 수 있습니다. Vue.js는 주로 클라이언트 측에서 실행되는 JavaScript 프레임워크이지만 Node.js를 사용하여 서버 측에서도 Vue.js 애플리케이션을 실행하고 서비스할 수 있습니다.

* Node.js

https://hanamon.kr/nodejs-%EA%B0%9C%EB%85%90-%EC%9D%B4%ED%95%B4%ED%95%98%EA%B8%B0/

Node.js는 JavaScript 실행 환경입니다. (이는 Node.js가 JavaScript 코드를 실행할 수 있는 환경을 제공한다는 의미입니다. 기본적으로 웹 브라우저가 JavaScript 코드를 실행하는 환경을 제공하는 것과 유사하게, Node.js는 서버 측에서 JavaScript 코드를 실행할 수 있는 환경을 제공합니다.) 이것은 서버 측 애플리케이션을 만들고 실행하기 위한 오픈 소스 플랫폼으로, JavaScript를 사용하여 네트워크 애플리케이션을 개발할 수 있게 해줍니다.

Vue CLI로 빌드하기

Vue.js 애플리케이션을 개발할 때 Vue CLI를 사용하여 프로젝트를 빌드합니다. 이 빌드 과정을 통해 정적 파일(HTML, CSS, JavaScript)이 생성됩니다. 이 파일들을 Node.js 서버의 정적 파일 경로에 배치합니다.

 

AWS Amplify를 사용하여 Vue.js 애플리케이션을 배포할 때 Node.js는 주로 다음과 같은 순서로 사용됩니다:

 

1. Vue.js 애플리케이션 개발
   개발자는 Vue.js를 사용하여 프론트엔드 웹 애플리케이션을 개발합니다. Vue.js는 클라이언트 측 JavaScript 프레임워크로, 사용자 인터페이스 및 뷰를 생성하고 관리하는 역할을 합니다.
2. Amplify 설정 및 초기화
   Amplify CLI를 사용하여 Vue.js 애플리케이션을 설정하고 초기화합니다. 이때 Node.js가 사용됩니다. CLI는 Amplify 프로젝트를 설정하고 관리하는 데 사용됩니다.
3. Amplify 정적 파일 호스팅 설정
   Vue.js 애플리케이션의 정적 파일 (HTML, CSS, JavaScript 파일 및 기타 에셋)을 AWS Amplify에 호스팅하도록 설정합니다. 이를 통해 Amplify는 정적 파일을 S3 버킷에 업로드하고 CDN (Content Delivery Network)을 통해 전 세계 사용자에게 제공합니다
4. Amplify 백엔드 서비스 설정 (선택 사항)
   필요한 경우, AWS Amplify를 사용하여 백엔드 서비스를 설정하고 연결할 수 있습니다. 이러한 서비스에는 AWS Lambda 함수, API Gateway, 데이터베이스 (예: AWS AppSync, Amazon RDS) 등이 포함될 수 있습니다. Node.js가 서버리스 함수 (Lambda 함수)를 작성하고 배포하는 데 사용될 수 있습니다.
5. Amplify CLI를 사용한 배포
   Amplify CLI를 사용하여 Vue.js 애플리케이션 및 관련 백엔드 서비스를 클라우드에 배포합니다. 이 과정에서 Node.js 스크립트가 사용되어 배포 구성 및 리소스 생성을 자동화합니다.
6. 배포 확인 및 테스트
   배포가 완료되면 Vue.js 애플리케이션은 AWS에서 호스팅되며, Node.js는 서버리스 백엔드 함수 실행 및 관리에 사용될 수 있습니다. 이후 Vue.js 애플리케이션을 테스트하고 모니터링하여 성능과 안정성을 확인할 수 있습니다.

• Node.js는 주로 Amplify CLI를 사용하여 Amplify 프로젝트 설정과 관리, 서버리스 함수 작성 및 배포 등의 작업에서 활용됩니다.
• Vue.js는 프론트엔드 개발을 담당하며,
• Amplify는 프로젝트의 배포와 관리를 지원하는 데 도움이 됩니다.