Node.js 설치 확인하기
프론트엔드 개발을 시작하려면 우선 Node.js가 정상적으로 설치되어 있는지 확인해야 합니다.
아래 명령어를 터미널에 입력하여 Node.js가 설치되었는지 확인 가능합니다.
node -v
npm -v
Vite로 프론트엔드 프로젝트 생성하기
Vite라는 프론트엔드 빌드 도구로 프로젝트를 시작합니다. (2025년 5월 기준)
1. 터미널 위치 확인
터미널에서 프로젝트를 진행하고 싶은 위치로 이동해야 합니다.
터미널에서 ls를 입력하여 현재 경로 확인
cd 원하는 경로 를 입력하여 경로 이동
2. Vite로 프로젝트 초기화
아래 명령어를 입력하면, Vite가 자동으로 최신 버전의 프로젝트를 생성합니다.
npm create vite@latest
• Project name
프로젝트 이름을 입력합니다.
(엔터를 누르면 현재 폴더명이 자동 적용됩니다.)
• Select a framework:
│ ○ Vanilla
│ ○ Vue
│ ● React
│ ○ Preact
│ ○ Lit
│ ○ Svelte
│ ○ Solid
│ ○ Qwik
│ ○ Angular
│ ○ Marko
│ ○ Others
└
프레임워크를 선택합니다.
여기서는 React를 선택하며 Vue, Svelte등 원하는 다른 프레임워크가 있을 시 선택 가능합니다.
• 언어 선택: JavaScript 또는 TypeScript 중 원하는 언어를 선택하세요.
◆ Select a variant:
│ ● TypeScript
│ ○ TypeScript + SWC
│ ○ JavaScript
│ ○ JavaScript + SWC
│ ○ React Router v7 ↗
│ ○ TanStack Router ↗
│ ○ RedwoodSDK ↗
└
언어 선택입니다.
JavaScript 또는 TypeScript 중 원하는 언어를 선택하세요.
설치가 완료되면, 아래 명령어로 프로젝트 폴더로 이동합니다.
cd 프로젝트 폴더명
3. 필요한 패키지 설치
프로젝트 폴더 안에서 아래 명령어를 입력하세요.
npm install
위의 메세지를 입력하면 프로젝트에 필요한 모든 패키지가 설치됩니다.
4. 개발 서버 실행
아래 명령어를 입력하면 개발 서버가 실행됩니다.
npm run dev
터미널에 표시된 주소(예: `http://localhost:5173`)를 브라우저에 입력하면 프로젝트의 기본 화면이 나타납니다.
프로젝트 구조
프로젝트 폴더 안에는 다양한 파일들이 설치되어 있습니다.
• src/: App.jsx 또는 App.tsx, main.jsx 또는 main.tsx
• index.css
• public/: favicon.ico 등 정적 파일
• package.json: 프로젝트 정보와 설치된 패키지 목록
불필요한 파일/코드 삭제(컴포넌트 수정)
프로젝트 폴더 안의 `src/App.jsx` 또는 `App.tsx` 경로의 파일을 열어 수정이 가능합니다.
프로젝트의 내용을 초기화 하기 위해 아래 파일/코드를 삭제하거나 비웁니다.
src/App.tsx(JSX)
function App() {
return <div></div>;
}
export default App;
- src/assets/ 폴더: 전체 삭제 (로고, 이미지 등)
- src/App.css: 삭제
- src/index.css: 내용 전체 삭제하거나 최소화(원한다면 파일 자체도 삭제 가능하나, main.tsx에서 import도 지워야 합니다.
- src/vite-env.d.ts: 타입스크립트라면 유지
public 폴더
- public/vite.svg 등 이미지 파일 삭제
- public/favicon.ico: 필요 없으면 삭제
코드에서 import 정리
- main.tsx(JSX)에서 import './index.css'; 등 불필요한 import 삭제
- App.tsx에서 import './App.css'; 등 삭제
index.html에서 타이틀/메타태그 변경
- public/index.html 파일에서 `<title>`, `<meta>` 등도 원하는 대로 비우거나 수정
남는 파일 구조 예시
src/
App.tsx
main.tsx
vite-env.d.ts (TS인 경우)
public/
index.html
package.json
정리
• App.tsx: 완전히 빈 컴포넌트
• assets, css, 샘플 코드, 이미지: 모두 삭제
• index.html: 타이틀 등도 초기화
• 불필요한 import: main.tsx, App.tsx에서 모두 삭제
• 코드 정리: ESLint, Prettier를 설치하면 코드가 더 깔끔해집니다.
• 버전 관리: `git init`으로 Git 저장소를 만들면 프로젝트를 안전하게 관리할 수 있습니다.
• 확장 기능: 라우터, 상태관리 등은 프로젝트가 커지면 추가하세요.
이렇게 하면 완전 상태의 프로젝트가 됩니다.
이후부터는 원하는 컴포넌트, 스타일, 이미지를 자유롭게 추가하면서 개발이 가능해지고
실제로 많은 개발자들이 이렇게 정리해서 "나만의 템플릿"을 만들어 사용합니다.
또한 이렇게 정리한 뒤, 이 상태를 GitHub에 올려두면 다음 프로젝트부터 degit 등으로 바로 복제해서 쓸 수 있습니다.
위의 내용으로 Vite를 이용하여 React의 기본적인 세팅 방법을 알아보았습니다.
추후에 라우팅, 컴포넌트 분리, API 연동 등 더 심화된 내용을 포스팅 하겠습니다.