머털&보약의 기록

웹으로 편집기를 열고 싶은 repository에 가서 github.com을 .dev로 수정 github.dev로 변경 시 아래처럼 웹 버전 vs code가 실행된다.

upload.html 첨부파일 [.jpg, .jpeg, .png, .xlsx, .hwp, .docx, .pptx, .pdf] add remove 확장자는 .jpg, .jpeg, .png, .xlsx, .hwp, .docx, .pptx, .pdf 만 가능합니다. 5MB이하 파일만 올려주세요. {{ item.num }}.첨부 @change="handleFileChange($event, index)" 파일 첨부 저장 위 코드는 동적으로 첨부파일 영역을 추가/삭제 후 첨부파일을 업로드 하는 간단한 예제이다. 전체적으로 포스팅을 위해 편집한 코드라서 태그 열고 닫고 안 맞을 수도 있다. 첨부파일 관련 메소드는 총 4개이다. 첨부파일 데이터를 담을 배열이 인스턴스의 data 객체안에 초기화 된 상태이고 addAtt..

javascript에서 템플릿 문자열을 사용해서 더 가독성 높은 코드를 작성 할 수 있다. 위 두 코드는 동일한 기능을 수행한다. 하지만 왼쪽 템플릿 문자열을 사용한 경우 가 더 가독성이 좋다. 변수와 문자열 구분이 잘 된다. 템플릿 문자열은 백틱(`)안에 코드를 작성해야 한다. 백틱은 키보드 1 좌측에 있다.

부모창에서 자식창을 아래처럼 팝업으로 열었음(html 코드는 생략) parent.html //버튼 클릭 시 child라는 팝업 호출 $("#btn").on("click", function() { //팝업 호출(openPopUp()이라는 공통함수에서는 팝업 호출한다고 가정) const popup = openPopUp("/child", 1100, 700, "child"); }); //자식 팝업에서 호출하는 함수(자식창에서 넘어온 사업자번호, 고객명을 부모의 필드에 적용) function chooseClient(clientBizNo, clientNm) { $("#clientBizNo").val(clientBizNo); $("#projClientNm").val(clientNm); } child.html /** ..

거창한 방법은 아니고 매우 간단하다. 쉬운 이해를 위해 소설을 써 보겠다. A라는 branch는 springBoot, thymeleaf, javascript/jQuery로 개발 되어 있는 상태이고 B라는 branch는 A branch에서 새로 branch를 딴 브랜치다. B branch에서 클라이언트 사이드를 javascript/jQuery를 Vue.js로 전환하는 작업을 하기 위해서다. A branch에서 기존에 되던 기능은 유지하면서 환경만 변화되는 상황이다. 이 때 A branch의 화면을 보면서 개발하는게 당연히 편하다. 이런 상황이라고 가정 했을 때 몇 가지 방법이 있겠지만 내 경우는 아래처럼 했다. A branch는 port 변경 후 build 해서 jar파일로 로컬에서 띄우고 B branch..

2가지 방법 존재 node.js 환경으로 구동(node.js 런타임 환경 필요, 서비스 구동 시 서버와 port 다르게 구성) 기존 thyemeleaf파일에 script만 추가(thyemelaf 렌더링 이후 조작하는 방식이라 node.js 불필요) 여기선 2번 째 방법 채택 기존 html의 body 태그안에 Vue.js 관련 script import(실제 배포 시엔 js파일 직접 import 권장) vue.js를 입힐 div root id 설정(예시) 주소록 사원명 검색 초기화 사원 목록 사원승인 신청 순번 사원명 직급 직책 전화번호 이메일 {{ item.no }} {{ item.empNm }} {{ item.positionCd }} {{ item.roleCd }} {{ item.empHp }} {{ i..

※ 일반적으로 javascript에서 this는 사용하는 상황에 따라 다른 객체를 가리킴 ex)뷰 인스턴스의 methods 객체의 함수 내 콜백함수에서 인스턴스의 data 객체 값을 세팅하는 로직 Vue 인스턴스 new Vue({ //element id el: '#project-client-req', //vue에서 관리할 데이터 data: { client: { clientBizNo: '', //사업자등록번호 clientNm: '', //상호 clientZipNo: '', //우편번호(주소검색 API로 세팅) clientBasAddr: '', //기본주소(주소검색 API로 세팅) clientDtlAddr: '' //상세주소 } }, methods: { //주소 검색 searchAddr() { let add..

부모 컴포넌트 new Vue({ //element id el: '#main', //vue에서 관리할 데이터 data: { items: [], // 데이터 목록 currentPage: 1, //현재 페이지 firstPage: 0, //첫번 째 페이지 lastPage: 0, //마지막 페이지 startIdx: 0, //첫번 째 페이지 번호 endIdx: 0, //마지막 페이지 번호 empNm: '', //사원명 }, //data를 기반으로 변경할 속성(data의 변경 감지) computed: { //변경된 데이터 displayedItems() { return this.items; }, }, //vue 컴포넌트 화면에 렌더링 된 직후 실행(컴포넌트의 템플릿이 DOM에 추가/화면에 표시된 직후) mounted(..

1:N의 관계에서 N쪽의 데이터가 여러 row가 있을 경우 가장 마지막 row만 조회 SELECT EMP_ID /* 아이디 */ , EMP_POSITION_CD /* 직급코드 */ , EMP_ROLE_CD /* 직책코드 */ FROM ( SELECT EMP_ID , EMP_POSITION_CD , EMP_ROLE_CD , ROW_NUMBER() OVER(PARTITION BY EMP_ID ORDER BY H_SNO DESC) AS RowIdx FROM EMP_INFO_HISTORY ) WHERE RowIdx = 1

문제: modal 표시 시 ajax로 데이터는 가져오지만 바인딩이 되지 않음 환경: thyemelaf 파일에 vue.js를 적용(별도 node.js 환경 X) thymeleaf파일에 vue.js를 적용한 경우에 modal창에 아래처럼 바인딩이 안된 경우가 있었다. 원인은 간단했다. 기존 thyemelaf파일에서는 아래처럼 전체를 나타내는 div 영역 밖에 모달창 div가 있었음 기존에는 javascript/jQuery로 페이지 로드 후 DOM에 직접 접근해서 작업해서 문제가 안되었음 하지만 vue.js에서는 root element안에 모달영역이 포함되어 있어야 vue.js의 인스턴스와 연결되어 vue.js의 바인딩 기능 사용 가능(vue.js에서는 DOM에 직접 접근하는 일이 거의 없음) 위 코드처럼 m..