비즈니스에서 고객 경험의 중요성이 날로 커지고 있습니다. 이에 따라 웹/모바일 애플리케이션에서 사용자에게 시각적으로 보여지는 부분인 ‘프론트엔드(Frontend)’를 개발하는 역량 또한 중요해지고 있는데요.

이번 글에서는 코드의 재사용성과 유지보수성을 높여 최근 개발자들에게 인기가 높은 컴포넌트 기반 모던 프론트엔드(Modern Frontend)의 개발 방법과 그 효과에 대해 알아보겠습니다.

컨포넌트 기반 모던 프론트엔드란?

모던 프론트엔드는 최신의 웹/모바일 애플리케이션에 맞춰, 전체 시스템 중 사용자와 상호작용하는 클라이언트(서버에 요청을 보내거나 서버가 제공하는 것을 받아 사용하는 컴퓨터 시스템)의 사용성, 성능, 반응성 등을 향상시키는데 중점을 둔 개발 방식입니다. HTML, CSS, JavaScript 등 기존 웹 기술이 여기에 포함되는데요. 다양한 프레임워크와 라이브러리 활용으로 효율적인 개발을 가능하게 합니다. 모던 프론트엔드에서는 React, Angular, Vue.js 등의 프레임워크를 사용하며, 이를 통해 다음과 같은 개발 방식과 기술을 활용합니다.

• SPA(Single Page Application): 여러 페이지를 로딩하는 기존 방식 대신, 해당 페이지에서 필요한 요소들만 갱신해 사용자 경험을 향상하고 로딩 시간을 줄이는 방식입니다.

• 컴포넌트 기반 개발: 재사용 가능한 컴포넌트를 설계해 유지보수성과 확장성을 향상시키고 코드의 모듈화를 도모합니다.

• 성능 최적화: 렌더링(Rendering, 웹사이트 코드를 사용자가 웹 사이트를 방문할 때 보게 되는 대화형 페이지로 바꾸는 웹 개발에 사용되는 절차) 성능, 리소스 최적화, 코드 스플리팅(Code splitting, 더 나은 사용자 경험을 위해 파일을 분리하는 작업) 등 다양한 방법을 통해 애플리케이션의 성능을 향상시킵니다.

• 반응형 웹 디자인 및 웹 접근성: 모바일, 태블릿, 데스크톱 등 다양한 기기에서 최상의 사용자 경험을 보장하기 위한 방법론을 적용합니다.

모던 프론트엔드 개발은 이와 같은 개념과 기술을 적용해 애플리케이션 사용자 경험을 높이는 것을 목표로 합니다. 이 중 컴포넌트 기반의 개발을 위해서는 먼저 컴포넌트의 구조와 역할을 이해해야 하는데요. 컴포넌트는 독립적이고 재사용 가능한 UI(User Interface, 디지털 기기를 작동시키는 명령이나 기법을 포함하는 사용자 환경) 조각으로, 이를 조합해 프론트엔드 애플리케이션을 구성하는 것이 컴포넌트 기반 개발의 핵심입니다.

컴포넌트 기반 모던 프론트엔드 개발 노하우

1) 재사용 가능한 컴포넌트 설계하기

컴포넌트 기반 개발에서는 각각의 컴포넌트가 독립적으로 동작하며, 이를 조합해 애플리케이션을 구성하기 때문에 유지보수성과 코드의 재사용성이 높아지는 장점이 있습니다. 이때 각각의 컴포넌트가 어떤 기능을 수행하는지 명확히 정의하고, 이를 재사용 가능한 작은 단위로 나누는 것이 중요합니다.

컴포넌트를 정의할 때, 주어진 문제 해결에 필요한 데이터와 기능을 가지도록 설계하고, 컴포넌트 간의 의존성을 최소화해 유연하고 확장 가능한 구조를 만들어야 합니다. 모든 컴포넌트를 재사용 가능하게 설계할 수는 없지만, 다음과 같은 기준을 고려한다면 코드의 재사용성과 생산성을 높일 수 있습니다.

