오봉이와 함께하는 개발 블로그

DOM (Document Object Model) DOM은 HTML 문서를 파싱해 구성 요소들을 객체로 구조화 시킨 것 DOM은 트리 형태를 가진다. 문제 브라우저 렌더링 과정 HTML 문서를 파싱하여 DOM 객체 (트리) 생성, CSS 파싱하여 스타일러스 규칙 생성 어테치먼트 과정을 거쳐 실제 보여져야 할 요소인 렌더 트리 생성 렌더 트리를 통해 렌더링 과정을 거쳐 화면에 표시 브라우저 DOM 변경 작업 (DOM 수정 작업) DOM 트리에서 변경될 node와 하위 node제거 하위 node를 포함한 변경된 node를 다시 추가 css에 맞춰 렌더링 트리에서 node를 제거하고 다시 추가하는 작업은 효율적인 알고리즘을 사용한다면 복잡한 작업은 아니지만, 렌더링 하는 작업을 변경 시 반복적으로 하게 된다면..

라우터 현재 화면에서 다른 화면으로 전환하는 기능으로 웹 페이지 이동 SPA는 하나의 index.html을 두고 컴포넌트만 바꿔 끼워 동작하기 때문에 어떤 URL로 접속했을 때 어떤 컴포넌트를 렌더링 할지 명시해야 한다. 프레임워크나 라이브러리마다 router에 맞는 문법이 있지만, 어떤 방법으로든 URL을 이동하면 라우터 라이브러리에서 지정한 컴포넌트로 렌더링 { path: '/', 1. /로 이동하면 name: 'home', component: HomeView 2. HomeView 컴포넌트를 렌더링 }, ....

디렉토리 구조 . └── component ├── README.md ├── babel.config.js ├── jsconfig.json ├── package-lock.json ├── package.json ├── public │ ├── favicon.ico │ └── index.html ├── src │ ├── App.vue │ ├── assets │ │ └── logo.png │ ├── components │ │ ├── ArticleList.vue │ │ ├── ChildComponent.vue │ │ ├── DataService.vue │ │ ├── HelloWorld.vue │ │ ├── ParentComponent.vue │ │ └── layout │ │ ├── Footer.vue │ │ └── ..

컴포넌트 Multi Page Application 방식의 웹 애플리케이션에서 사용하는 일종의 컴포넌트 개념은 아래와 같이 표현 정확하게 컴포넌트라는 용어를 사용하지는 않지만, 모듈화 되어 컴포넌트를 사용하는 목적은 동일 // jsp // Thymeleaf Single Page Application은 컴포넌트를 통해 화면을 렌더링 한다. 각 컴포넌트는 목적에 맞게 화면을 렌더링 하기 위한 코드들과 상태를 관리하는 코드가 존재해야 한다. SPA에서 컴포넌트는 생산성, 유지보수, 확장성, 가독성, 재사용성 등의 이유로 사용 객체지향에서 기능과 역할에 따라 함수를 나누고, 클래스를 분리하는 이유와 같다. 각 기능에 맞게 컴포넌트를 분리해서 설계하는 것이 중요 컴포넌트는 용도에 따라 전역-지역 컴포넌트가 있고 관..

개요 회사에서 새로운 프로젝트에 투입되어 Vue와 같은 SPA에 대해 공부할 필요성이 생겨 공부한 내용을 작성하려 한다. 개념적인 부분만 다루기 때문에 SEO나 Next.js, Nuxt.js 등과 같은 언어적인 부분은 다루지 않고 개념만 짚어보려 한다. MPA(Multi Page Application) 글의 주제는 SPA지만 SPA를 알기 위해서는 먼저 MPA부터 알아야 한다고 생각하기 때문에 MPA부터 간단하게 설명하려 한다. MPA는 우리가 보통 생각하는 MVC 방식을 떠올리면 된다. 사용자가 웹 페이지를 이동할 때(새로운 페이지를 요청할 때 혹은 새로고침) 서버에서 렌더링된 정적 리소스(HTML, CSS, JavaScript)가 다운로드 되어 사용자에게 보여준다. MPA는 Server Side Re..