웹 개발을 이해하는 데 필수적인 프론트엔드 개발에 대한 이해가 필요하신가요? 이번 글에서는 프론트엔드 웹 애플리케이션에서 사용되는 기술과 도구에 대해서 살펴보고, HTML, CSS, JavaScript부터 React, Vue, Angular, 그리고 Webpack과 같은 번들러까지 포괄적으로 알아보도록 하겠습니다.
프론트엔드와 백엔드 구분하기, 프론트엔드 개념 및 사용기술 알아보기
1. 웹 페이지의 이해, 프론트엔드와 백엔드
웹사이트는 크게 두 부분으로 나눌 수 있습니다: 프론트엔드와 백엔드입니다. 프론트엔드는 웹 페이지에서 볼 수 있는 모든 시각적 요소를 담당하며, 이미지, 텍스트, 버튼 등이 포함됩니다. 반면, 백엔드는 데이터를 저장하고 관리하는 역할을 담당합니다. 예를 들어, 아마존 주문 내역과 같은 것들이 이에 해당합니다. 이번 글에서는 웹 애플리케이션의 프론트엔드에서 사용되는 기술을 설명하고, 다음 편에서는 백엔드에 대해 알아보도록 하겠습니다.
2. HTML
웹 페이지에서는 html을 사용하여 내용을 작성합니다. html은 하이퍼텍스트 마크업 언어로, 버튼과 같은 요소를 추가하는 데 사용됩니다. 또한 이미지와 텍스트를 추가할 수도 있으며, html을 더 작성할 수록 페이지에 더 많은 내용이 추가됩니다.
3. CSS
그러나 HTML만으로는 페이지가 깔끔하게 보이지 않는 경우가 있습니다. 이럴때 css가 필요합니다. css는 캐스캐이딩 스타일 시트로, 웹 페이지를 스타일링하는 데 사용됩니다. 색상, 크기, 간격 등을 조정하여 웹 페이지를 멋있고 깔끔하게 만들 수 있습니다.
4. JavaScript
이제 버튼을 클릭해서 하나의 신발 브랜드만 표시하고 싶다고 가정해 보겠습니다. 하지만 HTML만으로는 아무런 변화가 일어나지 않습니다. 이때 자바스크립트가 필요합니다. html과 css는 웹 페이지에 내용을 표시하는 데 사용되지만, 자바스크립트는 웹 페이지를 상호작용 할 수 있도록 만들어 줍니다. 즉, 무언가를 클릭하거나 입력할 때, JavaScript 코드는 우리가 한 작업을 기반으로 페이지를 업데이트합니다.
5. 자바스크립트 프레임워크
자바스크립트로 웹 페이지를 작성할 때, 직접 DOM(Document Object Model)을 사용하는 것은 반복적이고 관리하기 어렵습니다. 그래서 대부분 자바스크립트 프레임워크를 사용합니다. 자바스크립트 프레임워크는 웹 페이지를 더 효율적으로 작성할 수 있는 방법을 제공하며, 페이지 업데이트를 자동으로 처리해줍니다. 가장 인기 있는 자바스크립트 프레임워크로는 React.js, Angular, Vue.js가 있습니다.
6. 번들러와 트랜스파일러
자바스크립트 언어 자체에는 다른 프로그래밍 언어와 비교하여 부족한 기능이 많습니다. 그 중 하나는 코드를 여러 파일로 분할하고 정리하는 기능입니다. 이를 해결하기 위해 번들러를 사용해야 합니다. 가장 인기 있는 번들러 중 하나는 웹팩(Webpack)입니다. 웹팩은 자바스크립트 코드를 여러 파일로 분할한 후, 이를 하나의 자바스크립트 파일로 묶어 웹 페이지에 적용할 수 있게 해줍니다.
또 다른 도구는 트랜스파일러입니다. 가장 인기 있는 트랜스파일러 중 하나는 타입스크립트(Typescript)입니다. 트랜스파일러는 자바스크립트에 추가 기능을 제공합니다. 향상된 버전의 자바스크립트를 작성한 다음, 이를 일반 자바스크립트로 변환합니다. 왜냐하면 구글 크롬과 같은 브라우저는 일반 자바스크립트만 이해할 수 있기 때문입니다.
7. CSS 전처리기와 프레임워크
CSS는 자바스크립트처럼 코드를 여러 파일로 분리하는 기능에 한계가 있습니다. 따라서 CSS에서도 번들러와 트랜스파일러의 활용이 필요하게 됩니다. 이에 대응하는 특별한 개념으로는 CSS 전처리기가 있습니다. 이 중에서도 가장 널리 사용되는 CSS 전처리기는 Sass입니다. Sass를 사용하면 CSS 코드를 여러 파일로 나눠 관리하면서도 보다 개선된 CSS를 작성할 수 있습니다. 작성된 CSS는 다시 하나의 파일로 결합되고, 원래의 CSS 형태로 변환됩니다.
8. CSS 프레임워크와 통신
CSS 전처리기가 등장하면서 개발자들은 CSS 프레임워크를 만들기 시작했습니다. 가장 인기 있는 CSS 프레임워크 중 하나는 부트스트랩(Bootstrap)입니다. CSS 프레임워크는 다른 사람이 작성한 다양한 CSS 코드의 집합이며, 일반적인 문제를 해결하는 데 도움을 줍니다. 부트스트랩과 같은 프레임워크를 사용하면 많은 시간을 절약할 수 있습니다.
9. 프론트엔드와 백엔드의 통신
마지막으로, 프론트엔드가 백엔드와 어떻게 통신하는지 알아보겠습니다. 예를 들어, 아마존에서 주문을 하려고 한다고 가정해 보겠습니다. 이 주문은 어떻게 내 컴퓨터에서 아마존으로 전송될까요? 이때 자바스크립트에는 XMLHttpRequest라는 기능이 있습니다. 이 기능을 사용하여 아마존과 같은 URL로 메시지를 전송할 수 있습니다. 아마존의 백엔드는 이 URL로 전송된 메시지를 수신 대기하고 주문을 처리합니다. 더 자세한 내용은 백앤드 편에서 설명하도록 하겠습니다.
오늘은 웹 개발에 필수적인 프론트엔드와 백엔드 중에서, 프론트엔드에서 활용되는 기술과 도구에 대해 알아 보았습니다. 이 글을 통해 프론트엔드의 기본 개념과 널리 사용되는 기술을 이해 하셨기를 바라며, 웹 개발 학습에 도움이 되었으면 좋겠습니다.
