웹 서비스란 사용자가 입력한 데이터를 통해 더 가치 있는 것을 만들어 사용자에게 잘 전달하는 것을 의미합니다. 이 과정에서 ‘프론트엔드’는 사용자와 서비스를 연결해주는 과정의 모든 것을 구현하는 역할을 합니다.
하지만 프론트엔드 개발 시, HTML, 자바스크립트와 같은 전문적인 프로그래밍 언어에 대한 지식과 기술력을 필요로 합니다.
알아볼게요
1) 프론트엔드란?
2) 프론트엔드 개발 프레임워크 유형 및 특징
3) 프론트엔드 개발과정 및 유의할 점
1. 프론트엔드란?
웹 애플리케이션은 크게 프론트엔드와 백엔드로 나뉘게 됩니다. 여기서 프론트엔드는 사용자가 볼 수 있는 화면, 즉 사용자 인터페이스(User Interface, UI)를 의미합니다.
프론트엔드는 사람들이 웹 애플리케이션을 쉽게 사용할 수 있도록 기술적으로 구현되어 있어야 합니다. 이는 많은 사람들이 사용할 수 있으며, 경쟁력 있는 서비스를 갖출 수 있는 기반이 되기 때문입니다. 따라서 프론트엔드는 웹 애플리케이션의 사용자 인터페이스와 사용자 경험(User Experience, UX) 최적화에 초점을 맞추어 개발하는 것이 중요합니다.
2. 프론트엔드 개발 프레임워크 유형 및 특징
- 앵귤러(Angular) 앵귤러는 타입스크립트 기반 오픈 소스 프론트엔드 웹 애플리케이션 프레임워크입니다. 틀이 정해져 있기 때문에 코드를 자유롭게 작성할 수 없지만, 누구든 코드를 쉽게 수정할 수 있다는 장점을 가지고 있습니다.
- 리액트(React) 페이스북이 개발한 유연하고 효과적인 선언형(declarative)의 자바스크립트 라이브러리입니다. 컴포넌트를 기반으로 한 웹 애플리케이션의 반응형 뷰 레이어(View Layer)이라고 할 수 있습니다.
- 뷰(Vue.js) 웹 애플리케이션의 사용자 인터페이스를 만들기 위해 사용하는 오픈 소스 자바스크립트 프레임워크입니다. 기존에 다른 자바스크립트 라이브러리를 사용하고 있는 프로젝트에 뷰를 도입하기 쉽게 설계되어 있기 때문에 사용이 매우 간편하다는 장점이 있습니다.
3. 프론트엔드 개발 시 유의할 점
- 번들용량 최소화하기 프론트엔드 최적화의 기본으로, 최종적으로 웹사이트의 html, css, js, 그리고 각종 이미지와 폰트의 용량을 줄이는 것이 중요합니다. 이를 통해 실제 브라우저에서 다운로드 받는 시간을 줄일 수 있고, 빠른 웹 사이트 서비스를 제공할 수 있습니다.
- DOM 렌더링 최적화 웹사이트 화면이 업데이트 되는 것을 최적화하는 작업을 진행해야 합니다. 즉, DOM 렌더 트리의 reflow, repaint 과정을 최적화 해주는 것이 중요합니다.
- 브라우저 하위 호환 크로스 브라우징이라고 불리는 작업으로, 브라우저마다 지원할 수 있는 Javascript, CSS기능의 한계를 고려하여 개발하는 것을 의미합니다. 이를 고려하지 않는다면 특정 브라우저에서 기능이 동작하지 않거나 웹사이트의 레이아웃이 깨져보일 수 있습니다.
4. 프론트엔드, 전문가가 필요한 순간
- 원하는 스타일의 라이브러리 적용
- 검색 엔진 최적화(SEO)를 적용한 최적화 및 고도화 웹사이트 구축
- 유지보수 및 수정 작업 지원
“복잡한 요구사항도 차근차근 정리해주시고,
놓친부분까지 완벽하게 개발해주셔서 좋았습니다!
제가 처음 의도한 대로 완성품이 나온 것 같습니다.”