분류 Vuejs

Vue.js Axios, GitHub REST API 및 Netlify를 사용하여 포트폴리오를 구축하고 배포하는 방법

컨텐츠 정보

  • 조회 551 (작성일 )

본문

이 무료 책에서는 두 개의 간단한 프로젝트를 빌드하고 Netlify에 배포합니다. Vue.js를 프런트 엔드 프레임 워크로 사용하고 다른 기술을 사용하여 프로젝트를 빌드합니다.


이 튜토리얼을 끝까지 따라 가면 GitHub API를 사용하여 포트폴리오에 대한 간단한 버전의 Twitter와 단일 페이지 애플리케이션을 빌드하게 됩니다.


이 튜토리얼을 따르기 위해 알아야 할 사항 


따라하려면 최소한 HTML, CSS 및 JavaScript에 대한 기본 지식이 필요합니다.


Vue.js에 대한 지식은 필요하지 않습니다. 먼저 기본 사항을 배운 다음 함께 프로젝트를 구축 할 것입니다.


각 섹션의 끝에서 YouTube 링크 / 삽입을 통해 비디오 형식으로 해당 정보를 찾을 수 있습니다. 이렇게 하면 방금 읽은 내용에 대한 지식을 쌓기 위해 비디오를 볼 수 있습니다.


소개 


VueJS는 최근 몇 년간 정말 인기를 끌고 있는 JavaScript 프레임 워크입니다.


이 가이드에서는 VueRouter와 Axios의 두 라이브러리를 간략히 살펴보고 기본 사항부터 살펴 보겠습니다. 마지막에 멋진 포트폴리오 프로젝트를 구축하는 데 사용할 것입니다.



YouTube에서 비디오를 보려면 클릭하십시오.


Vue 설치 방법 


NPM과 같은 패키지 관리자를 사용하여 설치하거나 CDN을 사용하여 프로젝트에서 Vue를 사용할 수 있습니다. 이전에 Vuejs를 사용해 본 적이 없다면 CDN을 사용하는 것이 좋습니다. 저와 함께 코딩하고 싶다면 더 쉬울 것입니다.


저장소를 보려면 클릭하십시오.


YouTube 비디오를 보려면 클릭하거나 이 섹션의 끝에서 찾아서 배운 내용을 보강하십시오.


Vue CDN 


CDN의 경우 HTML 파일 내에 아래 스크립트 태그만 포함하면 됩니다.


<!-- Development version for prototyping and learning -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>

또는 다음과 같이 안정적인 특정 릴리스를 사용하는 프로덕션 준비 스크립트를 사용할 수 있습니다.


<!-- Production version -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>

프로덕션에서 Vue는 최적화 된 버전을 사용하여 vue.js를 vue.min.js로 대체 할 것을 제안합니다.


ES 모듈 호환 빌드도 있습니다.


<script type="module">
  import Vue from 'https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.esm.browser.js'
</script>

NPM을 통해 Vue를 설치하는 방법 


대규모 애플리케이션을 구축하려는 경우 다음과 같이 NPM을 통해 설치하는 것이 좋습니다.


npm install vue

위에서 말했듯이 누구나 이 가이드를 따를 수 있도록 Vue CDN을 사용할 것입니다. 따라서 최종 HTML 파일은 다음과 같습니다.


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>VueJS Tutorial</title>
    
    <!-- vue development version, includes helpful console warnings -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

</head>
<body>



    <script src="./main.js"></script>
</body>
</html>

이 코드를 분해 해 보겠습니다. 먼저 HTML 파일에 대한 기본 마크 업을 추가했습니다. 그런 다음 VueJs 프레임 워크 용 스크립트 태그를 포함했습니다.


마지막으로 body 태그를 닫기 전에 애플리케이션의 모든 JavaScript 코드를 배치 한 main.js 스크립트를 추가했습니다.


이제 다음 단계로 이동하여 main.js 파일에 첫 번째 Vue 인스턴스를 추가하겠습니다.




Vue 인스턴스를 만드는 방법 


Vue를 설치하거나 CDN을 통해 포함했으면 Vue 인스턴스를 만들 수 있습니다. new Vue() 함수를 사용하면 됩니다. 이 함수는 옵션 개체를 받습니다.


문서를 읽으면 vue 인스턴스가 종종 vm이라는 변수에 저장되어 있지만 원하는 대로 호출 할 수 있습니다. 이 가이드에서는 그것을 앱이라고 부를 것입니다.


이제 main.js 파일에서 다음과 같이 변수를 만들고 Vue 인스턴스에 저장해야 합니다.


let app = new Vue({
    // all options goes here
})

