용테크

차트의 카테고리필드에 애니메이션을 넣어보았다. 카데고리별로 지정된 색상이 있으며, 색상 선이 애니메이션으로 그어지는 방식이다. 차트는 SVG TAG로 구성되어있으며 text필드에 접근하기위하여 JQuery를 사용하였다. Javascript 각각의 라인을 Class를 추가한 후 g tag로 묶어 차트의 html에 붙여넣는 방식을 사용하였다. 이때 카테고리 필드의 텍스트 문자의 크기가 미세하게 다름으로 분기처리하여 라인의 길이를 정해준다. 변수 siteColor 는 색상을 담고있는 배열이다. function drawLine() { var svg = document.querySelector('div.chartEmpty svg'); var gTag = svg.querySelector('g'); var textT..

주기적으로 이미지가 바뀌는 기능을 setInterval 로 처리를 하였더니 다른탭에서 작업 후 다시 해당화면으로 돌아왔을때 쌓아두었던 스택이 한번에 처리되는 현상을 발견하였다.(1번탭에서 setInterval로 주기적으로 이미지를 호출하다가 다른 탭으로 이동하여 작업 후, 다시 1번탭으로 돌아왔을 때, 이미지가 정해진 주기에 따라 바뀌는것이 아닌, 이제까지 쌓여놓았던 스택을 한번에 호출하는 바람에 이미지가 클럽마냥 반짝거리면서 호출됨) 해당 현상을 window.addEventListener('focus'), window.addEventListener('blur') 이벤트를 사용하여 해결하였다. Focus를 준 화면에 접근하였을 때 window.addEventListener('focus', function..

프로젝트 보안점검중 크로스 사이트 스크립팅과 관련하여 클라이언트의 요청을 우회할수 있는 툴인 Burp Suite를 사용해 보았다. 이 툴을 이용하게 되면 javascript를 이용한 validation체크를 우회할 수 있다. 이 말은 웹 사이트의 보안을 유지하려면 client단에서의 javascript 유효성 체크뿐만 아니라 서버단에서의 유효성 체크도 해야 한다는 것이다. 이 툴을 사용하니 내가 작성한 소스가 단번에 해킹 당하는걸 보았다.. server단에도 secure coding이 필수적이다. Burp Suite의 동작 원리는 간단하다. 1. local PC 웹 브라우저에서 naver.com HTTP request 2. proxy server(Burp Suite) 3. 네이버 사이트 접속 4. 네이버..

포탈 개발중 댓글기능이 필요하다는 요구사항에따라 화면내 댓글기능 개발.. 이미 어느정도 화면이 개발된 후 댓글기능이 추가되는 상황이라 별도의 HTML 파일을 사용하지않고 js 소스 안에 html5 문법을 작성하여 JQuery로 붙여넣는 방식을 사용하였다. 댓글의 입력 혹은 삭제시 댓글 입력 양식의 height값이 총 댓글의 개수에 따라 정해진다. Table 구조는 REPLYID,SEQ가 PK이며, SEQ가 0이면 부모 댓글(최상위 댓글), 아니면 자식 댓글(대댓글)로 구분한다. 댓글 기능(댓글 등록, 수정, 삭제, 대댓글) function initComment() { var commentEmpty = $('div[ux-name="commentEmpty"]'); var comment = $this.find..

프로젝트중 보고서출력을 Crownix report - RD Report로 출력하는 기능필요. Client에서 팝업 생성 후, DB 정보를 읽어와 HTML5 viewer로 출력하였다. 1. iframe에 Crownix Report HTML5 viewer 출력. 2. viewer 실행 시 필요한 parameter 입력(사용자 정보, mrd 파일 parameter, DRM 정보 등..) 3. mrd 파일 호출 Iframe에 HTML5 viewer Setting var fname = 'ideaRd.mrd' function rdload() { $ux.iframe.setRdViewer(rdIrame, params.IDEAID); var userInfo = {}; $ux.data.query({ //사용자, 부서정보 ..

STUFF, FOR XML STUFF : 지정된 문자열의 시작위치와 크기를 지정하여 원하는 문자로 치환하는 함수입니다. STUFF('[문자열]','[시작위치]','[크기]','[치환문자]') FOR XML : 쿼리의 실행 결과를 XML형식으로 만들어줍니다. [모드] 1. RAW : 행 집합의 각 행마다 SELECT문으로 반환되는 단일 행(ROW)를 생성합니다. 2. AUTO : SELECT문의 결과 XML에서 중첩된 구조를 생성합니다. 3. EXPLICIT : XML모양을 자신의 의지대로 특성과 요소를 혼합할 수 있습니다. 4. PATH : EXPLICIT 모드보다 좀 더 간편하게 XML형태를 가공할 수 있습니다. 출처 : docs.microsoft.com/ko-kr/sql/relational-datab..

Site Overview에서 사업장의 world map를 나타내는 기능이 필요함에따라 kendo buttonBar를 사용하여 구현하였다. Button Bar가 생성될 div 생성 및 명시 Query실행 후 사업장 정보 Get KendoTabStrip 속성 설정 Default Tab 설정 function worldMapInit() { var mainScreen = $('div[ux-loaded="BMP_IDEA_MAIN"]'); if (mainScreen.length == 0) return; var siteData; var date = new Date(); //ButtonBar에따라 바뀔 WorldMap Image var worldImg = $('div[ux-name="worldMap"]'); $ux.da..

CSS 트랜지션은 CSS 속성을 변경할 때 애니메이션 속도를 조절하는 방법을 제공. 속성 변경이 즉시 영향을 미치게 하는 대신, 그 속성의 변화가 일정 기간에 걸쳐 일어나도록 할 수 있다. 예를 들어, 여러분이 어떤 요소의 색상을 흰색에서 검은색으로 변경한다면, 변화는 대개 즉시 일어난다. CSS 트랜지션을 이용하면, 모두 커스터마이즈 가능한 어떤 가속도 곡선을 따르는 시간 주기마다 변화가 일어난다. opacity: 1.0; -webkit-transition: background 0.5s linear; -moz-transition: background 0.5s linear; -o-transition: background 0.5s linear; -ms-transition: background 0.5s li..