분류 전체보기233

• 

  VueRouter의 Composition API 파헤치기 Composition APIVue가 Version2에서 Version3가 되면서 가장 큰 변화는 setup하는 과정이라고 할 수 있습니다.기존의 방식을 Options라고하며, 현재 등장한 방법을 Composition이라고 합니다.하지만, 아직 우리는 Options API를 사용할 수 있습니다. route 객체는 동적인(반응형) 객체입니다. 때문에 대부분의 경우 route 객체를 감시하는 것을 지양해야 합니다. 대신에 변경이 예상되는 하위 속성을 감시할 수 있습니다.Navigation Guard이전에 우리는 beforeRouteLeave와 beforeRouteUpdate에 대해 학습했습니다.Composition API에서는 Vue Router update와 leave를 다음과 같이 사용합니다. Compos.. FrameWorks/Vue 2024. 7. 29.

• 

  Kubernetes에서 NFS와 PV,PVC,를 이용한 데이터 관리하기 Why??Kubernetes 환경에서는 우리가 사용하고 싶은 application을 이미지화해서 쉽게 배포하고 관리할 수 있습니다. 하지만, Storage에 대한 문제가 있는데요. 우리 컨테이너화해서 사용하고 있는 Pod에 쇼핑몰 홈페이지가 있다고 가정해봅시다.우리는 쇼핑몰 홈페이지에서 등록하는 상품을 100개 등록했고, 해당 상품마다 이미지가 20개씩 들어있다고 해봅시다.분산화한 개발이 아닐 경우, 우리는 해당 프로젝트가 있는 host의 어딘가에 저장을 하게됩니다. 예를 들면 /project/image라는 폴더에 저장을 하겠죠. 하지만, 분산화시켜 사용 중 해당 Pod이 알 수 없는 이유 때문에 깨져 Pod이 내려갔다가 다시 생성되었다고 가정해 봅시다.그러면 우리가 처음에 배포한 이미지를 바탕으로 쇼핑.. Study/Kubernetes 2024. 6. 27.

• 

  VueRouter의 Data Fetching 파헤치기 데이터 가져오기때때로 경로가 활성화될 때 서버에서 데이터를 가져와야하는 경우가 발생 할 수 있습니다.탐색 후 데이터를 가져오거나, 탐색 전 데이터를 가져오거나 할 수 있습니다.탐색 후 데이터 가져오기이 접근 방식은 즉시 들어오는 컴포넌트를 탐색하고 렌더링하며, 컴포넌트 자체에서 데이터를 가져오게 됩니다.이는 네트워크를 통해 데이터를 가져오는 동안 로딩 상태를 표시할 수 있으며, 각 뷰에 대해 로딩을 다르게 처리할 수 있습니다. 로딩 중... {{ error }} {{ post.title }} {{ post.body }} 탐색 전 데이터 가져오기beforeRouteEnter를 통해 컴포넌트가 렌더링되기.. FrameWorks/Vue 2024. 6. 27.

• 

  VueRouter의 Router Meta Field 파헤치기 route's meta field라우트에 meta라는 속성 객체를 사용하여 임의의 정보를 추가하면, route location과 navigation guard에서 접근할 수 있습니다.const routes = [ { path: '/posts', component: PostsLayout, children: [ { path: 'new', component: PostsNew, // only authenticated users can create posts meta: { requiresAuth: true }, }, .. FrameWorks/Vue 2024. 6. 27.

