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 ..

리눅스 cpu 사용률 모니터링 명령어 mpstat

업무 중에 시스템 cpu와 메모리 사용률 증감 추이를 모니터링 해야해서 해당 관련 명령어를 정리해보았다. top 명령어로는 cpu 사용률을 확인하기엔 무리가 있어 mpstat 명령어로 접근을 해보았고, 해당 명령어로 스크립트를 만들어 crontab 으로 1분 주기로 log 파일로 저장하고 모니터링하였다. mpstat 리눅스에서 mpstat 명령어는 CPU 코어별 사용량을 확인할 수 있다. 옵션없이 명령어를 출력하면 , 모든 CPU에 대한 정보가 출력된다. $ mpstat Linux 4.1.12-124.22.4.el6uek.x86_64 ([시스템명]) 2021년 12월 13일 _x86_64_ (8 CPU) CPU %usr %nice %sys %iowait %irq %soft %steal %guest %id..

[Android] FrameLayout

FrameLayout 내부에 배치된 View들이 같은 자리에 계속 배치되는 layout이다 화면을 구성하기 보단 탭 등과 같은 기능을 만들 때 사용하는 경우가 많다 FrameLayout 의 주요 속성 주요 속성은 없다. FrameLayout에 배치되는 view 는 모두 좌측 상단에 배치된다. margin 속성이나 layout_gravity 속성을 이용해 배치되는 위치를 결정하여 사용한다 So... 그래서 FrameLayout 이란? FrameLayout 은 중첩해서 view 를 배치할 수 있는 Layout 이다. 컨텐츠 개발시 많이 사용하지 않는 레이아웃

[Android] LinearLayout

LinearLayout 방향성을 가지고 view 를 배치하는 layout 이다 가로 혹은 세로 방향으로 배치할 수 있으며 한 칸에 하나의 view만 배치할 수 있다 LinearLayout의 주요 속성 orientation : 배치되는 모양을 결정한다 (horizontal 좌 -> 우 / vertical 위 -> 아래) weight : LinearLayout 안에 배치되는 View 들의 비율을 설정한다.