HTML, CSS, JavaScript
글쓴이는 Frontend를 처음 배워본다.
Frontend가 쓰는 용어가 뭔지도 잘 알지 못했다는 배경 아래에 이해한 내용을 정리해보겠다!
가장 먼저 웹사이트 개발을 위해 필요한 언어와 역할 등을 이해하고 넘어가보자.
웹사이트 개발을 위해서는 가장 먼저 알고 넘어가야 할 세가지 언어가 있다.
< HTML vs CSS vs JavaScript >
-
HTML : 웹사이트의 뼈대, 구조를 만드는 언어이다.
‘뼈대’라는 말 그대로 웹을 열었을 때 버튼, 입력창, 화면 분할 구성, 오디오, 체크박스, 링크 등 필요한 기능을 원하는 위치에 구조화 시켜주는 언어이다. -
CSS : CSS는 HTML로 만든 구성요소들이 표시되는 방법을 개선하고 꾸미는데 사용되는 스타일 시트(style sheet) 언어이다. 웹사이트를 시각적으로 돋보이게 만드는데 사용된다.
-
JavaScript(JS) : JS는 HTML을 보강하는 언어로, 웹사이트를 보다 interactive하게 만들어주고, 웹페이지의 구성요소 동작을 변경할 수 있도록 해주는 언어라고 볼 수 있다.
JavaScript는 Interactive?? 동적이다??
무슨 말인지 아래 예시로 감을 잡아보자.
: 메뉴의 경우 HTML로 햄버거 버튼을 만들었을때, 버튼을 누르면 새로운 메뉴가 나오면서 사용자가 웹사이트를 탐색하도록 만드는 것도 JS역할이다.
사실 메뉴의 경우 HTML로도 기능을 구현할 수 있다.
HTML로 메뉴를 만들 경우 보통<a>태그를 이용해서 새로운 웹페이지로 이동하는 방식이다.
이 방식은 페이지가 새로고침 되거나 다른 페이지로 이동해야 한다는 단점이 있다.
하지만, JS로 메뉴를 구현할 경우 페이지 이동 없이 현재 페이지에서 동적으로 메뉴를 열고 닫을 수 있다.
이렇게 할 경우 사용자 경험(UX)이 더 부드럽고 빠르게 동작할 수 있다.
(동적 vs 정적은 아래 추가에서 더 이해해보자.)
또한, HTML은 웹페이지의 구조(텍스트, 버튼, 입력창 등)를 정의하는 역할이므로 연산을 할 수 없다.
: HTML로 버튼을 눌렀을 때, 어떤 기능이 나오게 할지 만드는 파일이 JS파일이다.
계산기의 경우 HTML로 입력창과 사칙연산창을 만들고 결과를 띄우게 만들었을 때, 입력값을 받아와서 연산하여 결과를 보내주는게 JS의 역할이다.
3개 언어의 역할을 코드에서 나누는게 가장 이해가 확실히 갔다.
html 문서에는 <head>와 <body>로 나뉘고 <head>에는 <style>에서 꾸미기 요소를 집어넣고, <body>안에 <script>를 만들어 기능을 넣는다.
<style> → CSS파일로
<script> → JS파일로
나머지 <body>내용은 →html파일에
나누어 코드를 작성하고 html 파일에서 각각 <link>와 <script>태그로 연결한다면 렌더링 최적화를 할 수 있다. 즉, 가독성있고, 유지보수가 쉬운 파일 관리를 할 수 있다.
💡 정리: HTML, CSS, JavaScript 역할 분리
| 파일 종류 | 역할 | 작성하는 내용 |
|---|---|---|
| HTML (index.html) | 구조(Structure) | 웹페이지의 요소(텍스트, 버튼, 입력창 등)를 배치 |
| CSS (style.css) | 디자인(Style) | 색상, 크기, 여백, 배경 등 스타일을 정의 |
| JavaScript (script.js) | 기능(Functionality) | 버튼 클릭 시 동작, 데이터 처리, 이벤트 제어 |
---
그럼 Vue.js, Node.js React …는 뭐야? 요즘에 프론트엔드는 이걸 주로 쓴다는데?????
Vue, Node, React 등이 뭔지, 왜 등장했는지 알기 전에 먼저, JS와 웹의 발전에 대해 이야기 해보자.
JavaScript와 웹의 발전
처음 웹사이트는 "정적인 문서" 였다.
즉, 단순히 텍스트와 이미지만 표시되는 읽기 전용 페이지였다.
하지만, JavaScript가 등장하면서, 사용자가 클릭하고, 입력하고, 상호작용할 수 있는 웹사이트를 만들 수 있게 되었다.
뉴스, 블로그 글같이 읽는 것 에서 검색 기능, 실시간 채팅 등 할 수 있는 것 으로 발전한 것이다!
이러한 현대적이고 복잡한 대화형 웹사이트를 종종 웹 애플리케이션이라고 한다.
라이브러리와 프레임워크
웹이 점점 발전하면서, JavaScript 코드도 복잡해졌다.
그래서 개발자들은 자주 쓰이는 기능을 묶어서 라이브러리(library)로 만들었다.
비유하자면, 즉석 조미료 같은 것이다.
원래는 양념을 다 직접 만들어 요리하지만, 미리 만들어진 조미료를 쓰면 훨 씬 편하다.
예시로 JavaScript에서 날짜를 다루는 게 어렵다면, Moment.js 같은 라이브러리를 가져와서 쓰면 된다.
라이브러리란? 자주 쓰는 기능을 모아둔 도구
예를 들어, 숫자 계산을 쉽게 하는 라이브러리, 애니메이션 효과를 쉽게 주는 라이브러리 같은 것들이 있다.
JavaScript에서 가장 유명한 라이브러리는 jQuery, Lodash 등이 있다.
JavaScript로 대규모 웹 애플리케이션을 만들려면, 구조를 잘 설계해야한다.
하지만 매번 새로운 웹사이트를 만들 때마다 설계를 처음부터 다시 하는 건 비효율적이다.
그래서, "웹 애플리케이션을 만들 때 이렇게 하면 좋아!" 라고 표준을 정해둔 것이 프레임워크다.
프레임워크의 비유로는 건축 설계도를 들 수 있다. 미리 만들어진 기본적인 건축 설계도를 가져와 쓴다면 더 빠르고 효율적으로 집을 짓듯, 웹사이트를 만들 수 있다고 생각하면 된다.
프레임워크란? 소프트웨어를 구축하는 방법을 미리 정해놓은 틀(설계도)로 Vue, React 등이 있다.
| 라이브러리 | 프레임워크 | |
|---|---|---|
| 정의 | 특정 기능을 쉽게 사용할 수 있도록 제공하는 코드 모음 | 웹 애플리케이션을 만들기 위한 전체적인 구조(설계도) |
| 예제 | jQuery, Lodash, Axios | Vue.js, React, Angular |
| 사용 방식 | 개발자가 원하는 기능을 가져다가 씀 | 프레임워크가 개발 방식(구조, 규칙)을 정해줌 |
그렇다면 마지막으로 프레임워크 중에서 Vue에 대해 알아보자.
Vue.js란?
Vue.js는 JavaScript 프레임워크로, 점진적으로 기능을 추가할 수 있는 장점이 있다.
Vue는웹 개발을 쉽게 만들어주는 도구(프레임워크)중 하나다.
Vue는 처음부터 완전히 Vue로 만들 필요 없이, 기존 프로젝트에 필요한 부분만 추가할 수도 있다. 또는 Vue로 완전한 웹 애플리케이션을 만들 수도 있다.
이를 통해 jQuery 같은 라이브러리를 Vue로 대체할 수도 있다.
또한, Vue에서 사용하는 컴포넌트(Component) 시스템을 활용하면, 재사용 가능한 UI 블록을 쉽게 만들 수 있다.
// 기존 HTML 코드에서 Vue 일부만 추가
✔ 기존 HTML에 <script> 태그로 Vue를 추가하는 방식
✔ HTML을 그대로 두고, 일부 기능만 Vue로 추가할 수 있음
<div id="app">
<p>{{ message }}</p>
</div>
<script>
new Vue({
el: "#app",
data: {
message: "Hello, Vue!"
}
});
</script>
// Vue를 이용해 완전한 컴포넌트 기반 프로젝트 만들기
✔ Vue 컴포넌트는 독립적인 UI 블록
✔ 이런 컴포넌트들을 조합해서 더 큰 애플리케이션을 만들 수 있음
<template>
<div>
<h1>{{ title }}</h1>
<p>이것은 Vue 컴포넌트입니다.</p>
</div>
</template>
<script>
export default {
data() {
return {
title: "Vue 컴포넌트 예제"
};
}
}
</script> 또, Vue는 클라이언트 사이드 라우팅과 상태 관리를 지원하지만, 기본적으로 포함하진 않는다.
이 외 Vue에 대해선 나중에 따로 다뤄보겠다!
⇒ 결론 : Vue.js는 JavaScript 프레임워크로, 기존 HTML을 향상시키거나 SPA를 만들 수 있다.
추가
- 정적(Static) vs 동적(Dynamic)
- 정적(Static): HTML과 CSS만 사용 → 처음부터 모든 게 정해져 있음 (예: 새로운 페이지로 이동).
// 정적인 HTML만 사용한 경우 <a href="menu.html">메뉴 보기</a>- 사용자가 버튼을 누르면
menu.html이라는 새로운 페이지로 이동함. - 즉, "메뉴 보기"를 누르면 완전히 다른 페이지가 열리는 방식(정적)
- 사용자가 버튼을 누르면
- 동적(Dynamic): JavaScript를 사용 → 사용자의 행동(클릭 등)에 따라 실시간으로 화면이 바뀜 (예: 메뉴가 나타났다 사라짐).
// 동적인 JavaScript를 사용한 경우 <button id="menuButton">메뉴 열기</button> <div id="menu" style="display: none;">메뉴 내용</div> <script> document.getElementById("menuButton").addEventListener("click", function() { let menu = document.getElementById("menu"); if (menu.style.display === "none") { menu.style.display = "block"; // 메뉴 나타남 } else { menu.style.display = "none"; // 메뉴 사라짐 } }); </script>- 버튼을 누르면 페이지를 새로고침하지 않고 메뉴가 나타났다 사라졌다 함.
- 사용자의 클릭 동작에 반응해서 화면이 바뀌므로 "동적"
- 정적(Static): HTML과 CSS만 사용 → 처음부터 모든 게 정해져 있음 (예: 새로운 페이지로 이동).
참조
https://yozm.wishket.com/magazine/detail/263/
https://developer.mozilla.org/ko/docs/Learn_web_development/Core/Frameworks_libraries/Introduction