• 

  VueRouter의 Navigation Guard 파헤치기 네비게이션 가드주로 탐색을 리다이렉션 or 취소하여 탐색을 막는데 사용하게 됩니다.가드를 연결하는 방법은 다양한데 다음 세 가지 종류가 있습니다.전역라우트별컴포넌트 내부BeforeGuardBeforeGurad는 탐색 이전에 실행되게 됩니다.router Instance의 beforeEach()메서드에 콜백 함수를 전달하여 등록합니다.콜백함수에서 사용하는 parameter에는 다음과 같은 종류가 있습니다.to : 탐색 될 라우트 위치 객체from : 탐색 전 현재 라우트 위치 객체만약 라우트 작업을 취소하고 싶을 경우엔 return false로 취소 할 수 있습니다.또한, return { name: ${route_name} }을 통해 리다이렉션를 명시할 수 있습니다.router.beforeEach(async.. FrameWorks/Vue 2024. 6. 27.

• 

  VueRouter의 Diffrenet History Modes 파헤치기 다양한 히스토리 모드Vue Router Instance에는 생성할 때, history 옵션을 사용하여 다양한 히스토리 모드 중 하나를 선택해서 적용할 수 있습니다.Hash ModecreateWebHashHistory()를 사용하여 설정합니다.https://example.com/#/user/id와 같은 모습 내부적으로 사용하는 URL 앞에 해시 문자(#)를 사용합니다.URL의 이 섹션은 서버로 전달되지 않으므로 특별한 조치가 필요하지 않으나, SEO에 나쁜 영향을 미치므로 이것이 문제가 된다면 HTML5 모드를 사용해야 합니다.import { createRouter, createWebHashHistory } from 'vue-router'const router = creatgeRouter({ hist.. FrameWorks/Vue 2024. 6. 26.

• 

  kubernetes Control-plane(Master Node)도 일을 시켜보자!! Taint 설정 해제 하기처음 Kubernetes를 설치하여 Master Node(Leader Node)휘하에 Worker Node를 붙였다면, 기본적으로 Pod 들은 Worker Node에만 올라가도록 설정되어 있습니다. Master Node(Leader Node)에도 Pod을 올리고 싶다면 Taint설정을 해제해야 하는데요.우선 Taint설정이 어떻게 되어 있길래 안올라가는지 확인해 봅시다.kubectl describe nodes ${node_name} |grep Taints 저의 경우에는 다음과 같이 입력합니다.kubectl describe nodes k8s-master.example.com |grep Taints 이리하면 결과는 다음과 같이 나오게 됩니다.Taints: nod.. Study/Kubernetes 2024. 6. 23.

• 

  kubernetes 환경 구성하기(feat. cri-o, Utuntu 22.04, calico) 사전 준비Virtual Machine ProgramUbuntu 22.04.x server(.iso)Ubuntu 기본 설정Ubuntu 설치 후 설치해야 하는 것들Ubuntu 22.04.x LTS를 설치하면 minimized로 설치하지 않는이상 Ubuntu에서 자동으로 설치해주는 툴들이 있다. 하지만, 설치가 되지 않는 것들도 존재하는데 이것들을 설치해주자. 1) vim* 어떠한 에디터를 사용하던 상관은 없지만, 이미 vim에 노예이기에 vim을 설치하자.* Ubuntu 22.04에서 기본적으로 vim-tiny가 설치되어 있다. 우리는 vim이랑 똑같이 동작하지만, 하이라이트 적용을 위해 새로운 vim을 설치하자.sudo apt update# vim-tiny 삭제sudo apt remove vim-tiny#.. Study/Kubernetes 2024. 6. 23.

• 

  Kubernetes 구성중 Swap Memory를 Off 해야하는 이유!! 왜 이런걸 궁금해 했을까??Kubernetes를 설치하는 과정에서 swap memory를 off 시키는 과정이 필수적!!공식문서에서도 off를 시키라는 문구가 적혀있다.그냥 off하라니까 하지뭐~~~해도 되겠지만!!왜!!!!! off 하라는지 궁금증을 참지못하고 찾아보게 되었다...Swap Memory우선 그... 스왑 메모리라는 녀석이 무엇인지를 알아야 했다.Swap이 녀석은 물리 메모리(RAM)의 용량이 부족할 대 하드의 일부 공간을 메모리 처럼 사용하는 것을 뜻한다.Swap in과 Swap out으로 나누어 지는데 아래의 예시를 생각해보자.현재 나의 메모리에는 50개의 프로세스가 올라갈 수 있다. 하지만 51번째의 프로세스를 추가로 올려야 하는 상황에 봉착했다!!!이러한 상황에서 50개 프로세스 중.. Study/Kubernetes 2024. 6. 23.

• 

  VueRouter의 Active Links 파헤치기 황성 링크활성 링크란 현재 활성화된 링크를 지칭하는 뜻입니다.RouterLink 컴포넌트는 활성 링크에 router-link-active 및 router-link-exact-active 두가지 CSS 클래스를 추가합니다.따라서, 활성된 링크에 맞게 특정 CSS를 활성화 시킬 수 있는 것이죠. 그럼 활성화된 링크란 무엇일까요?? 예를 들어보겠습니다.아래와 같이 route와 RouterLink가 작성되어 있는 상황입니다.const routes = [ { path: '/uesrs/:username', component: User, children: [ { path: 'grade/:number' .. FrameWorks/Vue 2024. 6. 23.

• 

  VueRouter의 Route Component Props 파헤치기 라우트 컴포넌트에 Props 전달하기이전에 route를 통해 props를 꺼내는 방법을 사용했습니다. 아래처럼 말이죠. User {{ $route.params.id }} import User from './User.vue'cosnt router = createRouter({ history: createWebHistory(), routes: [ { path: '/user/:id', component: User, }, ],}) 하지만, User.vue에서 $route에 대한 직접적인 의존성을 제거하기 위해 props를 선언할 수 있습니다. User {{ id }} .. FrameWorks/Vue 2024. 6. 23.

• 

  VueRouter의 Redirection & Alias 파헤치기 Redirection리다이렉션은 route 설정 시 정의할 수도 있습니다.예를 들어 /home에서 /로 리다이렉션을 시켜보겠습니다.// String으로 작성한 리다이렉션const routes = [{ path: '/home', redirect: '/' }]// 이름이 있는 라우토로 설정한 리다이렉션const routes = [{ path: '/home', redirect: { name: 'homepage' } }]// 함수를 사용한 동적 리다이렉션const routes = [ { // /search/screens -> /search?q=screens path: '/search/:searchText' redirect: to => { return.. FrameWorks/Vue 2024. 6. 23.