18 posts in total

Front End-web-dev

Posts tagged

AngularJS 디펜던시 인젝션(DI) 이해하기

by Justin Yoo · 4 min read

객체지향 프로그래밍에서 Dependency Injection (DI) 개념은 아주 중요한데, 개별 객체들 사이에 의존성이 줄어들어야 – 다른 말로 느슨한 결합 (loosely coupled)을 이루거나 – 유지보수 및 확장성, 그리고 테스트 가용성 측면에서 많은 이득을 볼 수 있다. 일반적으로 Java 또는 C# 프로그래밍에서는 아래와 같은 형태로 DI를 구성한다. 위의 코드는 C#으로 구현한 간단한 Web API 콘트롤러이다. 콘트롤러 인스턴스를 초기화할 때, 생성자의 파라미터로서 IProdu ...

크로스 브라우징을 위한 HTML5 Boilerplate + 추가 스크립트

by Justin Yoo · 5 min read

HTML5 Boilerplate (H5BP)는 프론트엔드 개발자들이 웹페이지를 제작하는데 필요한 베스트 프랙티스들을 모아놓은 템플릿이다. 다양한 브라우저 환경, 특히 구버전의 인터넷 익스플로러(IE)에서 HTML5 + CSS3 조합의 풍부한 기능을 이용하기를 원한다면 이 H5BP의 사용은 필수불가결하다 할 수 있다. 하지만, H5BP가 만능은 아닌 것이, 다양한 브라우저를 지원하는 웹페이지를 제작하는데 꼭 필요한 최소한의 장치들만을 포함하고 있기 때문에 개발 환경에 따라 몇가지를 추가해야 하는 것 ...

Placeholders.js Monkey Patch 해설

by Justin Yoo · 3 min read

이전 글인 IE8 에서 input 태그와 textarea 태그에 placeholder 속성 적용하기에서 Placeholders.js를 이용하면 jquery.placeholder 플러그인보다 여러모로 사용이 편리하다고 언급한 적이 있다. 그런데, 이 Placeholderes.js 역시도 다른 DOM 엘리먼트들의 이벤트들에서는 기대하는 대로 작동하지 않는 경우가 있다. 이런 경우를 보정하기 위해서 Placeholders.js Monkey Patch를 만들어서 배포하게 됐다. Placehoders.js ...

닷넷의 LINQ 기능을 자바스크립트로 이용하기

by Justin Yoo · 2 min read

LINQ (Language Integrated Query)는 닷넷 개발시 가장 강력한 기능들 중의 하나이다. LINQ-to-SQL, LINQ-to-XML, LINQ-to-OBJECT 등 거의 모든 상황에서 LINQ를 사용할 수 있다. LINQ는 보통 아래와 같은 형태로 많이 쓰인다. 또는 하지만 이것의 가장 큰 단점(?)이라면, 프론트엔드에서 쓰이는 자바스크립트로는 이러한 기능을 사용할 수 없다는 데 있다. 그래서 나타난 것이 바로 linq.js이다. linq.js 소개 이 자바스크립트 프레임 ...

웹사이트에서 중국어(간체), 중국어(번체) 및 일본어 글꼴 표현하기

by Justin Yoo · 1 min read

웹사이트에서 한글 글꼴을 표현할 때에는 요즘은 구글에서 제공하는 웹폰트를 사용하는 경우가 많다. 이것이 가능한 이유는 영문 폰트에 비해서는 용량이 크지만 상대적으로 그렇게 크지 않기 때문이기도 하다. 이에 비해서 일본어 글꼴과 중국어 글꼴을 웹폰트로 사용하기에는 워낙에 한자들이 많기 때문에 거의 불가능하다고 한다. 따라서, 일본어 또는 중국어로 운영하는 웹사이트는 시스템 기본 글꼴을 사용하는 경우가 많다고 한다. 그렇다면, 그나마 웹사이트에 어울리는 중국어 글꼴과 일본어 글꼴은 어떤 것들이 있을까 ...

IE8 에서 input 태그와 textarea 태그에 placeholder 속성 적용하기

by Justin Yoo · 1 min read

IE8은 공식적으로 HTML5 태그들을 지원하지 않는다. 따라서, 하위 버전의 IE들을 위해 Modernzr 라든가 html5shiv 같은 자바스크립트들을 이용하면 HTML5에서 새롭게 나타난 엘리먼트 태그들을 사용할 수 있다. 그럼에도 불구하고 placeholder 속성은 IE8에서 사용할 수 없는데, 이럴 때 사용할 수 있는 jQuery 플러그인이 있다. 이름하여 jquery.placeholder. 사용법도 간단하다. 먼저 jQuery를 로딩한 다음 jquery.placeholder.js를 ...