Front-end(프론트엔드)란?

  사용자가 웹 사이트 또는 웹 애플리케이션의 URL을 입력하거나 모바일 애플리케이션을 다운로드할 때, 사용자들은 아주 깔끔한 레이아웃을 가진 인터페이스를 보게 된다. 이렇게 사용자가 마주 보는 인터페이스를 테크놀로지 분야에서 ‘프론트엔드’라고 부른다. 

  과거의 프론트엔드는 HTML과 CSS와 약간의 Javascript(JS)를 다루는 영역이었다. 웹 퍼블리셔의 역할인 UIUI 개발이 주된 업무이다. 하지만 웹의 기능이 복잡해지고 동적 요구사항이 늘어나면서 과거 방식으로는 더 이상 현재의 요구사항에 충족할 수 없는 지경에 이르렀다. JS가 다루어야 할 영역은 점점 커지고, 백엔드의 비즈니스 로직 일부는 프론트엔드로 넘어오기까지 했기 때문이다.

  프론트엔드의 요구사항을 위해 다양한 기술이 나왔지만, 웹의 동작 방식은 여전히 동일하다. 브라우저가 통신으로 요청한 HTMLHTML 문서를 파싱해서 DOM트리를 만들고, 스타일 시트와 결합해서 렌더트리를 만들어 화면에 띄운다. 이때 HTML은 뼈대를 세우고, CSS는 살을 붙이며 옷을 입히고,  JS는 이를 살아 움직이게 만든다.

 

프론트엔드 개발언어는?

 

프론트엔드의 구성요소

 

HTML (Hyper Text Markup Language)

  HTML은 웹에서 가장 기본적인 요소(언어)다. 하이퍼텍스트와 마크업 언어로 구성되어 있다. 하이퍼텍스트는 페이지들 사이의 링크를 정의하고, 마크업 언어는 웹페이지의 구조를 정의하는 사용된다.

  개발자는 브라우저가 알아볼 수 있도록 적절한 태그와 속성을 이용해서 HTML 문서를 작성해야 한다. 정답이 없기 때문에 어떻게 작성하든 상관없다. 하지만, 시각 장애인처럼 웹 페이지에 쉽게 접근(눈으로)할 수 없는 사람들에게 정확한 정보를 제공하려면 명확한 의미를 가진 HTML 문서를 작성해야 한다.

 

CSS (Cascading Style Sheets)

  CSS는 개발자가 웹페이지에 다양한 스타일을 적용할 수 있게 해 줌으로써 애플리케이션 페이지를 표시하는 프로세스를 단순하게 만들어주는 디자인 언어입니다. 만약, CSS 없이 HTML만 있는 웹 페이지라면, 화면에는 텍스트만 나열된 페이지가 출력될 것이다. CSS가 없으면 옷을 입지 않은 것과 같다. CSS는 HTML의 요소에 포함되며 각 영역의 색상과 크기 및 일부 동작(Animation)을 정의한다.

  요즘은 CSS-in-JS 라이브러리를 많이 사용한다. 쉽게 말해, JS코드에 CSS를 포함하는 방식이다. 선택자(Selector)를 유니크하게 만들어 다른 컴포넌트와 구별함으로써 스타일을 모듈화하고 캡슐화한다. 전통적인 CSS 방식과 비교해 어떤 방법이 더 나은지는 아직도 의견이 분분하다. 사용하는 프레임워크나, 작업방식에 따라서 본인의 니즈에 맞게 선택하면 된다.

 

Javascript (JS)

  Javascript(JS)는 사용자들을 위해 상호작용하는 애플리케이션을 만들 수 있도록 합니다. 즉 HTML 문서를 동적으로 만듭니다. SVG(Scalable Vector Graphics)나 CSS를 이용해도 동적인 페이지를 만들 수 있지만, 명확한 한계가 있다. JS는 유저가 발생시키는 이벤트(클릭, 스크롤 등)에 따라 웹 페이지가 적절히 변경되도록 만든다. 모던 JS에서는 서버에서 받은 데이터를 처리하고 비즈니스 로직을 작성하는 역할도  JS가 담당한다.