전체 글
-
Vue.js 시작하기부터 오류(CDN 적용 안될 때, DOM내용 적용 안될 때)프로그래밍/Vue.js 2019. 10. 2. 00:21
오늘 처음 시작하자마자 그냥 안되던데 내용이 뭔지 도저히 모르겠어서 구글링을 열심히 하였다. 그러나 이 부분에 알려주는 사람이 없었다. 하는 수 없지 여러 번 시도 끝에 해결해 나갈 수 있었다. 내용을 살펴 보자 . html내용을 이렇게 적어 주었다 내용은 그냥 홈페이지에 나오는 내용이던데 화면 출력을 아래와 같았다. 선언적 렌더링이 되지 않더라 왜 그런가 정말 고민을 많이 해 봤다. 처음에는 CDN 부분을 먼저 바꿔 보았다. 이것 말고도 많이 있던데 그냥 패스하겠다. 그래도 안돼 더라 그래서 열심히 지워보고 삭제해보고 여러 가지 방법을 시도해본 결과 Vue Script 부분을 바디 부분으로 옮겨 주니 되더라 태그에 작성하면 전혀 먹지 않더라 Vue Script는 꼭 바디 부분에 적어 주는 연습을 하자 ..
-
Vue.js 시작 하기.(CDN, 선언적 렌더링)프로그래밍/Vue.js 2019. 10. 2. 00:15
시작하기 Vue.js가 무엇인가요? Vue(/vjuː/ 로 발음, view 와 발음이 같습니다.)는 사용자 인터페이스를 만들기 위한 진보적인 프레임워크 입니다. 다른 단일형 프레임워크와 달리 Vue는 점진적으로 채택할 수 있도록 설계하였습니다. 핵심 라이브러리는 뷰 레이어만 초점을 맞추어 다른 라이브러리나 기존 프로젝트와의 통합이 매우 쉽습니다. 그리고 Vue는 현대적 도구 및 지원하는 라이브러리와 함께 사용한다면 정교한 단일 페이지 응용프로그램을 완벽하게 지원할 수 있습니다. 숙련된 프론트엔드 개발자이고 Vue를 다른 라이브러리/프레임워크와 비교하고 싶다면 다른 프레임워크와의 비교를 확인하십시오. 홈페이지에 나오는 내용이다. 요약 1. 진보적인 프레임워크 2. 기존 프로젝트와의 통합이 매우 쉬우며 배우..
-
Html(jquery ajax) 오류 : SyntaxError Unexpected token o in JSON at position 1프로그래밍 2019. 10. 1. 08:01
오늘은 이 오류를 알아 보겠다. 아 json파일을 받지 못하는 것이라고 생각해서 $.ajax({ url: "/board_Detail", data: data, method:"POST", contentType: "application/x-www-form-urlencoded; charset=UTF-8", dataType: "json", success : function(data){ //오류 console.log(typeof data);json 아니고 오브젝트 var str = JSON.stringify(data);// string으로 변환해줌. console.log(typeof str); var result = data.info; console.log(result); } }); }); 오류가 발생하여 비동기 ..
-
Spring Json 데이터 보내기Framework/Spring 2019. 9. 30. 23:54
오늘은 Spring 으로 CRUD를 만드는 중에 jquery로 Ajax 비동기 통신을 해 보았다. 처음에는 통신 성공이 되지 않아서 골치 거리 였는데 console.log("1")로 확인해 보니 통신 성공이 되는 걸 알았다. 하지만 데이터를 넘어오지 않는 것을 보니 json데이터로 통신이 되지 않는 문제 라는 것을 파악 할 수 있었다. 그래서 json파일을 어떻게 spring으로 구현을 하는지 포스팅 하겠다. @RequestMapping(value = "/insert", method = RequestMethod.POST) public void insert(HttpServletRequest request,BoardBean bb,HttpServletResponse response) { session.sele..
-
JQuery Method append 추가 메소드프로그래밍/Jquery 2019. 9. 28. 17:50
오늘은 Jquery의 Method append에 대해 알아보겠습니다. append는 '덧붙이다'라는 뜻입니다. 그래서 추가 기능이라고 보시면 되는데요. 뜻과 같이 html에서도 덧붙이기 추가하는 기능으로 구현을 많이 합니다. 구현해보겠습니다. $(document).ready(function(){ var count = 1; $('button').click(function(){ var html = ' 내용을 추가합니다' + count +''; count++; $('#outer').append(html); }); }); 자바스크립트 부분입니다. 카운트 body부분 내용입니다. 클릭과, 클릭 후 결과 화면 append함수를 이용하여 사람인의 이력서 항목 추가나, erp의 작성 내용 추가 버튼 구현이 가능합니다...
-
Jquery Method click(클릭 메소드를 알아보자)프로그래밍/Jquery 2019. 9. 28. 17:36
오늘은 Jquery의 Method Click에 대해 알아보겠습니다. Jquery는 기본적으로 체인형과 선택자를 가지기 때문에 기본 선택을 한 후 내용을 바꾸거나 값을 가져오는 것이 가능한다. 이 부분을 click으로 구현해 보면서 살펴보겠습니다. $(document).ready(function(){ $('button').click(function(){ $('#outer').removeClass("dn"); }); }); 1. 버튼을 클릭시 라고 해석하며 작성한다. 2. function안에 내용을 작성하며 사용한다. 위에 부분이 jquery의 부분입니다. 나는 클릭 되었습니다. 클릭 html내용입니다. dn은 style -> display: none;입니다. 프로그램을 시작하면 이런 모양이 나오며 버튼을 ..
-
Jquery 패스워드 중복 체크 기능 구현프로그래밍/Jquery 2019. 9. 27. 08:11
회원가입 폼을 이용한 패스워드 중복 체크 입니다. 패스워드를 이중으로 확인하는 부분을 구현해 봤습니다. 자바스크립트 구현(removeClass, addClass, val() 함수 이용) $("#passwordCheck, #password").on("change", function() { $('#pass_false').addClass( 'dn' ); /*실행하면 텍스트 없앰*/ $('#pass_true').addClass( 'dn' ); var password = $('#password').val(); /* 패스워드와 패스워드 확인 부분 가져오기 */ var passwordcheck = $('#passwordCheck').val(); if(password == passwordcheck) { $('#pass..