[2] 프로젝트 만들고 실행하기 & 라우팅에 관한 이해 & prefetch에 관하여

vue --version 을 쳤을 때

 

다음과 같이 버전이 잘~ 나온다면 프로젝트를 생성할 준비가 완료 된 것이다.

 

이제 그러면 프로젝트를 만들어보자

 

vue create vue-project01
뷰  플젝만들기  프로젝트이름

그럼 위와 같이 나올텐데 여기서 vue3로 선택해준다.  (화살표로 내려서 엔터)

 

그럼 열심히 뷰 프로젝트를 만들고 있다.

 

생각해보니 비쥬얼 스튜디오 코드로 해야된다는걸 설명안했는데, 비쥬얼 스튜디오 코드 깔아서 터미널 켜서 하면된다. (0번챕터로 기본프로그램 셋팅 써야겠다 ㅠㅠ)

 

 

다 만들면 아래처럼 뜬다

 

여기서

 

npm run serve

를 입력해서 페이지를 실행시켜보자. 

 

npm run serve를 하게 되면 node.js가 돌면서 로컬에서 웹페이지를 띄워준다.

 

이렇게 나오면 주소 커맨드 클릭해서 들어가본다 

 

이렇게 vue main화면 이 나오면 개발할 준비가 된 것이다.

 

 

이제 라우터를 추가해보자

 

라우터란 무엇일까?

 

홈페이지에 

홈이 있고 어바웃 이라는 페이지가 있을 때, 

홈을 누르면 홈으로 가게해주고, 어바웃을 누르면 어바웃으로 가게해주는 기능인데

재빠르게 내용물을 바꿔치기? 해준다고 생각하면 된다.

 

/about 으로 들어가면 어바웃이 보이고 / 만 치면 홈으로가게 끔 처음에 구성되어있다.

 

라우터를 추가하려면 

뷰 프로젝트 안에 들어간 상태에서 다음 명령어 를 입력해준다.

 

vue add router

쉽다.

 

그러면 router라는 폴더안에 index.js 가 있는데 여기서 

원하는 페이지로 이동(라우팅) 해주는 걸 볼 수 있다.

path는 경로고 name은 이름 component는 어떤 페이지를 보여줄건지다. 

 

app.vue에 보면

이런 녀석들이 있는데 여기서 라우터 링크를 건것이다.

 

누르면 라우터의 to 옆에있는 주소로 움직이게 해주고 저 위에서 저 주소가 감지되면 설정된 컴포넌트 페이지를 띄워주는 것이다.

 

vue3부터 prefetch 라고 하는 녀석이 들어가 있다.

 

prefetch라는것은 맨~~처음에 홈으로 페이지에 접속했을 때, 라우팅 되어있는 페이지들을 다 로딩해서 

하나의 js파일에 다 넣게 되어서, 페이지 이동시 이미 로딩이되어있기 때문에 빠르게 화면을 넘길 수 있게된다.

 

단점은 파일의 수와 크기가 커질 수록 맨처음에 로딩되는 시간이 너~~무 길어진다는 것.

 

따라서 prefetch기능을 적절히 조절할 필요가 있다.

 

prefetch를 조절하는 방법은 3가지다.

 

1. 전체 켜기

2. 전체 끄기

3. 전체끄고 필요한것만 켜기

 

위 3가지 방법중에 가장 효율적인 방법은 무엇일까? 

바로 3번이다. 전체끄고 필요한것만 켜기

 

그럼 먼저 전체끄는 방법을 알아야겠지? 그다음에 필요한것을 키는방법을 알아보자

 

먼저 vue.config.js 라는 파일을 프로젝트안에 만들고 위처럼 입력해준다

 

복붙 편하라고 코드도 제공한다.

 

module.exports ={
    chainWebpack: config =>{
        config.plugins.delete('prefetch'); //prefetch 기능 삭제
    }
}

 

그리고 나서 서버를 재시작하면! 페이지를 눌러야만 로딩되는걸 알 수 있다. (개발자 도구 네트워크 들어가서 보면됨)

 

이제 특정 부분 라우팅에 prefetch를 넣어보자

 

router -> index.js에 들어가서 라우팅 하는 곳에 컴포넌트를 추가할때 webpackPrefetch:true 를 넣어준다.

그리고 서버를 재시작하면서 해당 라우팅이 바로 홈에서부터 로딩되는것을 알 수 있다.

 

이렇게 적절하게 라우팅을 하면서 prefetch를 적용시키면된다.

 

공부하면서 정리하는 글이라 나중에라도 깨닫고 잘못된 부분이 있으면 수정해야겠다!.