ZENO — 웹 개발, 디자인, 자격증 정리

웹 개발을 시작할 때 가장 먼저 해야 하는 일은 개발 환경을 구축하는 것입니다. 이 글에서는 Node.js 프로젝트를 시작하는 가장 기본적인 세 가지 명령어에 대해 알아보겠습니다.

1. Node.js 버전 확인: node -v

이 명령어는 무엇을 하나요?

node -v 명령어는 현재 시스템에 설치된 Node.js의 버전을 확인합니다

 

bash

node -v
```

### 정상 출력 예시
```
v20.11.0

이것이 의미하는 것

• ✅ Node.js가 정상적으로 설치되어 있습니다
• ✅ 개발 서버를 실행할 준비가 완료되었습니다
• ✅ JavaScript를 서버 환경에서 실행할 수 있습니다

---

2. npm 버전 확인: npm -v

npm이란?

npm(Node Package Manager)은 한마디로 **"Node.js용 앱스토어 + 패키지 관리자"**입니다.

bash

npm -v
```

### 정상 출력 예시
```
10.2.4

npm으로 할 수 있는 것

• React, Next.js, Tailwind CSS 설치
• ESLint, Prettier 같은 개발 도구 설치
• 프로젝트에 필요한 모든 라이브러리 관리

이 명령어가 정상적으로 버전을 출력하면, 패키지 설치 엔진이 제대로 작동하고 있다는 의미입니다.

---

3. 프로젝트 초기화: npm init -y

가장 중요한 명령어

이 명령어는 일반 폴더를 정식 Node.js 프로젝트로 만들어주는 핵심 명령어입니다.

bash

npm init -y
```

### 이 명령어를 실행하면?

현재 폴더에 `package.json` 파일이 생성됩니다.
```
package.json  ← 생성됨!

package.json이란?

이 파일은 프로젝트의 신분증이자 설정 파일입니다:

• ✅ 프로젝트 이름과 버전
• ✅ 사용하는 라이브러리 목록
• ✅ 실행 가능한 스크립트
• ✅ 프로젝트 메타데이터

-y 옵션의 의미

-y 플래그는 "yes"의 약자로, 모든 질문에 자동으로 기본값으로 답하라는 의미입니다. 이 옵션 없이 npm init만 실행하면 프로젝트 이름, 버전, 설명 등을 하나하나 입력해야 합니다.

---

현재 상태 정리

이 세 명령어를 실행한 후, 프로젝트는 다음과 같은 상태가 됩니다:

항목상태

Node.js 설치	✅ 확인 완료
npm 작동	✅ 정상
프로젝트 초기화	✅ package.json 생성

이제 이 폴더는 단순한 폴더가 아닌 '정식 Node.js 프로젝트'입니다.

---

이제 할 수 있는 것들

package.json이 생성되었으므로 이제 다음과 같은 작업이 가능합니다:

프레임워크 설치

 

 

bash

npm install react
npm install next

CSS 프레임워크 설치

 

 

bash

npm install tailwindcss

개발 도구 설치

 

 

bash

npm install --save-dev eslint prettier

개발 서버 실행

 

 

bash

npm run dev

---

요약

세 줄의 명령어로 개발 환경의 기초를 완성했습니다:

 

 

bash

node -v       # Node.js 설치 확인
npm -v        # 패키지 매니저 확인
npm init -y   # 프로젝트 초기화

이 세 단계는 모든 Node.js 기반 프로젝트의 출발점입니다. React든 Vue든 Next.js든, 모두 이 과정에서 시작됩니다.

이제 본격적으로 라이브러리를 설치하고 코드를 작성할 준비가 완료되었습니다!