[Vue.js] 기초 개념 정리 - 기본 환경 구성

 

🗂 목차

[Vue.js] 기초 개념 정리 - 기본 환경 구성

[Vue.js] 기초 개념 정리 - Vue Router

[Vue.js] 기초 개념 정리 - Vue LifeCycle Hook

[Vue.js] 기초 개념 정리 - data(), Data 처리

[Vue.js] 기초 개념 정리 - Watch, Array, for문(반복문), if문

 

 

 

🐱 Git Hub 주소 : https://github.com/junyharang-FrontEnd-coding-study/vue.js-study

📖 참고 자료 : https://www.youtube.com/watch?v=sqH0u8wN4Rs

 

 

 

🚀 Vue.js 란?

Vue.js는 웹 프론트엔드 Framwork 중 하나인 것이에요!
최근에는 프론트엔드 개발을 할 때, 순수 JavaScript나, jQuery만을 이용하는 경우는 없다고 해요.
이제는 Vue.js, React.js, Angular.js 중 하나를 사용해서 개발을 하는 것이에요.

이번에 주니하랑은 Vue.js를 공부 해 보려고 하는 것이에요.

Vue.js는 Component(컴포넌트) 기반의 SPA(Single Page Application)을 구축할 수 있게 해주는 Framwork인 것이에요.

 

    🔽  Component란?

       - 웹을 구성하는 Logo, Manu Bar, Button, Modal 등 Web Page 내의 다양한 UI(User Interface) 요소.
      - 재사용 가능하도록 구조화 한 것

    🔽  SPA(Sing Page Application)이란?

      - 단일 페이지 어플리케이션
      - 하나의 페이지 안에서 필요한 영역 부분만 Loading 되는 형태
      - 빠른 페이지 전환
      - 적은 트래픽 양

Vue.js 등으로 개발을 하면 Component 단위로 개발을 하게 되는 것이에요. 실제 구동 되는 방식은 단일 하나의 페이지에서 필요한 페이지만 Loading이 되게 되는 방식으로 개발을 하게 되는 것이에요. 
즉, 실제 페이지 자체가 이동하게 되면 CSS, HTML, JavaScript 등을 다시 Loading을 했던 기존 방식을 사용하게 되면 화면 깜빡임이나, 퍼포먼스의 영향이 있게 된다는 단점이 있었던 것이에요.
SPA 방식을 사용하게 되면 전체가 Loading이 되는 것이 아니라, 변경되는 부분만 Loading이 되기 때문에 UX 및 퍼포먼스를 향상할 수 있는 장점이 있는 것이에요.

SPA 역시 단점이 있는 것이에요. 첫 Loading 시에 필요한 CSS, HTML, JavaScript 등의 크기가 크다면 그만큼 퍼포먼스가 나쁠 수 밖에 없는 단점을 갖고 있는 것이에요.

 

🚀 Vue CLI란?

Vue.js 프로젝트를 빠르게 개발하고, 빌드하고, 서비스를 런칭할 수 있게 해 주는 도구(Tool) 인 것이에요.
참고로 CLI는 Command Line Interface의 약자인데, 터미널을 통해 Text 명령어를 입력하는 도구를 뜻하는 것이에요.

화면에 hello macpugi를 출력하는 명령어

 

'안녕하세요 주니하랑 입니다!'라는 문자열을 base64로 Encoding하는 명령어

 

쉽게 이야기 하자면! 위의 두 사진처럼 명령어로 컴퓨터와 소통하는 것을 말하는 것이에요.

Vue cli를 사용하면 기본적으로 프로젝트 구조를 자동적으로 세팅해주기 때문에 Package 구조, Library 구성, Web pack 설정 등을 알아서 해줌으로 개발자가 이런 고민을 하지 않도록 도와 주는 것이에요.

 

프로젝트 Package에서 아래 명령어를 입력 해 주면 되는 것이에요.

💡 참고 사항 :

-g Option : Global이라는 뜻

 

Enter를 눌러주면 아래 사진처럼 알아서 설치를 해 주는 것이에요.

 

⚠️ 문제 발생!

 

윈도우는 이러지 않을 것이라 생각이 되는데, Mac Book 같은 경우는 Unix 기반 운영체제라 권한이 조금 엄격한 것이에요.

이렇게 Permission denied라고 하는 것은 Vue.js 프로젝트 폴더에 쓰기 권한이 없기 때문인 것이에요.

 

반응형

`sudo` 명령어를 통해 root 권한을 잠시 빌려서 하면 해결 되는 것이에요.

 

다음은 `vue create`라는 명령어를 이용해서 프로젝트 기반을 만들어 주면 되는데 명령어 형식은 아래와 같은 것이에요.

# vue create [Your Project Name]

 

다음으론 이렇게 선택할 수 있는 부분이 나오는 것이에요.

첫번째는 Defalut 환경(babel과 eslint 자동 설치)으로 Vue 3.x Version
두번째는 Defalut 환경babel과 eslint 자동 설치)으로 Vue 2.x Vesion
세번째는 사용자 임의 설정 환경인 것이에요.

주니하랑은 첫번째를 선택하도록 할 것이에요.

 

 

그러면 이렇게 열심히 설치를 하는 것을 볼 수 있는 것이에요.

 

 

설치가 끝나면 위와 같이 여러가지가 생긴 것을 볼 수 있는 것이에요.

 

저기 알려주는 대로 한번 이동을 해서 명령어를 입력 해 볼게요!

 

 

 

이렇게 Vue CLI를 통해서 기본 프로젝트 환경 구성을 완료한 것이에요.