웹 프로그래밍/Front-End (12) 썸네일형 리스트형 AWS EC2/Ubuntu/Nginx 에서 Vue.js 배포하기 AWS EC2 Amazon에서 서비스하는 가상 서버 하드웨어에 대한 투자없이 가상 개발환경을 통해 신속하게 개발하고 배포 화장이 용이한 컴퓨팅 용량 제공 Nginx 트래픽이 많은 웹 사이트를 위해 확장성을 고려하여 설계한 비동기 이벤트 기반 구조의 웹서버 소프트웨어 Apache Tomcat과 같은 WAS 역할 Event-Driven 방식. 적은 수의 쓰레드로 여러 요청 처리 대용량 요청 처리 유리 모듈 수가 적음 동적 컨텐츠 처리 X 배포 환경 Server : Ubungu Front : Vue.js WAS : NginX 1. 키 접속 ssh -i /path/my-key-pair.pem ubungu@my-instance-public-dns-name 2. Nginx 설치 apt-get update : 설치된.. Vue.js 컴포넌트 간 Event Bus를 이용한 데이터 통신 이번 글은 ( https://jsdev.kr/t/vue-js-event-bus/2926 ) 을 참고해서 작성했습니다. Vue.js 에서 컴포넌트간 데이터를 전송하기 위한 $on, $emit 이라는 이벤트 인터페이스가 있습니다. router.push 를 통해서 데이터를 보내는 방법도 있지만, 라우터를 거치지 않고 컴포넌트 간 데이터 통신을 하는 방법을 알아보겠습니다. 다음과 같은 프로젝트 구조가 있고 A.vue 와 B.vue 간의 통신이 필요하다고 가정합니다. 1. main.js Vue.prototype.$EventBus = new Vue(); new Vue({ el: '#app', router, template: '', components: { App }, }); 2. A.vue // A.vue butt.. Vue + Spring Infinite Loading (Scroll) 구현 Vue 와 Spring을 사용하여 무한 로딩(스크롤) (Infinite Loading, Scroll) 을 구현해보겠습니다. 아래 사이트에서 자세한 코드들과 예시를 확인할 수 있습니다. https://peachscript.github.io/vue-infinite-loading/guide/#installation Guide | Vue-infinite-loading Guide Installation NPM If you are building a large application, we recommend you use the following method: Direct Include After you import this plugin through the script tag, it will register the.. Vue + Spring Pagination(Paging) 구현 Vue와 Spring을 이용하여 Paging을 다음과 같은 페이징을 구현하는 방법을 알아보겠습니다. Vue 프로젝트의 파일 구조와 router.js 의 코드입니다. import Vue from "vue"; import VueRouter from "vue-router"; import Home from "@/views/Home.vue"; import Page from "@/views/Page.vue"; import List from "@/components/List.vue"; Vue.use(VueRouter); const routes = [ { path: "/", name: "Home", component: Home }, { path: "/page", name: "Page", component: Page, .. Vue 에서 javascript 를 이용하여 kakao login 구현 Vue 에서 Javascript 를 이용하여 kakao login 기능을 구현하는 자료가 없어서 정리합니다. npm install vue-kakao-login 이라는 방식이 있지만 Kakao Developers 에서 제공하는 Javascript SDK를 이용하여 카카오 로그인을 구현해보려고 합니다. 1. 먼저 Kakao Developers 에서 애플리케이션을 추가합니다. 2. 앱설정 -> 플랫폼에서 Web 사이트 도메인을 설정합니다. 저는 npm run -- --port 3000을 사용할 것이기 때문에 포트번호는 3000으로 했습니다. 3. 카카오 로그인에서 Redirect URI 를 설정하여주고 활성화를 시켜줍니다. 이제 카카오로그인을 사용할 준비가 다 됐습니다. javascript로 카카오 로그인 기.. Vue.js - 01. 목록, 상세보기 연습 [ 결과 화면 ] hrm_list.html 사원목록 사원 아이디 사원명 부서 직책 연봉 {{emp.id}} {{emp.name}} {{emp.deptName}} {{emp.title}} {{emp.salary}} 게시글이 없습니다. hrm_detail.html 사원정보 사원 아이디 사원명 부서 직책 연봉 {{emp.id}} {{emp.name}} {{emp.deptName}} {{emp.title}} {{emp.salary}} 사원목록 메모장 만들기 [ 구현 화면 ] - 메모 추가 버튼 누르면 새로운 메모장 생성 - 화살표 누르면 작아지고 커지는 기능 구현 - 핀셋을 고정하면 안움직이는 기능 구현 - 쓰레기통 누르면 삭제 기능 구현 HTML public class NetworkHttpServer { public static void main(String[] args) { try (ServerSocket ss = new ServerSocket(8080)) { System.out.println("[WebServer is ready]"); while(true) { try(Socket socket = ss.accept()) { BufferedWriter bw = new BufferedWriter(new OutputStreamWriter(socket.getO.. "오늘의 메뉴" JS -> JQuery 로 바꿔보기 https://daily-life-of-bsh.tistory.com/162?category=854985 HTML, CSS, Javascript 연습문제 1. 필수 구현 - 기능 구현 • 랜덤 선택 버튼을 클릭 시 제공되는 4 개의 이미지 중에서 랜덤 하게 하나의 이미지를 선택합니다 • 선택된 이미지의 음식 이름을 오늘의 메뉴 : 에 표시합니다 • 선.. daily-life-of-bsh.tistory.com - 위에서 작성했던 Javascript 를 JQuery 로 바꿔보기 Javascript var foods = ["cake 케이크", "burger 햄버거", "steak 스테이크", "sandwich 샌드위치"]; function init() { var html= "", food = ""; foods... 이전 1 2 다음
