Dev Environment/개발 기타 자료 검색 결과

해당 글 17건

jQuery, bootstrap cdn 의 속성 : integrity, crossorigin

integrity, crossorigin The folks over at MaxCDN graciously provide CDN support for Bootstrap's CSS and JavaScript. Just use these Bootstrap CDN links. 부트스트랩 CDN 에는 다음과 같은 intergrity, crossorigin 인 attribute 가 있습니다. html 위 attribute 가 있는 이유는 보안때문입니다. Intergrity 는 보안과 관련된 속성인데 알약 블로그에 상세히 설명되어 있어 그 내용을 발췌했습니다. JavaScript를 기반으로 한 DDoS 공격 DDoS란 Distributed Denial of Service의 약자로, DoS공격이 발전된 형태입니다. D..
Dev Environment/개발 기타 자료 2016. 10. 20. 09:18

메타(meta)태그 정리

meta 태그 메타태그는 웹 서버와 웹 브라우저간에 상호 교환되는 정보를 정의하는데 사용합니다. HTML 문서의 사이에 입력하는 특수 태그로서 사이트의 디자인에는 전혀 영향을 미치지 않고 문서가 어떤 내용을 담고 있고, 문서의 키워드는 무엇이며, 누가 만들었는지 등의 문서 자체의 특성을 담고 있습니다. 메타태그의 속성 메타태그 속성에는 http-equiv, name, content 3가지 속성이 있습니다. http-equiv="항목명" 웹 브라우저가 서버에 명령을 내리는 속성으로 name 속성을 대신하여 사용될 수 있으며, HTML 문서가 응답 헤더와 함께 웹 서버로부터 웹 브라우저에 전송되었을 때에만 의미를 갖습니다. content="정보값" meta 정보의 내용을 지정합니다. name="정보 이름" ..
Dev Environment/개발 기타 자료 2016. 9. 30. 13:48

알아두면 유용한 IT 용어 및 용어 설명

