eblo

Vuetify의 `v-form` 컴포넌트는 다양한 유틸리티 함수를 제공하여 폼의 유효성 검사 및 초기화 등을 쉽게 처리할 수 있습니다. 이러한 함수들은 주로 `$refs`를 사용하여 접근됩니다. 아래는 `v-form`에서 제공되는 주요 함수들에 대한 설명입니다: 1. validate(): - `validate()` 함수는 폼 내의 모든 입력 필드에 대한 유효성 검사를 수행합니다. - 이 함수는 모든 입력 필드가 유효하면 `true`를 반환하고, 그렇지 않으면 `false`를 반환합니다. this.$refs.myForm.validate() 2. reset(): - `reset()` 함수는 폼 내의 모든 입력 필드를 초기 상태로 재설정합니다. - 이 함수는 입력 필드의 값을 초기 값으로 설정하고, 유효성 검..

암호화 알고리즘 1. 대칭키 알고리즘(Symmetric Encryption) : 암호화 - 복호화 할 때 같은 키값을 이용 2. 비대칭키 알고리즘(Asymmetric Encryption) : 암호화 - 복호화 할 때 다른 키값을 이용 3. 해싱(hashing) : 단방향으로 암호화만 가능하고 복호화 할 수 없다. 비밀번호 등에 이용. 알고리즘 종류 비고 대칭키 DES, 3-DES, AES(128bit, 256bit), SEED, ARIA AES가 가장 보편적으로 이용 비대칭키 RSA, ECC, DSS 해싱 MD5, SHA-0, SHA-1, SHA-2 crytojs는 자바스크립트 기반으로 암/복호화를 제공하는 라이브러리로 쉽고 간단하게 적용 가능하다. 사이트 : cryptojs.gitbook.io/docs..

Back-end와 front-end의 분리, MSA 설계 등에서 많이 필요로 하는 기능입니다. Log in 한 후에 세션 정보를 브라우저에서 갖고 있을 때 web storage에 보관하고 꺼내 쓸 때 유용합니다. 아래는 조사하면서 필요한 정보를 정리한 것입니다. Web Storage란 무엇인가? 웹 스토리지를 사용하면 웹 애플리케이션이 사용자의 브라우저 내에 로컬로 데이터를 저장할 수 있습니다. HTML5 이전에는 애플리케이션 데이터를 모든 서버 요청에 포함 된 쿠키에 저장해야했습니다. 웹 저장소는 더 안전하며 웹 사이트 성능에 영향을주지 않고 많은 양의 데이터를 로컬에 저장할 수 있습니다. 쿠키와 달리 저장 한도는 훨씬 더 크고 (최소 5MB) 정보가 서버로 전송되지 않습니다. 웹 스토리지는 오리진 (..

1. 남은 시간, 시간 체크 예제 본인 확인 등에서 남은 시간을 보여 줄 때 사용하는 예제 입니다. 남은 시간 : 결과 화면 남은 시간 : 01:22 Mac에서는 setInterval 사용 시 오작동할 수 있습니다. 인스턴스 체크해서 생성을 제한 하는 부분 중요합니다.

예전에 UI에서 간단하게 엑셀 파일을 내보내는 것을 해봤습니다. 그때는 그것만으로도 서버쪽 호출 안하고 간단하게 처리할 수 있어 좋아했는데 SheetJS는 배열, json, html 형태 등 다양한 형태의 데이터로 엑셀 파일을 생성해 줍니다. 정말 너무도 멋진 오픈 소스 같습니다. 2019/01/24 - [UI(Front-End)/javascript 일반] - 엑셀 다운로드 구현 1. 라이브러리 추가 2. 구현하기 전체 프로세스는 1. 엑셀 Workbook을 생성하고 2. 데이터(배열/json/html table) 가져와서 sheet 만들고 3. workbook에 만든 시트를 추가합니다. 4. 엑셀 파일을 만들고 5. 다운로드 받을 수 있게 처리합니다. function exportExcel(){ // s..

그동안 엑셀 파일은 서버로 업로드를 하고 백엔드에서 읽어서 처리했는데 얼마 전에 javascript로 처리하는 것을 보습니다. 우와~~~ 파일 업로드 처리는 항상 귀찮은 일 중 하나였는데 이제 쉽게 처리할 수 있습니다. 간단한 라이브러리 추가 만으로 끝~~~ 엑셀 파일을 읽고 쓰는게 서버에서 처리할 필요가 전혀 없었습니다. 많은 사람들이 알고 있었던 거 같은데 전 이제야 알게되어 부끄럽습니다. SheetJS Github : 문서 및 소스, 다운로드 - https://github.com/SheetJS/js-xlsx SheetJS/js-xlsx :green_book: SheetJS Community Edition -- Spreadsheet Parser and Writer - SheetJS/js-xlsx gi..

현재 제공 하는 서비스는 IE 11 이상, 크롬에서 정상 작동을 합니다. 그런데 IE 11을 사용해도 문서 모드가 8, 9 버전으로 되어 있는 경우가 있습니다. 이런 경우 설정에서 'F12개발자 도구'를 선택하고 문서모드에서 버전을 설정해줘야 합니다. 서비스 하는 애플리케이션에서는 호환성 모드를 설정해 주는 게 좋습니다. IE 호환모드 설정 Here are your options: "IE=edge" "IE=11" "IE=EmulateIE11" "IE=10" "IE=EmulateIE10" "IE=9" "IE=EmulateIE9 "IE=8" "IE=EmulateIE8" "IE=7" "IE=EmulateIE7" "IE=5" 엣지 및 크롬브라우저 설정 참고 https://stackoverflow.com/ques..

AG-GRID 칼럼 동적 HIDE/SHOW 예제칼럼을 동적으로 보여주거나 감추는 예제 Html1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798 AG GRID Column Hide 예제 AG GRID Column Hide 예제 Age Country Year Date var MainGrid = function(){ var _this = this; /* grid 영역 정의 */ this.gridDiv = "myGrid"; /* ..

AG-GRID Datepicker 예제그리드에 값을 넣을 때 datepicker를 써야 하는 경우에 대한 예제 입니다. Html빨간색 부분이 해당 부분입니다. 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134 AG GRID Datepi..

AG-GRID 추가/수정/삭제 예제예제에서 확인 할 내용1. 체크박스, 체크박스 전체 선택 및 해제- 코드를 통해 알 수있다. 2. 편집모드에서 시작, 종료 이벤트 처리 - 종료시 변경 데이터를 별도로 저장해 두었다가 저장 시점에 변경된 데이터만 서버에 전송할 필요가 있다. 3. 삭제 처리 4. 편집모드 강제 종료 하기- 편집모드에서 바로 저장, 수정 등의 버튼을 클릭하면 변경 사항이 적용이 안되는데 이때 강제 종료 시키면 해결이 된다. 5. 버튼을 통한 편집모드 이동. 6. 첫번째, 마지막에 ROW 추가하기 HTML1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575..