기존 포스팅에서 vue.js 개발을 위해 필요한 개발환경 구성을 위한 "node.js 설치 / Visual Studio Code 설치 / Build 환경 구성 / 서버 기동" 등에 대해서 알아보았습니다.
그럼, 이번에는 실제 vue.js 프로그램 개발을 위해 수정해야 하는 메인 파일인 App.vue 파일의 내용을 수정하고 이를 build 해 정상적으로 개발한 내용이 적용되는지 확인해 볼게요.
지난 포스팅에서 생성한 C:\vue_test 프로젝트 폴더를 열어줍니다. 그러면 아래와 같이 팝업이 뜨는데요.
선택한 폴더의 파일과 제작자에 대해서 신뢰를 하는지 물어봅니다. 해당 경로에 있는 프로그램은 자동적으로 수행될 수 있으므로 신뢰여부를 물어보는데요.
당연히, "Yes, I trust the athors"를 선택해야 합니다.
프로젝트 폴더의 내부를 살펴보면 아래와 같은데요. 생성한 vue_test 폴더 내부에 각 종 소스와 패키지들이 들어있는 것을 알 수 있습니다.
이제 코딩 및 테스트를 위해 메인 파일인 vue_test > App.vue 파일을 열어 보면, 기존 포스팅에서 확인한 로컬 호스트 서버에서 표시되는 메인 페이지의 파일인 것을 알 수 있습니다. "You did it!" 문구를 통해서 말이죠.
그럼 App.vue 파일을 수정하고 작성한 페이지가 로컬호스트에서 잘 배포되어 나오는지를 보겠습니다.
목적은 vue.js 코드를 실제 작성해보고 빌드 및 배포로 제대로 서버에 표시되는지 확인하기 위함이라, 튜토리얼에 나오는 최대한 간단한 내용을 작성해보았습니다.
<template>
<h1>안녕 Vue!</h1>
</template>
궁금해서 기존에 띄워놓은 브라우져로, 바로 F5를 툴러 리프레쉬 해봤는데요. 아래와 같이 페이지가 바로 뜨지는 않았습니다. 아마도 서버의 메인 페이지를 건드리면 기동한 서버가 자동으로 내려가나 봅니다...
그렇다면 터미널로 들어가 다시 "npm run dev" 명령어를 통해 서버를 다시 기동을 시켜줍니다.
서버를 기동하고 난 후, 다시 로컬호스트 주소를 통해 서버로 들어가면 수정한 내역이 반영된 것을 알 수 있습니다.
번외로, 우리가 서버를 기동할 때 npm run dev라는 명령어를 수행하는데, dev가 어디서 정의되는지를 알아보았더니 아래와 같이 pakage.json에 scripts로 정의한 항목에 선언되어 있는 것을 알 수 있습니다.
오늘은 간단하게 메인 페이지의 App.vue 파일을 수정하고, 서버를 재기동 해 서비스가 제대로 반영되었는지를 확인하는 과정을 실습해봤습니다.
이제는, 제대로 프론트쪽의 서비스를 구성하는 실습을 진행 해볼게요~