Vite:

Vite는 'veet'이라고 발음하며(프랑스어로 '빠른'이라는 뜻), 개발자가 웹 애플리케이션을 더 빠르게 만들 수 있도록 돕는 모던한 프론트엔드 빌드 도구입니다.

Vite가 제공하는 기능은 다음과 같습니다:

• 개발 서버 (development server)
• 빠른 Hot reloading
• 프로덕션용 빌드 시스템 (build system for production)
• React, Vue, Svelte 등 프레임워크를 위한 프로젝트 스캐폴딩(Project scaffolding)

모든 것을 수동으로 설정할 필요 없이(Webpack, Babel 등), Vite는 바로 사용할 수 있는 개발 환경을 제공합니다.

Vite에 대해 들어본 적이 있거나 본 적이 있으신가요? Vite는 2023년 Stack Overflow 선정 개발자들이 사용하는 순위로 12위를 차지한 번들링 도구입니다. 위키피디아에서는 Vite를 다음과 같이 정의하고 있습니다.

Vite(프랑스어: [vit], 'veet'과 같은 발음)는 Vue.js의 창시자인 Evan You가 작성한 로컬 개발 서버이며, 기본적으로 Vue 및 React 프로젝트 템플릿에서 사용됩니다. TypeScript와 JSX를 지원하며, 내부적으로 번들링을 위해 Rollup과 esbuild를 사용합니다.

설명은 상당히 명확하지만, 오늘 이야기는 Vite를 이해하는 더 길고 쉬운 방법을 다룹니다. 먼저, Vite를 이해하기 위해 알아야 할 배경 지식이 있습니다.

왜 Vite를 사용할까요?

Vite가 등장하기 전에는 Create React App (CRA)이나 Webpack 같은 도구들이 흔히 사용되었습니다.

문제는 다음과 같았습니다:

• 느린 시작 시간(Slow startup time)
• 프로젝트 규모가 커질수록 느려지는 재빌드 속도(Slow rebuilds as the project grew)
• 긴 개발 주기(Longer development cycles)

Vite는 개발을 훨씬 빠르게 만들어 이러한 문제들을 해결합니다.

Vite를 사용할 경우:

Write Code
     ↓
Vite가 파일을 직접 서비스함
...

Vite를 사용하지 않을 경우:

Write Code
     ↓
Webpack이 전체 프로젝트를 번들링함
...

일반적인 Vite 프로젝트 구조:

my-app/
│
├── public/
...

컴포넌트 (Components):

컴포넌트는 독립적이고 재사용 가능한 코드 조각입니다. JavaScript 함수와 같은 목적을 수행하지만, 격리된 환경에서 작동하며 HTML을 반환합니다.

컴포넌트에는 Class components와 Function components 두 가지 유형이 있으며, 이 튜토리얼에서는 Function components에 집중할 것입니다.

오래된 React 코드베이스에서는 주로 Class components가 사용되는 것을 발견할 수 있습니다.

이제 Class components 대신 Hooks와 함께 Function components를 사용하는 것이 권장됩니다.

Class components도 여전히 지원되므로, 자세한 정보는 Class components 섹션을 확인하세요.

컴포넌트(Component)란 재사용 가능한 UI(User Interface) 조각입니다.

같은 HTML을 여러 번 작성하는 대신, 컴포넌트를 한 번 만들고 필요한 곳 어디든 사용할 수 있습니다.

웹사이트를 레고 블록 세트로 생각해 보세요:

• Navbar
• Button
• Card
• Footer

각 블록이 하나의 컴포넌트입니다.

컴포넌트를 사용하면:

function ProductCard() {
  return (
    <div className="card">
...

컴포넌트를 사용하지 않으면:

<div class="card">
  <h2>iPhone 16</h2>
  <p>₹80,000</p>
...

Node 패키지 관리자(NPM):

npm은 Node Package Manager의 약자입니다.

npm은 세계에서 가장 큰 소프트웨어 레지스트리입니다.

이 레지스트리에는 80만 개가 넘는 코드 패키지가 포함되어 있습니다.

오픈 소스 개발자들은 npm을 사용하여 소프트웨어를 공유합니다.

많은 조직들도 사적인 개발 관리를 위해 npm을 사용합니다.

이는 Node.js의 기본 패키지 관리자입니다. npm은 프로젝트가 의존하는 패키지(라이브러리)를 설치, 관리, 업데이트 및 제거하는 데 도움을 줍니다.

npm을 JavaScript 라이브러리를 위한 앱 스토어라고 생각하세요.

예를 들어, 다음이 필요하다면:

• React
• Express
• Axios
• Lodash

npm을 사용하여 설치할 수 있습니다.

**배경

자바스크립트 라이브러리와 npm이 활성화되기 전에는 개발자들이 HTML, CSS, JavaScript 파일을 서버에 업로드하여 프로젝트를 배포하는 방식을 사용했습니다. (사실 큰 그림으로 보면 현재의 개발 방식과 크게 다르지 않습니다.) 시간이 지나면서 자바스크립트 라이브러리가 더 보편화됨에 따라, 개발자들은 라이브러리 설치를 더 쉽게 하기 위해 npm을 적극적으로 활용하기 시작했습니다. 간단히 말해, npm은 자바스크립트 라이브러리를 모으는 플랫폼입니다. npm 라이브러리를 설치하면 프로젝트 디렉터리 내에 node_modules라는 폴더가 생성됩니다. 이 폴더에는 라이브러리와 그 의존성(dependencies)의 소스 코드가 포함되어 있습니다. 이는 개발자들이 모듈을 쉽게 가져올 수 있게 하지만, 두 가지 주요 단점이 있습니다.

• node_modules 폴더의 큰 크기
• 당시 import/require 문법이 브라우저 친화적이지 않았다는 사실

왜 npm을 사용할까요?

개발자들은 모든 기능을 처음부터 작성하는 대신, 다른 사람이 만든 패키지를 사용합니다.

예를 들어:

HTTP 요청을 하고 싶다면? → axios 설치
React에서 라우팅이 필요하다면? → react-router-dom 설치
아이콘이 필요하다면? → react-icons 설치

npm은 이러한 패키지들을 다운로드하고 그 버전을 관리합니다.

작동 방식:

Developer
    │
    │ npm install react
...

참고 자료:

https://www.w3schools.com/whatis/whatis_npm.asp
https://www.w3schools.com/react/react_components.asp
https://medium.com/@gmmicky1026/easy-explanation-about-vite-8a6493731fc4