개발중632 axios 경로 분석 mock/artical.js - 더미 생산 mock/artical.js 파일을 보면 여러개의 module 이 exports 되어 있는 것을 확인 할 수 있다. 여기서는 여러 목업 데이터들을 만들어주는 공장 역활을 하는 것 같다. json 파일도 import 하는 방법을 사용하기도 하고, for 문을 돌려서 랜덤으로 더미를 생산하기도 한다. https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/export mock/artical.js 파일에 예시로 이렇게 정의 되어 있을 때 module.exports = [ { url: '/vue-element-admin/article/update', type: 'post', response: .. 개발중/Vue.js 2021. 4. 26. popover 안내문 태그 위에 마유스 커서가 올라갔을 때 안내문이 "띵" 하고 나오게 해야한다. alter 창이 아닌 그 영역의 안내문 개념인 popover template 에서 지원하는 popover는 디자인 변경이 불가능해서 디자인 변경이 가능한 popover 를 찾아야 한다. import {Popover} from 'element-ui' popover 란 ? 특정 상황에서 현재 시점의 element 를 체크해서 그에 맞는 메뉴를 띄워주는 것 버튼 조건 키워드 버튼에 마우스가 올라갔을 때 el-popover 안에 있는 요소가 나타난다 개발중/Vue.js 2021. 4. 26. CSS를 이용하여 부모 요소의 높이에 자식 요소를 맞추는 방법 CSS를 이용하여 부모 요소의 높이에 자식 요소를 맞추는 방법 웹 페이지 레이아웃을 디자인할 때, 부모 요소(div)의 높이를 자식 요소에 자동으로 적용하고 싶은 경우가 종종 있습니다. 특히, 자식 요소들이 부모 요소의 높이에 꽉 차게 표시되어야 할 때 이 방법이 유용합니다. 이 포스트에서는 CSS만을 사용하여 이를 해결하는 방법을 소개하겠습니다. 문제 상황 부모 요소에게 height: 100px;를 주었을 때, 자식 요소들이 자동으로 부모의 높이를 채우도록 설정하고 싶습니다. 이를 위해 자식 요소들에게 하드코딩으로 height: 100px;를 설정하는 것이 아니라, 더 유연한 방법이 필요합니다. 해결 방법 자식 요소들에게 다음과 같은 CSS 속성을 적용하여, 부모 요소의 높이에 맞춥니다. .child-.. 개발중/html 2021. 4. 26. JAVA MYSQL 연동 중 SSL 에러 Fri Apr 23 11:15:47 KST 2021 WARN: Establishing SSL connection without server's identity verification is not recommended. According to MySQL 5.5.45+, 5.6.26+ and 5.7.6+ requirements SSL connection must be established by default if explicit option isn't set. For compliance with existing applications not using SSL the verifyServerCertificate property is set to 'false'. You need either to explicitl.. 개발중/Troubleshooting 2021. 4. 23. vue 자식요소가 부모 요소 데이터 변화시 - 자식요소렌더링 지금 상황이 이러한 상황이다. A 의 부모가 B 라는 자식을 사용하는 중인데 A의 데이터인 list 를 B가 props 로 전달 받아서 사용하고 있는 중이다. A가 렌더링 되고 나서 구 후에 A의 list 의 요소가 바뀌었을 때 B는 그것을 알아채고 A의 list 에 맞게 다시 로딩이 되어야 하는데 그러지 못하는 상황이었다. 해결책 : B를 import 해서 사용할 때 보내주는 key 값을 이용하는 방법 1. B에게 보내는 key를 사용한다 2. A는 rederKey 를 가지고 있어야 한다. data() { return { rederKey : 0, list: [ { name: "A", id: 0 }, { name: "S", id: 1 }, { name: "D", id: 2 }, { name: "F", i.. 개발중/Vue.js 2021. 4. 23. js 객체 배열 추가 js 에서 배열을 다루는 법은 일반적으로 나와 있지만 다차원 배열에 대해서는 잘 나와있지 않는 것 같다. 내가 방황한 이유는 아래 같이 LIST 가 있는데 list: [ { name: "A", id: 0 }, { name: "S", id: 1 }, { name: "D", id: 2 }, { name: "F", id: 3 }, { name: "V", id: 4 }, { name: "H", id: 5 }, { name: "J", id: 6 }, { name: "M", id: 7 }, { name: "I", id: 8 }, ], 모든 객체에 age : 16 데이터를 추가 하고 싶은데 보통의 방법처럼 push 로는 안되는 것이었다 list: [ { name: "A", id: 0 , "age": 16 }, { n.. 개발중/JavaScript 2021. 4. 23. 부모요소 → 자식요소 input 연동 vue 에서 항상 골머리를 썩는 부모요소와 자식 요소! 일단 부모 요소에서는 dragbox 라는 Component 를 import 하고 template 에 적용하려 한다. 부모 요소 하는 일 data() { return { price : '', }; }, 부모에서 해주는 일은 이것 뿐이다. v-model 만 이런식으로 정의 하는데 매핑이 될까? 의심 했는데 된다. v-model = "price" 자식 요소 하는 일 여기서 이해도 안되고 어이가 없는건 부모가 보내주는 값이랑 다르게 매핑했음에도 불구하고 알아서 매핑이 된다는 점이다. 이렇게 props 로 받는다. props: { value: { type: Number, default: 0 } }, input 태그를 이런식으로 써주고 메소드에서 emit 을 .. 개발중/Vue.js 2021. 4. 22. js 배열에서 특정 위치 index 찾기 Array.prototype.findIndex() 한 리스트가 있는데 list: [ { name: "포장", id: 0 }, { name: "이벤트", id: 1 }, { name: "영양정보", id: 2 }, { name: "online 유통", id: 3 }, { name: "offline 유통", id: 4 }, { name: "맛", id: 5 }, { name: "크기", id: 6 }, { name: "안정성", id: 7 }, { name: "가격", id: 8 }, ] 나한테는 id 값만 주어진다. 특정 객체를 삭제 하려면 index 를 알고 splice 를 이용해서 삭제 해야 하는데 특정 id 값의 위치를 알기 위해서 for 문을 여러번 돌리고 있었다. 그러다 좋은 기능을 발견해서 기록.. 개발중/JavaScript 2021. 4. 22. vue 에서 div 에 마우스 hover 순간 - 버튼 만들기 forEach 문으로 돌린 div 가 있는데 div 에서 마우스가 특정 div 에 올라갔을 때 거기에만 버튼을 보이게 하는 효과. Vue.js {{ element.name }} CSS .board-column-content { height: auto; overflow: hidden; border: 10px solid transparent; min-height: 60px; display: flex; justify-content: flex-start; flex-direction: column; align-items: center; width: 100%; .board-item { cursor: pointer; width: 100%; height: 40px; margin: 5px 0; background-col.. 개발중/html 2021. 4. 21. 카테고리 완성 기록 /** * 경우 1 ) 전체 코드 반환 */ public List getParentCodeList( int sysCode ) { return sysCode > 0 ? separateSyscode( this.commonParentCodeList , sysCode ) : this.commonParentCodeList; } /** * 경우 2 ) 전체 코드 + depth 반환 */ public List getParentCodeListFilterDepth( int sysCode, int depth ) { List codeList = generateCodeList(); codeList = mappingParentAndChild( codeList ); codeList = separateParent( codeList.. 개발중/Java 2021. 4. 21. 카테고리 반환 코드 기록 카테고리 반환 코드를 만들었는데 나로썬 최선이었으나(;´д`)ゞ jw 선배 코드는 ,,, 대박 (>人<;) package com.rsn.POMS.api.code.service; import java.util.ArrayList; import java.util.Iterator; import java.util.List; import java.util.stream.Collectors; import javax.annotation.PostConstruct; import java.util.Optional; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.stereotype.Service; import co.. 개발중/Java 2021. 4. 19. Field 활용 java.lang.reflect.Field 더보기 docs.oracle.com/javase/8/docs/api/java/lang/reflect/Field.html public List getParentCodeList( int sysCode, String filedName, String value) { List codeList = getParentCodeList(sysCode); try { Field field = CodeVo.class.getDeclaredField(filedName); field.setAccessible(true); Object paramValue; if(field.getType() == int.class) { paramValue = Integer.parseInt(value); } el.. 개발중/Java 2021. 4. 19. 이전 1 ··· 32 33 34 35 36 37 38 ··· 53 다음