본문 바로가기
반응형

HTML21

Vue의 데이터바인딩 우리가 기존에 Javascript나 Jquery를 이용해서 동적인 데이터를 화면에 추가하기 위해서는 데이터를 추가할 요소에 id나 class 들을 추가해주고, 그 후에 Javascript에서는 document.getElementById(ID명).innerHTML = "넣을값"; 이라고 표현해주거나 Jquery에서는 $(#id명).html 이런식으로 각각 ID나 Class를 지정해서 해당 요소에 접근후 데이터를 해당 요소에 대입해줘야했다. 하지만 Vue는 다르다. 바로 이런식으로 말이다. 먼저 이 코드는 npm/cli를 사용하여 터미널에서 vue create 프로젝트명을 사용하여 생성된 vue 프로젝트이다. 코드 내에 있는 코드들이 우리가 알고있는 HTML과 CSS 영역이 화면에 표출되는 화면단이고 Scr.. 2023. 8. 16.
Vue.js 개발환경 구축하기(feat. vs Code) 일전에 Python 공부하면서 VS code를 설치했었는데 Vue.js 개발할때도 VS code를 많이 사용한다고한다. 따라서 Vscode로 Vue.JS 개발할수 있는 개발환경 구축을 해보겠다. 먼저 vs code 환경에서 vue.js를 사용하려면 cdn 방식이 있고 vue/cli를 설치하는 방법이 있는데 vue/cli 설치하는 방법으로 개발환경 구축을 해보겠다. vs code로 terminal을 이용해 vue/cli를 설치하려면 npm이나 yarn이 설치되어있어야하는데 npm을 사용할것이고. npm을 사용하기 위해선 node.js를 설치해야한다. node.js 설치하러가기 Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript .. 2023. 7. 11.
HTML <Select> 태그 사용법 태그를 이용하여 우리가 손쉽게 SelectBox를 웹페이지상에서 표현해줄수 있다. 카테고리 의류 침구 가구 HTML 삽입 미리보기할 수 없는 소스 이런식으로 select box를 생성하여 각각의 옵션에 value값을 설정해주면, 사용자가 선택했을때의 해당 value값을 추출하여 코드를 활용할수있다. 이때 사용하는 속성이 onchange이다. onchange는 select 요소의 값이 변경될때마다 호출되는 Javascript 이벤트 속성이다. 카테고리 의류 침구 가구 HTML 삽입 미리보기할 수 없는 소스 이런식으로 onchange를 이용하여 함수를 호출 하고 매개변수 this.value를 이용하여 셀렉트박스의 옵션 value값들을 전달해준다. this.value에서 this는 이벤트가 발생한 요소( 즉 .. 2023. 6. 12.
Spring Tiles 사용법 Tiles는 화면분할에 유용한 라이브러리이다. JSP:include를 사용해서 Header와 Footer를 설정해줄수도있지만 매 페이지마다 JSP:include를 사용하여 지시를 해주어야하지만 Tiles는 처음에 세팅을 해주면 그 뒤에는 추가 추가 하는방식으로 URL과 Mapping 처리만 해준다면 간단하게 화면 모듈화를 사용할수있게 해준다. 먼저 Maven 방식으로 Pom.xml에 Tiles 라이브러리를 추가해준다. org.apache.tiles tiles-core 2.2.2 org.apache.tiles tiles-jsp 2.2.2 org.apache.tiles tiles-servlet 2.2.2 그리고 Sevlet-Context나 Root-Context에 Tiles 관련 Bean을 생성해주기 위해 .. 2023. 3. 3.
반응형

티스토리툴바