<aside> 💡 "프론트엔드(Front-End) 개발이란, 웹이나 앱을 사용하는 유저가 눈으로 보는 모든 화면의 요소들을 개발한다."
</aside>
사용자가 웹 사이트 또는 웹 애플리케이션의 URL을 입력하거나 모바일 애플리케이션을 다운로드할 때, 사용자들은 아주 깔끔한 레이아웃을 가진 인터페이스를 보게 됩니다. 이렇게 사용자가 마주보는 인터페이스를 테크롤로지 분야에서 ‘프론트엔드’라고 부릅니다.
프론트엔드는 서비스의 경쟁력을 유지하기 위해서는, 매끄럽게 동작하는 강력한 프론트엔드를 구축하는 것이 매우 중요합니다
사용자들이 웹사이트에서 보고 상호작용하는 모든 것들이 프론트엔드 개발 분야에 속하는 것입니다. 프론트엔드 개발은 주로 웹 및 모바일 솔루션의 사용자 인터페이스(UI)와 사용자 경험(UX)을 만드는 데 초점을 맞추고 있습니다.
슬라이더, 드롭다운(drop-down) 메뉴, 레이아웃, 폰트, 컬러 등 모든 요소들이 프론트엔드 개발을 이루는 부분인데요. 시선을 사로잡는 프론트엔드를 만드는 데 있어서는 HTML, CSS, **자바스크립트(Javascript)**가 중요한 역할을 합니다.
최종적인 사용자 인터페이스를 디자인하기 전에는 목업(mockup), 와이어 프레임(wireframe), 클릭할 수 있는 프로토타입(prototype)을 만들어야 합니다. 이런 도구들은 애플리케이션의 사용자 경험 안에 있는 이슈들을 확인할 수 있게 도와줍니다.
백엔드(Back-End) API(Application Programming Interface)에서 가져온 데이터의 출력, 입력을 통한 비즈니스 로직 구성과 유저가 사용하는 유저 인터페이스를 개발한다.
HTML: HTML은 하이퍼텍스트와 마크업 언어로 구성되어 있습니다. 하이퍼텍스트는 페이지들 사이의 링크를 정의해 줍니다. 반면에 마크업 언어는 웹페이지의 구조를 정의하는데 사용됩니다.
CSS: CSS는 종속 스타일 시트(Cascading Style Sheets)의 약자입니다. CSS는 개발자가 웹페이지에 다양한 스타일을 적용할 수 있게 해줌으로써 애플리케이션 페이지를 표시하는 프로세스를 단순하게 만들어주는 디자인 언어입니다. CSS는 HTML보다 독립적으로 작동해서 각 웹페이지들을 보완해 줍니다.
Javascript: 자바스크립트는 어마어마할 정도로 인기가 많은 언어로써, 사용자들을 위해 상호작용하는 애플리케이션을 만들 수 있도록 도와줍니다. 또한, 웹사이트의 기능성을 향상시키는데 사용되며, 웹 기반의 소프트웨어 또는 게임들을 실행할 수 있게 해주죠.
AngularJS: AngularJS는 오픈소스 자바스크립트 프레임워크로써, 주로 싱글 페이지 웹 애플리케이션(SPA)을 만드는 데 사용됩니다. 앵귤러JS는 계속해서 발전하고 있으며, 개발자가 웹 애플리케이션을 더욱 잘 만들 수 있게 해주는 프론트엔드 개발 테크놀로지들 중 하나입니다. 앵귤러 JS는 정적(static) HTML을 동적(dynamic) HTML로 변환해주는 기능이 있습니다. 또한 오픈소스 테크놀로지이기 때문에, 누구나 자유롭게 사용할 수 있고, 변경할 수도 있습니다.
ReactJS: 리액트는 프론트엔드 개발에서 사용할 수 있는 유연하고 효과적인 선언형(declarative)의 자바스크립트 라이브러리입니다. 뛰어난 사용자 인터페이스를 만드는 데 도움이 되죠. 리액트는 컴포넌트 기반의 오픈소스 라이브러리이며, 애플리케이션의 반응형 뷰 레이어(view layer)입니다. 이 기술은 페이스북이 개발해서 유지관리를 해오고 있습니다.
Bootstrap: 부트스트랩은 반응형 웹 애플리케이션 및 웹사이트를 개발하기 위해 사용되는 오픈소스 무료 도구입니다. 부트스트랩은 가장 인기 있는 Javascript, CSS, HTML 프레임워크이며, 모바일 우선의 반응형 웹사이트를 구축할 수 있게 해줍니다.