Node.js란?
Node.js는 Chrome V8 엔진으로 구동되는 JavaScript 런타임 환경이다.
즉, JavaScript를 브라우저가 아닌 서버에서도 실행할 수 있도록 만든 플랫폼이다.
🚀 쉽게 말해?
원래 JavaScript는 웹 브라우저에서만 실행되던 언어인데,
Node.js 덕분에 서버에서도 실행할 수 있게 됐다!
Node.js는 비동기 방식을 기본적으로 사용한다.
즉, 한 가지 작업이 끝날 때까지 기다리지 않고, 다음 작업을 실행한다.
Node.js는 기본적으로 단일 스레드(Single-threaded)로 작동하지만,
비동기 작업을 활용해 여러 작업을 동시에 처리할 수 있다.
I/O 작업(파일 읽기, 네트워크 요청 등)은 블로킹 없이 처리된다.
Windows, macOS, Linux 등 다양한 운영체제에서 실행 가능
오픈소스로 누구나 자유롭게 사용 가능
Node.js는 package.json 파일에 프로젝트의 모든 정보를 기록한다. 각 항목의 의미는 다음과 같다.
name: 프로젝트 이름
version: 프로젝트 버전 정보
description: 프로젝트 설명
main: 노드 어플리케이션일 경우 진입점 경로. 프론트엔드 프로젝트일 경우 사용하지 않는다.
scripts: 프로젝트 명령어를 등록할 수 있다.초기화시 test 명령어가 샘플로 등록되어 있다
author: 프로그램 작성자
license: 라이센스
🚀 1. 자바스크립트의 발전 속도 vs. 브라우저의 지원 속도
자바스크립트는 계속 새로운 기능이 추가되지만, 브라우저가 그 기능을 바로 지원하지 못하는 경우가 많다.
👉 최신 기능을 쓰려면 "징검다리 역할"을 하는 도구가 필요하다.
대표적으로 "Babel(바벨)"이 있는데, 이건 최신 자바스크립트 코드를 옛날 브라우저에서도 실행되도록 변환해 준다.
🔧 2. 개발을 더 편하게 해주는 도구들
프론트엔드 개발을 할 때는 여러 가지 도구들이 필요하다.
예를 들어:
✔ Webpack(웹팩): 여러 개의 자바스크립트, CSS, 이미지 같은 파일을 하나의 번들(Bundle)로 묶어주는 도구다.
👉 웹 개발을 하다 보면, 파일이 너무 많아지고 관리하기 힘들어지기 때문!
👉 여러 개의 파일을 하나로 합쳐서 성능을 최적화하면, 웹사이트 로딩 속도가 빨라진다!
🔹 웹팩이 하는 일
- 자바스크립트 파일 묶기 (import 또는 require로 불러온 파일들을 하나로 합침)
- CSS, 이미지 파일도 포함 가능 (예: SCSS, SASS, LESS 변환)
- 코드 압축 & 최적화 (파일 크기를 줄여서 로딩 속도를 빠르게!)
- 실시간 변경 적용 (Hot Reloading) (파일을 수정하면 자동으로 반영됨)
✔ NPM: 패키지 관리자로, 필요한 라이브러리를 쉽게 설치하고 관리할 수 있도록 도와줌
👉 개발할 때 남들이 만든 유용한 기능을 가져다 쓰면 더 빠르고 효율적으로 작업 가능!
👉 하지만, 일일이 파일을 다운로드하면 업데이트 관리가 어렵고 버전 충돌 위험이 있음.
👉 NPM을 사용하면, 명령어 하나로 패키지 설치 및 업데이트 가능!
이런 도구들은 Node.js 기반에서 동작하므로, Node.js가 설치되어 있어야 개발 환경을 만들 수 있다.
🎨 3. 고급 언어를 사용하려면 변환 과정이 필요하다
기본적인 HTML, CSS, JavaScript 외에도, 개발자들이 더 편하게 사용할 수 있는 언어들이 있다.
✔ TypeScript(타입스크립트): 자바스크립트를 더 체계적으로 작성할 수 있도록 도와줌
👉 마이크로소프트(Microsoft)에서 개발한 자바스크립트(JavaScript)의 상위 집합(Superset) 언어로, 자바스크립트의 기능을 확장하면서 정적 타입 검사(Static Type Checking) 및 객체 지향 프로그래밍(OOP) 기능을 추가한 언어이다.
👉 즉, TypeScript = JavaScript + 타입 시스템 + ES6 이상의 기능들
✔ SASS(사스): CSS를 더 강력하고 효율적으로 작성할 수 있도록 도와주는 CSS 전처리기(Preprocessor)
👉 CSS의 단점을 보완하여 변수, 중첩, 믹스인, 상속 등 프로그래밍적인 기능을 추가할 수 있다.
👉 SASS 파일(.scss 또는 .sass)을 작성한 후, 일반 CSS 파일로 변환해야 한다.
✅ SASS는 CSS를 더 강력하고 효율적으로 사용할 수 있도록 도와주는 도구다.
✅ 변수, 중첩, 믹스인, 상속 등 코드 재사용 기능을 제공하여 유지보수가 쉬워진다.
✅ SASS 파일을 작성한 후, CSS로 변환해야 웹에서 사용할 수 있다.
✅ 웹 개발에서 CSS보다 SASS를 많이 사용하며, 웹팩(Webpack)과 함께 자동 변환하는 것이 일반적
✏ SASS 기본 문법
SASS는 두 가지 문법을 제공한다.
1️⃣ .scss (가장 많이 사용됨, 일반 CSS와 비슷한 문법)
2️⃣ .sass (중괄호 {}와 세미콜론 ; 없이 들여쓰기로 구분)
🔹 1. 변수 사용 ($)
// SASS (SCSS 문법)
$main-color: #3498db; // 변수 선언
body {
background-color: $main-color; // 변수 사용
}
//⬇ CSS 변환 후 ⬇
body {
background-color: #3498db;
}✔ 색상, 폰트 크기, 여백 등을 변수로 관리하면 유지보수가 쉬워진다!
🔹 2. 중첩(Nesting)
// SASS
.navbar {
background: #333;
color: white;
a {
text-decoration: none;
color: inherit;
&:hover {
color: yellow;
}
}
}
//⬇ CSS 변환 후 ⬇
.navbar {
background: #333;
color: white;
}
.navbar a {
text-decoration: none;
color: inherit;
}
.navbar a:hover {
color: yellow;
}✔ 중첩을 사용하면 CSS 계층 구조를 더 직관적으로 표현할 수 있다.
🔹 3. 믹스인(Mixin) – 코드 재사용
// SASS
@mixin button-style {
padding: 10px 20px;
border-radius: 5px;
background-color: blue;
color: white;
}
// 믹스인 사용
.button {
@include button-style;
}
//⬇ CSS 변환 후 ⬇
.button {
padding: 10px 20px;
border-radius: 5px;
background-color: blue;
color: white;
}✔ 반복되는 스타일을 함수처럼 만들어서 재사용할 수 있다!
🔹 4. 상속(Extend) – 스타일 공유
// SASS
%box-style {
border: 1px solid #ddd;
padding: 10px;
border-radius: 5px;
}
.card {
@extend %box-style;
background: white;
}
.alert {
@extend %box-style;
background: red;
color: white;
}
//⬇ CSS 변환 후 ⬇
.card, .alert {
border: 1px solid #ddd;
padding: 10px;
border-radius: 5px;
}
.card {
background: white;
}
.alert {
background: red;
color: white;
}✔ 공통 스타일을 상속받아 중복을 줄이고 코드 유지보수를 쉽게 할 수 있다.
하지만!
👉 브라우저는 TypeScript와 SASS를 직접 이해하지 못한다.
👉 그래서 "트랜스파일러"라는 변환 도구를 사용해서 자바스크립트와 CSS로 변환해야 한다.
대표적인 트랜스파일러 = Babel(바벨)
🎯 Babel(바벨)이란?
최신 자바스크립트 코드를 구형 브라우저에서도 실행할 수 있도록 변환해주는 도구(트랜스파일러)다.
자바스크립트는 계속 새로운 기능이 추가되지만, 모든 브라우저가 최신 기능을 바로 지원하는 것은 아니다.
✔ 크롬, 파이어폭스 같은 최신 브라우저는 대부분 지원하지만,
✔ 인터넷 익스플로러(IE)나 오래된 브라우저에서는 실행되지 않는 경우가 많다.
👉 Babel을 사용하면 최신 문법을 옛날 브라우저에서도 실행 가능하도록 변환할 수 있다!
👉 React, Vue 같은 최신 프레임워크를 사용할 때 (JSX 같은 문법을 변환하는 데에도 사용됨)
Babel이 변환하는 대표적인 문법
1. 화살표 함수 (=>) 변환
// 최신 문법 (ES6+)
const add = (a, b) => a + b;
// ES5 (옛날 브라우저도 실행 가능)
var add = function (a, b) {
return a + b;
};
2. const, let 같은 최신 변수 선언 변환
// 최신 문법 (ES6+)
const name = "Alice";
let age = 25;
// ES5
var name = "Alice";
var age = 25;
3. 클래스 문법 변환
// 최신 문법 (ES6+)
class Person {
constructor(name) {
this.name = name;
}
}
// ES5
function Person(name) {
this.name = name;
}
Babel은 단독으로 사용하기도 하지만, 보통 Webpack과 함께 사용하여 자동 변환한다.
💡 결론
최신 웹 개발 환경을 만들려면, 단순히 HTML + CSS + JavaScript만 쓰는 게 아니라,
✔ Babel, Webpack 같은 도구를 사용해야 하고
✔ TypeScript, SASS 같은 고급 언어를 변환할 필요도 있으며
✔ 이 모든 걸 관리하려면 Node.js 환경이 필요하다!
즉, Node.js는 최신 프론트엔드 개발의 기반이 되는 필수 도구라고 볼 수 있다!
'[ javascript ]' 카테고리의 다른 글
| 스프레드 연산자 (...)란? (0) | 2025.02.27 |
|---|---|
| 대표적인 es6 문법 정리 (0) | 2024.12.30 |
| 부동소수점 이슈 (0) | 2024.03.29 |
| Node.js & npm 업데이트 하기 (1) | 2024.03.22 |
| 리액트란? (0) | 2024.03.19 |
