[프로그래밍] Vue.js 코딩 개발을 위한 빌드 환경 구성 및 실행 테스트 해보기 (VSC, Visual Studio Code, build, vite, install)

지난 포스팅 과정에서 node.js 설치와 Visual Studio Code를 설치해봤는데요.

 

이제 본격적으로 Vue.js 실습을 진행해 보려고 합니다.

 

1. 프로젝트 생성

 

먼저 샘플 코드 작성을 하기 위해서는, vue 프로젝트를 생성해야 합니다. 프로젝트를 생성하기 위해서는 프로젝트가 위치할 경로를 결정해야 하는데요.

 

이번에는 찾기 쉽게 C:\ 아래에 바로 프로젝트를 생성해보려고 합니다.

 

비주얼 스튜디오 코드에서 터미널 탭으로 이동하면 콘솔창에서 명령어를 수행 할 수 있는데요. 먼저 c:\ 이동하기 위해 아래 "cd c:\" 명령을 쳐줍니다.

 

그 다음 "npm create vue@latest" 를 쳐주면 아래와 같은 입력항목들이 나오는데요. 여기서 Project name은 "vue_test"로 작성하고 나머지는 엔터를 쳐서 넘어가주면 됩니다.

 

 

복잡해보이지만 한번 해보면 그리 어려운 내용은 아니니 차근차근 해보세요.

 

 

 

2. 프로젝트에 필요한 파일 설치

 

위에서 생성한 "vue_test" 프로젝트 경로로 이동해 npm install을 수행해 필요한 파일을 설치합니다. "added 27 packages"라는 내용을 보면 패키지가 설치된 것을 알 수 있죠.

 

 

found 0 vulerabilities에서 문제점이 발견되지 않아 정상적으로 설치된 것을 알 수 있죠.

 

 

 

해당 경로에서 "ls" 명령어를 치면 그 디렉토리 안쪽에 내용을 살펴볼 수 있는데요. 여기까지 진행된 모습을 보면 아래와 같습니다. 기본적으로 웹페이지를 구성해서 실행할 수 있는 내용들이 구성되었죠.

 

 

 

 

3. 빌드 정상여부 확인

 

기본적으로 생성된 프로젝트 파일들을 정상적으로 build가 되는지 점검합니다.

 

빌드를 수행하기 위해서는 "npm run build"를 콘솔창에 입력하고 실행하면 되는데요. 아래와 같이 vite build를 통해 빌드가 정상적으로 된 것을 알 수 있습니다.

 

 

그리고 리스트에서 빌드 된 결과물이 dist/ 아래쪽으로 파일들이 생성된 것을 알 수 있죠.

 

 

3. 1 빌드 시 문제 해결 방법

 

만약, 아래와 같이 npm run build를 수행했을 때 아래와 같이 "'vite'은(는) 내부 또는 외부 명령, 실행할 수 있는 프로그램, 또는 배치 파일이 아닙니다."라고 뜨는 경우가 있는데요.

 

 

2번 단계에서 진행한 npm install을 실행하지 않고 바로 build를 실행할 때 발생하는 현상이니 꼭 npm install을 먼저 진행해주세요.

 

덧붙여, 만약  build 수행 시 아래와 같이 "'npm' 용어가 cmdlet, 함수, 스크립트 파일 또는 실행할 수 있는 프로그램 이름으로 인식되지 않습니다"라고 나타난다면 node.js를 설치 후 PC를 재시작 하지 않아 path가 인식되지 않은 것이니 다시 PC를 재부팅하면 됩니다.

 

 

반응형

 

4. 서버 기동

 

기본적인 프로그램들이 build가 되었으니 로컬 서버를 기동해 정상적으로 빌드한 결과물들이 로컬PC 서버에 제대로 나오는 지 확인해봅니다. 커맨드라인에 "npm run dev" 를 넣고 enter를 치면 아래와 같이 서버가 기동됩니다.

 

 

 

 

 

5. 기동된 서버 상태 확인

 

위 서버 기동 과정에 나온 메세지 중 "Local : http://localhost:5173/" 항목을 "ctrl + 마우스 클릭"하면 기본 설정된 브라우저가 뜨면서 정상적으로 기동된 서버의 메인 웹페이지를 확인할 수 있습니다.

 

 

만약 ctrl + 마우스 클릭이 안되신다면 저 주소를 복사해서 브라우저에 붙여 넣으면 접속해 위와 같은 결과를 확인할 수 있습니다.

 

"You did it" 메세지를 보니 뭔가 기분이 좋아지는 군요.

 

그럼 이제 샘플 페이지를 수정해 올려 테스트를 해봐야겠습니다.