[ VueJS 로 프론트엔드 개발 ] 프로젝트 생성 및 컴포넌트 구조

Vue 프로젝트를 생성하기 위해서 NodeJS 에서 프로젝트를 생성할 수 있다. 이 때 vite 라는 서버 및 플랫폼 도구를 통해 프로젝트를 생성할 수 있다. 한편 초반에 Vite 가 아닌 다른 도구를 통해 설치한다고 몇 시간을 삽질했는데, 자료를 찾아보니 각 도구마다 세세한 설정 및 옵션이 다르다고 한다.

위 명령을 입력하면 프레임 워크를 선택하라고 뜨는데, 이 vite 라는 도구를 통해서 Vue 뿐만이 아니라 React 등 다양한 프레임워크를 사용할 수 있는 듯 싶다.

여기서 키보드 화살표키를 사용해서 Vue 프로젝트를 선택한다.

TypeScript, JavaScript 등 다양한 언어 타입을 선택할 수 있는데, 여기서는 JavaScript 를 지정한다.

그러면 새 디렉터리가 생성되는데, 프로젝트 디렉터리에 들어간 뒤에 npm install 명령을 입력한다.

그러면 현재 생성된 패키지의 필수 구성 요소 및 각종 컴포넌트들이 설치된다.

그런 뒤 npm run dev 명령을 통해 프론트 서버를 실행할 수 있다.

VITE v6.3.5 ready in 625 ms ➜ Local: http://localhost:5173/ ➜ Network: use --host to expose ➜ press h + enter to show help

프론트 서버가 실행되면 위와 같은 메시지가 뜨는데, 로컬 호스트 포트로 접속한다.

한편 프로젝트 디렉터리 안에 들어가면 index.html 파일이 존재하는데 열어본다.

이 코드를 보면 메인 파일은 위와 같이 고정되어 있고, 페이지가 로드되면 src/main.js 스크립트를 모듈로 불러온다.

main.js 에는 기본적인 앱의 Initialization 이 작성되어있다. 이 코드들은 모두 클라이언트 영역에서 실행되며 #app 이라는 id를 가진 div 영역에 App.vue 의 <template> 가 렌더링되어 적용된다.

vue 파일 내에는 각각의 <template>이 있는데 이것이 실제 Virtual dom 영역으로 렌더링되는 컴포넌트들을 정의한다. 실제 HTML 태그를 넣을 수도 있고, 다른 vue 컴포넌트를 포함할 수도 있다.

다음 게시글에서는 임의 컴포넌트를 정의해서 적용하는 연습을 해보고자 한다.