내부망에서 vue 설치 및 개발 환경 구축하기

내부망에서 vue 설치 및 개발 환경 구축하기

최근 내부망에서 자바 환경을 설정하기 위한 과정을 진행했습니다. 이 과정은 Node.js와 Vue.js, 그리고 Vuetify를 활용한 웹 개발 환경을 구축하는 데 중점을 두었습니다. 아래는 설치 과정과 주요 단계들을 정리한 내용입니다.

1. 방화벽 오픈 요청

먼저, 인터넷에 접근할 수 있도록 인프라팀에 방화벽 오픈을 요청했습니다. 이는 외부 패키지 다운로드와 업데이트를 위해 필수적입니다.

2. V3 행위 기반 진단 해제 요청

V3 보안 프로그램의 행위 기반 진단 기능을 해제 요청했습니다. 이 단계는 설치 과정에서 발생할 수 있는 방해 요소를 제거하기 위해 필요합니다.

3. 폴더 생성

C:// 루트 디렉토리에 dev와 workspace라는 두 개의 폴더를 생성했습니다. 이러한 구조는 프로젝트 관리를 용이하게 합니다.

4. Node.js 서버 파일 설치

Node.js 설치 파일을 다운로드하여 설치했습니다. Node.js는 JavaScript 런타임으로, 서버 사이드 개발에 필수적입니다.

5. CMD 프롬프트에서 폴더 이동

CMD 프롬프트를 열고 C:\dev 폴더로 이동했습니다.

cd C:\dev

 

6. npm install 설치

다음 명령어를 입력하여 필요한 패키지를 설치합니다.

npm install

7. Vue 설치 확인

Vue 설치를 위해 다음 명령어를 입력했습니다.

npm install vue

8. Vue CLI 설치

Vue CLI를 전역으로 설치하기 위해 다음 명령어를 입력했습니다.

npm install -g @vue/cli

9. CLI Init 설치

CLI Init을 전역으로 설치하기 위해 다음 명령어를 입력했습니다.

npm i -g @vue/cli-init

10. 설치 확인

설치가 잘 되었는지 확인하기 위해 다음 명령어를 입력하여 각 버전을 확인했습니다.

node --version
npm --version
vue --version

11. 경로 이동

C:\workspace로 경로를 이동했습니다.

cd C:\workspace

12. 프로젝트 생성

workspace 안에 serve라는 프로젝트를 생성했습니다.

vue create serve

13. 프로젝트 경로로 이동

방금 생성된 serve 프로젝트 경로로 이동했습니다.

cd serve

14. Vuetify 설치

다음 명령어로 Vuetify를 설치했습니다.

vue add vuetify

15. Vuetify 버전 선택

설치 중 Vuetify 버전을 선택하라는 메시지가 뜨면, "Vuetify 3 Preview (Vue-Cli)"를 선택했습니다.

16. 설치 완료 확인

설치가 완료되면 성공 메시지가 나타나며, 에러 메시지가 뜨면 설치가 실패한 것입니다.

17. VSCode 실행

Visual Studio Code(VSCode)를 실행합니다.

18. 폴더 열기

VSCode에서 "폴더 열기" 메뉴를 클릭하고 C:\workspace\serve 폴더를 선택했습니다.

19. 터미널 실행

VSCode에서 터미널을 실행합니다.

20. Node.js 서버 실행

VSCode의 터미널에서 아래 명령어로 Node.js 서버를 실행합니다.

npm run serve

21. 웹 브라우저에서 URL 실행

크롬 브라우저를 열고 아래 URL을 입력합니다.

http://localhost:8080

22. 개발 환경 구축 완료

우측 화면이 정상적으로 뜨면, 개발 환경 구축이 완료된 것입니다!

---

이 과정을 통해 내부망에서도 자바와 관련된 개발 환경을 안정적으로 구축할 수 있었습니다. 앞으로의 개발 작업에 많은 도움이 될 것입니다. 이 글이 유사한 환경을 구축하려는 분들에게 도움이 되기를 바랍니다!

 

 

 

[마루아라는 개발쟁이/JAVA] - Node.js 다운로드 및 설치 방법

Node.js 다운로드 및 설치 방법

[마루아라는 개발쟁이/JAVA] - npm install 오류 발생 시 해결 방법

npm install 오류 발생 시 해결 방법

[마루아라는 개발쟁이/JAVA] - Vuetify 3 설치 및 적용하는 방법

Vuetify 3 설치 및 적용하는 방법