FrontEnd/Vue.js
-
09. 뷰 CLI(Command Line Interface)FrontEnd/Vue.js 2021. 9. 11. 22:05
CLI(Command Line Interface)는 커맨드 창에서 명령어로 특정 동작을 수행할 수 있는 도구입니다. .vue 파일 방식으로 애플리케이션을 개발하려면 뷰 로더와 이를 지원하는 웹팩, 브라우저리파이 같은 모듈 번들러가 필요합니다. 웹팩은 자바스크립트 모듈만 인식할 수 있기 때문에 뷰 로더가 .vue 파일을 일단 자바스크립트 모듈로 변환합니다. 뷰 로더는 생성된 프로젝트의 webpack.config.js 파일에 적용되어 있습니다. (test : 로더가 적용될 대상 파일을 지정하는 속성, loader : 적용할 로더의 종류를 지정하는 속성) 1. 뷰 CLI 설치 명령 프롬프트 창(Window) or 터미널(Mac) 실행 후 npm install vue-cli -global 입력으로 설치 > vu..
-
07. 뷰 템플릿(Template)FrontEnd/Vue.js 2021. 9. 11. 15:05
뷰의 템플릿(Template)은 HTML, CSS 등의 마크업 속성과 뷰 인스턴스에서 정의한 데이터 및 로직들을 연결하여 사용자가 브라우저에서 볼 수 있는 형태의 HTML로 변환해 주는 속성입니다. 1. 데이터 바인딩(Data Binding) 데이터 바인딩(Data Binding)은 HTML 화면 요소를 뷰 인스턴스의 데이터와 연결하는 것을 의미합니다. 주요 문법으로는 {{}} 문법과 v-bind 속성이 있습니다. 1) {{}} - 콧수염 괄호 {{ message }} > data 속성의 message 값이 바뀌면 뷰 반응성에 의해 화면이 자동으로 갱신됩니다. 2) v-bind v-bind는 아이디, 클래스, 스타일 등의 HTML 속성 값에 뷰 데이터 값을 연결할 때 사용하는 데이터 연결 방식입니다. v..
-
06. 액시오스(Axios)FrontEnd/Vue.js 2021. 9. 11. 13:50
1. 액시오스(Axios) 뷰 커뮤니티에서 가장 많이 사용되는 HTTP 통신 라이브러리입니다. Promise 기반의 API 형식이 다양하게 제공되어 별도의 로직 구현 필요 없이 주어진 API만으로도 간편하게 원하는 로직을 구현할 수 있습니다. tip) Promise 기반의 API 형식 : Promise란 서버에 데이터를 요청하여 받아오는 동작과 같은 비동기 로직 처리에 유용한 자바스크립트 객체입니다. 자바스크립트는 단일 스레드(thread)로 코드를 처리하기에 특정 로직의 처리가 끝날 때 까지 기다려주지 않습니다. 따라서 데이터를 요청하고 받아올 때까지 기다렸다가 화면에 나타내는 로직을 실행해야 할 때 주로 Promise를 활용합니다. [액시오스 공식 깃허브 리포지토리] 2. 액시오스 설치 1) CDN ..
-
05. 뷰 라우터(Router)FrontEnd/Vue.js 2021. 9. 11. 13:23
1. 뷰 라우터(Router) 뷰 라우터는 뷰에서 라우팅(웹 페이지 간 이동) 기능을 구현할 수 있도록 지원하는 공식 라이브러리입니다. 태그 설명 페이지 이동 태그. 화면에서는 로 표시되며 클릭하면 to에 지정한 URL로 이동합니다. 페이지 표시 태그. 변경되는 URL에 따라 해당 컴포넌트를 뿌려주는 영역입니다. 뷰 라우터 예제 Main 컴포넌트로 이동 Login 컴포넌트로 이동 tip) $mount() API : el속성과 동일하게 인스턴스를 화면에 붙이는 역할. (용어) 싱글 페이지 애플리케이션(SPA, Single Page Application) : 페이지를 이동할 때마다 서버에 웹 페이지를 요청하여 새로 갱신하는 것이 아니라 미리 해당 페이지들을 받아 놓고 페이지 이동 시 클라이언트의 라우팅을 이..
-
04. 뷰 컴포넌트(Component)FrontEnd/Vue.js 2021. 9. 10. 16:00
1. 뷰 컴포넌트(Comonent) 컴포넌트(Component)란 조합하여 화면을 구성할 수 있는 블록을 의미합니다. 2. 컴포넌트 등록 /* 1) 전역 컴포넌트 : 여러 인스턴스에서 공통으로 사용 Vue.component('컴포넌트 이름', { // 컴포넌트 내용 : template, data, methods 등 인스턴스 옵션 속성 정의 }); */ 컴포넌트 등록 /* 2) 지역 컴포넌트 : 인스턴스에 components 속성 추가 new Vue({ components: { '컴포넌트 이름': 컴포넌트 내용 } }); */ 컴포넌트 등록 > 전역 컴포넌트는 한 번 등록하면 어느 인스턴스에서든 사용이 가능하나, 지역 컴포넌트는 새 인스턴스를 생성할 때마다 등록해줘야 합니다. 3. 뷰 컴포넌트 통신 뷰 프..
-
03. 뷰 인스턴스(Instance)FrontEnd/Vue.js 2021. 9. 7. 17:20
뷰 인스턴스(Instance)는 뷰로 화면을 개발하기 위해 필수적으로 생성해야 하는 기본 단위입니다. 1. 뷰 인스턴스 라이프 사이클 [용어] 라이프 사이클 훅(hook) : 각 라이프 사이클 속성에서 실행되는 커스텀 로직 2. 뷰 인스턴스 생성 및 옵션 속성 // Vue 생성자 : 미리 정의된 속성과 메서드 재활용 new Vue({ el: '#app', // el 속성 : 뷰 인스턴스로 화면을 렌더링할 때 화면이 그려질 위치의 돔 요소 지정 data: { message: 'Hello Vue.js!' }, template: { // 화면에 표시할 HTML, CSS 등의 마크업 요소를 정의하는 속성. }, methods: { // 화면 로직 제어와 관계된 메서드를 정의하는 속성. (마우스 클릭 이벤트 처리..
-
02. 개발환경 설정FrontEnd/Vue.js 2021. 9. 7. 11:36
1. Chrome > 크롬 개발자 도구 2. Visual Studio Code 3. Node.js > 설치 시 LTS(Long Term Support) 버전 다운로드 > 설치 후 터미널에서 node -v, npm -v로 버전 확인 4. Vue.js Devtools 5. git 6. github [참고] github repository 1) https://github.com/joshua1988/doit-vuejs 2) https://github.com/joshua1988/learn-vue-js [Install Visual Studio plugins] > Vetur : Vue plugin > tslint : 엄격한 자바스크립트 > Material Icon Theme : 파일 아이콘 테마 (File > Pre..