[Vue 3] - Tailwind 사용하기

1. Vue3 프로젝트 생성npm init vue@latest my-vue3-appcd my-vue3-appnpm install 2. Tailwind Css 설치Tailwind CSS와 관련된 패키지를 설치합니다. npm install -D tailwindcss postcss autoprefixer 그런 다음 Tailwind CSS 초기화를 진행합니다. npx tailwindcss init 이 명령어를 실행하면 프로젝트 루트 디렉토리에 tailwind.config.js 파일이 생성됩니다. 3. Tailwind CSS 구성

FrontendVue

2025-03-05

[Vue 3] - Pinia 사용하기

Pinia 란?Pinia 는 Vue 에서 사용하는 상태 관리를 위한 라이브러리입니다. Vue2 에서는 Vuex 를 사용하다가 Pinia 의 등장으로 점차 Pinia 가 대세를 이루게 됐습니다. Vue 에서는 ref, reactive 와 같은 상태 관리를 할 수 있는 방법들이 있는데 이런 함수들을 이용해 생성된 상태를 다른 페이지로 전달하기 위해서는 props 나 event 혹은 provide 나 inject 를 이용해 전달할 수 있지만, 파일이 많아질수록 추적하기가 복잡해집니다. Pinia 를 사용하는 이유는 상태를 관리하는 로직을 분리할 수 있고 중앙 집중식 으로 관리할 수 있다는 이점 때문에 그렇습니다. 1. Pinia 설치npm install pinia 2. Pinia 모듈 추가하기main.tsimport { createApp } from 'vue';import { createPinia } from 'pinia';import App from './App.vue';const app = createApp(App);const pinia = createPinia();app.use(pinia);app.mount('#app'); 3. Pinia Store 생성

FrontendVue

2025-03-05

[Vue 3] - unplugin-vue-router 사용하기

참고https://github.com/posva/unplugin-vue-router vue 에서는 새로운 페이지를 생성할때마다 vue-router 에 직접 등록해줘야 하는 번거로움이 있습니다. 이런 수고스러움을 좀 덜고자 찾아보니 vue 에서도 next 나 nuxt 처럼 파일 기반으로 라우팅을 할 수 있게 지원해주는 모듈을 찾게 됐습니다. 1. unplugin-vue-router 모듈을 설치npm i -D unplugin-vue-router 2. vite.config.ts 에 다음 내용을 추가해 줍니다.vite.config.tsimport { defineConfig } from 'vite'import vue from '@vitejs/plugin-vue'import VueRouter from 'unplugin-vue-router/vite';// https://vitejs.dev/config/export default defineConfig({ plugins: [vue(), VueRouter({})],}) 3. tsconfig.json 설정 정보 추가tsconfig.json{ "compilerOptions": { // ... "moduleResolution": "Bundler", // ... "types": ["unplugin-vue-router/client"], } // ... "include": [ // ... "./typed-router.d.ts" ],}

SpringSpring Framework

2025-03-05

[Spring Boot] - Cache

목차 Post not found: spring-boot/spring-framework/springboot-actuator Post not found: spring-boot/spring-framework/springboot-messageresource Post not found: spring-boot/spring-framework/configuration/springboot-WebMvcConfigurer Post not found: spring-boot/spring-framework/configuration/springboot-autoconfiguration 참고 https://docs.spring.io/spring-boot/docs/2.1.6.RELEASE/reference/html/boot-features-caching.html https://www.baeldung.com/spring-cache-tutorial Spring Boot 캐시 추상화Spring Boot 에서는 캐시를 쉽게 사용할 수 있도록 캐싱 기능들을 추상화해 제공합니다. 캐싱 추상화 가능으로 개발자는 특정 캐시 저장소에 종속적이지 않고 일관된 방식으로 캐싱기능을 사용할 수 있습니다. ✅ 의존성 추가implementation 'org.springframework.boot:spring-boot-starter-cache' ✅ Cache 활성화

Kubernetes

2025-02-22

[쿠버네티스 DevOps 구축] - OpenSearch 설치하기

Kubernetes

2025-02-22

