Category Archives: JavaScript

javascript Object 내 key 존재여부 체크

{} 오브젝트 안에 특정키가 존재하는지 체크하려면??

Object.keys()로 keyset을 추출해서 순회하면서 key name이 일치하는게 있는지 체크하려고 했으나.. 찾아보니 Object.hasOwnProperty를 제공하고 있어서, 바로 ObjectName.hasOwnProperty(key name)을 던져서 존재여부를 확인할 수 있었다.

다만 ESLint를 사용하는데 콘솔에 다음과 같은 메시지가 나온다.

Do not access Object.prototype method ‘hasOwnProperty’ from target object.

찾아보니 Object.prototype의 builtin 제공 메서드를 바로 사용하지 않도록 하는 규칙 때문이라고 하여 , 다음과 같이 사용하면 된다.

// 사용금지
customObject.hasOwnProperty('keyName')

// 권장
Object.prototype.hasOwnProperty.call(customObject, 'keyName')

참고 : https://stackoverflow.com/questions/39282873/object-hasownproperty-yields-the-eslint-no-prototype-builtins-error-how-to

CSS – background-image 로딩 실패시 처리.

<img> 태그에는 src에 지정된 이미지 로딩 실패시 onerror에 script를 추가해서 대체 이미지를 노출할 수 있는데, img태그가 아닌 여타 다른 태그에서 background-image로 특정 이미지를 로딩시 실패하는 경우에도 동일한 대체이미지를 넣고자 하는 needs가 있어서… 찾아보니..

무식하게 처리하는 방법과 간단히 처리하는 방법이 있는데…우선 무식하게 처리하는건 script로 Image객체를 생성해서 대상 이미지를 불러보고 없을때는 Image객체인스턴스.onerror = function() { //blah blah blah }  형태로 에러처리를 수행하면 되고…

좀더 검색을 하다보니 background-image 속성 자체에 url() 을 두개 주면 쉽게 해결 된다는……
obj.style.background-image:url(원본), url(실패시)

http://stackoverflow.com/questions/7816951/css-extra-background-image-for-when-the-first-image-doesnt-load

 

역시 검색을 잘해야….삽질을 덜 함.