이번 포스팅에서는 프론트엔드(Front-End) 기본 지식에 대하여 공부를 해보고자 한다.
프론트엔드(Front-End)
프론트엔드는 사용자가 볼 수 있는 화면, 즉 사용자 인터페이스(User Interface, UI)를 말한다.
웹 사이트 또는 웹 애플리케이션의 URL을 입력하거나 모바일 애플리케이션을 다운로드할 때, 화면상 나타나는 아주 깔끔한 레이아웃을 가진 인터페이스라고 생각하면 된다.
프론트엔드는 프로토타입(prototype)을 기반으로 웹사이트의 화면을 만들어 나간다.
사용자는 이 웹사이트에 접근하기 위해 구글 크롬, 엣지, 웨일 등을 사용하는 형식이다.
웹 사이트의 화면을 구성하는 데엔 세 가지 언어(HTML, CSS, JavaScript)가 필요하다.
프론트엔드 개발은 주로 웹 및 모바일 솔루션의 사용자 인터페이스(UI)와 사용자 경험(UX)을 만드는 데 초점을 맞추고 있다.
슬라이더, 드롭다운(drop-down) 메뉴, 레이아웃, 폰트, 컬러 등 모든 요소가 프론트엔드 개발을 이루는 부분이라 할 수 있다.
프론트엔드 개발에서 사용하는 언어
HTML (Hyper Text Markup Language)
HTML는 웹 문서를 만들기 위하여 사용하는 기본적인 웹 언어의 한 종류이다.
어떤 웹 사이트에서는 블록(block)을 구성하는 곳에 사용하는 언어이기도 한다.
웹의 구조를 만들 수 있다.
HTML은 하이퍼 텍스트와 마크업 랭귀지, 두 개로 나눌 수 있다.
하이퍼 텍스트는 원하는 정보만 빠르게 습득하기 위해 순차적인 정보 습득 과정을 뛰어넘는다.
마크업 랭귀지에서 마크업은 특정 표시를 통해 문장을 구분 짓는 것을 말한다.
랭귀지는 컴퓨터에게 명령을 내리기 위해 사용하는 언어를 말하며, 마크업 랭귀지는 특정 표시를 통해 컴퓨터에게 명령을 내리는 것이라고 볼 수 있다.
웹 애플리케이션을 개발할 때 웹 페이지의 구조를 정의하는 데에 사용되는 언어가 바로 마크업 랭귀지다.
CSS (Cascading Style Sheets)
CSS는 HTML로 만들어진 문서의 스타일을 지정하는 방식을 규정하는 스타일 시트 언어이다.
CSS는 웹사이트를 시각적으로 매력적이게 만드는 역할을 한다.
물론 HTML 태그만으로도 웹 애플리케이션을 꾸밀 수 있지만, 일일이 태그를 입력해 줘야 하기 때문에 시간이 오래 걸리고 수정이 불편하다는 단점이 있다.
이에 반해 CSS를 사용하면 한 가지 태그로 다수의 내용을 한꺼번에 수정할 수 있기 때문에, HTML로만 웹 페이지를 만들 때보다 시간을 단축할 수 있고, 수정도 용이해 편리하다.
마크업 언어가 실제로 사용자에게 보이는 방법을 기술하는 것이 CSS라고 할 수 있다.
CSS는 말 그대로 시트인라고 할 수 있는데, HTML에 종속되어 HTML을 꾸미는 역할을 한다.
CSS는 HTML이라는 웹 애플리케이션의 뼈대 위에 예쁘게 화장하고, 장식하는 역할을 한다.
JavaScript
자바스크립트는 객체(Object) 기반의 스크립트 언어다.
스크립트 언어란, 응용 소프트웨어를 제어하는 컴퓨터 프로그래밍 언어를 가리키는데 자바스크립트 외에도 제이쿼리(jQuery), PHP, 파이썬(Python), 루비(Ruby) 등이 스크립트 언어에 해당한다.(이외에도 더 많은 스크립트 언어가 존재한다.)
웹 사이트가 로딩된 이후 CSS와 HTML의 구성요소들을 변경할 수 있게 해 준다.
이를 통해 웹 사이트를 보다 interactive 하게 만들고 사용자의 참여율을 높일 수 있다.
웹 페이지에서 동적 처리를 담당한다.
사용자가 웹 애플리케이션을 사용할 때 보게 되는 화면은 HTML, CSS, 자바스크립트 삼박자가 어우러져 움직이는 것이라고 할 수 있다.
프론트엔드에서 HTML로 웹의 뼈대, 즉 내용을 작성하고, CSS로는 웹을 꾸몄다면, 자바스크립트로는 웹 애플리케이션의 동작을 구현할 수 있다.
프레임 워크 (Framework)
프레임워크란 웹 개발을 보다 쉽고 간편하게 할 수 있도록 도와주는 도구라고 할 수 있다.
라이브러리와 달리 애플리케이션의 틀과 구조를 결정할 뿐 아니라, 그 위에 개발된 개발자의 코드를 제어한다.
구체적이며 확장 가능한 기반 코드를 가지고 있으며, 설계자가 의도하는 여러 디자인 패턴의 집합으로 구성되어 있다.
프레임워크는 작업(work)의 구조(frame)가 정해져 있는 라이브러리라고 볼 수 있다.
단, '프레임워크가 원하는 방식'대로 다양한 기능을 제공한다.
앱/서버 등의 구동, 메모리 관리, 이벤트 루프 등의 공통된 부분은 프레임워크가 알아서 관리하며, 개발자는 서비스별로 다른 부분만 "프레임워크가 정해준 방식대로" 클래스, 메서드 등에 구현해두면 된다.
프레임워크가 제공하는 여러 기능들을 사용해서 빠르고 효율적으로 프로그램을 구축할 수 있다.
프레임워크 장점
- 개발 프로세스 간소화
- 코드 길이 간소화 및 완성도
- 유지보수 용이
- 보안
라이브러리(Library)
라이브러리는 프로그래밍에 사용할 수 있게 미리 만들어져 있는 함수나 변수들의 묶음이다.
미리 컴파일된 오프젝트 파일 형태로 존재하며 컴파일 과정에서 연결되어 실행 가능한 프로그램을 이룬다.
프레임워크와 함께 효과적인 개발을 위해 만들어졌지만 둘 사이에는 약간의 차이가 있다.
프로그래밍 언어에서 라이브러리를 사용할 수 있도록 소스코드 수준에서 인터페이스를 노출시킨 것이 바로 Application Programming Interface(API)이다.
라이브러리는 동작하는 완전한 프로그램이 아닌, 특정한 부분 기능만을 수행하도록 제작된, 컴파일되어 기계어의 형태로 (또는 대상 플랫폼에 따라서는 바이트코드로) 존재하는 프로그램이다.
여러 라이브러리를 활용하여 개발의 효율을 증대시킬 수 있다.
라이브러리 장점
- 코드를 재사용하기 쉽다.
- 코드의 내용을 숨겨 기술 유출을 방지할 수 있다.
- 이미 구현되어 있는 기능들을 가져다 쓸 수 있어 개발 시간을 단축할 수 있다.
- 컴파일 시간 단축할 수 있다. (라이브러리는 미리 컴파일되어 있어 링킹만 하면 바로 사용 가능하다)
DOM (Document Object Model)
문서 객체 모델은 일종의 HTML, XML 문서의 프로그래밍 interface 이다. (웹 페이지에 대한 인터페이스)
이 객체 모델은 문서 내의 모든 요소를 정의하고, 각각의 요소에 접근하는 방법을 제공한다.
DOM 은 nodes와 objects로 문서를 표현한다.
웹 페이지를 스크립트 또는 프로그래밍 언어들에서 사용될 수 있게 연결시켜주는 역할을 담당한다.
DOM을 통해 HTML과 CSS를 유동적으로 변경할 수 있어 HTML인 웹페이지와 자바스크립트를 이어주는 역할을 한다.
DOM은 Javascript로 html을 조작하기 위해 존재한다고 할 수 있다.
HTML DOM
HTML DOM 은 HTML 문서를 조작하고 접근하는 표준화된 방법을 정의한다.
모든 HTML 요소는 HTML DOM를 통해 접근할 수 있다.
XML DOM
XML DOM 은 XML 문서에 접근하여, 그 문서를 다루는 표준화된 방법을 정의한다.
모든 XML 요소는 XML DOM를 통해 접근할 수 있다.