어느날 크롬만 CSS애니매이션이 느리게 동작하는 현상이 나왔습니다. 1. 해결방법 *{scroll-behavior: smooth;}를 제거하면됩니다. 제거가 힘들다면 css 아래와 같이 추가하면 됩니다. 1 2 3 :root { scroll-behavior: auto; } cs 2. 원인 부트스트랩과 에는 "*{scroll-behavior: smooth;}"가 들어 있습니다. 이상태에서 "Jquery UI"를 사용하면 애니메이션이 이상하게 동작하는 것을 볼수 있습니다. 원래는 "Jquery"의 에니매이션이 우선됐는데 크롬에서 언제부터인가 "smooth"가 먹혀서 이상한 동작을 하게되었습니다. 파이어폭스에서는 여전히 정상동작하는 것으로 보아 크롬 버그거나 정책이 바뀐거겠죠. 마무리 포스팅이 올라가는 시점에..
자바스크립트(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..