• 재사용 가능성: 컴포넌트가 단순하고 독립적인 기능을 수행하며, 다른 곳에서 반복 사용될 가능성이 높은 경우 재사용이 유리합니다.

• 확장성: 컴포넌트가 다양한 상황에 대응할 수 있도록 유연하게 구현된 경우 확장이 가능하며, 재사용성을 높입니다.

• 공통성: 다른 컴포넌트와 기능이 비슷하고, 구성 요소끼리 공통된 속성이나 기능을 공유하는 경우에 준비된 방법으로 재사용하는 것이 효율적일 수 있습니다.

• 가독성 및 유지보수성: 컴포넌트 코드가 가독성이 높고 유지보수가 용이한 경우 재사용성이 향상되며 개발 시간과 비용을 줄일 수 있습니다.

• 프로젝트 요구사항: 프로젝트의 목적과 요구사항에 따라 UI의 일관성이 요구된다면 재사용성이 확보될 수 있도록 우선적으로 고려해야 합니다.

단순한 버튼 컴포넌트도 위의 고려 사항을 반영하면 재사용을 통해 프로젝트의 생산성을 높일 수 있습니다. 이를 위해서는 공통 컴포넌트 관리자의 역할이 중요하고, 기획자들 간의 의사소통, 개발자들 간의 의사소통, 기획자-개발자 간의 의사소통이 꼭 필요합니다.

2) 컴포넌트 상태 관리 방법 정하기

컴포넌트 기반 개발에서는 각각의 컴포넌트가 독립적으로 동작하므로 컴포넌트의 상태와 컴포넌트 간의 상호작용을 고려한 설계가 중요한데요. 데이터의 일관성을 유지하면서 개발과 유지보수를 진행하기 위해서는 아래 사항들을 고려해야 합니다.

• 컴포넌트의 크기와 복잡도: 컴포넌트의 크기와 복잡도가 증가할수록 상태 관리가 복잡해지고 디버깅(Debugging, 모든 소프트웨어에서 소스 코드의 오류 또는 버그를 찾아서 수정하는 과정) 및 유지보수도 어려울 수 있습니다. 큰 규모의 프로젝트에서는 상태 관리 라이브러리(Redux, MobX, Vuex 등) 사용을 고려해야 합니다.

• 예측 가능한 상태 변화: 컴포넌트 상태 변화는 예상치 못한 결과를 초래합니다. 상태 변화를 예측 가능하도록 설계하고, 테스트를 통해 안정성을 검증해야 합니다.

• 데이터의 일관성: 상태를 여러 컴포넌트에서 공유하는 경우, 데이터의 일관성이 유지되도록 설계해야 합니다. 상태를 수정할 때, 컴포넌트 간의 상태 변화가 서로 영향을 주거나 받지 않도록 조심해야 합니다.

• 상태 초기화: 상태 초기화는 컴포넌트 추가 및 제거가 발생한 곳에 적용됩니다. 적절한 상태 초기화를 통해 프로젝트의 전반적인 효율성 및 안정성을 높일 수 있습니다.

해당 사항들은 ‘상태 관리 라이브러리’를 활용해 쉽게 관리 할 수 있습니다.

3) 컴포넌트 개발을 위한 프레임워크 및 라이브러리 선택하기

모던 프론트엔드에는 컴포넌트 개발 지원을 위한 다양한 프레임워크와 라이브러리가 있어 개발자들의 애플리케이션 구축과 관리에 도움을 줍니다. 프레임워크는 한 번 선정하면 변경하기 어렵고 개발 전반에 큰 영향을 주기 때문에 프로젝트 요구 사항과 기술 스킬 구성에 따라 신중하게 선택해야 합니다.
다음은 프레임워크와 라이브러리를 선택할 때 고려해야 할 요소입니다.

