Framework에 해당하는 글들 34 Articles matched 목록이 없습니다. [AngularJS] a태그의 href에 unsafe가 붙을 때 해결방법 AngularJS를 사용하다가 a태그의 href 속성에 아무 동작을 시키지 않으려고 javascript:; 또는 javascript:void(0);를 적용할 때가 있습니다. 이 때 운영서버에 배포하고나니 링크가 동작을 안해서 살펴보면 href 속성에 설정해준 javascript:; 앞에 unsafe가 붙어져서 나와있는 경우가 있는데요 이런 경우 간단하게 아래의 config를 최상단 모듈에 설정해주면 됩니다. app.config(function($compileProvider){ // a태그의 href에 정규식 안에 있는 식을 사용했을 때 앞에 'unsafe:'가 붙지 않도록 하기 위함 // 'unsafe:'가 붙으면 Chrome브라우저에서는 문제없으나 IE나 다른 브라우저에서는 해당 a태그를 클릭 시 오류.. [Spring] 운영 properties와 개발 properties 구분하기 Spring Framework를 사용하는 소스에서 여러가지 설정과 관련된 다양한 properties들이 늘어남에 따라서 운영에서 사용되는 properties와 개발 시 사용할 properties를 구분해야 하는 경우가 생겼습니다. 이런 경우에 찾아보니 properties 파일을 로드할 때 운영 환경 시 로드될 파일들을 ops 폴더 아래에 두고 개발 환경 시 로드될 파일들을 dev 폴더 아래에 위치 시킵니다. 그런 다음에 JAVA Option으로 spring.profiles.active라는 변수를 정의해서 properties 파일들을 로드할 때 spring.profiles.active를 경로 사이에 넣은 다음에 운영 환경일 경우 해당 변수를 ops로 개발 환경일 경우 해당 변수를 dev로 저장하여 소스를 .. [AngularJS] 지정한 횟수만큼 ng-repeat 사용 AngularJS를 사용하다보면 ng-repeat의 생각보다 복잡함을 느낄때가 있습니다. JSTL을 사용하던 때에는 내가 원하는 횟수만큼 EL문을 반복하는 기능을 손 쉽게 구현 가능했다면 ng-repeat으로 구현하기 위해서는 어떻게해야할지 감이 안왔죠. 물론 방법은 많아요. 그 중에서 간단한 방법 몇가지를 소개하려고 합니다. Function (가장 간단한 방법) $scope.getArray = function(num) { return new Array(num); }; 함수를 통해서 비어있는 배열을 만들어서 아래와같이 View 영역에서 ng-repeat 구문안에서 호출하여 사용하시면 됩니다. AngularJS를 사용하다보면 ng-repeat의 생각보다 복잡함을 느낄때가 있습니다. JSTL을 사용하던 때에.. [AngularJS] 문자열은 제외하고 number filter를 적용할 수는 없을까? AngularJS를 사용하다 보면 여러가지 다양한 필터를 사용하게 되는데요 데이터 출력 관련한 필터 중에 기본적으로 number라는 필터가 있습니다. number 필터는 숫자를 보기 좋게 하여 출력해주는 필터로 예를들어 3자리 마다 콤마를 찍어준다거나 소수점은 기본적으로 3자리까지 반올림하여 보여줍니다. 하지만 데이터 타입이 문자열인 경우에는 number 필터를 거치면 아예 보이지 않죠. 그런데 사용하다가 보니 하나의 필터로 정수는 3자리마다 콤마를 찍어주고 소수점은 소수점 아래 자리를 모두 보여주고 문자열은 그대로 보여주는 필터가 필요하게 되었습니다. 기존의 number 필터를 그대로 이용하여 커스텀 필터를 만들어 보았습니다. 소스(Source) // Custom Number Filter (string.. [AngularJS] Copy, Extend, Merge 차이가 뭘까? AngularJS를 사용하다보면 객체를 복사하는 경우가 종종 있습니다. 보통은 angular.copy를 통해서 복사를 하는데요 운영 소스중에 angular.extend라는 것을 발견해서 차이가 뭔지 궁금해서 찾아보았습니다. 이번에 정리할 Copy, Extend, Merge는 모두 AngularJS에 내장되어있는 함수인데 영어단어 의미대로 객체 또는 배열을 복사, 확장, 병합하는 기능을 합니다. 각각의 차이점을 정리해보도록 하겠습니다. Copy (복사) angular.copy는 이미 사용하고 있던것으로 객체를 복사할 때 사용합니다. 복사가 필요한 경우는 원본 객체를 유지하되 수정이 필요할 경우가 있을 수 있습니다. var obj1 = { key: 'object1', value: 'test1' }; var .. [JavaScript] 어떻게하면 로그인 시 원래 보고 있던 페이지로 이동시킬 수 있을까? 인터넷을 사용하다 보면 잘 만들어진, 잘 구성되어있는 사이트들을 볼 수 있습니다. 잘 만들어졌다는 것은 사용자가 사용할 때 불편함이 최소화 되어 있고 원하는 정보를 잘 보여주는 것이라고 개인적으로 생각하는데요. 그런 사이트들을 보면 로그인을 했을 때 메인페이지나 정해진 페이지가 아닌 사용자가 원래 보고 있던 페이지로 이동시켜줘서 작업의 흐름을 그대로 유지해주는 사례가 많은 것 같습니다. 우리 시스템에도 요구사항으로 들어와서 구현해보려고 합니다. 처음부터 바로 답을 찾지는 못했습니다. 가장 단순한 뒤로가기 방법인 history.back() 을 이용해서 구현해봤는데 가장 큰 문제가 사용자가 외부에서 로그인페이지로 들어온 경우에는 로그인 시 사이트를 이탈시키는 문제가 있었습니다. 따라서 위의 방법만으로는 해결.. [AngularJS] div 태그에 focusout 또는 blur 이벤트 주기 AngularJS를 사용하다 보면 input 태그가 아닌 div 혹은 어떤 영역의 바깥영역을 사용자가 클릭했을 때 이벤트를 주고 싶을 때가 있어요. 처음에는 자료가 안나와서 deep-blur라는 angularjs 모듈을 사용하다가 모듈이 내 마음대로 되지도 않고 조금 불안정한 느낌이 들어서 모듈을 제거하고 디렉티브로 구현된 방법이 있어서 바로 적용했습니다. deep-blur라는 모듈을 사용하는 것보다 훨씬 안정적이고 내 마음대로 로직을 수정할 수 있어서 훨씬 좋은 방법이라고 생각합니다. 소스 (Source) app.directive("outsideClick", ['$document','$parse', function( $document, $parse ){ return { link: function( $s.. [Javascript] 웹 브라우저 인쇄 버튼 만들기 브라우저 화면을 인쇄하는 방법은 브라우저 메뉴에 있는 인쇄버튼을 클릭하거나 단축키 Ctrl + P를 입력하면 된다. 하지만 사이트 내에 큼직한 인쇄하기 버튼이 있다면 사용자가 더 쉽고 편하게 쓸 수 있지 않을까 생각한다. 클릭 한 번이면 내가 보고 있는 웹 페이지를 인쇄할 수 있으니까 말이다. 인쇄버튼 만드는게 어렵지 않을까 생각했지만 정말 쉬웠다. 인쇄버튼 만들기 ( jQuery ) 그리고 인쇄 화면이 나왔을 때 보여주기 싫은것이라던지 (ex - 인쇄버튼) 그런것들은 따로 CSS를 지정해서 숨길 수 있다. @media print { .print-button { display:none; } } 1 2 3 4 5