3. JavaScript Framework

JavaScript 웹프레임워크는 효율적인 JavaScript 작성을 위한 일종의 도구라고 볼 수 있습니다. 이러한 프레임워크를 이용하면 순수JavaScript 코드로 작업 하였을 때보다 웹페이지 개발을 더욱 빠르고 간편하게 작업 할 수 있습니다. 대표적인 프레임워크로 React.js, Angular, Vue.js가 있습니다.JavaScript에 대한 기초 지식이 있다면 이해하기 쉽습니다. 아래는JavaScript 프레임워크의 특징을 정리한 내용입니다.

1. 컴포넌트 지향 개발

JavaScript 프레임워크를 사용하면 웹 페이지를 만들기 위해 필요한 작은 조각들을 만들고 조합할 수 있습니다. 이 작은 조각들을 "컴포넌트"라고 합니다. 예를 들어 버튼, 입력창, 이미지 슬라이더 등이 있습니다.

각각의 컴포넌트는 자기 자신만의 역할을 수행하며, 필요한 정보를 가지고 있는데요, 이 컴포넌트들을 여러 곳에서 재사용할 수 있습니다. 예를 들어, 여러 개의 버튼이 필요한 경우, 한 번 만들어 놓은 버튼 컴포넌트를 여러 곳에서 사용할 수 있습니다. 이렇게 하면 개발 작업을 더 편리하게 수행할 수 있고, 코드를 재사용할 수 있기 때문에 더욱 빠른 작업에 도움이 됩니다.

2. 라우팅

웹프레임워크에서 라우팅 이란 URL의 변경에 따라 다른 컴포넌트를 로드하고 표시하는 기능을 제공합니다. 이를 통해 하나의 웹페이지에서 다중 페이지처럼 보이는 사용자 경험을 제공할 수 있습니다.

간단히 말하자면, 우리는 웹 사이트를 여러 개의 페이지로 구성한 것처럼 보이게 만들 수 있습니다. 하지만 실제로는 단일 페이지만 로드되고, 사용자가 다른 페이지로 이동할 때마다 새로운 컴포넌트만 로드됩니다.

예를 들어, 사용자가 홈 페이지에서 프로필 페이지로 이동하려고 한다고 가정해봅시다. 라우팅 기능을 사용하면 URL을 업데이트하여 /profile로 변경할 수 있습니다. 그리고 프레임워크는 해당 URL에 대한 라우트를 설정하고 프로필 컴포넌트를 로드합니다. 사용자는 홈 페이지에서 프로필 페이지로 전환된 것처럼 보이게 됩니다.

이런 방식으로 프레임워크는 사용자가 페이지 간에 전환하면서 실제로는 페이지를 다시 로드하지 않고 컴포넌트를 교체하여 다양한 화면을 표시할 수 있습니다. 이는 사용자 경험을 향상시키고, 웹 애플리케이션의 성능을 개선하는 데 도움이 됩니다.

3. 효율적인 DOM 조작

DOM은 Document Object Model의 약자로, 웹 페이지의 구조를 표현하는 객체 모델입니다. 예를 들어, 웹 페이지에는 제목, 이미지, 버튼, 입력창 등 다양한 요소들이 있습니다. 이러한 요소들을 마치 퍼즐 조각처럼 하나하나 객체로 표현합니다. 각각의 객체는 특정한 속성과 기능을 가지고 있습니다. 예를 들어, 이미지 객체는 이미지의 경로를 속성으로 가지고 있고, 웹 페이지에서 이미지를 보여주는 기능을 가지고 있을 수 있습니다. 버튼 객체는 버튼의 라벨이나 클릭 동작과 같은 속성과 기능을 가지고 있을 수 있습니다.

이러한 객체들을 모아서 웹 페이지의 전체 구조를 표현하는 것이 DOM입니다.

실제 DOM은 웹 페이지에서 실제로 표시되는 요소들을 나타내며, 변경사항이 있을 때마다 업데이트됩니다. 하지만 웹 애플리케이션에서 복잡한 UI를 다룰 때는 실제 DOM을 직접 조작하는 것이 많은 계산과 메모리 사용을 필요로 합니다. DOM을 변경할 때마다 레이아웃을 재계산하고, 화면을 다시 그리는 등의 작업이 필요하기 때문에 리소스 사용량이 높아지고 해당 요소와 그의 부모, 자식 요소들이 재랜더링되어 다시 화면에 그려져야 합니다. 이는 불필요한 렌더링작업을 유발하며, 웹 페이지의 반응성과 성능을 저하 시킬 수 있습니다.

이러한 문제를 해결하기 위해 React와 Vue는 가상 DOM(Virtual DOM) 개념을 사용합니다. 가상 DOM은 메모리에 존재하는 가벼운 복사본으로, 변경사항을 추적하고 실제 DOM과 비교하여 최소한의 변경만을 적용합니다. 이를 통해 불필요한 실제DOM 조작과 재랜더링을 최소화하여 성능을 향상시킬 수 있습니다.

이러한 웹 프레임워크의 기능들을 활용하여 개발자는 DOM 조작을 간편하게 수행할 수 있습니다. 웹 프레임워크는 내부적으로 최적화된 알고리즘과 기술을 사용하여 DOM 조작을 효율적으로 처리하고 성능을 향상시킵니다. 따라서 개발자는 웹 프레임워크를 통해 DOM 조작에 대한 복잡성을 줄이고 더욱 집중적으로 애플리케이션 개발에 집중할 수 있습니다.