개발자 여행기

이전 포스팅에서 App.vue를 수정하여 신규.vue 파일을 실행하는데 까지 성공했다면,
이번 포스팅에서는 router를 설치하여 신규 페이지를 연결하는 방법을 알아보자.

■ npm을 사용한 router 설치

1. visual studio code 터미널에서 아래의 명령어를 입력한다.

2. router가 잘 설치되어 있는지 확인한다. (아래 2가지가 있으면 설치 성공)

  - node_modules 폴더 안에 vue-router가 있는지 확인한다.

  - package.json 파일 내용에서 dependencies에 vue-router가 있는지 확인한다.

3. vue add router를 사용 안 했을 때 추가 작업 (4번으로 하는 게 편함)

  - src 폴더 안에 router 폴더를 생성한다.

  - router 폴더 안에 index.js를 추가한다. index.js 안에 페이지 연결 소스를 작성한다.

  - src 폴더 안에 main.js에 router를 import 하고, 하고 router 관련 소스를 추가한다.

4. vue add router를 사용하여 router 관련된 패키지를 설치한다.

  - 추가적으로 router를 바로 사용할 수 있도록 기본적인 소스와 views 폴더 안에 샘플 vue 파일이 만들어진다.

  - 주의) App.vue, main.js 파일은 기존에 작업한 내용이 있으면 초기화된다. 반드시 Backup을 해놔야 한다.

■ router를 통한 페이지 연결

1. 터미널에서 아래 명령어를 입력한다. (아래와 같이 나오면 router를 통한 페이지 연결 성공)

2. vue add router를 통하여 생성된 폴더 및 파일, 소스를 확인한다.

3. src - router - index.js 소스

  - routes를 통하여 About.vue, Homeview.vue가 실행된다.

  - Homeview.vue : http://localhost:8081/

  - About.vue : http://localhost:8081/about

  - 신규 페이지를 만들면 routes 추가해야 한다.

3. src - App.vue

  - 1번에서 나온 이미지 소스 내용

4. src - main.js

  - router를 통하여 vue파일 실행

Vue를 설치하고 Vue3 프로젝트를 만들었다.
HelloWorld까지 실행되는 것을 확인했더니, 신규 페이지를 추가하여 실행해 보고 싶었다.
다른 페이지를 추가하고 실행하려면, Vue의 작동순서를 알아야 추가할 수 있으므로,
작동 순서 및 페이지를 추가하여 실행하는 거 까지 공유해 보고자 한다.
참고로 필자는 Vue.js에 완전 초보이다.
(개발 환경 : Visual Studio Code)

■ Vue3로 프로젝트 생성 후, HelloWorld 실행

1. Visual Studio Code 실행 후, 터미널에서 아래 명령어를 실행한다.

2. npm run serve 실행 시 아래와 같은 메시지 출력 후 에러, 해결 방법

  - 해결방법 : project - package.json 파일 내용에 scripts 확인 후 없으면 serve를 추가한다.

  - 파일 내용을 수정했으면 꼭 저장한다. 고쳤더라도 저장을 하지 않으면 계속 에러가 난다.

3. package.json - scripts 설명

  - serve : 프로젝트 실행

  - build : 프로젝트 컴파일 후 dist 폴더로 출력

  - lint : 프로젝트 오류 체크

■ 페이지 작동 순서 ( 경로)

1. project - package.json

2. project - public - index.html

3. project - src - main.js

4. project - src - App.vue

5. router / index.js

6. Component

■ 신규 페이지 추가하여 실행하기

1. 신규 VueTest.vue 파일을 만든다. (우측 이미지 msg는 아래 2번의 msg 내용이 출력된다.)

2. App.vue 파일 내용을 새로 만든 VueTest.vue로 연결한다.

3. export default 안의 name : '이름', 이름을 어떻게 주느냐에 따라 에러가 발생할 수 있다. 에러 내용은 다음과 같다. (해결은 5번 참고)

  - 컴포넌트 이름은 항상 여러 단어로 되어야 한다는 메시지

4. 2번에서 import HelloWorld from...... 이 부분 주석을 안 하면 생기는 에러는 다음과 같다. (해결은 5번 참고)

  - import는 되었지만 사용되지 않았다 라는 메시지

5. 위의 유효성을 체크하고 싶지 않으면, package.json 파일에서 rules 안의 내용을 추가한다.

6. 수정이 완료되면, 컨트롤 + C를 눌러 종료하고, npm run serve로 다시 실행한다.

■ Vue3 설치 방법 및 프로젝트 생성

1. node.js를 먼저 설치한다.

  - node.js 설치방법 : https://200-rush.tistory.com/entry/NodejsInstall

2. 명령 프롬프트에서 아래와 같은 명령어를 입력하여 Vue를 설치한다.

3. 아래 이미지와 같이 나오면 설치가 완료된 것이다.

4. 설치가 완료되었으면, 명령 프롬프트에서 설치가 잘 되었는지 확인한다. 버전이 나오면 정상적으로 설치가 완료된 것이다.

5. 설치가 성공적으로 되었으니, 아래 명령어를 입력하여 vue 프로젝트를 생성한다. 프로젝트 경로를 변경하고 싶으면 원하는 경로에 가서 아래 명령어를 입력한다.

6. 아래와 같이 어떤 버전으로 프로젝트를 만들지 선택하여 엔터를 누른다.

7. 프로젝트 생성이 완료되었으면, 프로젝트 생성 경로로 이동하여 잘 생성되었는지 확인한다.

