전체 글101 [Spring Boot] 엑셀 다운로드 엑셀다운로드 function fn_excelDown(){ if(confirm("다운받으시겠습니까?")){ document.frm.action = ""; document.frm.submit(); } } controller @SuppressWarnings("unchecked") @RequestMapping(value = "/user/loginLogList/excelDownload.do", produces = "application/x-msdownload;charset=utf-8") public void itemExcelDownload(@ModelAttribute("searchVO") UserVO vo, HttpServletRequest request, HttpServletResponse response) t.. 2024. 2. 29. [JavaScript] 팝업 날짜 지정 오늘 하루 이 창을 열지 않음 [닫기] .popup p span{font-size:20px} #popup1, #popup2, #popup3, #popup4 { position: absolute; top: 7%; max-width: 400px; width: 78%; height: auto; padding: 10px; border: 1px solid rgb(221, 221, 221); background: rgb(255, 255, 255); box-shadow: 2px 2px 6px #666; display: none; } var today = new Date(); // html 에서 data-expired 가 설정된 팝업 div 들 찾기 var popup = document.querySelectorAll(.. 2024. 2. 22. [JavaScript] 팝업 오늘 하루 이 창을 열지 않음 [닫기] .popup p span{font-size:20px} #popup1, #popup2, #popup3, #popup4 { position: absolute; top: 7%; max-width: 400px; width: 78%; height: auto; padding: 10px; border: 1px solid rgb(221, 221, 221); background: rgb(255, 255, 255); box-shadow: 2px 2px 6px #666; display: none; } $(document).ready(function(){ var popupTime = new Date(); var y = new Date().getFullYear(); var m = new .. 2024. 2. 16. [Vue.js] Vue 프로젝트 파일구조 node_modules: npm으로 설치된 패키지 파일들이 모여 있는 디렉토리 public: 웹팩(webpack)을 통해 관리되지 않는 정적 리소스가 모여 있는 디렉토리 src/assets: 이미지, css 등을 관리하는 디렉토리 src/components: Vue 컴포넌트 파일이 모여있는 디렉토리 App.vue: 최상위(Root) 컴포넌트 main.js: 가장 먼저 실행되는 자바스크립트 파일로, Vue 인스턴스를 생성하는 역할 2024. 1. 26. [Vue.js] 프로젝트 설치 vue CLI 설치 npm install -g vue-cli 버전확인 vue --version vue create '프로젝트 이름' vue 3 버전 -> Default (Vue 3 Preview) 선택 To get started: cd '프로젝트이름' npm run serve 뜨면 설치가 완료됨 터미널에 npm run serve 하고 localhost:8080 가면 vue프로젝트 확인가능 처음에 이런 오류가 떴는데, npm install 해주고 다시 npm run dev 하니 해결됨 . 기본 포트 외 다른 포트를 사용하려면 npm run serve -- --port포트번호 로 직접 지정할 수 있음 ex) npm run serve -- --port 3000 2024. 1. 22. [Vue.js] 스코프 css example 2024. 1. 21. [Vue.js] 부모가 가진 데이터 조작하기 props를 마음대로 변경하면 오류가 발생하는데, $emit과 사용자 정의 이벤트를 사용할 수 있다. ▼부모의 템플릿 v-on:do-click 에서 do-click을 카멜케이스(doClick)로 작성하면 오류가난다. v-on:do-click은 자식 컴포넌트 methods 중 do-click 을 호출한다. props로 ID 받고, $emit으로 매개변수를 전달할 수 있다. //자식이 자신의 이벤트 실행 Vue.component('child-component', { template: '{{ name }} 나이:{{ age }}\ 나이확인', props:{ id: Number, name: String, age: Number}, methods: { //버튼 클릭 이벤트 핸들러에서 $emit으로 doClick 호.. 2024. 1. 21. [Vue.js] $emit 자식->부모 이벤트 잡기 1. 부모에서 자식 사용자 정의 태그에서 v-on 디렉티브로 이벤트를 핸들한다. 2. 자식은 $emit 으로 자신의 이벤트인 childs-event 를 실행한다. $emit 의 두 번째 이후의 매개변수로 임의의 데이터를 지정할 수 있다. 3. 부모는 자식 이벤트를 통지받아 미리 등록한 핸들러를 호출한다. //자식이 자신의 이벤트 실행 Vue.component('child-component', { template: '이벤트 호출하기', methods: { //버튼 클릭 이벤트 핸들러에서 childs-event 호출하기 handleClick: function(){ this.$emit('childs-event') } } }) //부모쪽에서 이벤트 받기 new Vue({ el:'#app', methods: { .. 2024. 1. 21. [Vue.js] props 받을 자료형 지정 props 로 받을 자료형은 지정하는 것이 좋다. 지정한 자료형이 아닌 값일 경우, 에러를 쉽게 찾을 수 있다. Vue.component('child-component', { props: { val: String //문자열 자료형의 데이터만 허가 } }) props는 받을 자료형 이외에도 디폴트값 지정도 가능함. ▼ Vue.js 공식 가이드에 나와있는 props 샘플 Vue.component('child-component', { props: { //기본적인 자료형 확인('null' 은 어떤 자료형에서도 받을 수 있음) propA: Number, //여러 개의 자료형을 지정할 수도 있음 propB: [String, Number], //필수 문자열 propC: { type: String, required: .. 2024. 1. 21. 이전 1 2 3 4 5 ··· 12 다음 728x90