[쿠버네티스 DevOps 구축] - Prometheus 와 Grafana 설치하기

목차 [쿠버네티스 DevOps 구축] - OpenSearch 설치하기 [쿠버네티스 DevOps 구축] - Prometheus 와 Grafana 설치하기 [쿠버네티스 DevOps 구축] - Keycloak 설치하기 [쿠버네티스 DevOps 구축] - Ingress Nginx Controller 설치하기 [쿠버네티스 DevOps 구축] - Local PC 쿠버네티스 동적 프로비저닝을 위한 StorageClass 설치 [쿠버네티스 DevOps 구축] - Local PC 에 쿠버네티스 설치하기 ✅ 메트릭 수집을 위한 Prometheus서비스를 올렸다고 해서 끝이 아니다! 서비스를 운용하는 입장에서는 시스템이 안정적인지 지속적으로 확인을 해야 하는데, 운영하는 서비스의 CPU 사용률, 메모리 사용률과 같은 메트릭 정보를 지속적으로 수집하는 시스템을 구축해야 합니다. 저는 대중적으로 많이 알려진 Prometheus 를 이용해 쿠버네티스에서 운영중인 서비스에 대한 메트릭 정보를 수집하려고 합니다. Helm 을 이용한 Prometheus 설치# helm repo 추가helm repo add prometheus-community https://prometheus-community.github.io/helm-charts# prometheus 설치helm upgrade --install -f ./values-prometheus.yaml prometheus prometheus-community/prometheus -n monitoring --create-namespace Release "prometheus" does not exist. Installing it now.NAME: prometheusLAST DEPLOYED: Fri Nov 15 10:11:47 2024NAMESPACE: monitoringSTATUS: deployedREVISION: 1TEST SUITE: NoneNOTES:The Prometheus server can be accessed via port 80 on the following DNS name from within your cluster:prometheus-server.monitoring.svc.cluster.localGet the Prometheus server URL by running these commands in the same shell: export POD_NAME=$(kubectl get pods --namespace monitoring -l "app.kubernetes.io/name=prometheus,app.kubernetes.io/instance=prometheus" -o jsonpath="{.items[0].metadata.name}") kubectl --namespace monitoring port-forward $POD_NAME 9090####################################################################################### WARNING: Persistence is disabled!!! You will lose your data when ########### the Server pod is terminated. ######################################################################################The Prometheus alertmanager can be accessed via port 9093 on the following DNS name from within your cluster:prometheus-alertmanager.monitoring.svc.cluster.localGet the Alertmanager URL by running these commands in the same shell: export POD_NAME=$(kubectl get pods --namespace monitoring -l "app.kubernetes.io/name=alertmanager,app.kubernetes.io/instance=prometheus" -o jsonpath="{.items[0].metadata.name}") kubectl --namespace monitoring port-forward $POD_NAME 9093####################################################################################### WARNING: Persistence is disabled!!! You will lose your data when ########### the AlertManager pod is terminated. ############################################################################################################################################################################# WARNING: Pod Security Policy has been disabled by default since ########### it deprecated after k8s 1.25+. use ########### (index .Values "prometheus-node-exporter" "rbac" ########### . "pspEnabled") with (index .Values ########### "prometheus-node-exporter" "rbac" "pspAnnotations") ########### in case you still need it. ######################################################################################The Prometheus PushGateway can be accessed via port 9091 on the following DNS name from within your cluster:prometheus-prometheus-pushgateway.monitoring.svc.cluster.localGet the PushGateway URL by running these commands in the same shell: export POD_NAME=$(kubectl get pods --namespace monitoring -l "app=prometheus-pushgateway,component=pushgateway" -o jsonpath="{.items[0].metadata.name}") kubectl --namespace monitoring port-forward $POD_NAME 9091For more information on running Prometheus, visit:https://prometheus.io/ ✅ 모니터링을 위한 Grafana메트릭 수집을 위한 Prometheus 를 설치 했는데! 단순 메트릭 정보만 있으면 운영하는 입장에서 가시적으로 와 닿지 않습니다.

Kubernetes

2025-02-22