유니네 Library

1. Vue 3에서 Vue Router란? Vue Router는 Vue.js 애플리케이션에서 페이지 간 이동(라우팅)을 관리하는 라이브러리이다.Vue 3에서는 Vue Router 4.x 버전을 사용하며, 기존 Vue 2와는 일부 차이점이 있다. 이 글에서는 Vue 3에서 Vue Router를 설정하는 방법을 단계별로 설명하고,기본적인 라우팅 설정부터 동적 라우트, Lazy Loading, 404 페이지 처리까지 알아본다. 2. Vue 3에서 Vue Router 설정하기 Vue 3에서 라우터 설정을 담당하는 index.js 파일을 생성해야 한다. 📌 기본적인 Vue Router 설정 (src/router/index.js)import { createRouter, createWebHistory } from ..

Vue.js 프로젝트에서 Module not found: Error: Can't resolve 'axios' 오류가 발생했다면,이는 axios 모듈을 찾을 수 없다는 의미이다. 이 오류가 발생하는 주요 원인과 해결 방법을 단계별로 알아본다. 📌 1. 오류 원인 분석 이 오류는 보통 다음 3가지 이유로 발생한다. 1️⃣ axios가 설치되지 않은 경우Vue 프로젝트에 axios 패키지가 설치되지 않았거나, package.json 파일에 포함되지 않은 경우. 2️⃣ 잘못된 설치 경로 문제 • axios가 프로젝트의 올바른 디렉터리에 설치되지 않았을 수 있다. • 프로젝트에서 패키지를 관리하는 node_modules 디렉터리의 구조가 깨졌을 수 있다. 3️⃣ 패키지 매니저(npm, yarn) 문제 • npm..

Vuetify의 v-text-field(입력 필드)와 v-btn(버튼)은 기본적으로 너비가 길게 설정되어 있다.이를 적절하게 조정하려면 Vuetify의 그리드 시스템, 유틸리티 클래스, 속성 활용이 필요하다. ✅ 이 글에서 다룰 내용1️⃣ 그리드 시스템 활용 (v-row, v-col)2️⃣ 유틸리티 클래스 (ma-2, max-width) 사용3️⃣ 속성 (block, width)으로 크기 조정 🟢 1. Vuetify 그리드 시스템을 사용한 크기 조정 Vuetify는 Flexbox 기반의 그리드 시스템을 제공하므로, v-row와 v-col을 사용하면 반응형 크기 조정이 가능하다. ✔ 기본 코드 예제  ✅ 설명: • cols="12" → 모바일에서 전체 너비 사용 • sm="..

Vue 3에서는 반응형 변수를 선언할 때 ref()를 사용한다.ref()는 Vue의 반응형(Reactivity) 시스템을 활용하여 데이터 변경을 감지할 수 있도록 도와준다. ✅ ref()를 사용한 변수 선언 및 데이터 할당 1️⃣ ref()로 변수 선언하기import { ref } from 'vue';// 빈 문자열을 초기값으로 설정const dataVal = ref('');✅ ref('') → Vue의 반응형 변수 선언 2️⃣ ref() 변수에 값 할당하기// 외부에서 주어진 데이터const dataLst = '1234567';// ref() 변수에 데이터 할당dataVal.value = dataLst;✅ .value를 통해 값 변경 → ref()로 선언한 변수는 .value를 통해 값을 변경해야 반응..

Dockerfile을 생성했다면, 이제 docker desktop을 설치한다. ☞ Dockerfile 생성은 이전 글 참고 vue cli 프로젝트 Dockerfile 생성하기 #20vue cli 프로젝트의 Dockerfile 생성하기vue cli는 기본적인 웹서버 기능도 있기 때문에 로컬 개발 시에는 웹서버가 필요 없었다.하지만 배포를 할 때에는 웹서버를 설치하고 vue 배포 파일들인 dist 폴yuneenelife.tistory.comdocker 사이트 접속☞ https://docker.com/각자 환경에 맞는 버전으로 다운로드 받는다.docker desktop 설치docker desktop app을 설치한다.docker desktop 화면django api 서버인 pubdapi docker 이미지 화..

