[DEV] App Dev ∕ Web Front/Framework ∕ Vue 검색 결과
14 개의 검색 결과가 있습니다.
[DEV] App Dev ∕ Web Front/Framework ∕ Vue

[Vue.js] Nuxt.js 강의 요약

1. 소개 영상 - Nuxt.js Vue 서버사이드 렌더링 프레임워크 2. 개발환경 구성 & VS Code 플러그인 목록 3. Nuxt.js 소개 - 공식 홈페이지 : nuxtjs.org - 빠른 페이지 로딩 속도가 장점 - SEO와 사이트 정보 전달이 가능한 점이 장점 - 기존 Vue.js 프레임워크 기반의 "서버사이드 렌더링 프레임워크" 이다. - 기존 Vue.js 에서 사용하던 뷰액스, 뷰라우터, 액시오스 등이 프레임워크에 내장되어 있다. 4. 서버 사이드 렌더링이란? - 서버에서 페이지를 그려서, 클라이언트로 보낸 후 화면에 표시하는 기법 5. 클라이언트 사이드 렌더링이란? [CSR, Client Side Rendering] - 기본 vue-cli를 통해 구축하는 것처럼, 싱글 페이지 어플리케이션..

2022. 3. 17. 17:45
[DEV] App Dev ∕ Web Front/Framework ∕ Vue

[Vue.js] Nuxt.js - Vue를 좀 더 쉽게 적용해주는 프레임워크

Nuxt.js란?Nuxt.js는 Vue.js 애플리케이션 개발을 보다 강력하고 사용하기 쉽게 만들어 주는 프레임워크이다. 우리는 앞서 Vue.js가 어떻게 구성되고 웹 어플리케이션으로 만들어 지는지 확인해보았다. 이후 개발자들은 조금 더 빠른 개발 속도를 위해 Vue.js를 빠르게 적용하는 방법을 고안했고, 이를 프레임워크로 만들었다. Nuxt.js 설치Nuxt.js는 프레임워크이기 때문에 미리 개발 환경 세팅을 위한 설치가 필수적이다. 비슷한 개념으로 Spring Framework와 React.js를 생각하면 편할 것이다. nuxt 프레임워크를 사용하기 위해 우선 패키지를 만들고 해당 패키지에 Nuxt 프레임워크 사용을 알려야한다. yarn create nuxt-app  ? Project name {프..

2021. 11. 10. 14:01
[DEV] App Dev ∕ Web Front/Framework ∕ Vue

[vue.js] 사용자 입력 폼 만들기[메인 튜토리얼]

# 사전 준비 사항npm install @vue/cli # 프로젝트 생성하기vue create vue-form : vue-form이라는 vue 프로젝트를 생성합니다.(기본적으로 필요한 npm 라이브러리가 자동 설치)cd vue-formnpm run serve : vue project를 실행 합니다. npm i axios --save : http 모듈 사용하기 위해, 설치합니다. # App.vue 수정1. App.vue 초기화- App.vue 내용 전부 제거- VS Code 상에서, 'vue' 명령어 입력해서, 기본 템플릿 생성 : vueex라는 extention이 설치되어 있어야 할 듯 2. 기본 template 정의 id: pw: login 3. 기본 component 옵션 정의 및 View Mappi..

2020. 12. 3. 10:51
[DEV] App Dev ∕ Web Front/Framework ∕ Vue

[vue.js] 싱글 파일 컴포넌트

# 싱글 파일 컴포넌트에 배운 내용 적용하여 개발 시작하기 // new Vue({ // data: { // str: 'hi' // } // }) export default { data: function(){ return { str: 'hi' } } } 싱글 파일 컴포넌트로 넘어오면, 모두 위의 방식에서 아래 방식으로 전환된다.(export default 기능 사용) # 싱글 파일 컴포넌트 체계에서 컴포넌트 등록하기 Tip.컴포넌트이름은 Pascal Case 무조건 대문자로 시작하게 만들기 // 1. vue 명령어로 기본 템플릿 생성 // 2. html template 작성 // 4. props 데이터 바인딩 {{ propsdata }} // 6. v-on:="메소드명" send export default..

2020. 12. 3. 10:30
[DEV] App Dev ∕ Web Front/Framework ∕ Vue

[vue.js] 프로젝트 생성 도구 : Vue CLI

# Vue CLI(명령어 도구) npm install -g @vue/cli # Vue CLI 도구 설치시 문제점 해결방법 - 권한 문제 : sudo npm install -g @vue/cli // 관리자 권한으로 실행 # Vue CLI 설치 경로(global npm install) /usr/local/lib/node_module %USERPROFILE%\AppData\... # Vue CLI 2.X와 3.x의 차이점 [Vue CLI 2.x] vue init '프로젝트 템플릿 유형' '프로젝트 폴더 위치' [Vue CLI 3.x] vue create '프로젝트 폴더 위치' vue create '프로젝트이름' cd '프로젝트명' npm run serve # CLI로 생성한 프로젝트 폴더 구조 확인 및 mai..

2020. 12. 3. 10:10
[DEV] App Dev ∕ Web Front/Framework ∕ Vue

[vue.js] 템플릿 문법 - 실전

watch.html # watch 속성 // 데이터 바인딩 : data변수 view {{ num }} // v-on:click="메소드명" increase new Vue({ el: '#app', data: { num: 10 }, // ★ 데이터에 변화에 따라 특정 로직을 Trigger할 수 있다. watch: { // 인스턴스내 data.num 데이터 변수에 매핑 가능 num: function() { this.logText(); } }, methods: { addNum: function() { this.num = this.num + 1; }, logText: function() { console.log('changed'); } } }) watch vs computed.html # watch와 comput..

2020. 12. 2. 11:02