[Vue.js] Vue3 시작하기

Vue.js란?🤷

 

 

Vue.js는 사용자 인터페이스와 싱글 페이지 애플리케이션(SPA)을 쉽게 구축할 수 있도록 도와주는 가벼운 프론트엔드 JavaScript 프레임워크입니다. 직관적인 API와 반응성 시스템을 통해 개발자가 효율적으로 웹 애플리케이션을 개발할 수 있도록 설계되었습니다.

 

Vue.js는 현대 웹 개발에서 주목받는 프론트엔드 프레임워크입니다. 단순히 UI를 만드는 도구를 넘어, 개발자에게 효율성과 즐거움을 선사합니다.😆😆

 

1. 컴포넌트 기반 아키텍처

Vue.js는 UI를 작은 컴포넌트로 나누어 관리합니다. 이 접근법은 코드의 재사용성을 높이고, 애플리케이션을 더 이해하기 쉽게 만듭니다.

 

2. 반응성 시스템

Vue의 반응성 시스템은 데이터와 UI를 자동으로 동기화합니다. 데이터가 변경되면 UI도 즉시 업데이트되어, 변화하는 상태를 손쉽게 관리할 수 있습니다.

 

3. 직관적인 템플릿 문법

Vue.js는 HTML 기반 템플릿을 사용해 데이터를 쉽게 바인딩할 수 있습니다. 간단한 문법으로 강력한 UI를 구축할 수 있어, 배우기 쉽고 사용하기 편리합니다.

 

 

 

Vue.js 설치하기 📗

 

npm이 깔려있다는 전제하에 Vue3를 설치해보도록 하겠습니다!

 

npm create vue@3

 

cmd 또는 vscode의 터미널에서 위와 같이 실행합니다.

 

 

√ Project name: ... 프로젝트 이름을 설정하는 단계입니다.
√ Add TypeScript? ... TypeScript를 사용할 것인지 선택합니다.
√ Add JSX Support? ... JSX 지원을 추가할지 선택합니다.
√ Add Vue Router for Single Page Application development? ... Vue Router를 추가할지 선택합니다.
√ Add Pinia for state management? ... Pinia를 상태 관리 라이브러리로 사용할지 선택합니다.
√ Add Vitest for Unit Testing? ... Vitest를 단위 테스트 도구로 추가할지 선택합니다.
√ Add an End-to-End Testing Solution? » End-to-End Testing(E2E 테스트) 솔루션을 추가할지 선택합니다.
√ Add ESLint for code quality? ... ESLint를 코드 품질 검사 도구로 추가할지 선택합니다.
√ Add Prettier for code formatting? ... Prettier를 코드 포맷팅 도구로 추가할지 선택합니다.
√ Add Vue DevTools 7 extension for debugging? (experimental) ... Vue DevTools 7 확장 기능을 디버깅 도구로 추가할지 선택합니다.

 

 

Vue.js 프로젝트 설정이 완료되면 위와 같이 뜨게되는데, 이 상태가 되면 90% 완료입니다!👏👏👏

 

프로젝트가 생성된 폴더의 위치로 이동해주세요!

cd tstory

저는 tstory라는 폴더에 tstory라는 프로젝트를 생성하여 경로를 바꿔줬습니다.

 

 

그리고 프로젝트 설정 후 package.json 파일이 생성됩니다. 이 파일에는 프로젝트에 필요한 의존성과 스크립트 정보가 포함되어 있습니다. 의존성은 프로젝트가 실행되는 데 필요한 라이브러리와 도구를 정의합니다. 

 

그렇기에 해줘야 할 것은 npm install 명령어를 실행하여, package.json 파일에 정의된 의존성 패키지들이 node_modules 디렉토리에 설치해야합니다.

 

 

npm install

 

위와 같이 실행을 하게 되면, 성공적으로 node_modules 디렉토리에 설치가 완료된 것입니다.

 

 

npm run dev는: package.json의 scripts 섹션에 정의된 dev 스크립트를 실행하여, 개발 모드에서 애플리케이션을 실행합니다. Vue.js 프로젝트는 npm run dev를 실행하면 개발 서버가 시작되는데, 이 개발 서버는 코드 변경 사항을 실시간으로 감지하여 브라우저에 즉시 반영합니다.

npm run dev

 

위와 같이 실행을 하게 되면

 

로컬에서 들어갈 수 있는 url이 나오는데, 해당 url 접근 시

 

성공적으로 vue프로젝트를 실행시킬 수 있습니다!👍👍