eblo

개인정보보안이 강화되는 요즘 2차 보안 인증을 요구하는 시스템이 증가하고 있습니다. OTP(One Time Password)는 고정된 비밀번호가 아닌 무작위로 생성되는 일회용 비밀번호를 이용하는 본인 인증 수단입니다.​ 개인정보에 접근하는 시스템 또는 금융권 등에서 많이 사용하고 있습니다. OTP 동작 방식에는 시간 동기화 방식, 첼린지 응답 방식, 이벤트 동기화 방식 등이 있습니다. 대표적인 OTP 방식으로는 구글 OTP가 있습니다. 구글 OTP는 시간 동기화 방식(TOTP)과 HMAC 기반 일회용 비밀번호 알고리즘을 사용합니다. ​ 구글 OTP 적용 Server Side 1. Security Key 생성 2. 바코드 생성 3. 화면 개발 : 보안 코드 입력 화면 개발 4. 보안 코드 유효성 체크 개발..

예전에 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..

1. OverviewAssert는 단순히 if문을 줄이는 역할만 하는 것은 아닙니다. 프로젝트 규칙을 적용하고 공통을 재사용한다는 것에 큰 의미가 있습니다. 복잡한 기술이 필요한 것도 아니고 누구나 쉽게 사용할 수 있는 것이기에 초기 공통 개발 시 반드시 고려해야할 항목 중 하나입니다. 2. Spring Assert를 사용하는 목적 Spring Assert는 인수를 검증하고 조건에 맞지 않는 경우 IllegalArgumentException 또는 IllegalStateException를 발생시킵니다. 이 부분은 조건문을 단순화하고 반복적인 코드를 줄이는 역할을 합니다. 다음 코드를 보겠습니다. 123if(user == null) { throw new IllegalArgumentException("사용자 ..

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

Row data 선택 이벤트 처리1. click 이벤트 처리 gridOptions에 onRowClicked를 구현하면 된다. 12345678910var gridOptions = { columnDefs: columnDefs, rowData: students, rowSelection: 'single', /* 'single' or 'multiple',*/ enableRangeSelection: true, suppressRowClickSelection: false, onRowClicked : funtion(event){ console.log('onRowClicked'); }};Colored by Color ScriptercsHtml123456789101112131415161718192021222324252627..

Cell Renderer & Style & Drop Down 설정 예제 값을 받아서 보여줄 때 가공을 해야 하는 경우가 있습니다. 코드인 경우 코드의 값으로 전환해야 하고 필요한 경우 그래프나 아이콘, 이미지 등으로 보여 줘야 할 때도 있습니다. 그런 경우 cellRenderer를 이용해서 표현할 수 있습니다. 예제코드로는 세가지를 확인해 볼 수 있습니다. 1. cell에 스타일 적용하기. - 정렬 또는 background color 등을 지정할 수 있습니다. 2. data renderering- 숫자는 오른쪽 정렬을 해야 하며 세자리 마다 콤마를 찍어 줘야 합니다. - Style, Use는 코드 값을 받으며 Value로 표현해야 합니다. 3. Data 편집시 drop down 박스 처리 (중요)- 여기..

1. 기본 예제 코드AG-GRID를 이용해서 화면에 데이터를 보여주는 예제입니다. Athlete, Age 칼럼은 좌측에 고정을 시켰습니다. HTML12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970 AG GRID 예제 AG GRID 기본 예제 var MainGrid = function(){ var _this = this; /* grid 영역 정의 */ this.gridDiv = "myGrid"; /* grid 칼럼 정의 */ this.getColumnDefs = function(){ var columnDefs = [ {he..

1. Column Definitions 자주 사용하면서 필수 값에 대해 설명합니다. 예제)123456789101112var columnDefs = [ {headerName:"Athlete", field: "athlete", width: 150, minWidth:120, pinned:'left', suppressSizeToFit: true, suppressMenu: true, sort: 'asc'}, {headerName:"Age", field: "age", width: 90, minWidth: 50, maxWidth: 100, pinned:'left', suppressMenu: true, suppressSorting : true}, {headerName:"Country", field: "country",..