6. 이벤트 연결 v-on : 해당 디렉티브를 사용해 이벤트 메소드와 연결할 수 있다. 1씩증가 {{ count }} 한번만 클릭 가능 {{ text }} 10씩증가 {{ tenCount }} 1씩 증가, 한번 클릭, 10씩 증가 7. 조건문 v-if, v-else-if, v-else v-if 를 사용해서 프로퍼티를 이용해 조건을 주어 HTML을 표현할 수 있다. one two three one check two check three check 조건문에 따른 실행 결과 8. 반복문 v-for : 배열로 이루어진 프로퍼티를 반복적으로 표현할 때 사용한다. {{ item }} {{ key }} : {{ value }} {{ item.a}} : {{ item.b }} : {{ item.c }} add dele..
Vue 인스턴스 Vue 인스턴스에서 제공되는 옵션을 붙여 개발 할 수 있다. el : id를 찾는 함수 data : 값을 넣을 데이터 {{ myText }} 2. 데이터 표시 {{데이터}} v-text : 프로퍼티 html에 표현할 때는 {{ 프로퍼티 이름}} 형식으로 표현 v-html : HTML로 표현 {{ myText }} v-text와 {{myText}는 프로퍼티 텍스트를 그대로 출력하지만, v-html은 HTML로 표현된다. 3. 데이터 종류 Vue에서 데이터 타입은 숫자형, 문자형, Boolean이 있다. 데이터 종류 {{ myPrice * 1.08 }} {{ "안녕하세요~" + myName + "님"}} {{ myName.substr(0,1) }} 배열 오브젝트 배열,오브젝트 {{ myArr..
★ 프로젝트 생성 터미널에서 다음 명령어 실행 vue create oing-vue-project 3 버전 선택 설치 완료 ★ Vue 프로젝트 실행 cd oing-vue-project npm run server 프로젝트 실행 -> npm run serve --port 8081 기본적인 Project 구성
★ 아마존 웹서비스 https://aws.amazon.com/ko/free/?trk=fa2d6ba3-df80-4d24-a453-bf30ad163af9&sc_channel=ps&ef_id=CjwKCAjw44mlBhAQEiwAqP3eVvsNy9f6VIJhnX8u8BU1ermcwbL_M6NgjmHexLYBq_nq3Wcw2AVSLxoCVi0QAvD_BwE:G:s&s_kwcid=AL!4422!3!563761819834!e!!g!!aws!15286221779!129400439466&all-free-tier.sort-by=item.additionalFields.SortRank&all-free-tier.sort-order=asc&awsf.Free%20Tier%20Types=*all&awsf.Free%20Tier%20C..
★ 스프링, Spring 프레임 워크 > 초반(어려움) > 후반(쉬움) Spring Framework(틀) https://spring.io/ Spring | Home Cloud Your code, any cloud—we’ve got you covered. Connect and scale your services, whatever your platform. spring.io ■ Spring ver Spring 1.0 ~ 6.0 Spring 3.XX ~ 5.XX > Spring 5.XX 사용 자바 플랫폼을 위한 오픈 소스 애플리케이션 프레임워크이다. 콘솔 프로그램 or 응용 프로그램 or 웹 응용 프로그램 대부분 > 웹 응용 프로그램 Servlet/JSP > 버전업 전자 정부 표준 프레임워크로 채택 > Sp..
★ 주소록 조회 AJAX, JSON 을 이용한 방법 ■ 필요 파일 - com.test.ajax > "Ex09.java" - view ? "ex09.jsp" - com.test.ajax > "Ex09Data.java" - com.test.ajax > "ZipCode.java" ■ 소스코드 Ex09.java ex09.jsp를 열기위한 Servlet 구현 파일 package com.test.ajax; import java.io.IOException; import javax.servlet.RequestDispatcher; import javax.servlet.ServletException; import javax.servlet.annotation.WebServlet; import javax.servlet.htt..
★ ID 중복 검사 1. 기존 방식 2. AJAX를 이용한 방식 ★ 필요 파일 - com.test.ajax > "Ex08.java" - views > "ex08.jsp" - com.test.ajax > "Ex08Check.java" - views > "ex08check.jsp - com.test.ajax > "Ex08Data.java" ■ 소스코드 Ex08.java package com.test.ajax; import java.io.IOException; import javax.servlet.RequestDispatcher; import javax.servlet.ServletException; import javax.servlet.annotation.WebServlet; import javax.servl..
★ AJAX, Asynchronous JavaScript and XML 비동기 자바스크립트 & XML 비동기 자바스크립트 통신 자바스크립트 웹서버(톰캣) 순수 자바스크립트 버전 jQuery 버전 ES6 자바스크립트 버전 ★ 예제 1 - 데이터베이스 데이터 count 출력 ■ 파일 생성 프로젝트 생성 name : "AjaxTest" context : 패키지 생성 com.test.ajax WEB-INF/views lib -> jar파일 파일 생성 ex01.java AjaxDAO.java MemoDTO.java ex01.jsp ■ ex01.java package com.test.ajax; import java.io.IOException; import javax.servlet.RequestDispatcher; ..
