프론트엔드, 프론트엔드 사용 개발 언어

프론트엔드, 프론트엔드 사용 개발 언어

웹기획 업무를 하다가 많이 접하게 되는 프론트엔드, 백엔드, 인터페이스, API같은 용어들은 막연하게 어떤 것이다라고 알고는 있지만 막상 그 의미나 정의에 대해 명확하고 간결하게 설명하기 힘들었던 경험이 있다. 자주 쓰는 용어인 만큼 각 용어의 개념에 대해서 다시 한번 살펴보고 이를 기억하고자 용어에 대해 정리를 해두려고 한다.

프론트엔드(Frontend)

다른 말로는 클라이언트 측이라고도 하며 텍스트 및 색상에서 버튼, 이미지, 탐색 메뉴에 이르기까지 사용자가 직접 보고 상호작용하고 경험할 수 있는 모든 것을 뜻한다.

프론트엔드에서 사용하는 개발 언어

HTML : HyperText Markup Language의 약자로, 웹 페이지 구성에 사용되는 마크업 언어. 웹사이트의 기본 레이아웃과 구조를 만드는 언어로 이와 함께 이미지나 시각 자료도 렌더링한다.

CSS : Cascading Style Sheets의 약자로, HTML, XHTML, XML과 같은 웹페이지 문서의 스타일을 꾸밀때 사용하는 스타일 시트 언어.

JavaScript : JavaScript(자바스크립트)는 웹 사이트에 유연성과 응답성을 제공하는 스크립트 언어로 동적인 화면을 구현하기 위해 사용하며 백엔드 개발에도 사용된다.

SASS: Syntactically Awesome Style Sheets의 약자로 SASS(사스)는 확장성이 다소 떨어진다는 CSS의 단점을 보완하기 위해 나온 스크립트 언어이다.

Jquery : Jquery(제이쿼리)는 JavaScript의 라이브러리로 HTML 스크립팅을 간소화하기 위해 만들어졌다. 프론트엔드에서 수행되는 이벤트 처리나 애니메이션 등을 간결하게 작성된 코드로 구현할 수 있다.

프론트엔드 프레임워크

vue.js : vue.js(뷰제이에스 또는 뷰라고도 한다) 는 JavaScript를 기반으로 구축된 프레임워크로 컴팩트한 웹어플리케이션을 구축하는데 사용된다.

AngularJS : AngularJS(앵귤러 제이에스)는 JavaScript를 기반으로 구축된 웹 프레임워크로 모델 · 뷰 · 컨트롤러(MVC: Model-View-Controller) 개발 방식을 지원하여 웹 애플리케이션 개발 시 소스 코드 구현 시간이 단축되고, 코드를 재사용할 수 있으며 유지보수의 효율성이 향상된다.

React : 리액트(React)는 사용자 인터페이스 구성 요소를 향상시키고 웹 응용 프로그램에 동적 특성을 제공하는 JavaScript 프레임워크이다.

프레임워크? 라이브러리?

프레임워크와 라이브러리 두가지 모두 이미 작성된 재사용이 가능한 코드를 말하지만 흐름, 개발 프로세스를 어떤 주체가 제어하는지에 대해서 차이점을 가지고 있다.

라이브러리의 경우 개발자(사용자)가 전체적인 흐름을 주도해서 만들면서 적절한 부분에 라이브러리를 호출, 가져다가 사용하여 개발하며 프레임워크는 전체적인 흐름, 프로세스에 대해 주도권을 프레임워크가 가지고 있어서 개발자(사용자)가 그 틀 안에서 필요한 코드를 추가해 넣으면서 개발을 하게 된다.

적절한 예시가 있어 인용을 하자면 (출처 : https://www.freecodecamp.org/news/the-difference-between-a-framework-and-a-library-bd133054023f/ ) 다음과 같다.

라이브러리는 집을 꾸미기 위해 이케아에 가는 것과도 같다.

이미 나에게는 집이 있고 가구가 조금 필요한 상태로 직접 가구를 만들고 싶지 않기 때문에 이케아로 가서 집을 꾸미기 위한 다양한 물건을 고를 수 있다. 이때 통제권은 나에게 있다.

프레임워크는 모델하우스를 짓는 것과 같은 것으로 구조와 디자인에 대해 일련의 청사진과 제한된 선택이 있다. 계약자와 청사진은 내가 언제 어디서 나의 의견을 제공할 수 있는지에 대해 알려주며 계약자와 청사진이 만드는 것에 대해 통제권을 가지고 있다.

from http://slowmood.tistory.com/35 by ccl(A) rewrite - 2021-12-03 00:02:14