분류 전체보기에 해당하는 글들 201 Articles matched 목록이 없습니다. [JavaScript] 어떻게하면 로그인 시 원래 보고 있던 페이지로 이동시킬 수 있을까? 인터넷을 사용하다 보면 잘 만들어진, 잘 구성되어있는 사이트들을 볼 수 있습니다. 잘 만들어졌다는 것은 사용자가 사용할 때 불편함이 최소화 되어 있고 원하는 정보를 잘 보여주는 것이라고 개인적으로 생각하는데요. 그런 사이트들을 보면 로그인을 했을 때 메인페이지나 정해진 페이지가 아닌 사용자가 원래 보고 있던 페이지로 이동시켜줘서 작업의 흐름을 그대로 유지해주는 사례가 많은 것 같습니다. 우리 시스템에도 요구사항으로 들어와서 구현해보려고 합니다. 처음부터 바로 답을 찾지는 못했습니다. 가장 단순한 뒤로가기 방법인 history.back() 을 이용해서 구현해봤는데 가장 큰 문제가 사용자가 외부에서 로그인페이지로 들어온 경우에는 로그인 시 사이트를 이탈시키는 문제가 있었습니다. 따라서 위의 방법만으로는 해결.. [Javascript] Object의 key 목록 나열하기 AngularJS에서 custom filter를 만들어 보고 있는데 파라미터 값으로 object(객체) 형식을 넘겼습니다. 근데 filter안에서 받고 보니까 오브젝트 안에 어떤 키가 있는지 모르겠어서 어떻게하면 키 값을 뽑아내서 그 키값을 통해 또 동일한 형태의 객체에 접근할 수 있을까를 고민하다 보니 Javascript에 이미 있는걸 알고 이렇게 정리해봅니다. 문법은 다음과 같습니다. var obj = { "key1" : "value1", "key2" : "value2" } var keys = Object.keys(obj); console.log(keys); for ( var i in keys ) { console.log(keys[i] + " : " + obj[keys[i]]); } [실행결과][ '.. [elastic search] 결과 내 검색 Elastic Search(엘라스틱서치)를 이번 프로젝트에서 처음으로 접해봤는데 그 속도가 어마어마하게 느껴졌습니다. 검색 기능을 RDB에서 구현을 하자니 속도가 너무 느리고 속도를 높이려고 인덱스를 걸자니 LIKE문을 양쪽에 '%'를 붙이니 인덱스도 안걸리고 .. 뭔가 제한적임을 느꼈습니다. 그러다가 해결방안으로 엘라스틱서치를 탑재한 서버를 따로 구성하고 그 서버에 접근해서 검색을 하도록 하자는 방안이었습니다. REST API처럼 검색 서버를 만드는 것이죠. 또한 페이지 내에서 결과 내 검색 기능이 필요 했는데 RDB에선 간단하게 구현이 가능했지만 낯선 Elastic Search 문법에서 조금 헤매었습니다. Elastic Search 결과 내 검색 "query": { "query_string": { ".. 키코드 테이블 키 이벤트를 처리할 때 항상 찾는것이 있습니다. 바로 키 코드 인데요 키보드의 어떤 키가 눌렸을 때 컴퓨터가 받아들이는 값을 바로 키 코드라고 표현합니다. 키보드의 키가 적지 않은 편이기 때문에 다 외우는건 힘든데요 매번 블로그를 찾으면 금방 나오기는 하지만 제 블로그에 직접 정리해두면 더 좋을 것 같아서 해봅니다. ←(백스패이스) = 8 TAB = 9 ENTER = 13 SHIFT = 16 CTRL = 17 ALT = 18 PAUSEBREAK = 19 CAPSLOOK = 20 한/영 = 21 한자 = 25 ESC = 27 스패이스 = 32 PAGEUP = 33 PAGEDN = 34 END = 35 HOME =36 ←(중간) = 37 ↑(중간) = 38 →(중간) = 39 ↓(중간) = 40 INSERT.. [웹 프로그래밍] GET 방식으로 query string 넘길 때 특수문자 사라짐 현상 웹에서 GET방식으로 어떤 값을 넘겨줄 때 간혹 제대로 나오지 않는 문자가 있습니다. 바로 특수문자중에 +와 &인데 GET방식으로 하면 Query String으로 URL의 뒤에 '?'문자와 함께 같이 붙어져서 URL을 구성합니다. Query String 방식으로 넘겨주면 +와 &는 생략이 되는데 저같은 경우는 검색 기능을 넣을 때 버그사항으로 경험했습니다. 검색어 중에 (+)와 같은 기호가 들어가는 부분이 있었는데 +가 생략되는 바람에 엉뚱한 결과물이 나오거나 아예 안나오는 상황이 발생했습니다. 이는 해결 방법은 간단합니다. 해결방법 간단하게 URI의 인코딩 방식인 퍼센트 인코딩(percent-encoding)으로 인코딩을 해주면 됩니다. 퍼센트 인코딩에 따르면 알파벳이나 숫자 등 몇몇 문자들을 제외한 .. [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.. [css] white-space 속성 알아보기 웹사이트를 개발하다보면 줄바꿈이 잘 안되어 있거나 테이블 레이아웃 안에 글들이 테이블 밖으로 삐저 나와있거나 짤리는 현상을 마주하곤 합니다. 이럴때마다 사용하게되는 CSS 속성이 바로 오늘 정리할 white-space입니다. white-space는 스페이스와 탭, 줄바꿈, 자동줄바꿈을 어떤식으로 처리할 건지 정의해주는 속성입니다. 특징 기본값 : normal상속 : O애니메이션 : X버전 : CSS Level 1 사용법(문법) white-space: normal | nowrap | pre | pre-wrap | pre-line | initial | inherit initial은 기본값인 normal로 설정하는 것이고, inherit은 부모 요소에 설정되어있는 속성값을 상속받는 것입니다. 스페이스와 탭 줄.. [Javascript] 웹 브라우저 인쇄 버튼 만들기 브라우저 화면을 인쇄하는 방법은 브라우저 메뉴에 있는 인쇄버튼을 클릭하거나 단축키 Ctrl + P를 입력하면 된다. 하지만 사이트 내에 큼직한 인쇄하기 버튼이 있다면 사용자가 더 쉽고 편하게 쓸 수 있지 않을까 생각한다. 클릭 한 번이면 내가 보고 있는 웹 페이지를 인쇄할 수 있으니까 말이다. 인쇄버튼 만드는게 어렵지 않을까 생각했지만 정말 쉬웠다. 인쇄버튼 만들기 ( jQuery ) 그리고 인쇄 화면이 나왔을 때 보여주기 싫은것이라던지 (ex - 인쇄버튼) 그런것들은 따로 CSS를 지정해서 숨길 수 있다. @media print { .print-button { display:none; } } 1 ··· 13 14 15 16 17 18 19 ··· 26