Vue.js - axios 라이브러리 설치 및 활용

axios axios는 브라우저 및 node에서도 쓰이는 HTTP client 이며, XMLHttpRequests를 만들어주어 request를 사용할 수 있는 라이브러리이다. 간결하게 로직을 구성할 수 있다. 데이터를 요청하고 응답받을 때 사용한다. 자동으로 JSON 데이터를 변환해준다. 거의 대부분의 브라우저를 지원한다. https://github.com/axios/axios GitHub - axios/axios: Promise based HTTP client for the browser and node.js Promise based HTTP client for the browser and node.js - GitHub - axios/axios: Promise based HTTP client for t..

Vue.js - 중첩 라우트

앱 UI를 구성하다보면 여러 개의 중첩된 컴포넌트로 이루어져 있는 구조가 있는 경우가 있다. 이러한 중첩된 페이지들을 연결시키기 위해 vue에서는 vue-router를 사용하여 라우트 구성 관계를 간단히 표현할 수 있다. 🔻 Vue-Router 설치 과정 및 구조는 아래 링크에 포스팅해두었다. https://meongj-devlog.tistory.com/174 [Vue.js] Vue-Router 설치 및 적용하기 라우팅(Routing) 이란 데이터를 보낼 때 경로를 찾아가는 과정을 말한다. 서버 라우팅 : 매번 주소를 요청할 때마다 화면이 갱신됨 ex) 네이버, 구글 브라우저 라우팅 : 주소를 요청하더라도 필요한 meongj-devlog.tistory.com https://router.vuejs.org/..

Vue.js - 라우터링크(router-link)

router-link는 라우터 지원 앱에서 사용자 네비게이션을 가능하게 하는 컴포넌트이다. 기본적으로 태그로 이동이 가능하지만, 경로를 불어올때마다 화면이 새로고침되는 문제가 있다. 하지만 router-link는 화면이 갱신되지 않고 바로 페이지 이동이 가능하다. 히스토리 모드에서 클릭 이벤트를 차단하여 브라우저가 페이지를 다시 로드되지 않도록 할 수 있다. ✔ 자세한 설명은 vue api document를 참고 https://router.vuejs.org/kr/api/#router-link API 레퍼런스 | Vue Router API 레퍼런스 는 라우터 지원 앱에서 사용자 네비게이션을 가능하게하는 컴포넌트입니다. 목표 위치는 to prop로 지정됩니다. 기본적으로 올바른 href를 갖는 태그로 렌더링..

Vue.js - 라우터뷰(Router view)

저번 포스팅에 이어서 라우터 별로 App을 따로 만들어서 라우팅 view를 관리해보도록 한다. https://meongj-devlog.tistory.com/174 [Vue.js] Vue-Router 설치 및 적용하기 라우팅(Routing) 이란 데이터를 보낼 때 경로를 찾아가는 과정을 말한다. 서버 라우팅 : 매번 주소를 요청할 때마다 화면이 갱신됨 ex) 네이버, 구글 브라우저 라우팅 : 주소를 요청하더라도 필요한 meongj-devlog.tistory.com componets 라는 폴더를 생성하여 index.js에 있던 component들을 만들었다. router/index.js import Vue from 'vue' import VueRouter from 'vue-router' import Home..

[Vue.js] Vue-Router 설치 및 적용하기

라우팅(Routing) 이란 데이터를 보낼 때 경로를 찾아가는 과정을 말한다. 서버 라우팅 : 매번 주소를 요청할 때마다 화면이 갱신됨 ex) 네이버, 구글 브라우저 라우팅 : 주소를 요청하더라도 필요한 데이터만 가져와서 따로 갱신됨, 효율적으로 화면을 갱신할 수 있음 ex) 구글메일, 트렐로 vue 에서 라우터를 이용하여 싱글 페이지 앱을 만들 수 있고, 라우터에 컴포넌트를 맵핑한 후 어떤 주소를 렌더링 할 것인지 알려주면 vue router 기능을 사용할 수 있다. vue.js 동작원리 main.js > route 혹은 App.vue 로 이동 > router에 설정한 페이지로 이동 https://router.vuejs.org/kr/guide/ 시작하기 | Vue Router 시작하기 Vue와 Vue ..

Vue-Cli로 Vue.js 프로젝트 생성하기

vue-cli 는 vue에서 제공해주는 터미널용 설치 관리 도구이다. node와 npm 설치를 하고 vue-cli를 설치할 수 있다. vue-cli 설치 install vue-cli -global vue-cli 도구로 vue 프로토타입 프로젝트를 쉽게 만들 수 있다. 프로젝트를 생성할 경로로 가서 터미널 창으로 해당 명령어를 입력하면 프로토타입 vue 프로젝트가 생성된다. vue init webpack-simple vue init webpack-simple 명령어는 웹팩 최소 기능을 활용하여 프로젝트를 구성해주며 빠른 화면의 프로토타이핑용이다. npm install 프로젝트를 만들고 npm install 명령어를 이용하여 npm 관련 라이브러리를 받아야한다. 이렇게 모두 설치가 끝나면 관련 폴더와 파일들..

vuetify SASS Variables를 활용한 Style Custom

SASS Variables은 vuetify의 style을 사용자 custom style 형태로 바꾸기 위해 사용한다. 전체적인 컴포넌트의 설정값을 한번에 바꿀 수 있고, spring에서 css파일과 비슷한 개념의 기능이다. variables.scss 파일 생성 먼저, vue 프로젝트 내에 sass, scss 혹은 styles 폴더를 만들어서 variables.scss or variables.sass 파일을 생성한다. 그러면 vuetify-loader가 자동으로 이 파일들을 읽어 설정되어 있는 sass 변수들을 오버라이드 즉, 덮어씌운다. 폰트 사이즈와 class별 버튼 크기를 설정하였다. https://vuetifyjs.com/en/features/sass-variables/ SASS variables ..

Vuetify 소스 파일 구조 알아보기

Vuetify를 프로젝트에 설치하고 생성된 파일 구조에 대해 살펴보도록 하겠습니다. Vuetify를 설치하게 되면 아래와 같이 폴더 경로에 추가로 파일이 생성되어 집니다. 생성된 파일에 대해 알아보겠습니다. -> Vuetify 설치 방법은 아래 포스팅에 설명해두었습니다. https://meongj-devlog.tistory.com/39?category=974794 [Vue.js] vuetify 라이브러리 설치해보기 Vuetify Vue.js 를 위한 vuetify 라이브러리를 설치해보도록 하겠습니다. vuetify는 bootstrap과 비슷하게 사용자에게 보여지는 UI 컴포넌트를 편리하게 디자인 할 수 있도록 제공해주는 라이브러리입니다. meongj-devlog.tistory.com .gitignore ..