Vue 시작하기! - [위오의 서버 및 개발환경]

안녕하세요 위오의 배배입니다.

 

 

위오에서 개발한 이름궁합 테스트의 프론트엔드는 Vue.js 를 통해서 개발하였는데요, 

https://namelovetest.netlify.app 

2022.11.24 기존 사용하던 Netlify -> AWS 로 서버이전하였습니다 :)

https://retro.wiodaily.com  

(2023.05.01, 위오 공식 서비스 오픈)

https://wiodaily.com 

위오

vue.js는 react.js를 뒤따른 프론트 언어 신흥 강자로 알려져있지요!

 

 

앞으로 추가 개발될 이름궁합 테스트의 후속작들 또한, 뷰를 통해 개발할 예정이기 때문에

뷰의 장점과 단점, 뷰의 양방향 바인딩, 라우터 등, 기술들에 대한 포스팅을 계속 이어가도록 하겠습니다 ㅎㅎ

 

 

오늘은 바로 vue를 사용하여 프로젝트를 만들고 시작하는 과정을 함께해보겠습니다!

 

1. vue.js를 활용하여 개발할 환경을 선택하여 설치해야하는데요, vs code를 추천드립니다.

비쥬얼 스튜디오 코드는 vue의 확장 프로그램에 대한 지원도 매우 잘 되어있으며, 가장 보편화된 IDE임으로 많은 정보를 얻기에 용이합니다!  (아래 링크 참조)

https://wiodaily.com/4

[서버 및 개발환경]Window 10에서 Visual Studio Code 설치하기!

 

 

2. vs code를 설치했다면, 웹을 브라우저에 띄우는 것처럼 로컬 개발환경에서도 구동시킬 수 있도록 만들어줘야하는데요!

바로 node.js를 설치해줍니다!

나중에 node.js의 NPM 을 활용하여 필요한 패키지 혹은 로컬환경에서 테스트 할 수 있게 됩니다!(npm run serve, npm run build .. )

https://wiodaily.com/5

[서버 및 개발환경]Window 10에서 Node.js 설치하기!

 

 

3. 자 vs code와 node.js를 설치했다면 vue를 설치하기 위해 터미널에서 npm install vue 를 입력해줍니다!

npm install vue

vue 설치

 

 

4. vue 명령어를 사용하기 위해 Vue CLI를 설치해줍니다!

npm install @vue/cli

vue 명령어를 사용할 수 있는 CLI 설치

 

5. vue 를 입력하여 설치를 확인해줍니다!

vue

vue 정상 설치

 

 

자 이제! vs code에서 vue를 사용할 준비가 완료되었습니다!

그럼 바로 개발을 이어가봐야겠지요! 프로젝트를 생성해줍니다!

 

 

6. 프로젝트를 생성

(몇 분의 시간이 소요됩니다!)

vue create 프로젝트명

vue 버전 선택

npm or yarn을 선택할 수 있습니다. 편한걸로 선택해줍시다!

 

프로젝트 생성 완료

 

프로젝트를 생성하셨다면 아래와 같은 디렉토리 구조를 갖을 텐데요,

그럼 완벽하게 vue로 개발할 준비가 완료된겁니다 ㅎㅎ

vue의 디렉토리 구조

 

VUE.js의 각각 디렉토리가 무엇인지! vue의 가장 큰 강점은 무엇인지! 이름궁합 테스트를 만들면서 Vue의 어떤 기능들을 활용했는지에 대해서는  VUE 카테고리를 통해서 천천히 포스팅할 예정이니 확인 부탁드려요!

 

위오의 배배였습니다.