8. 명령 프롬프트 창에서 프로젝트 생성 경로로 이동 후, 아래와 같은 명령어를 입력한다.

9. 명령 프롬프트에 아래와 같은 메시지가 나오면 성공한 것으로, Local 또는 Network 주소를 복사하여 브라우저에 붙여 넣는다.

10. 아래 이미지와 같이 나오면 성공

■ Vue.js 에 대한 설명

1. Evan You에 의해 만들어진 프런트엔드 자바스크립트 프레임워크로, 2014년에 처음으로 공개되었다.

2. 현대적인 프런트엔드 자바스크립트 프레임워크로, 사용자 인터페이스를 구축하기 위한 도구이다.

3. 컴포넌트 기반 아키텍처를 기반으로 하여 웹 애플리케이션의 다양한 부분을 재사용 가능한 작은 조각으로 분리하여 개발하도록 돕는다.

4. 반응형 데이터 바인딩으로 데이터와 뷰를 자동으로 동기화하여, 데이터의 상태 변화에 따라 자동으로 화면이 업데이트된다.

5. 컴포넌트 기반 구조로 화면을 구성하는 모든 요소를 컴포넌트로 분리하여 개발한다. 이러한 컴포넌트들은 독립적으로 작동하며, 재사용성과 유지보수가 용이하다.

6. 가상 DOM을 사용하여 실제 DOM 조작을 최소화하여 성능을 최적화한다. 변경된 부분만 실제 DOM에 적용하여 빠른 렌더링이 가능하다.

7. 이벤트 핸들링을 간편하게 처리할 수 있는 방법을 제공합니다. 사용자의 입력, 클릭 등의 이벤트에 반응하여 적절한 동작을 수행할 수 있다.

8. 컴포넌트는 생성, 업데이트, 소멸과 같은 다양한 생명주기 메서드를 가지고 있다. 이를 이용하여 컴포넌트의 동작을 제어하거나 작업을 수행할 수 있다.

9. 다른 프런트엔드 프레임워크와 비교해도 학습 곡선이 낮고 간결한 문법을 가지고 있기 때문에 쉽게 접근할 수 있으며, 작은 규모의 프로젝트부터 대규모의 애플리케이션까지 다양한 상황에서 사용될 수 있다.

■ Vue.js 장점

1. 가볍고 빠르며, 압축된 파일 크기가 작다. 이로 인해 초기 로딩 시간이 단축되고 사용자 경험이 향상된다.

2. 간단하고 직관적인 문법을 가지고 있어, 새로운 개발자들도 상대적으로 빠르게 배울 수 있다.

3. 다양한 기능을 제공하는 라이브러리와 플러그인을 가지고 있어 개발자들이 자신의 프로젝트에 맞게 선택하여 사용할 수 있다.

4. 리액트와 앵귤러의 장점을 조합한 프레임워크로, 양쪽의 장점을 융합하여 사용할 수 있다.

5. 컴포넌트 기반 아키텍처를 기반으로 하여 코드의 재사용성과 유지보수가 용이하다.

6. 데이터와 뷰를 자동으로 동기화해 주는 양방향 데이터 바인딩을 제공하여 개발자가 상태 관리에 대해 더 쉽게 작업할 수 있다.

■ Vue.js 단점

1. 리액트와 앵귤러를 비교했을 때, Vue.js의 생태계는 다소 작을 수 있습니다. 따라서 리액트와 앵귤러에서 제공하는 특정 기능이 Vue.js에서는 찾기 어려울 수 있다.

2. 작은 및 중간 규모의 프로젝트에 적합하지만, 매우 큰 규모의 애플리케이션에 대한 지원이 리액트나 앵귤러만큼 강력하지는 않을 수 있다.

3. 커뮤니티는 리액트나 앵귤러보다 작을 수 있으므로, 문제 해결이나 지원을 받을 때에는 조금 더 어려울 수 있습니다.

4. 리액트와 앵귤러의 장점을 조합한 프레임워크로, 양쪽의 장점을 융합하여 사용할 수 있다.

5. 새로운 버전을 릴리스하는 속도가 빠르기 때문에, 이로 인해 기존 프로젝트가 새로운 버전과 호환되지 않을 수도 있다.

6. 데이터와 뷰를 자동으로 동기화해 주는 양방향 데이터 바인딩을 제공하여 개발자가 상태 관리에 대해 더 쉽게 작업할 수 있다.

■ Vue.js 버전

1. Vue.js 1.x

  - 초기 버전으로 2014년에 출시되었다.

  - 가볍고 빠르며, 쉬운 학습 곡선을 제공하여 초보자들도 쉽게 접근할 수 있었다.

  - 단방향 데이터 바인딩만을 지원하였으며, 가상 DOM을 사용하지 않았다.

2. Vue.js 2.x

  - 2016년에 출시되었다. 이 버전에서는 성능과 기능이 크게 개선되었다.

  - 양방향 데이터 바인딩이 추가되어 데이터와 뷰를 더 쉽게 동기화할 수 있게 되었다.

  - 가상 DOM이 도입되었다.

3. Vue.js 3.x

  - 2020년에 출시되었다. 이 버전에서 가장 큰 변화는 가상 DOM 라이브러리로서 "Vue 3 Composition API"를 도입한 것이다.

  - 이 API는 코드를 더 구조적이고 유연하게 작성할 수 있도록 도와주며, Vue.js 애플리케이션의 성능과 유지보수성을 향상시켜 준다.

  - TypeScript 지원이 향상되어 타입 시스템과의 통합이 더욱 강화되었다.