자바스크립트(javascript)에서 콜백 대안이라고 프로미스(promise) 내놨을 때는 뭐 하는 짓인가 싶었는데.... 다른 언어들처럼 어싱크/어웨이크(async/await)가 생기면서 이제야 좀 비동기 관리가 편해졌네요 ㅎㅎㅎ 테스트 한번 해봅시다. 1. 패치(fetch) 기존의 XMLHttpRequest대신 패치(fetch)를 사용하는 것이 좋습니다. 패치(fetch)로 네트워크 통신을 하면 프로미스(promise)처리가 가능한 리스폰스가 리턴됩니다. (MDN - Fetch API, Using Fetch, XMLHttpRequest ) 예> fetch('http://example.com/movies.json') .then(response => response.json()) .then(data =>..
ES6(ECMAScript6)에서 생긴 기능 중에 Import/Export라는 기능이 생겼습니다. 개념은 다른 언어들의 using(C#), import(Java) 등등을 구현한 것입니다. 0. 서론 html에서 자바스크립트(Javascript) 파일을 전역 스코프(scope) 불러와 사용하는 것이 기존 방식입니다. 이 방식의 문제는 1) 각자 참조하고 있는 파일이 무엇인지 확인하는 것이 어렵다. 2) 한 번에 스크립트를 모두 메모리에 올리다 보니 첫 로딩이 길다. 3) 전역 스코프에 올리다 보니 외부 라이브러리를 사용할 때 변수명이 겹쳐서 문제가 발생하는 경우가 있기도 하다. (이건 라이브러리 설계를 잘하면 회피 할 수 있습니다.) 이러한 문제들이 있습니다. 그래서 다른 언어들 처럼 참조를 명시하도록 하..
NHN에서 옛날에 스마트 에디터라는 것을 공개한 적이 있는데....너무 옛날 꺼라 그냥 쓰기 안 좋아 쓴 적이 없습니다. 그런데 어느 날 보니 완전 다른 에디터를 공개했군요.심지어 마크다운과 위지웍을 동시에 지원!! 1. 간단하게 사용하기도큐먼트가 애매하게 친절해서 빌드 없이 쓰는게 힘들게 돼있어서 따로 정리합니다. 1-1. 참조 추가하기 - CSS"codemirror"에 CSS의존성이 있으므로 추가해야 합니다. 123cs 1-2. 참조 추가하기 - Javascript기능에 따라 필요한 것만 로드하면 되지만...... 귀찮으니 그냥 All버전 하나만 로드하면 됩니다. 12cs 1-3. 사용하기div로 영역을 지정하고 에디터를 생성해주면 화면에 짠 하고 나타납니다. (참고 : 설치와 기본기능 사용 ) 12..
다른 포스팅에서 '.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. 현상의 ..