• 기능과 생산성: 프레임워크 및 라이브러리의 기능과 생산성은 매우 중요합니다. 사용하려는 애플리케이션의 요구 사항을 충족시키고 개발 작업을 간소화하는지 확인해야 합니다. 예를 들어, React는 가상 DOM(Document Object Model, 웹 페이지의 다양한 구성요소에 접근해 내용이나 형식 등을 제어할 수 있게 지원하는 인터페이스) 기반의 선언적인 UI 작성 방식으로 생산성과 유지보수 측면에서 우수합니다.

• 프로젝트 요구 사항: 검색 사이트 노출을 위해서 서버 사이드 렌더링(SSR)이 가능한 프레임워크가 필요합니다. 모바일 앱 개발 시에는 클라이언트 사이드 렌더링(CSR)으로 빠른 인터랙션을 지원하는 프레임워크를 선택해야 합니다.

• 커뮤니티 지원: 커뮤니티 지원은 프론트엔드 개발에 필수적입니다. 대부분의 인기 프레임워크와 라이브러리는 활발하게 운영되는 오픈소스 커뮤니티를 갖고 있으며, 문제 해결 방법과 학습 자료, 피드백 등을 얻을 수 있다는 장점이 있습니다.

• 성능: 웹 애플리케이션의 성능은 사용자 경험에 큰 영향을 줍니다. 선택한 프레임워크나 라이브러리가 최적화돼 효율적으로 동작하는지 확인해야 합니다.

• 유지보수 및 업데이트: 선택한 도구의 지속적인 유지보수와 업데이트도 중요합니다. 웹 기술은 계속 발전하므로 최신 트렌드와 요구 사항에 대응할 수 있는 도구를 선택하는 것이 좋습니다.

• 배우기 쉬운 정도: 프레임워크와 라이브러리 사용이 처음이라면 학습 곡선도 고려해야 합니다. 일부 도구는 초기 설정 및 문법 등이 복잡하므로 개인 혹은 팀의 스킬에 맞게 선택하는 것이 좋습니다.

– 주요 프레임워크

• React: Facebook에서 개발한 프레임워크로, 가상 DOM을 사용한 효율적인 UI 업데이트가 가능합니다.

• Angular: Google에서 개발한 프레임워크로, 대규모 애플리케이션에 적합하지만 Microsoft사의 프로그래밍 언어 Typescript를 필수적으로 사용해야 합니다.

• Vue.js: 직관적인 애플리케이션 프로그래밍 인터페이스(API)와 유연한 문법으로 학습이 쉽습니다.

• Svelte: 경량 프레임워크입니다. 변환 단계 없이 코드를 실행할 수 있는 JavaScript 코드로 변환 속도가 빠릅니다.

• Next.js: React 기반 서버 사이드 렌더링 및 정적 사이트 생성(Static Site Generation)을 지원하며, SEO(Search Engine Optimization, 검색 엔진 최적화)와 초기 로딩 속도 향상이 가능합니다.

프레임워크는 개인 선호도와 프로젝트 요구사항, 용도와 적합성을 고려해 선택하시는 것이 좋습니다.

– 주요 라이브러리

• Axios: HTTP 클라이언트 라이브러리입니다. 서버와의 데이터 통신을 처리합니다.

• Redux: 상태 관리 라이브러리로서 애플리케이션의 상태를 중앙 집중식으로 관리하고 상태 업데이트 예측을 가능하게 합니다.

• React Router: React 애플리케이션의 라우팅(Routing, 네트워크 안에서 통신 데이터를 보낼 때 최적의 경로를 선택하는 과정) 처리, 다양한 경로 및 URL에 대한 페이지 컴포넌트 매핑(Mapping, 하나의 값을 다른 값으로 대응시키는 것)과 동적 라우팅을 지원합니다.

• Styled Components: JavaScript 코드 내에서 컴포넌트 스타일링을 처리하는 CSS-in-JS 라이브러리입니다.