Vue 인스턴스에 전달하는 개체를 옵션 개체라고 합니다. options 객체 안에 Vue API 참조 페이지에 설명 된 모든 옵션을 추가하여 애플리케이션을 빌드 할 수 있습니다.


옵션 개체에는 여러 섹션으로 나뉘어 진 속성이 있습니다.

  • Data
  • DOM
  • Life Cycle Hooks
  • Assets
  • Composition
  • Misc categories


Vue 애플리케이션을 빌드하는 데 필요한 첫 번째 속성은 Vue를 루트 DOM 요소와 연결하는 데 사용됩니다. 그런 다음 작업 할 데이터 옵션이 필요합니다.


Vue 인스턴스를 루트 DOM 요소와 연결하여 시작하겠습니다.


여기를 클릭하여 저장소를 볼 수 있습니다.


클릭하여 YouTube 비디오를 보거나 이 섹션의 끝에서 찾아서 배운 내용을 검토 할 수 있습니다.


Options/DOM : 루트 DOM 요소를 선택하는 방법 


Options / DOM API는 Vue가 애플리케이션 인스턴스를 마운트 하는 데 사용할 기존 DOM 요소를 선택하는 데 사용할 수 있는 el 속성을 제공합니다.


el 속성은 요소 또는 DOM 요소에 대한 CSS 선택자를 포함하는 문자열을 받습니다.


참고 : Vue는 body 또는 HTML 태그 사용을 권장하지 않으며 다른 요소를 마운팅 지점으로 사용할 것을 제안합니다.


해보자. index.html 파일의 본문 안에 다음 코드를 넣어야 합니다.


<div id="app">
    </div> 

이제 Vue 인스턴스를 연결하는 데 사용할 수 있는 루트 요소가 있습니다. main.js 파일로 돌아가서 options 객체 내에서 이 요소를 선택해 보겠습니다.


이제 el 속성을 사용하여 앱 ID로 만든 요소를 ​​선택할 수 있습니다.

let app = new Vue({
    // all options go here
    el: "#app",
})

이제 작업 할 요소가 있습니다. 다음 단계로 이동하여 옵션 개체에 데이터 개체를 추가 할 수 있습니다.


