프론트엔드 개발 유형부터 과정, 특징까지

웹 서비스란 사용자가 입력한 데이터를 통해 더 가치 있는 것을 만들어 사용자에게 잘 전달하는 것을 의미합니다. 이 과정에서 ‘프론트엔드’는 사용자와 서비스를 연결해주는 과정의 모든 것을 구현하는 역할을 합니다.

하지만 프론트엔드 개발 시, HTML, 자바스크립트와 같은 전문적인 프로그래밍 언어에 대한 지식과 기술력을 필요로 합니다.

1. 프론트엔드란?

웹 애플리케이션은 크게 프론트엔드와 백엔드로 나뉘게 됩니다. 여기서 프론트엔드는 사용자가 볼 수 있는 화면, 즉 사용자 인터페이스(User Interface, UI)를 의미합니다. 

프론트엔드는 사람들이 웹 애플리케이션을 쉽게 사용할 수 있도록 기술적으로 구현되어 있어야 합니다. 이는 많은 사람들이 사용할 수 있으며, 경쟁력 있는 서비스를 갖출 수 있는 기반이 되기 때문입니다. 따라서 프론트엔드는 웹 애플리케이션의 사용자 인터페이스와 사용자 경험(UX) 최적화에 초점을 맞추어 개발하는 것이 중요합니다.

2. 프론트엔드 프레임워크 유형

프론트엔드 프레임워크에는 앵귤러, 리액트, 뷰, 스벨트, 앰버 등의 유형이 있습니다.

• 앵귤러(Angular): 앵귤러는 타입스크립트 기반 오픈 소스 프론트엔드 웹 애플리케이션 프레임워크입니다. 틀이 정해져 있기 때문에 코드를 자유롭게 작성할 수 없지만, 누구든 코드를 쉽게 수정할 수 있다는 장점을 가지고 있습니다.
• 리액트(React): 페이스북이 개발한 유연하고 효과적인 선언형(declarative)의 자바스크립트 라이브러리입니다. 컴포넌트를 기반으로 한 웹 애플리케이션의 반응형 뷰 레이어(View Layer)이라고 할 수 있습니다.
• 뷰(Vue.js): 웹 애플리케이션의 사용자 인터페이스를 만들기 위해 사용하는 오픈 소스 자바스크립트 프레임워크입니다. 기존에 다른 자바스크립트 라이브러리를 사용하고 있는 프로젝트에 뷰를 도입하기 쉽게 설계되어 있기 때문에 사용이 매우 간편하다는 장점이 있습니다.
• 스벨트(Svelte): 오픈 소스 프론트엔드 웹 프레임워크입니다. 컴파일러를 사용하여 최적화된 코드를 생성하며, 런타임에 가볍게 동작합니다. 실제 DOM 조작을 통한 최적화와 코드 간결성을 지향합니다.
• 엠버(Ember.js): 모델-뷰-뷰모델(MVV) 패턴에 기반을 둔 오픈 소스 자바스크립트 웹 프레임워크입니다. 높은 생산성과 관례를 따르는 구조로 개발을 지원하며, 템플릿 엔진과 라우팅 시스템을 갖추고 있습니다. 클래식한 웹/앱을 개발하기에 적합합니다. 

3. 프론트엔드 개발언어 선택기준

• 프로젝트 목표와 특성: 프로젝트의 성격에 따라 언어를 선택해야 합니다. 예를 들어, 웹 애플리케이션의 경우 JavaScript를 사용하거나, UI 디자인 위주의 정적인 페이지라면 HTML과 CSS가 중요합니다.
• 개발자 경험: 팀 내 개발자들의 숙련도와 선호 언어를 고려해야 합니다. 익숙한 언어로 개발하면 생산성이 높아질 수 있습니다.
• 성능과 최적화: 언어의 성능과 웹 애플리케이션의 로딩 속도를 고려해야 합니다. 특정 언어는 성능이 뛰어나며, 다른 언어는 웹페이지의 로딩 속도를 향상시키는데 더 적합할 수 있습니다.
• 커뮤니티와 생태계: 선택한 언어의 커뮤니티와 생태계가 활발하고 지원이 잘 되어야 합니다. 이를 통해 문제를 해결하고 지속적인 업데이트와 도움을 받을 수 있습니다.
• 크로스 플랫폼 호환성: 애플리케이션의 대상 플랫폼과 디바이스에 따라 언어 선택이 중요합니다. 모바일, 데스크탑, 웹 등 다양한 플랫폼에서 잘 동작해야 합니다.

4. 프론트엔드 개발 체크리스트

• 번들용량 최소화하기: 프론트엔드 최적화의 기본으로, 최종적으로 웹사이트의 html, css, js, 그리고 각종 이미지와 폰트의 용량을 줄이는 것이 중요합니다. 이를 통해 실제 브라우저에서 다운로드 받는 시간을 줄일 수 있고, 빠른 웹 사이트 서비스를 제공할 수 있습니다.
• DOM 렌더링 최적화: 웹사이트 화면이 업데이트 되는 것을 최적화하는 작업을 진행해야 합니다. 즉, DOM 렌더 트리의 reflow, repaint 과정을 최적화 해주는 것이 중요합니다.
• 브라우저 하위 호환: 크로스 브라우징이라고 불리는 작업으로, 브라우저마다 지원할 수 있는 Javascript, CSS기능의 한계를 고려하여 개발하는 것을 의미합니다. 이를 고려하지 않는다면 특정 브라우저에서 기능이 동작하지 않거나 웹사이트의 레이아웃이 깨져보일 수 있습니다.

프론트엔드 개발은? 크몽에서!

• 원하는 스타일의 라이브러리 적용
• 유지보수 및 수정 작업 지원
• 검색 엔진 최적화(SEO)를 적용한 최적화 및 고도화 웹사이트 구축