• Lodash: JavaScript 유틸리티 함수 모음, 배열 조작, 객체 조작, 다양한 함수형 프로그래밍을 지원합니다.

• Day.js: 날짜 및 시간 처리를 지원하는 JavaScript 라이브러리입니다.

• Jest: Facebook에서 개발한 JavaScript 테스트 라이브러리입니다.

• Chart.js: 직관적인 차트 및 그래프 생성을 위한 JavaScript 라이브러리입니다.

실제 프로젝트에서는 필요에 따라 이미 개발된 다양한 라이브러리를 사용합니다. npm 웹사이트(https://www.npmjs.com/)에서 필요한 라이브러리 정보를 확인하고 사용할 수 있습니다.

4) 선정된 프레임워크 기반으로 개발하기

가장 널리 사용되는 컴포넌트 기반 프론트엔드 라이브러리/프레임워크인 React.js, Vue.js, Angular.js 등은 컴포넌트를 만들고 관리하는 고유한 방법을 제공합니다. 개발자는 재사용 가능한 컴포넌트 설계를 바탕으로 상태 관리 방법을 선정하고, 이를 적용할 수 있는 프레임워크를 선택해 모던 애플리케이션 프론트엔드를 개발할 수 있습니다.

모던 프론트엔드 개발자에게는 다음과 같은 주요 능력이 요구됩니다.

• HTML, CSS, JavaScript 등의 웹 표준 기술에 대한 이해와 능숙한 활용 능력

• React, Vue.js, Angular 등의 모던 프론트엔드 라이브러리 혹은 프레임워크의 이해와 사용 능력

• Ajax 및 RESTful API와 같은 비동기(특정 코드가 끝날 때까지 코드의 실행을 멈추지 않고 다음 코드를 먼저 실행하는 것) 통신 방식에 대한 숙련도

• 웹 접근성, 반응형 웹 등의 웹 디자인 및 개발 기술에 대한 경험과 이해도

• Git과 같은 형상관리 툴 사용 경험과 이해도

• 디버깅 및 성능 최적화에 대한 능력

• 새롭게 등장하는 고급 기술에 대한 이해와 사용 능력

• UI/UX 설계와 관련된 이해와 기술력

어렵지만 효율적인 컴포넌트 기반 모던 프론트엔드

컴포넌트 기반의 프론트엔드 개발은 프로그램의 복잡도 증가와 상태 관리의 어려움, 신규 프레임워크에 대한 학습, 렌더링 이슈 등의 단점이 있음에도 애플리케이션 개발에 넓게 활용되고 있습니다. 많은 장점이 단점을 상쇄하며, 개발자들에게 더 나은 개발 경험과 효율성을 제공하기 때문인데요. 우리는 장점을 적극적으로 활용하고, 동시에 단점을 최소화하는 방법을 찾는 과정에서 성장할 수 있습니다.

컴포넌트 기반 개발은 협업에 유용합니다. 프로젝트 규모가 크고 다양한 사람들이 함께 작업하는 경우에도 각자 자신의 컴포넌트를 맡아 작업할 수 있기 때문입니다. 이렇게 되면 전체 프로젝트가 한 사람의 작업에 종속되지 않으며, 독립적으로 진행할 수 있는 부분이 명확해집니다.
컴포넌트 기반 개발은 성능 최적화 면에서도 장점이 있습니다. 예를 들어 React와 같은 라이브러리/프레임워크에서 제공하는 Virtual DOM 기술은 필요한 부분만 업데이트하여 불필요한 리렌더링을 줄여줍니다.

프론트엔드 프로젝트를 시작할 때, 앞서 살펴본 컴포넌트 기반 개발 방식을 적극 고려해 각 방식의 장단점과 극복 및 활용 방안을 먼저 이해한다면 분명 한 단계 업그레이드된 애플리케이션을 만들 수 있을 것입니다.

글 ㅣ LG CNS CTO 빌드센터 마이크로서비스개발팀 김경건