이에 대한 자세한 내용은 다음 문서에서 확인할 수 있습니다. [https://vuejs.org/v2/api/#Options-DOM]


Options/Data : 데이터 개체 (또는 구성 요소에서 사용할 때 기능)를 추가하는 방법 


새 인스턴스가 생성되면 데이터 개체에서 찾은 모든 속성을 Vue 반응 형 시스템에 추가합니다. 데이터 개체의 값이 변경되면 보기에 이러한 변경 사항이 반영됩니다. 이것은 VueJS 반응성 시스템의 기본입니다.


그것을 설명하기 위해 실제적인 예를 봅시다.


데이터 개체 만들기 


main.js 파일 내에서 다음과 같이 객체를 값으로 갖는 데이터 속성을 만들 수 있습니다.


let app = new Vue({
    // all options go here
    el: "#app",
    data: {}
})

데이터 객체는 위 코드와 같이 Vue 인스턴스 내부에서 직접 정의하거나 아래 코드와 같이 인스턴스 외부에서 정의 할 수 있습니다.

let dataObject = {}
let app = new Vue({
    // all options go here
    el: "#app",
    data: dataObject
})

원하는 것을 선택할 수 있습니다.


데이터 개체에 속성 추가 


VueJs는 JavaScript 프레임 워크이므로 JavaScript에 대해 알고 있는 내용이 여기에서도 여전히 중요하다는 것을 기억하는 것이 좋습니다.


Vue는 워크 플로를 단순화하고 속도를 높이는 데 사용할 수 있는 여러 메서드와 속성이 있는 JavaScript 개체입니다.


작동 방식을 확인하기 위해 데이터 개체에 몇 가지 속성을 추가해 보겠습니다.

// Create a data object
let app = new Vue({
    el:"#app",
    // create a vue instance, add the data property and the dataObject created
    data: {
        alert: "This is an alert message! ",
        projects: [
            {title: "portfolio", languages: ["HTML", "CSS", "VueJS"]},
            {title: "grocery shop", languages: ["HTML", "CSS", "PHP"]},
            {title: "blog", languages: ["HTML", "CSS", "PHP"]},
            {title: "automation script", languages: ["Python"]},
            {title: "eCommerce", languages: ["HTML", "CSS", "PHP"]},
        ];
    }
})

위의 코드를 사용하여 데이터 개체에 경고 속성과 프로젝트 속성이라는 두 가지 속성을 추가하기 만하면 됩니다.


alert 속성은 문자열 일 뿐이고 projects 속성은 객체의 배열입니다.


이제 작업 할 데이터가 있으므로 해당 값에 액세스하고 수정할 수 있는 방법을 살펴 보겠습니다.


데이터 개체의 속성 조작 


Vue 인스턴스 앱이 포함 된 변수를 사용하여 데이터 개체의 속성에 액세스하고 조작 할 수 있습니다. 그런 다음 app.alert와 같은 점 표기법을 사용하여 속성을 참조 할 수 있습니다.


브라우저에서 콘솔을 열면 앱을 작성할 때 Vue 인스턴스 객체를 얻는 것을 볼 수 있습니다. 따라서 점 표기법을 사용하는 다른 객체와 마찬가지로 속성과 메서드를 얻습니다.


콘솔 내에서 이것을 시도해 봅시다.

// Access the alert property in the data object
app.alert // This is an alert message!
// update a data property value
app.alert = "This is a new alert message!" 
app.projects

위의 코드는 세 가지 간단한 작업을 수행합니다.

  • 첫 번째 줄은 경고 속성에 액세스하고 "이것은 경고 메시지입니다"라는 내용을 인쇄합니다.
  • 두 번째 줄은 같음 연산자를 사용하여 경고 속성에 새 값을 할당합니다.
  • 마지막으로 세 번째 줄은 프로젝트 배열의 값을 반환합니다.

$data 또는 _data 바로 가기를 사용하여 전체 데이터 개체에 액세스 할 수도 있습니다.


콘솔로 돌아 가기 :

// Access the entrie data object
app.$data // {__ob__: Observer} option 1
app._data // {__ob__: Observer} option 2

이에 대한 자세한 내용은 다음 문서에서 읽을 수 있습니다. [https://vuejs.org/v2/api/#Options-Data]


옵션 데이터 방법 


Vue 인스턴스는 여러 속성과 메서드에 대한 액세스를 제공합니다. $ 기호를 사용하여 기본 메서드 및 속성에 액세스 할 수 있습니다. Vue에서 정의한 메소드와 사용자가 정의한 메소드를 구별하는 데 사용됩니다.


여러 가지 인스턴스 메서드와 속성이 미리 정의되어 있으며 네 가지 범주로 나뉩니다.

  • Instance Properties
  • Instance Methods / Data
  • Instance Methods / Events
  • Instance Methods/life cycle hooks


예를 들어, 다음 코드를 사용하면 데이터 및 옵션 개체를 가져 오거나 watch 또는 on 메서드에 액세스 할 수 있습니다.

app.$data // returns the data object
app.$options // returns the options object
app.$watch() // function that watched for changes on the vue instance
app.$on() // listen for a custom event on the vue instance

이 가이드의 범위를 벗어나므로 더 자세히 설명하지 않겠습니다. 그러나 관심이 있고 더 배우고 싶다면 여기 문서가 있습니다.


Lifecycle Hooks 


Vue는 라이프 사이클 후크라고 하는 일련의 기능에 대한 액세스를 제공합니다. 이를 통해 Vue 초기화 단계의 특정 단계에서 코드를 실행할 수 있습니다.


모든 수명주기 후크 내에서 Vue 인스턴스를 가리키는 이 변수에 액세스 할 수 있습니다.


이것이 어떻게 작동하는지 이후 섹션에서 더 자세히 볼 수 있습니다. 그러나 지금은 사용 가능한 후크와 이를 통해 수행 할 수 있는 작업에 대한 간략한 요약입니다.

  • beforeCreate (you can run code before the Vue instance is created)
  • created (you can run code after the Vue instance is created )
  • beforeMount (you can run code before your element is mounted to the DOM)
  • mounted (you can run code when the element is mounted to the DOM)
  • beforeUpdate (you can run code before values are updated in the DOM)
  • updated (you can run code after values in the DOM have been updated)
  • beforeDestroy (you can run code before an instance is destroyed)
  • destroyed (you can run code when an instance is destroyed)


과정 중에 우리는 종종 장착 된 후크를 사용합니다. 이 주제에 대해 더 자세히 알고 싶다면 먼저 문서의 다이어그램을 살펴 보시기 바랍니다. 여기에서 라이프 사이클 후크 다이어그램을 찾으십시오.



Vue에서 템플릿으로 작업하는 방법 


VueJS는 콧수염 구문 {{}}을 사용하여 HTML 요소 내부의 Vue 인스턴스에서 데이터를 렌더링 합니다.


이 구문을 사용하면 Vue 인스턴스에 정의 된 속성과 메서드를 가져올 수 있습니다. 그런 다음 속성이 구문 분석되어 페이지에 렌더링됩니다.


여기를 클릭하여 저장소를 볼 수 있습니다.


여기를 클릭하여 여기에서 YouTube- 비디오를 보거나 이 섹션의 끝에서 찾아서 방금 배운 내용을 검토 할 수 있습니다.


Text Data binding 


이를 텍스트 데이터 바인딩이라고 합니다. Vue 인스턴스와 템플릿 파일간에 데이터를 바인딩 하는 방법의 예를 살펴 보겠습니다.

<div id="app">
    <h1>{{ title }}</h1>
</div>

위의 코드는 이전 장에서 정의한 app의 id와 함께 루트 요소 안에 h1 태그를 가지고 있습니다.


h1 태그 내에서 이중 중괄호 구문을 사용하여 제목을 호출 한 데이터 개체의 속성 값을 페이지에 렌더링 합니다.


아직 데이터 개체 내부에 제목 속성이 없으므로 추가해 보겠습니다.


main.js 파일 내부

let app = new Vue({
    el: "#app",
    data: {
        title: "John Doe portfolio",
        projects: [
            {title: "portfolio", languages: ["HTML", "CSS", "VueJS"]},
            {title: "grocery shop", languages: ["HTML", "CSS", "PHP"]},
            {title: "blog", languages: ["HTML", "CSS", "PHP"]},
            {title: "automation script", languages: ["Python"]},
            {title: "eCommerce", languages: ["HTML", "CSS", "PHP"]},
        ]
    }
})

이제 위의 코드를 사용하여 템플릿의 h1 태그 안에 속성 제목의 콘텐츠를 렌더링 할 수 있습니다. 최종 결과는 다음과 같습니다.

<h1>John Doe portfolio</h1>

그러나 이 방법을 사용하면 문자열 만 전달할 수 있습니다. 문자열 내에서 HTML 태그를 사용하려는 경우 이러한 태그는 구문 분석되지 않고 대신 간단한 문자열로 표시됩니다.


예를 들어 title 속성에 다음 문자열을 할당하면

    title: "John Doe <span class='badge'>Portfolio</span>"

그런 다음 HTML 내부에서 다음과 같이 렌더링 해보십시오.

<h1 class="title">{{title}}</h1>

속성 제목은 HTML 태그를 포함하는 일반 문자열로 렌더링 됩니다. 즉. John Doe <span class = 'badge'> 포트폴리오 </ span>


물론 HTML도 파싱 할 수 있습니다.


원시 HTML을 구문 분석하는 방법 


원시 HTML 요소를 렌더링 하려면 지시문이라는 또 다른 중요한 Vue 개념을 도입해야 합니다.


이 경우 HTML 태그 내에서 v-html 지시문을 속성으로 사용하고 여기에 속성 제목을 전달합니다.


Vue 지시문을 사용하는 경우 따옴표 안의 텍스트는 JavaScript 표현식으로 간주됩니다. 이것은 계산되고 그 결과가 렌더링 된다는 것을 의미합니다.


내부에 HTML 태그가 있는 제목에 대한 별도의 속성을 만들어 두 가지 모두 페이지에서 어떻게 렌더링 되는지 확인할 수 있습니다.

let app = new Vue({
    el: "#app",
    data: {
        title: "John Doe Portfolio", 
        titleHTLM : "John Doe <span class='badge'>Portfolio</span>",
        projects: [
            {title: "portfolio", languages: ["HTML", "CSS", "VueJS"]},
            {title: "grocery shop", languages: ["HTML", "CSS", "PHP"]},
            {title: "blog", languages: ["HTML", "CSS", "PHP"]},
            {title: "automation script", languages: ["Python"]},
            {title: "eCommerce", languages: ["HTML", "CSS", "PHP"]},
        ]
    }
})

이제 HTML 파일 내에서 이 {{}} 구문을 사용하여 속성 제목을 렌더링 합니다. 그러나 titleHTML 속성을 사용하여 원시 HTML을 렌더링 하려는 태그에서 대신 v-html 지시문을 사용합니다.

<div id="app">
    <div class="title">{{ title }}</div>
    <div v-html="titleHTML"></div>
</div>

이제 두 요소 모두 HTML 태그가 내부에 있는 두 번째 속성을 포함하여 올바르게 렌더링 됩니다.


참고 : HTML을 렌더링 하면 XSS 취약성이 노출 될 수 있습니다. 사용자가 제공 한 콘텐츠에는 이 방법을 사용하지 마십시오.


이제 페이지에 데이터를 렌더링 하는 방법을 알았으니 지시문에 대해 자세히 살펴 보겠습니다.


자세한 내용을 보려면 설명서를 방문하십시오. 여기.



----------------


https://www.freecodecamp.org/news/build-a-portfolio-with-vuejs/