▶ AI시대에서 개발자가 사는 법

3분 읽기
Last updated on

Vue3 로 빠르게 프론트 웹 개발을 시작한다

📦 챕터1. Node를 설치한다

Node.js 의 공식 홈페이지는 https://nodejs.org/ 다. 그냥 최신 버전을 설치하면 된다. 프로덕션용이라면 마지막 LTS버전을 사용하면 될 것.

Node.js 홈페이지

Node.js란?

비동기 이벤트 기반 JavaScript 런타임인 Node.js는 확장 가능한 네트워크 애플리케이션을 구축하도록 설계되었다.

더 쉽게 말하면:

  • 서버에 Node.js가 설치되어있고
  • 우리는 Node.js를 이용하여 자바스크립트 언어로 프로그램을 만들어서 사용할 수 있다
  • 지금은 단순히 Vue로 프로젝트를 시작하려면 꼭 필요한 프로그램이라고만 알고 있으면 된다

🚀 챕터2. Vue프로젝트를 생성한다

Vue 공식홈페이지 Quick Start 공식 홈페이지를 가서 따라하면 된다.

Vue 공식 홈페이지

프로젝트 생성 명령어

터미널을 열고 프로젝트 폴더에서 아래 명령어를 수행한다:

npm init vue@latest

프로젝트 생성 시작

y를 입력한다.

프로젝트명 입력

프로젝트 명을 입력한다. 나는 my-vue-project라고 했다.

프로젝트 설정 옵션

앞으로 계속 질문이 나온다:

➜  vue npm init vue@latest
Need to install the following packages: create-vue@3.7.1
Ok to proceed? (y) y

Vue.js - The Progressive JavaScript Framework

✔ Project name: … my-vue-project
✔ Add TypeScript? … No / Yes
✔ Add JSX Support? … No / Yes
✔ Add Vue Router for Single Page Application development? … No / Yes
✔ Add Pinia for state management? … No / Yes
✔ Add Vitest for Unit Testing? … No / Yes
✔ Add an End-to-End Testing Solution? › No
✔ Add ESLint for code quality? … No / Yes
✔ Add Prettier for code formatting? … No / Yes

Scaffolding project in /Users/evilcurse/Projects/vue/my-vue-project...

Done. Now run:

  cd my-vue-project
  npm install
  npm run format
  npm run dev

내가 선택한 옵션들

선택한 옵션들

  • TypeScript: Yes
  • JSX Support: No
  • Vue Router: Yes
  • Pinia: Yes
  • Vitest: Yes
  • E2E Testing: No
  • ESLint: Yes
  • Prettier: Yes

🎯 챕터3. Vue서버를 가동한다

설치완료된 후 실행하라고 한 그대로 명령어를 친다:

cd my-vue-project
npm install
npm run format
npm run dev

실행 결과

아래와 같이 출력된다:

➜  vue cd my-vue-project
➜  my-vue-project npm install

added 389 packages, and audited 390 packages in 24s

110 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

➜  my-vue-project npm run format

> my-vue-project@0.0.0 format
> prettier --write src/

src/App.vue 121ms
src/assets/base.css 8ms
src/assets/main.css 2ms
src/components/__tests__/HelloWorld.spec.ts 8ms
src/components/HelloWorld.vue 26ms
src/components/icons/IconCommunity.vue 3ms
src/components/icons/IconDocumentation.vue 2ms
src/components/icons/IconEcosystem.vue 2ms
src/components/icons/IconSupport.vue 1ms
src/components/icons/IconTooling.vue 2ms
src/components/TheWelcome.vue 12ms
src/components/WelcomeItem.vue 6ms
src/main.ts 3ms
src/router/index.ts 5ms
src/stores/counter.ts 4ms
src/views/AboutView.vue 2ms
src/views/HomeView.vue 2ms

➜  my-vue-project npm run dev

> my-vue-project@0.0.0 dev
> vite

  VITE v4.4.6  ready in 420 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h to show help

브라우저에서 확인

서버가 가동된 것으로 보이고 http://localhost:5173을 브라우저로 접속해 본다.

Vue 초기 화면

✅ 완료!

축하합니다! Vue 3 프로젝트가 성공적으로 설정되었습니다!

📚 추가 정보

프로젝트 구조

my-vue-project/
├── node_modules/
├── public/
├── src/
│   ├── assets/
│   ├── components/
│   ├── router/
│   ├── stores/
│   ├── views/
│   ├── App.vue
│   └── main.ts
├── index.html
├── package.json
├── tsconfig.json
└── vite.config.ts

주요 명령어

  • npm run dev - 개발 서버 실행
  • npm run build - 프로덕션 빌드
  • npm run preview - 빌드된 결과물 미리보기
  • npm run test:unit - 유닛 테스트 실행
  • npm run format - 코드 포맷팅

다음 단계

  1. 컴포넌트 만들기
  2. 라우터 설정하기
  3. Pinia로 상태 관리하기
  4. API 연동하기

Vue 3로 멋진 프로젝트를 만들어보세요! 🎉