Vue11 vuetify component의 input, button 사용할 때 길이 조정하기 vuetify input이나 button 컴포넌트를 사용할 때는 길이가 길게 나온다.이를 위해서는 vuetify 의 그리드 시스템과 레이아웃 유틸리티 클래스를 활용하여 레이아웃을 조정할 수 있다. 1. vuetify 의 그리드 시스템 사용하기 ( v-row, v-col )vuetify는 Flexbox 기반 그리드 시스템을 제공하므로, v-row, v-col을 사용해 레이아웃을 조정한다. 기본 사용 코드화면vuetify 그리드 시스템 사용하기 화면설명v-col 의 cols, sm, md 속성 사용 사용cols="12"모바일 크기에서 전체 너비를 사용sm="6"작은 화면에서는 50%md="4"더 큰 화면에서는 1/3.. 2024. 10. 16. Vue3 ref() 로 선언된 변수에 데이터 할당하기 Vue3 에서 변수 선언은 ref() 로 한다.여기서 ref() 는 Vue3 의 reactive 시스템중 하나로, 데이터를 할당하기 위해서는 value 를 통해 값을 할당하거나 변경한다. 이미 값이 주어진 변수를 ref() 로 설정된 변수에 대입하는 방법ref('') 로 변수 초기화.value 로 값 할당ref()로 선언된 변수를 갱신할 때는 .value를 통해 직접 값을 할당한다.템플릿에서 데이터를 확인하려면 {{ dataVal }} 또는 {{ dataVal.value }}로 렌더링할 수 있다. {{ dataVal }} {{ dataVal.value }} 2024. 10. 1. docker desktop 설치하고 docker hub repository 생성하기 #22 Dockerfile을 생성했다면, 이제 docker desktop을 설치한다. ☞ Dockerfile 생성은 이전 글 참고https://yuneenelife.tistory.com/entry/vue-cli-프로젝트-Dockerfile-생성하기-20 vue cli 프로젝트 Dockerfile 생성하기 #20vue cli 프로젝트의 Dockerfile 생성하기vue cli는 기본적인 웹서버 기능도 있기 때문에 로컬 개발 시에는 웹서버가 필요 없었다.하지만 배포를 할 때에는 웹서버를 설치하고 vue 배포 파일들인 dist 폴yuneenelife.tistory.comdocker 사이트 접속☞ https://docker.com/각자 환경에 맞는 버전으로 다운로드 받는다.docker desktop 설치docker d.. 2024. 9. 3. vue cli 프로젝트 Dockerfile 생성하기 #20 vue cli 프로젝트의 Dockerfile 생성하기vue cli는 기본적인 웹서버 기능도 있기 때문에 로컬 개발 시에는 웹서버가 필요 없었다.하지만 배포를 할 때에는 웹서버를 설치하고 vue 배포 파일들인 dist 폴더를 압축해서 업로드해야 하는데,이를 docker 를 이용하여 배포해 본다. vue cli Dockerfile 생성파일명과 대소문자 그대로 Dockerfile을 루트 디렉터리에 신규 생성한다.package.json 있는 곳과 동일한 위치파일명은 DockerfileFROM node:lts-alpine AS build-stageWORKDIR /pubdwebCOPY package*.json ./RUN npm install --productionCOPY . .RUN npm run buildFROM.. 2024. 8. 29. vue js 배포 파일 dist 생성하기 #19 공공데이터 포털 국회도서관 자료검색 만든 결과물을 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.. 2024. 8. 28. django, vue cli 이용해서 개발한 국회도서관 자료 검색 화면 및 적용 기술 #18 지금까지 적용된 국회도서관 자료검색 화면과 적용된 기술에 대해 정리한다.국회도서관 자료검색 흐름도 스케치는 어떻게?https://yuneenelife.tistory.com/entry/국회도서관-자료-검색-vuejs-화면-스케치-14 국회도서관 자료 검색 vue.js 화면 스케치 #14국회도서관 도서검색은 5개의 흐름으로 진행한다.검색어 입력검색어로 국회도서관 도서검색 API 호출도서검색된 결과 리스트 노출특정 도서 클릭클릭된 도서의 상세정보 노출5개의 흐름을 3개yuneenelife.tistory.com공공데이터 포털 API 사용은 어떻게?https://yuneenelife.tistory.com/entry/공공데이터-포털-에서-원하는-서비스-API-신청하기-4 공공데이터 포털 에서 원하는 서비스 API .. 2024. 8. 23. vue axios 로 외부 API 호출 응답 받기, vue cli 환경변수 env 세팅 #16 Axios 란node.js 와 브라우저를 위한 Promise 기반 HTTP 클라이언트 라이브러리☞ 보다 자세한 정보는 아래 링크 참고https://axios-http.com/kr/docs/intro 이번에는 국회도서관 자료검색 리스트 페이지를 개발하면서이전에 개발했던 django API 서버와 HTTP 통신하는 로직을 개발해 본다. Axios 설치외부 연계를 위한 HTTP 클라이언트 라이브러리 설치pubdweb 디렉터리로 이동한다.npm install axios으로 설치한다.pubdweb % npm install axiospubdweb % ☞ 소스 개발순서는 이전 글 참고https://yuneenelife.tistory.com/entry/vue-v-router-통해-타-페이지-호출-방법-및-데이터-전달-.. 2024. 8. 21. vue v-router 통해 타 페이지 호출 방법 및 데이터 전달 방법 #15 v-router로 타 페이지 호출하고, 데이터를 전달하는 방법은국회도서관 자료검색 화면을 개발하면서 적용한다.vue cli 로 화면을 개발하기 위해 먼저 개발 순서를 정하고, 이후 하나씩 개발하면서 v-router를 적용한다. ☞ vue router 설치는 이전 글 참고https://yuneenelife.tistory.com/entry/vue-router-vuetify-설치하기-13 vue router, vuetify 설치하기 #13vue router ?페이지간 이동을 위해 필요한 vue router 설치.Vue.js의 공식 라우터로 Vue.js 코어와 긴밀히 통합되어 Vue.js로 단일 페이지 애플리케이션을 쉽게 구축할 수 있게 해 준다.☞ 공식 사이트https://yuneenelife.tistory... 2024. 8. 20. 국회도서관 자료 검색 vue.js 화면 스케치 #14 국회도서관 도서검색은 5개의 흐름으로 진행한다.검색어 입력검색어로 국회도서관 도서검색 API 호출도서검색된 결과 리스트 노출특정 도서 클릭클릭된 도서의 상세정보 노출5개의 흐름을 3개의 페이지로 구성한다.SearchMain.vue검색 메인 페이지검색어 입력 ▶ 1번 흐름 진행vue router 활용하여 페이지 호출ResultList.vue검색결과 리스트검색어로 국회도서관 도서검색 API 호출 ▶ 2번 흐름 진행도서검색된 결과 리스트 노출 ▶ 3번 흐름 진행axios 모듈 이용하여 API 호출ResultDtl.vue상세 도서 정보특정 도서 클릭 ▶ 4번 흐름 진행클릭된 도서의 상세정보 노출 ▶ 5번 흐름 진행modal 팝업으로 노출vuetify의 data tables component로 개발화면 구성 스케.. 2024. 8. 19. vue router, vuetify 설치하기 #13 vue router ?페이지간 이동을 위해 필요한 vue router 설치.Vue.js의 공식 라우터로 Vue.js 코어와 긴밀히 통합되어 Vue.js로 단일 페이지 애플리케이션을 쉽게 구축할 수 있게 해 준다.☞ 공식 사이트https://router.vuejs.org/installation.htmlvuetify ?자바스크립트 프레임워크로 개발자들에게 필요한 기능들을 제공하는 개발 프레임워크이다.☞ 공식 사이트https://v15.vuetifyjs.com/ko/getting-started/quick-startvue router 설치vue 설치 디렉터리로 이동한다.npm install vue-router@3 로 설치vue2 버전을 설치했기 때문에 vue router 도 3으로 설치한다.vue3 인 경우에.. 2024. 8. 14. 이전 1 2 다음
