우연한 글에 vue.js를 시작하게 되었다. 새로운 언어에 대해 배우고 싶고, 다른 언어는 어떻게 사용하는지 궁금하는 차였다. 그래서 vue.js를 검색해보았는데, 코딩애플에 무료강의 몇개가 있어서 듣게 되어 이렇게 글을 작성한다.
node.js 설치
node.js는 내가 이전에 react를 사용하고 있어서 사용할 필요는 없지만, 환경이 다를 경우를 대비해 작성한다. node.js 홈페이지에 들어가면 여러가지 버전이 있는데 대표적으로 두개가 있다. 왼쪽은 안정화 버전, 오른쪽은 최신 버전이다. 나는 항상 안정화 버전을 사용해서 이를 설치한다.
이를 설치하는 이유는 npm을 사용하기 위해서인데, npm은 오픈소스 라이브러리를 패키지 형태로 바로 설치해서 사용할 수 있게 해주는 도구이다. 그리고 에디터가 없을 경우 설치하여 사용한다. 나는 vscode가 있기 때문에 이를 사용하여 코딩을 할 것이다.
프로젝트 설치하기
1. Vue CLI 설치
vscode를 들어가면 터미널창을 연다. 그리고 내가 사용할 폴더를 하나 만들고 이 명령어를 입력한다.
npm install -g @vue/cli
코드 설명
- npm install : npm을 사용하여 설치한다는 말이다.
- -g : 전역을 의미한다. 즉, 설치하는 패키지가 현재 폴더뿐만 아니라 앞으로 생성하는 모든 프로젝트에 사용할 수 있도록 전역으로 설치한다는 것이다.
- @vue/cli : • Vue 프로젝트를 빠르게 구성하고, 빌드, 배포할 수 있게 도와주는 도구를 말한다.
2. Vue 프로젝트 생성
vue create 프로젝트명
위같이 프로젝트명을 입력하면 vue 프로젝트가 생성된다.
그리고 vue버전을 설정할 수 있게 되어 있는데 위에서부터 아래까지의 설정을 설명하면
- Default(vue3) : 기본적인 웹만 만들 경우 사용하는 환경이다.
- Default(vue2) : 복잡한 웹을 만들 경우 사용하는 환경이다.
- Manually select features : 자신이 필요한 환경 등을 설정하여 설치할 수 있다.
→ 내 경우는 기본적인 웹만 만들어서 사용할 것이기에 맨 위의 설정을 사용해주었다. 이것말고도 설정해야할 것이 많은데 본인이 사용하는 것에 따라 설정을 달리하면 된다.
3. Vue 프로젝트 실행
cd 프로젝트명
npm run serve
만든 프로젝트명으로 이동하고 vue로 된 페이지를 미리볼 수 있는 명령어이다.
그리고 vue는 8080포트가 기본적인 포트이다. 만약 다른 포트로 사용하고 싶다면 **npm run serve —port 포트**를 사용하면 다른 포트로 하여 vue를 돌릴 수 있다.
추가
추가적으로 강의에서 설치하라는 확장 프로그램이 있었다.
1. Vetur
.vue 파일의 코드 하이라이팅을 위해서 사용한다. vscode에서 확장프로그램을 설치하는 곳으로 가서 검색하면 나온다.
vetur 설치 전과 후이다. 확연히 차이가 난다. 가독성을 위해 사용해준다.
2. Vue VSCode Snippets
.vue 파일 초기 구성 생성을 위해 사용된다. 코드 자동 생성은 Vetur도 지원하긴 하는데 잘 안될때도 있어 사용한다.
template, script, style로 로 구성된 초기 구성을 만들어준다.
3. html css support
html 요소의 class에서 css 선택자 요소를 쓸때 자동 완성 기능을 지원해주는 익스텐션이다. 부트스트랩 같은 거대한 css 프레임워크를 사용할때 매우 유용하다. 아주 빠르게 클래스 속성 코딩이 가능하다.
위까지가 강의에서 추천한 확장 프로그램이고, 아래는 내가 찾다가 유용하다고 생각해서 정리하는 확장프로그램이다.
1. Auto Rename Tag
태그 이름을 수정할때, <>여는 태그와 </> 닫는태그를 동시에 수정하게 해준다. <>태그를 수정하고 닫는 태그에 가는 수고스러움을 덜어 준다.
2. Auto Close Tag
Auto Rename Tag와 함께 사용하는 유용한 플러그인이다. 태그를 작성할 때 기본적으로 여는 태그와 닫는 태그를 일일이 입력해야 하던 것을 입력태그만 입력하게 해준다. 즉, <div>만 입력을 해도 </div>가 자동으로 작성이 된다. vue를 사용하면서 이런 부분이 조금 어려웠는데 이런 확장 프로그램을 사용해서 좋다.
🔗참고
https://codingapple.com/unit/vue-3-installation-with-vue-cli/?id=139
