유니네 Library

django 프로젝트에 작성했던 Dockerfile 빌드Dockerfile 있는 디렉터리로 이동한다.아래 명령어로 docker build 한다.docker build --platform linux/amd64 -t pubdapi-image-aws:pa0.1 .--platform linux/amd64 부분은 맥북에서 테스트할 때는 뺀다. aws ec2를 linux로 생성하는 경우 맞추기 위한 옵션이다.[+] Building 20.0s (13/13) FINISHED 가 나오면 성공이다.해당 이미지는 docker desktop에서 확인 가능하다.▶ docker desktop 에서 조회되는 이미지 : pubdapi-image-aws:pa0.1vue cli 프로젝트에 작성했던 Dockerfile 빌드Dockerfi..

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 애플리케이션에서 외부 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..

Vue.js 프로젝트에서 Vue Router와 Vuetify를 설치하는 방법을 정리했다. ✅ Vue Router란? Vue Router는 Vue.js에서 페이지 간 이동(라우팅)을 담당하는 공식 라이브러리이다.SPA 구조에서 URL을 변경하면서도 전체 페이지를 다시 로드하지 않도록 도와준다. 📌 Vue Router 공식 사이트🔗 https://router.vuejs.org/installation.html Vue Router | The official Router for Vue.jsThe official Router for Vue.jsrouter.vuejs.org ✅ Vuetify란? Vuetify는 Vue.js 기반의 Material Design UI 프레임워크다.버튼, 카드, 네비게이션 바 등 다양..

국회도서관 자료검색 서비스를 위한 프런트엔드 웹 환경 구성작업 환경작업폴더명public_data/pubd_web프로젝트 명pubdwebOSmacOS sonoma v 14.5☞ vue cli 의 가이드는 아래 URL에서 자세히 다루고 있다.https://cli.vuejs.org/ vue cli 는 vue.js 프레임워크를 포함하고 있어, 별도 vue.js 설치를 안 해도 된다.vue.js 프로젝트 생성 시 vue version 선택가능vue cli 설치pubd_web 폴더로 이동하여 설치npm install -g @vue/clivue cli 는 전역으로 설치되기 때문에 이전에 설치한 이력이 있으면 vue project로 바로 진행하면 된다.#vue cli 설치#pubd_web 폴더로 이동하여 설치#npm ..