{"componentChunkName":"component---src-templates-blog-post-js","path":"/study/Vue-JS를-활용한-프론트엔드-개발/","result":{"data":{"site":{"siteMetadata":{"title":"Bottlehs Tech Blog","description":"웹·앱·AI 개발자 전병훈(bottlehs)의 기술 블로그. AI·LLM, JavaScript·Vue, Spring Boot, 알고리즘, 블록체인 실무 가이드를 다룹니다","siteUrl":"https://www.bottlehs.dev","author":{"name":"Jeon Byung Hun","summary":"개발을 즐기는 bottlehs - Engineer, MS, AI, FE, BE, OS, IOT, Blockchain, 설계, 테스트"},"social":{"github":"bottlehs","codepen":"bottlehs"}}},"markdownRemark":{"id":"8f911c1a-0e57-5c68-928d-7356c3f2c54e","excerpt":"목표 Vue 와 ECMAScript 6 을 활용하여 단일 페이지 프론트엔드 개발을 할 수 있다. Router 를 활용 하여 다수의 화면 컨트롤 할 수 있다. Vuex 를 활용하여 클라이언트 상태 관리를 할 수 있다. MVC, MVVM 패턴의 차이를 이해 하고 개발 할 수 있다. Vue…","html":"<h2 id=\"목표\" style=\"position:relative;\"><a href=\"#%EB%AA%A9%ED%91%9C\" aria-label=\"목표 permalink\" class=\"anchor-header before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>목표</h2>\n<ul>\n<li>Vue 와 ECMAScript 6 을 활용하여 단일 페이지 프론트엔드 개발을 할 수 있다.</li>\n<li>Router 를 활용 하여 다수의 화면 컨트롤 할 수 있다.</li>\n<li>Vuex 를 활용하여 클라이언트 상태 관리를 할 수 있다.</li>\n<li>MVC, MVVM 패턴의 차이를 이해 하고 개발 할 수 있다.</li>\n<li>Vue OpenSource 를 활용 할 수 있다.</li>\n<li>Axios 라이브러리를 활용하여 REST API 와 통신 하는 웹을 개발 할 수 있다.</li>\n<li>Vue &#x26; Nuxt 를 활용한 JamStack 기반 블로그를 개발 할 수 있다.</li>\n</ul>\n<h2 id=\"커리큘럼\" style=\"position:relative;\"><a href=\"#%EC%BB%A4%EB%A6%AC%ED%81%98%EB%9F%BC\" aria-label=\"커리큘럼 permalink\" class=\"anchor-header before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>커리큘럼</h2>\n<h3 id=\"1주차--javascript-기본\" style=\"position:relative;\"><a href=\"#1%EC%A3%BC%EC%B0%A8--javascript-%EA%B8%B0%EB%B3%B8\" aria-label=\"1주차  javascript 기본 permalink\" class=\"anchor-header before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>1주차 : Javascript 기본</h3>\n<ul>\n<li>\n<p>변수 및 연산자, 조건문등 자바스크립트 기본 리뷰</p>\n<ul>\n<li><a href=\"/javascript/javascript-%EA%B8%B0%EB%B3%B8-%EB%AC%B8%EB%B2%95-%EB%B3%80%EC%88%98-%EC%A1%B0%EA%B1%B4%EB%AC%B8-%EB%B0%98%EB%B3%B5%EB%AC%B8-%ED%95%A8%EC%88%98/\" title=\"JavaScript 기본 문법 변수,조건문,반복문,함수\">JavaScript 기본 문법 변수,조건문,반복문,함수</a></li>\n</ul>\n</li>\n<li>\n<p>문서 객체 모델 (DOM) 리뷰</p>\n<ul>\n<li><a href=\"/javascript/javascript-%EA%B8%B0%EB%B3%B8-%EB%AC%B8%EB%B2%95-dom-bom/\" title=\"JavaScript 기본 문법 DOM, BOM\">JavaScript 기본 문법 DOM, BOM</a></li>\n</ul>\n</li>\n<li>\n<p>브라우저 객체 모델 (BOM) 리뷰</p>\n<ul>\n<li><a href=\"/javascript/javascript-%EA%B8%B0%EB%B3%B8-%EB%AC%B8%EB%B2%95-dom-bom/\" title=\"JavaScript 기본 문법 DOM, BOM\">JavaScript 기본 문법 DOM, BOM</a></li>\n</ul>\n</li>\n<li>\n<p>자바스크립트 MVC 개념 이해</p>\n<ul>\n<li><a href=\"/javascript/javascript-mvc-%EB%94%94%EC%9E%90%EC%9D%B8-%ED%8C%A8%ED%84%B4-%EA%B0%9C%EB%85%90-%EC%9D%B4%ED%95%B4/\" title=\"JavaScript MVC 디자인 패턴 개념 이해\">JavaScript MVC 디자인 패턴 개념 이해</a></li>\n</ul>\n</li>\n<li>\n<p>_ MVC vs MVVM 개념의 이해</p>\n<ul>\n<li><a href=\"/javascript/javascript-mvc-mvvm-%EA%B0%9C%EB%85%90%EC%9D%98-%EC%9D%B4%ED%95%B4/\" title=\"JavaScript MVC vs MVVM 개념의 이해\">JavaScript MVC vs MVVM 개념의 이해</a></li>\n</ul>\n</li>\n<li>\n<p>ECMAScript 6 기본 문법</p>\n<ul>\n<li><a href=\"/javascript/es6-vs-es5/\" title=\"ES6 vs ES5\">ES6 vs ES5</a></li>\n</ul>\n</li>\n</ul>\n<h3 id=\"2주차--vuejs---인스턴트컴포넌트\" style=\"position:relative;\"><a href=\"#2%EC%A3%BC%EC%B0%A8--vuejs---%EC%9D%B8%EC%8A%A4%ED%84%B4%ED%8A%B8%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8\" aria-label=\"2주차  vuejs   인스턴트컴포넌트 permalink\" class=\"anchor-header before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>2주차 : Vue.JS - 인스턴트/컴포넌트</h3>\n<ul>\n<li>Vue JS 이해 및 환경설정</li>\n<li>인스턴스 &#x26; 컴포넌트 소개</li>\n<li>Vue 인스턴스의 유효 범위</li>\n<li>Vue 인스턴스 옵션 속성</li>\n<li>Vue 인스턴스 라이프 사이클</li>\n<li>컴포넌트 등록</li>\n<li>Vue 컴포넌트 정의</li>\n<li>Vue 컴포넌트 통신</li>\n</ul>\n<h3 id=\"3주차--vuejs---라우터--vuex\" style=\"position:relative;\"><a href=\"#3%EC%A3%BC%EC%B0%A8--vuejs---%EB%9D%BC%EC%9A%B0%ED%84%B0--vuex\" aria-label=\"3주차  vuejs   라우터  vuex permalink\" class=\"anchor-header before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>3주차 : Vue.JS - 라우터 / Vuex</h3>\n<ul>\n<li>Vue Router 설치 및 설정</li>\n<li>동적 Router 매칭</li>\n<li>중첩된 라우트 사용</li>\n<li>Redirect / Alias</li>\n<li>히스토리 관리</li>\n<li>프로젝트 생성도구 (Vue CLI)</li>\n<li>Vuex의 개념 및 구조의 이해</li>\n<li>Vuex 설치 및 등록</li>\n<li>State, Mutations, Actions, Getters 이해 및 활용</li>\n<li>헬퍼 함수</li>\n<li>Vuex는 저장소(store) 속성 및 모듈화</li>\n</ul>\n<h3 id=\"4주차--vue--nuxt-로-만드는-정적-블로그\" style=\"position:relative;\"><a href=\"#4%EC%A3%BC%EC%B0%A8--vue--nuxt-%EB%A1%9C-%EB%A7%8C%EB%93%9C%EB%8A%94-%EC%A0%95%EC%A0%81-%EB%B8%94%EB%A1%9C%EA%B7%B8\" aria-label=\"4주차  vue  nuxt 로 만드는 정적 블로그 permalink\" class=\"anchor-header before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>4주차 : Vue &#x26; Nuxt 로 만드는 정적 블로그</h3>\n<ul>\n<li>Netlify 란?</li>\n<li>Vue 와 Nuxt</li>\n<li>JamStack 의 이해</li>\n<li>JAMStack 기반 블로그 개발</li>\n</ul>\n<h3 id=\"5주차--vue--nuxt-로-만드는-정적-블로그-개발-리뷰\" style=\"position:relative;\"><a href=\"#5%EC%A3%BC%EC%B0%A8--vue--nuxt-%EB%A1%9C-%EB%A7%8C%EB%93%9C%EB%8A%94-%EC%A0%95%EC%A0%81-%EB%B8%94%EB%A1%9C%EA%B7%B8-%EA%B0%9C%EB%B0%9C-%EB%A6%AC%EB%B7%B0\" aria-label=\"5주차  vue  nuxt 로 만드는 정적 블로그 개발 리뷰 permalink\" class=\"anchor-header before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>5주차 : Vue &#x26; Nuxt 로 만드는 정적 블로그 개발 리뷰</h3>\n<ul>\n<li>JamStack 기반 블로그 개발 리뷰</li>\n</ul>","tableOfContents":"<ul>\n<li><a href=\"/study/Vue-JS%EB%A5%BC-%ED%99%9C%EC%9A%A9%ED%95%9C-%ED%94%84%EB%A1%A0%ED%8A%B8%EC%97%94%EB%93%9C-%EA%B0%9C%EB%B0%9C/#%EB%AA%A9%ED%91%9C\">목표</a></li>\n<li>\n<p><a href=\"/study/Vue-JS%EB%A5%BC-%ED%99%9C%EC%9A%A9%ED%95%9C-%ED%94%84%EB%A1%A0%ED%8A%B8%EC%97%94%EB%93%9C-%EA%B0%9C%EB%B0%9C/#%EC%BB%A4%EB%A6%AC%ED%81%98%EB%9F%BC\">커리큘럼</a></p>\n<ul>\n<li><a href=\"/study/Vue-JS%EB%A5%BC-%ED%99%9C%EC%9A%A9%ED%95%9C-%ED%94%84%EB%A1%A0%ED%8A%B8%EC%97%94%EB%93%9C-%EA%B0%9C%EB%B0%9C/#1%EC%A3%BC%EC%B0%A8--javascript-%EA%B8%B0%EB%B3%B8\">1주차 : Javascript 기본</a></li>\n<li><a href=\"/study/Vue-JS%EB%A5%BC-%ED%99%9C%EC%9A%A9%ED%95%9C-%ED%94%84%EB%A1%A0%ED%8A%B8%EC%97%94%EB%93%9C-%EA%B0%9C%EB%B0%9C/#2%EC%A3%BC%EC%B0%A8--vuejs---%EC%9D%B8%EC%8A%A4%ED%84%B4%ED%8A%B8%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8\">2주차 : Vue.JS - 인스턴트/컴포넌트</a></li>\n<li><a href=\"/study/Vue-JS%EB%A5%BC-%ED%99%9C%EC%9A%A9%ED%95%9C-%ED%94%84%EB%A1%A0%ED%8A%B8%EC%97%94%EB%93%9C-%EA%B0%9C%EB%B0%9C/#3%EC%A3%BC%EC%B0%A8--vuejs---%EB%9D%BC%EC%9A%B0%ED%84%B0--vuex\">3주차 : Vue.JS - 라우터 / Vuex</a></li>\n<li><a href=\"/study/Vue-JS%EB%A5%BC-%ED%99%9C%EC%9A%A9%ED%95%9C-%ED%94%84%EB%A1%A0%ED%8A%B8%EC%97%94%EB%93%9C-%EA%B0%9C%EB%B0%9C/#4%EC%A3%BC%EC%B0%A8--vue--nuxt-%EB%A1%9C-%EB%A7%8C%EB%93%9C%EB%8A%94-%EC%A0%95%EC%A0%81-%EB%B8%94%EB%A1%9C%EA%B7%B8\">4주차 : Vue &#x26; Nuxt 로 만드는 정적 블로그</a></li>\n<li><a href=\"/study/Vue-JS%EB%A5%BC-%ED%99%9C%EC%9A%A9%ED%95%9C-%ED%94%84%EB%A1%A0%ED%8A%B8%EC%97%94%EB%93%9C-%EA%B0%9C%EB%B0%9C/#5%EC%A3%BC%EC%B0%A8--vue--nuxt-%EB%A1%9C-%EB%A7%8C%EB%93%9C%EB%8A%94-%EC%A0%95%EC%A0%81-%EB%B8%94%EB%A1%9C%EA%B7%B8-%EA%B0%9C%EB%B0%9C-%EB%A6%AC%EB%B7%B0\">5주차 : Vue &#x26; Nuxt 로 만드는 정적 블로그 개발 리뷰</a></li>\n</ul>\n</li>\n</ul>","wordCount":{"words":252},"fields":{"slug":"/study/Vue-JS를-활용한-프론트엔드-개발/","image":null,"faq":[]},"frontmatter":{"title":"Vue JS를 활용한 프론트엔드 개발","date":"2021년 3월 17일","dateISO":"2021-03-17T20:29:29.537Z","updatedISO":null,"category":"study","description":"Vue 와 ECMAScript6 을 활용하여 웹페이지 개발 방법에 대해 학습하고, JamStack 기반 블로그를 개발 합니다.","tags":["Vue.js","JamStack","Netlify","Nuxt.js","JavaScript"]}}},"pageContext":{"slug":"/study/Vue-JS를-활용한-프론트엔드-개발/","previous":{"fields":{"slug":"/study/Spring-Boot를-활용한-Rest-API-개발/"},"frontmatter":{"title":"Spring Boot를 활용한 Rest API 개발","tags":["스프링","스프링부트","Spring","SpringBoot","Java","프레임워크","REST API"]}},"next":{"fields":{"slug":"/springboot/http-1-http2-기본-개념/"},"frontmatter":{"title":"HTTP, HTTP2 기본 개념","tags":["HTTP","HTTP/1","HTTP/2"]}}}},"staticQueryHashes":["213619243","3262363727"]}