[Vue.js] 나를 소개하는 홈페이지 만들기 (1) - Vue.js, Vue-cli

Next14 + Netlify 로 새로 작성했습니다.

https://whothatsme.tistory.com/42

[Next14 + Netlify] 나를 소개하는 홈페이지 만들기 (0)

 

---

 

이전에 만들고 있었던 나를 소개하는 홈페이지를 Vue.js 를 이용해서 다시 만들어보려고 한다. 이전에 바닐라js로 끄적여보고 React로도 끄적여봤는데, 다양한 툴 중에서 많은 사람들이 왜 Vue를 쓰는 이유를 알고 싶었다. 카카오 직원들도 Vue, React 반반 정도라고 하는데 왜 나누어서 사용할까?

---

 

https://v3.ko.vuejs.org/guide/introduction.html

시작하기 | Vue.js

 

우선 Vue는 프로그레시브(진보적인) 프레임워크 를 지향한다. 즉 일반적인 프레임워크보다 자유도가 높으며, 시스템 수준에 따라 프레임워크의 활용도를 결정 할 수 있게 설계되었다. 프레임워크는 코드를 프레임에 맞춰서 개발한다. 즉 파일을 만들때 .js 파일이 아닌 .vue의 형태에 맞춰 사용하는 것이다. 그래서 라이브러리와 달리 더 많은 기능을 디폴트로 제공한다. 

 

VUe를 사용하는 이유로는

1. 쉽다.
   - 그렇다고 기능도 React나 Angular에 비해서 기능이 더 떨어지는 것도 아니다.
2. 코드를 작성하는 방법이 정해져있다.
   - 예를 들어 반복문을 사용할 때, v-for라는 문법 하나로 통일된다. 코드의 통일성이 유지된다는 점이다. 이 점은 특히 협업을 하게 될 때 더욱 간편하게 진행할 수 있다.
3. HTML 렌더링이 빠르다.
   - 큰 차이는 없을지 모르지만, 개인적으로 React를 쓸 때보다 빠르다고 느꼈다. ms단위 차이라고는 하지만 프론트엔드를 공부하는 입장에서 즉각적인 반응이 나오고 안나오고의 차이는 크다고 느꼈다.

개인적인 성향 차이지만, 많은 것을 알고 이해될 때 나는 더 흥미를 느끼고 몰두할 수 있었다. 새로운 것을 배워가는 것에 대한 즐거움도 크고😊

 

그래서 미리 공부를 진행했다.

https://github.com/whos-bax/vuestudy

GitHub - whos-bax/vuestudy: Vue를 알아보자

vscode, node.js를 설치한 후 진행했다.

 

Vue-CLI 3 설치

npm i -g @vue/cli

이후, 명령어를 이용해 Vue 프로젝트를 만들어보자.

vue create frontend

frontend라는 폴더를 만들어서 vue-cli를 진행한다.

npm run serve를 이용해서 serve를 실행하고, local 페이지를 실행한다. http://localhost:8080/ 를 이용할 수 있다.

https://cli.vuejs.org/guide/

Overview | Vue CLI