프론트엔드와 백엔드에 대해 가볍게 짚고 넘어가자.
이 둘은 웹이나 앱을 개발할 때 주요한 두 가지 부분을 담당한다.
프론트엔드는 말 그대로 앞면(front)을 담당한다. 웹사이트나 앱에서 사용자가 실제로 보는 화면을 만드는 부분이다. 웹사이트를 켰을 때 디자인, 버튼, 텍스트 등 눈에 보이는 모든 요소가 프론트엔드로 구성된 것이다.
대표적으로 HTML, CSS, JavaScript가 있는데, HTML은 건물의 뼈대 같은 역할로, 웹 페이지의 기본 구조를 담당한다. CSS는 건물의 인테리어와 같은 역할로, 웹사이트의 색깔, 레이아웃 등을 담당한다. JavaScript는 건물로 따지자면 전기를 넣어 자동문이 작동하게 되는 것으로, 버튼을 클릭했을 때 페이지가 바뀌거나 요소가 움직이는 등 인터랙션을 가능하게 해 준다.
백엔드는 말 그대로 프론트엔드의 뒷면(back)에서 작동하며, 실제로 웹사이트가 어떻게 동작하고, 데이터를 어떻게 주고받는지를 관리한다. 웹사이트에서 사용자가 어떤 버튼을 클릭하면, 그 정보가 백엔드로 전달된다. 예를 들어, 사용자가 로그인 버튼을 누르면, 백엔드는 사용자의 아이디와 비밀번호를 확인하고, 로그인 요청을 처리한다. 백엔드는 데이터를 저장하거나 불러오고, 프론트엔드에 필요한 정보를 다시 전달한다.
대표적으로 Node.js, MySQL이 있는데, Node.js는 백엔드에서 자주 쓰이는 JavaScript 런타임 환경으로, 웹 서버를 만들고 요청을 처리한다. MySQL 같은 데이터베이스는 사용자의 데이터(아이디, 게시물, 주문 내역 등)를 저장하고 관리하는 역할을 한다.
💡 프론트엔드에 사용되는 다양한 기술 스택
프론트엔드에는 HTML, CSS, JavaScript 말고도 다양한 것들이 사용되는데,
🍉 React, Vue, Angular (JavaScript 프레임워크/라이브러리)
앞에 나온 정적인 친구들,, HTML, CSS에 움직임을 불어넣는 게 JavaScript라고 했는데 이 JavaScript의 기능을 더 강력하게 도와주는 이 세 친구(React, Vue, Angular)들은 아주 요긴하게 쓰인다.
2023년 기준 프레임워크의 1, 2, 3등이 전부 이 친구들이니 얼마나 중요한지 감이 잡힐 것이다!
용어가 난립하므로,,
프레임워크, 라이브러리, SDK에 대한 설명을 한 줄로 정리하자면,,
🍉 프레임워크 규칙과 구조를 제공. 개발자는 그 틀 안에서 코드를 작성.
🍉 라이브러리 특정 기능을 수행하는 코드 묶음. 이 중 개발자가 원하는 대로 선택해서 사용.
🍉 SDK 라이브러리를 포함하는 훨씬 큰 개념. 개발에 필요한 도구, 문서, 샘플 코드, 테스트 환경 등등 온갖 종류를 포함.
암튼 다시 React로 돌아와서,,
React는 Facebook이 만든 라이브러리다. 웹사이트는 페이지가 여러 부분으로 이루어져 있는데 React는 "컴포넌트"라는 개념을 사용해서 페이지를 그 "여러 부분"을 실제로 쪼개서 관리하게 해준다. 이게 왜 좋냐면, 예를 들어 쇼핑몰 웹사이트의 경우, 상품 목록, 장바구니, 결제 버튼 등등 수많은 부분들이 있는데 이 중 하나가 업데이트되면 웹 페이지 전체가 새로고침(전통적인 웹사이트는 그러하다)되는 게 아니라 해당 부분만 새로고침이 되어서 편하다!
Vue는 React보다 가볍고 쉽다.
Angular는 Google에서 만들었는데 이건 라이브러리가 아니라 프레임워크다. 게다가 풀 프레임워크라서 대규모 프로젝트에 필요한 웬만한 기능들을 다 가지고 있다.
🍉 기타 컴포넌트 기반 프레임워크/라이브러리
대부분의 라이브러리/프레임워크는 런타임에 동작하는 반면 Svelte는 컴파일러 기반이다. 사용자에게 이미 컴파일된 코드가 주어지기 때문에 로딩이 적다. 작고 빠른 웹 앱에 적당하며, 성능 최적화가 중요할 때 주로 사용한다.
Svelte는 애초에 개발할 때(컴파일 타임에) 코드를 최적화했기 때문에 DOM을 직접 조작해도 충분히 빠르다. (Virtual DOM을 사용하는 경우보다도 빠르다!)
DOM은 Document Object Model의 약자로, 웹 페이지의 구조를 브라우저가 이해할 수 있는 트리 형태의 객체 모델로 나타낸 것이다. 그런데 이걸 직접 조작하는 것은 시간이 많이 들기 때문에 Virtual DOM이라는 것을 만들어 조작한다. 이는 실제 DOM의 복사본으로, 이 Virtual DOM에 변화가 생기면 이를 실제 DOM과 비교하며 차이점만 찾아내 반영한다. React나 Vue 같은 친구들이 이걸 사용한다.
다음으로 Preact가 있다. 이름이 React와 매우 비슷하지만, 실제로는 매우 비슷한 것이 맞다. React와 거의 동일한 기능을 제공하는데 파일 크기가 훨씬 작고 빠르게 로딩이 되며 기존 React와의 호환성도 좋다.
다음은 Solid.js다. 이 친구는 React와 유사한데, Virtual DOM을 사용하지 않고, 'reactive update'를 사용해 속도를 향상했다. 직접 DOM을 바꾸는 것은 맞지만, 그렇다고 고전적 웹처럼 웹 전체를 통째로 바꾸는 것이 아니라 변경된 부분만 바꾼다. 바로 'reactive system'을 사용해서 그렇다고 하는데 이게 구체적으로 뭔지는 솔직히 알 필요는 없는 것 같다.
아무쪼록 React, Vue, Angular가 워낙 강자이니 얘네들보다 파일 크기가 작거나, 속도가 빠르거나 이런 식으로 승부를 보는 것 같다.
다음은 Stencil.js다. 이 친구 역시 컴파일러 기반 프레임워크인데 특기할만한 사항은 '재사용 가능한 UI 컴포넌트'를 쉽게 만들 수 있다는 특징이 있다. 즉, Stencil에서 만든 웹 컴포넌트는 React 같은 다른 프레임워크에서도 사용할 수 있다! 게다가 사전 렌더링(Pre-rendering) 기능이 있어서, 정적 HTML 페이지를 생성하고 이를 통해 SEO 최적화를 지원한다.
Lit는 이름처럼 작고 가벼운 웹 컴포넌트를 다양한 프레임워크에서 재사용할 수 있는 환경을 제공하는 데 중점을 둔다. 경량 JavaScript 라이브러리다.
🍉 경량 및 고성능 프레임워크/라이브러리
qwik는 '초고속 로딩'을(역시 이름 따라 간다) 목표로 설계된 아주 최신 프레임워크다. Lazy Loading(지연 로딩)을 극단적으로 사용하여 초기 로딩 시간을 혁신적으로 줄인다. 또한, 서버에서 렌더링된 페이지가 브라우저로 전송되면, 이를 브라우저가 그대로 이어서 사용할 수 있으니 빠르게 동작할 수 있다.
Alpine.js는 아주 가벼운 JavaScript 프레임워크로 기존에 구축된 HTML 페이지에 간단한 동적인 요소를 추가할 때 주로 사용된다.
🍉 대규모 어플리케이션 (풀스택 프레임워크)
다음으로는 대체 개발자들은 왜 이렇게 근본 없는 로고를 사용하는지 모르겠는데 암튼 Ember.js가 있다. "Convention over Configuration" 즉, 설정보다 관습이라는 철학을 따르는데, Ember가 미리 정해둔 규칙에 맞춰 개발하면 복잡한 설정을 하지 않고도 일관된 구조와 빠른 개발이 가능하다. 덕분에 팀이 일관성을 유지하여 개발할 수 있다.
거의 모든 기능이 내장되어 있어서 대규모 앱 개발에 적합하다.
다음 글에서는 백엔드에서 많이 사용되는 라이브러리와 프레임워크를 알아보자!
'분명 전산학부 졸업 했는데 코딩 개못하는 조준호 > Web' 카테고리의 다른 글
| 프론트엔드 & 백엔드 포함된 초간단 서비스 만들어 보기 - (3) 백엔드의 주요 기술 스택(클라우드, CI/CD, 컨테이너 및 오케스트레이션) (0) | 2024.10.25 |
|---|---|
| 프론트엔드 & 백엔드 포함된 초간단 서비스 만들어 보기 - (2) 백엔드의 주요 기술 스택(언어, 프레임워크, DB, 웹서버, API 방식) (1) | 2024.10.12 |
| 공공데이터포털에서 오픈 API를 사용해서 치킨집 데이터 긁어오기 (7) | 2024.07.23 |
| 네이버 오픈 API 사용해서 "검색" 데이터 긁어오기 (5) | 2024.07.22 |
| CSS 적용 우선순위 - 기타 중요한 사항 총정리 (1) | 2024.07.02 |
한국은행 들어갈 때까지만 합니다
조만간 티비에서 봅시다