IT 용어 정리 책이나 API 문서에서 자주 볼 수 있는 용어에 대해 알아보도록 합니다. DRY 원칙 DRY는 Don’t Repeat Yourself(자신을 반복하지 말 것)의 약자다. DIE라고 하기도 한다 : Duplication is Evil.(중복은 악이다.) 이 원칙은 다음과 같다. “모든 지식은 그 자체로 시스템 안에서 유일해야 하고, 모호해선 안 되며, 권위 있게 표현돼야 한다.” 일반적으로 대부분의 어플리케이션은 반복적인 일을 자동화하는 게 목적이다. (일반적으로 컴퓨터가 그렇다.) 이 원칙은 모든 코드에서 유지돼야 한다. 웹 어플리케이션에서조차 마찬가지다. 같은 코드가 어디서도 반복되면 안 된다. 코드를 리팩토링하라 리팩토링한다는[역자 주: refactor는 단순히 고친다는 것을 의미하는..
Dev Environment/개발 기타 자료 2016. 9. 14. 12:42

IT 단어 정리

IT Word 이번 포스팅에서는 책이나 API 문서에서 자주 볼 수 있는 용어에 대해 정리해 봅니다. application - 응용 프로그램argument - 인자 article - 게시물 attribute - 속성 audit - 감사backslash - 역슬래시carriage return , newline - 줄바꿈(문자) case sensitive - 대소문자를 구분하다 certification - 인증서 character set - 문자셋character - 문자collapse - 축소 column - 열confidential - 신용 connection - 접속 constant - 상수constructor - 생성자construct - 구조control structure - 제어 구조 conven..
Dev Environment/개발 기타 자료 2016. 8. 15. 17:41

명세서 읽는 방법

명세서 DTD에 표시된 URI(예: loose.dtd 또는 xhtml1-transitional.dtd)를 내려받아서 명세를 한 번이라도 열어보신 분들이라면 알 수 없는 낯선 문자들에 대한 당혹스러움을 감출 수 없었을 것입니다. HTML/XHTML의 문법 규칙들이 포함되어 있고 브라우저가 이것을 어떻게 해석해야 하는지에 대한 단서가 기록되어 있습니다. 만약 DTD가 없다면 여러분은 요소 안쪽에 어떤 요소가 허용되는지 알 수 없을 것입니다. 요소 안쪽에는 블럭 요소를 허용하지 않지만 예외적으로 HTML 4.01 호환 모드(Transotional) DTD에서 블럭 요소인 요소를 허용합니다. 문법 검사기(HTML Validator)는 DTD를 근거로 문법을 검사하기 때문에 호환 모드에서 요소 안쪽의 를 적법하다..
Dev Environment/개발 기타 자료 2016. 8. 9. 10:25

웹소켓이란?

WebSocket 이 글에서는 브라우저 기반 애플리케이션에 효율적인 양방향 통신을 구현하기 위한 기술인 웹소켓에 대한 개념을 짚어 보도록 합니다. 오랫동안 큰 진전이 없었던 통신 관련 기술이지만 웹소켓의 등장으로 더욱 빠르고 간단한 웹 애플리케이션 개발이 가능해졌습니다. 웹소켓이란? 웹소켓(WebSochet)은 서버와 클라이언트 간의 효율적인 양방향 통신을 실현하기 위한 구조입니다. 최근에는 Gmail 처럼 데이터의 실시간 특성을 중시한 웹 애플리케이션이 많이 등장하여 많은 주목을 받고 있습니다. 자바스크립트의 처리 성능이 크게 개선된 현재, 웹 애플리케이션의 성능면에서 병목 현상이 나타나는 것은 네트워크 통신 부분으로 웹소켓은 실시간 웹을 구현하기 위한 핵심 기술로 기대받고 있습니다. 웹소켓은 매우 단..
Dev Environment/개발 기타 자료 2016. 7. 19. 10:57

프레임워크와 라이브러리의 차이점

Framework Vs Library 프레임워크와 라이브러리의 정확한 차이점은 무엇일까요? 대중 알것 같지만 정확히 어떠한 차이점이 있는지 모르고 있는 경우가 많을지도 모릅니다. 프레임워크는 단지 미리 만들어 둔 반제품이나, 확장해서 사용할 수 있도록 준비된 추상 라이브러리의 집합이 아닙니다. 프레임워크가 어떤 것인지 이해하려면 라이브러리와 프레임워크가 어떻게 다른지 알아야 할 것입니다. 먼저 프레임워크와 라이브러리의 개념에 대해 살펴보고 차이점에 대해 알아보도록 하겠습니다. Framework(프레임워크) 프레임워크는 뼈대나 기반구조를 뜻하고, 제어의 역전 개념이 적용된 대표적인 기술입니다. 소프트웨어에서의 프레임워크는 '소프트웨어의 특정 문제를 해결하기 위해서 상호 협력하는 클래스와 인터페이스의 집합'..
Dev Environment/개발 기타 자료 2016. 7. 7. 07:00

Mobile Gesture(모바일 제스처) 알아보기

Mobile Gesture 이 포스팅에서는 스마트폰에서 사용하는 제스처에 대해 알아봅니다. 먼저 제스처(Gesture)의 사전적 정의는 다음과 같습니다.상징적 기능을 하는 신체적, 음성적, 감정적 동작 또는 표현. 디바이스를 이용함에 있어서 사용자의 동작에 의해 반응할 수 있는 기본 요소. Touch Gestures 위 사전적 정의에서 알 수 있듯, 제스처는 화면을 컨트롤 하는 UI(User Interface・사용자인터페이스)의 기본 요소 중 하나입니다. 사용자는 디바이스 화면을 누르거나, 쓸거나 하는 동작으로 콘텐츠를 이용합니다. 이러한 제스처의 종류로는 Tap(누르기), Double Tap(두 번 누르기), Drag(누른 채 움직임), Flick(빠르게 스크롤), Pinch(두 손가락으로 넓히기/좁히..
Dev Environment/개발 기타 자료 2016. 6. 16. 07:00

Emmet(zen-coding) cheat sheet(에밋 단축어 모음)

Emmet cheat sheet(단축어) 정리에밋은 젠코딩(zencoding)의 업그레이드 버전으로 마크업 및 css 코드 자동완성을 지원해주는 플러그인입니다.사용법은 따로 설명하지 않고 에밋에서 사용하는 유용하고 많이 사용하는 마크업 & CSS 단축어를 정리해 보겠습니다. HTML & CSS Cheat Sheet for Emmet자주 사용하긴 하지만 잊어버리기 쉬운 것들을 위주로 정리해 보고 유추할 만한 단축어들은 생략하도록 하겠습니다.마크업 단축어외의 단축어인 css에 관련된 cheat sheet는 css 파일에서 사용가능합니다. html:xt html:xs 위와 같은 타입으로 xhtml strict mode 가 정의됩니다. html:5 html5 doctype 이 정의됩니다. link:css lin..
Dev Environment/개발 기타 자료 2016. 5. 17. 15:36

모바일 접근성 - Mobile accessibility

모바일 앱 접근성 지침(행안부 고시, 2011)제 1조. 목적"국가정보화기본법" 제32조 제5항 모바일 애플리케이션 서비스 제공자가 장애인과 고령자 등의 접근성을 보장하기 위해 애플리케이션 제작시 지켜야 할 사항을 규정 적용대상공공기관에서 개발, 제공하는 모바일 앱 서비스Mobile Devicesmobile phones with mobile OSTablets with mobile OSeBooks모든 범용 모바일 OS가 대상 강제 조항대체 텍스트초점의 제공운영체제 접근성 지원누르기(Touch) 동작 지원색에 무관한 인식명도 대비자막(caption) 제공 대체텍스트(Alternative Text)텍스트 아닌 콘텐츠는 대체 가능한 텍스트와 함께 제공되어야 한다.대체 텍스트란 그림 및 이미지, 동영상으로 작성된..
Dev Environment/개발 기타 자료 2016. 5. 11. 13:26

Web Accessibility(웹 접근성)

웹 접근성이란? 장애인, 고령자 등을 포함한 다양한 사용자가 인터넷 상에서 차별없이 일반 사용자와 동등하게 정보에 접근하고 이용할 수 있도록 보장하는 것을 말합니다. 웹 접근성 준수의 필요성다양한 사용자에게 동등한 정보접근권 제공 필요웹 접근성 준수는 장애인 및 고령자등 정보 접근 취약자에게 정보격차를 해소시켜 주고, 나아가 누구나 손쉽게 웹을 활용할 수 있고 정보를 얻을 수 있는 기회를 제공할 수 있습니다. 법적 요구사항에 대한 준수웹 접근성 보장은 국가법령에 따라 "국가정보화 기본법", "장애인 차별금지법" 으로 제정되었으며, 이에 따라 선택이 아닌 지켜야 할 필수사항입니다. 한국형 웹 컨텐츠 접근성 지침 2.0 접근성 지침은 원칙 4개, 지침 13개, 지표(22개 체크리스트)로 구성되어 있습니다. ..
Dev Environment/개발 기타 자료 2016. 4. 28. 19:39

Reflow or Repaint(or ReDraw)과정 설명 및 최적화 방법

Reflow or Repaint(or ReDraw)과정 설명 및 최적화 방법 리플로우와 리페인팅에 대해 알아봅니다. Reflow 발생 생성된 DOM 노드의 레이아웃 수치(너비, 높이, 위치 등) 변경 시 영향 받은 모든 노드의(자신, 자식, 부모, 조상(결국 모든 노드) ) 수치를 다시 계산하여(Recalculate), 렌더 트리를 재생성하는 과정이며 또한, Reflow 과정이 끝난 후 재 생성된 렌더 트리를 다시 그리게 되는데 이 과정을 Repaint 라 합니다. Reflow 발생 코드 JavaScript function reFlow() { document.getElementById('container').style.width = '600px'; return false; } Reflow 발생 그래프 그..
Dev Environment/개발 기타 자료 2016. 3. 21. 07:00

브라우저 호환성 대응 방안

Browser Compatibility - 브라우저 호환성 대응 방안PC/모바일에서 사용하는 브라우저가 다양하고 각각의 레이아웃 엔진, Javascript 엔진이 다르고 지원하는 기능 범위도 차이가 있습니다. 부분적인 기능이지만 참고 http://html5test.com/compare/browser/chrome-37/firefox-32/ie-11/ie-8.html 그로 인해 개발과 검수하는 단계에서 현재 진행하고 있는 프로젝트가 고객들이 사용하는 주요 브라우저에서 잘 서비스되는지 검토해야 합니다. 아래는 검토 시 필요한 내용들을 정리하였습니다. 브라우저 호환성 대응 기준 호환성 대응 방법을 얘기하기 전에 어떤 범위까지 지원할지 정리가 필요합니다 아래는 체크가 필요한 방향과 기준에 대해서만 작성하였습니다...
Dev Environment/개발 기타 자료 2016. 1. 28. 08:33

Front-end Developer

Front-end Developer 에 대해서 프론트-엔드 개발자로서 요구되는 능력 위키피디아에 정의된 Front-end Developer 정의 프론트-엔트 개발자가 고려해야 할 목표 접근성(Accessibility)사용성(Usability)성능 향상(Performance) 프론트-엔드 개발자에게 요구되는 테크닉 가이드라인접근성검색 엔진 최적화(SEO)UX 사용성 모델 웹 언어HTMLCSSJavaScript 라이브러리JQueryUnderscoreModernizr기타 등등... 이미지 편집Phtoshop 프리프로세싱 & 컴파일러CSSSassLessstylus JSCoffeeScriptTypeScript기타 등등.. 모듈 관리RequireJSBrowerify 업무 관리 도구(자동화 빌드시스템)GulpGrun..
Dev Environment/개발 기타 자료 2015. 12. 30. 10:52