728x90 반응형 vue.js10 (미해결) 인텔리제이에서 jsp 파일 실행이 안돼요 / jsp 깨짐 / unable to ping server at localhost:1099 / jsp 500 에러 vue.js 프로젝트 수행 중 jsp로 테이블 정보 읽어오려다가 문제가 생김. 기존에 셋팅되어있던 eclipse - tomcat 8 쪽으로 워크스페이스 이동하여 실행해보니 되긴 되는데 인텔리제이에서 안 되는 이유 도무지 찾을 수가 없어서 일단 글로 남겨본다. intelliJ 에서 jsp 파일을 만들었는데 기존 사용중이던 톰캣10 서버 띄워서 실행이 안 되는 현상 발견함. 갑자기 jsp를 다운받으라 떠서 ?? 했고 실제로 index.html 메인페이지 실행해보니 jsp를 읽어들이는 상단메뉴 부분 다 깨짐. 톰캣9로 다운그레이드 해도 jsp를 읽어들이는 상단메뉴 부분 다 깨짐. jsp 파일경로를 크롬에 주소창 넣어보니 500 에러가 뜨는데, 원인 해결 못 함. 톰캣8로 다운그레이드 했더니 급기야 UNABLE.. 2022. 6. 26. 17:05 Vue.js 인라인 바인딩 inline binding 문자열 문자열 inline css 변경 문자열 객체 변경 스타일 지정할 때 css로 처리하는 방법은 여기 css없이도 처리할 수 있을까 그러면? 정답! 있다 1. style = ' ' 2022. 6. 11. 23:49 Vue.js CSS 클래스 바인딩 CSS 클래스를 저장해놓고 이를 불러와서 바인드하는 방법들이 다양하게 존재한다 문자열 문자열 문자열 css1 변경 문자열 css true 설정 css false 설정 문자열 1. 쌩짜로 class = 꼴로 불러오기. 여러개 불러올 때는 띄어쓰기로 구분하기 2. data에 안에 css 클래스를 불러올 변수를 지정하고 그 변수로 v-bind:class 여러개 불러올 때는 [css1Name,css2Name]꼴로 대괄호에서 쉼표로 구분하여 가져오자. 3. 메소드 안에 function으로 저장하여 특정 css name 을 지정하거나, 속성을 지정/해제할 수 있다. v-on:click 등을 통해 동적으로 이벤트를 먹일 수 있다. + 정규표현식으로도 지정할 수 있다! css1을 css3으로, css2를 css4로 변.. 2022. 6. 10. 07:34 Vue.js 링크 처리: v-bind / v-on 용도 추가 {{str1}} link1 link2 link3 link4 vue 객체에 링크를 저장하는 경우 v-bind:href = '링크 변수' 꼴로 가져와야 한다. 그리고 v-bind는 생략이 가능하다. :href, :src, :width 같은 속성만 놓치지 않고 사용해도 무방하다. v-on의 경우, 마우스 이벤트를 저장한다. 디렉티브를 사용하여 DOM 이벤트를 듣고 트리거 될 때 JavaScript를 실행할 수 있습니다. 라고 vue.js 한국어 포럼에 친절히 나와있다. mouseenter : 마우스가 해당 개체를 클릭하면 -> 이미지 크기를 변경 mouseleave : 마우스가 해당 개체 밖을 클릭하면 -> 이미지 사이즈 원상 복구 mouseenter 상태로 펭수를 좀더 크고 귀엽게 감상할 수 있게 되었다. 2022. 6. 9. 19:49 Vue.js computed에서 get / set : 변수 받아서 셋팅하기 자바에서 getter setter 지정하듯, 변수를 가져오고, set에서 뭔가 다른 처리를 할 수 있다 computed에서 get 을 통해 data1 과 data2에 기존 저장해둔 변수들을 가져오는 함수를 만들었다. 그러면 data1,data2 꼴로 세번째 인풋칸에서 출력이 가능하다 바로 이런 식으로 그리고 set함수에서 , 을 delimeter로 하여 값을 끊는 배열을 만들었다. list의 0번지에는 첫번째칸 data1을, list의 1번지에는 두번째칸 data2를 저장할 수 있다. 그리고 data1을 바꿔도 data1과 data3이 data2를 바꿔도 data2와 data3이 data3을 바꿔도 바꾼 자리가 쉼표 앞인지 뒤인지에 따라 해당하는 배열 번지수에 맞는 데이터값이 변경될 수 있다 2022. 6. 8. 19:35 Vue.js watch computed : 캐시 메모리저장 여부 / 코드 복잡도 차이 1. Watch input1 : input2 : {{a1}} {{a2}} {{a3}} 값이 바뀔 때마다 콘솔에 실시간으로 변경이 인식되는 것이 watch의 특징이다. 그리고 a3이라는 변수를 지정해서 그 변경값을 실시간으로 찍을 수 있도록 했다. 2. Computed a1 : {{a1}} a2 : {{a2}} a1+a2 : {{a1 + a2}} test method : {{test_method()}} test method : {{test_method()}} test method : {{test_method()}} test computed : {{test_computed}} test computed : {{test_computed}} test computed : {{test_computed}} 값 변경 g.. 2022. 6. 7. 19:25 Vue.js 컴포넌트 component, v-bind:is 동적할당, 템플릿만들기 Vue.component를 활용하면 해당 컴포넌트 이름을 태그처럼 불러다 쓸 수 있다. component 밑으로 템플릿을 만들어 data를 지정하고, method를 지정할 수 있으며 이를 함수 형태로 콜할 수도 있음. 데이터를 지정하는 경우에도 함수의 형태로 return시켜야 한다는 점에 유의하자. 타 객체 안에 지정된 컴포넌트는 다른 객체가 불러다 쓸 수 없지만, 범위를 지정하지 않은 경우 다른 객체들이 한 컴포넌트를 동시에 갖다 써도 무방하다. 그리고 객체 하나가 컴포넌트를 여러개 불러쓰는것도 당연히 문제되지 않음. 객체 안에서 components 를 직접 지정하여 호출할 수도 있음 : var test3 부분. v-bind:is 를 사용하면, 동적으로 컴포넌트를 조건에 맞게 호출할 수도 있음. 결과물 2022. 6. 6. 10:44 Vue.js HTML태그 인식하기 / 이미지 불러오기 : v-html, v-bind {{a1}} {{a2}} {{a3}} vue객체에 데이터를 집어넣으면서, HTML 을 넣을 수 있다! 그러나.... 그냥 문자열처럼 똑같이 집어넣으면 리터럴리 문자열로 인식을 해버림. 그래서 v-html 을 넣고, data의 해당 번지를 지정하여 html 태그를 태그로 인식할 수 있도록 처리해줘야 한다. 이미지도 마찬가지로, 그냥 src에 넣어버리면 그냥 이미지 자리만 생기고, 아무 일도 벌어지지 않는다. 그래서 v-bind 를 사용하고, v-bind 뒤에 src , width, height 설정을 붙여야 한다. 이미지 경로는 일반 문자열처럼 똑같이 경로 지정해서 가져올 수 있음. 소스 까보면 똑같이 html에다 직접 넣은 것 처럼 보인다. 2022. 6. 5. 10:18 Vue.js 객체할당과 이벤트 1: mount / destroy / v-on {{a1}} 값 변경 처음 페이지 로드하면 이렇게 버튼 클릭하면 이렇게 값이 바뀐다. destroy 후 mount 바로 불러내서 할당이후까지 초장에 로그가 찍히는데 앞에 mount후 destroy까지만 남겨두면 destroy 되어 버튼을 사용할 수 없어짐 v-on에 setValue 를 넣어놓으면 위에 methods에서 만들어 둔 function을 자동으로 불러온다 vue객체가 관리할 요소들이 만들어지기 전 / 만들어지고 나서 / html 태그 객체 할당 전후 / 업데이트 전후 / destroy전후 등 다양한 타이밍에서 벌어질 이벤트 함수를 지정할 수 있다. 이번에는 콘솔에 디버그문구를 찍어보는 형태로 만들었지만, 기능을 개발하고 각 타이밍에 맞게 삽입하는 응용형태의 개발도 가능할 듯 하군. 2022. 6. 4. 19:10 이전 1 2 다음 728x90 반응형