vue cli 프로젝트의 Dockerfile 생성하기vue cli는 기본적인 웹서버 기능도 있기 때문에 로컬 개발 시에는 웹서버가 필요 없었다.하지만 배포를 할 때에는 웹서버를 설치하고 vue 배포 파일들인 dist 폴더를 압축해서 업로드해야 하는데,이를 docker 를 이용하여 배포해 본다. vue cli Dockerfile 생성파일명과 대소문자 그대로 Dockerfile을 루트 디렉터리에 신규 생성한다.package.json 있는 곳과 동일한 위치파일명은 Dockerfile/*파일명과 대소문자 그대로 Dockerfile을 루트 디렉터리에 신규 생성한다.package.json 있는 곳과 동일한 위치파일명은 Dockerfile*/FROM node:lts-alpine AS build-stageWORKDIR..

공공데이터 포털 국회도서관 자료검색 만든 결과물을 docker 파일로 빌드하여 AWS EC2 에 배포하는 것까지 진행한다. 전체 진행 흐름은 아래와 같이 진행한다.vue cli 프로젝트의 배포파일 dist 를 생성한다.vue 프로젝트에 Dockerfile 생성한다.python django 프로젝트에 Dockerfile 생성한다.docker desktop 설치하고 docker hub 계정 생성한다.docker 파일 빌드하고 docker hub 의 repository 로 push 한다.AWS EC2 에 docker hub 에 push 한 docker file 을 pull 한다.AWS EC2 에서 docker 실행(run) 한다.이번 장에는 1번 vue cli 프로젝트의 배포파일 dist 를 생성한다.vue..

지금까지 적용된 국회도서관 자료검색 화면과 적용된 기술에 대해 정리한다.국회도서관 자료검색 흐름도 스케치는 어떻게? 국회도서관 자료 검색 vue.js 화면 스케치 #14국회도서관 도서검색은 5개의 흐름으로 진행한다.검색어 입력검색어로 국회도서관 도서검색 API 호출도서검색된 결과 리스트 노출특정 도서 클릭클릭된 도서의 상세정보 노출5개의 흐름을 3개yuneenelife.tistory.com공공데이터 포털 API 사용은 어떻게? 공공데이터 포털 에서 원하는 서비스 API 신청하기 #4공공데이터 포털에서 원하는 API를 검색한다.그러기 위해 먼저 아래 사이트로 접속하여 회원가입한다.☞ https://www.data.go.kr/ 공공데이터 포털국가에서 보유하고 있는 다양한 데이터를『공공데이yuneenelife..

Vue 애플리케이션에서 외부 API와 통신하는 방법을 알아본다.이번 포스트에서는 Axios를 활용한 HTTP 요청 처리와 Vue CLI 환경변수(.env) 설정 방법을 정리한다. 1. Axios란? Axios 는 Node.js와 브라우저에서 사용할 수 있는 Promise 기반 HTTP 클라이언트 라이브러리이다. ✅ Axios의 주요 기능 • HTTP 요청(GET, POST, PUT, DELETE 등) 지원 • 요청 및 응답을 인터셉트하여 가공 가능 • 자동 JSON 변환 및 데이터 직렬화 지원 • 요청 취소 및 타임아웃 설정 가능 2. Axios 설치 방법 Vue 프로젝트에서 Axios를 사용하려면 npm을 통해 라이브러리를 설치해야 한다. 📌 설치 명령어# Axios 설치npm install axio..

Vue에서 v-router를 사용하여 다른 페이지로 이동하고 데이터를 전달하는 방법을 설명한다.이 예제에서는 국회도서관 자료검색 화면을 개발하며 적용된 내용을 기반으로 설명한다. ✅ Vue Router란? Vue Router는 Vue.js에서 페이지 간 이동(라우팅)을 담당하는 공식 라이브러리이다.단일 페이지 애플리케이션(SPA)에서 원활한 네비게이션을 제공하며, 동적 라우팅 기능을 지원한다. ✅ Vue Router 설치 Vue CLI 프로젝트에서 Vue Router를 설치하려면 아래 명령어를 실행한다.npm install vue-router 이전에 Vue Router와 Vuetify를 함께 설치하는 방법을 다뤘으니, 필요하면 참고한다.📌 이전 글 보기 vue router, vuetify 설치하기 #1..