다른 포스팅에서 '.Net'에서 열거형 멤버(enum)를 비트 연산으로 활용하는 방법을 알아보았습니다. (참고 : [.NET] 열거형 맴버(enum)의 플래그(Flags)와 비트(bit) 연산 ) 이번 포스팅에서는 자바스크립트에서는 어떻게 사용하는지 알아봅시다. 연관글 영역 1. 자바스크립트(javascrpt)에서 열거형 멤버를 비트로 선언하기 자바스크립트에서도 비트로 값을 넣을 수 있습니다. var Auth3Type = { None: 0, Opt0: 1

부서 구조나 파일 구조 같은 것들을 표시할 때 많이 사용하는 것이 트리구조입니다. 윈도우의 파일 탐색기를 보면 트리구조로 되어 있습니다. 웹에서 이런 UI를 구현하는 라이브러리는 엄청 많습니다. 자기에게 맞는 라이브러리를 찾아서 사용하면 됩니다. 이 포스팅에서는 'jsTree'를 'ASP.NET Core'와 같이 사용하여 봅시다. (참고 : jsTree - 공식 사이트 ) 1. 프로젝트 준비 프로젝트는 'ASP.NET Core 2.2', 'WebAPI' 생성합니다. 아랫글을 참고해 'index.html'을 시작 페이지로 설정해 줍니다. (참고 : [ASP.NET Core] 빈 프로젝트 세팅 (1) - 'index.html'을 시작페이지로 설정하기) 'index.html'를 아래와 같이 작성합니다. jsT..

싱글 페이지 애플리케이션(SPA, Sigle Page Applications)을 만들 때 필수로 필요한 것이 자바스크립트로 구현된 라우터(router)입니다. 자바스크립트로 한 개의 웹페이지를 화면 바인딩을 제어하여 마치 웹페이지가 한 개의 응용프로그램처럼 동작하게 하려면 페이지를 이동시키지 않고 주소를 갱신하여야 합니다. 이런 기능을 구현하는 것이 라우터입니다. 라우터는 크게 해시(#) 라우터와 브라우저 라우터로 구분할 수 있습니다. 자바스크립트로 구현된 라우터는 많습니다. 저는 그중 해시 라우터인 'Sammy.js'를 사용하여 간단하게 SPA를 구현해 보겠습니다. 1. 프로젝트 준비 'index.html'파일의 내용을 아래와 같이 작성합니다. 홈 'Sammy.js'는 홈페이지에서 받을 수 있습니다. ..

테이블을 만들고 원래의 'td'크기보다 큰 내용이 들어간 셀이 있으면 나머지 'td'들의 높이 100%가 이전 높이를 가지는 현상이 있습니다. 보통 'height'를 '100%'로 지정하면 자신의 부모 크기를 따른다고 생각하기 때문에 그냥 보면 이상합니다. 이것을 의도한 대로 '높이 100%'가 되도록 해보겠습니다. 1. 원인 어떻게 보면 당연하기도 한 것이 다른 'td'에 의해 해당 줄의 크기가 늘어난 것이기 때문에 자신의 높이는 여전히 이전 크기와 같습니다. 아래 샘플의 첫 번째 'td'를 보시면 연한 색이 최초 'td'높이를 가지고 있는 것을 볼 수 있습니다. See the Pen fill td height by DangGun (@danggun) on CodePen. 2. 해결방법 정상적인 해결방법..

문자열(string)을 URL object로 사용하면 로케이션 오브젝트(Location Object)처럼 사용할 수 있습니다. (참고 : [javascript] 로케이션 오브젝트(Location Object)사용 하기 ) 'URL' 처리를 자동화할 수 있다는 것이죠 ㅎㅎㅎ 1. 객체 생성하기 로케이션 오브젝트를 생성하기 위해서는 'a'태그를 생성해야 합니다. 아래 코드와 같이 'a'태그를 생성한 후 주소(.href)를 설정해 주면 로케이션 오브젝트처럼 쓸 수 있습니다. var elemA = document.createElement('a'); elemA.href = "http://blog.danggun.net:8080/test/test.html?id=1111&test=22222#asdfasdf"; 이렇게 ..

자바스크립트(javascript)나 제이쿼리(jquery)에서 url을 다루기 위해서 로케이션 오브젝트(Location Object)라는 것을 사용해야 합니다. c#의 'url object(uri)'처럼 사용할 수 있습니다. 1. 프로퍼티 읽어오기 현재 url의 로케이션 오브젝트는 'window.location'를 읽어서 사용할 수 있습니다. 1 2 3 4 //javascript var objLocation = window.location; //jquery var objLocationJQ = $(location); cs 로케이션 오브젝트에서 받아올 수 있는 정보는 다음과 같습니다. hash : 앵커 부분(# 뒷부분) host : 호스트 정보(호스트 주소만 나옴) hostname : 호스트의 이름 href..

css에는 마진 상쇄(margin collapsing) 혹은 마진 겹침(margin overlap)라는 현상이 있습니다. 탑과 바텀에 마진이 있는 경우 큰 쪽 한 개만 적용되는 현상을 말합니다. 아래위 마진이 겹쳐 있습니다. 1. 현상 확인 아래 코드를 실행해봅시다. See the Pen CSS3 Margin collapsing (margin overlap ) - Issue Check by DangGun (@danggun) on CodePen. 탑 마진(margin-top)을 20px주고 바텀마진을(margin-bottom) 20px를 줬습니다. 그런데 결과물은 20px 입니다, 이것을 마진 상쇄(margin collapsing), 마진 겹침(margin overlap) 현상이라고 합니다. 2. 현상의 ..

타입스크립트를 시작하기 위한 예제를 따라 해 보겠습니다. 참고 : typescript - Quick start 0. 준비하기 타입스크립트(typescript)가 설치돼 있지 않다면 설치해 줍니다. ( 참고 - typescript - Get TypeScript, [TypeScript] 타입스크립트(TypeScript)를 비주얼 스튜디오(Visual Studio) 2015에 설치하기 ) 타입스크립트를 설치하고 나면 프로젝트에 'TypeScript'라는 항목이 추가된 것을 볼 수 있습니다. 여기서 'TypeScript를 사용한 HTML 응용 프로그램'을 선택하고 프로젝트를 생성해 줍니다. 바로 실행해보면 실시간으로 시간이 갱신되는 타입스크립트 앱을 볼 수 있습니다. 1. 타입스크립트 파일 만들기 프로젝트에 '..

앵귤러JS(Agular, 이하 앵귤러)에서 앵귤러UI(AgularUI)에서 ng-grid라는 것을 지원해 줍니다. (참고 : AngularUI, Angular UI Grid ) 다양한 기능을 오픈소스로 만날 기회!! 지만 상용 그리드(grid)에 비해서 기능이 좀 모자라긴 합니다 ㅎㅎㅎㅎ ng-grid에서는 pdf나 cvs로 출력해주는 기능이 있습니다. 그런데 이 기능을 사용하면 이상한 점을 보게 됩니다..... 필터가 빠진 체로 출력됩니다. 1. 문제 발견 아래 예제는 그리드를 만들고 컬럼에 필터를 적용하였습니다. "눌러서 cvs 저장" 버튼을 눌러 다운로드 받아 봅시다. See the Pen AngularUI - Exporter cellFilter - Issue Check by DangGun (@da..

부트스트랩은 자체적으로 폰트를 사용합니다. 그런데 특정할 수 없는 상황에서 다음과 같은 에러가 발생합니다. 흠.... 파일경로로가보면 파일을 정상적으로 있는데 파일을 못 는 현상이 있습니다. 어디선가 많이 보던 에러인데..... stackoverflow - How to remove error about glyphicons-halflings-regular.woff2 not found 아..... 원인은 간단합니다. '.woff2'라는 확장자는 'MIME'기본 설정에 들어 있지 안씁니다 ㅋㅋㅋㅋㅋ 1. IIS의 경우IIS에서 MIME를 추가하면 됩니다. 사이트에 'MIME 형식'에 들어가서 '추가'를 눌러 아래와 같이 내용을 넣어주고 '확인'을 눌러 줍니다. 파일 이름 확장명 : .woff2 MIME 형식 ..