커빙의 Django, Celery, Azure Cloud, SNS 연동, 컨텐츠 수집 기술을 한눈에 볼 수 있도록 소개한 자료 입니다.
커빙을 처음 개발하면서 많은 어려움이 있었고,
또 많은 분들의 도움으로 좋은 결과를 얻을 수 있었습니다.
조금 더 깊은 내용을 다뤘으면 하는 아쉬움이 있지만,
다른 분들에게 조금이나마 도움이 되었으면 좋겠네요!
커빙의 Django, Celery, Azure Cloud, SNS 연동, 컨텐츠 수집 기술을 한눈에 볼 수 있도록 소개한 자료 입니다.
커빙을 처음 개발하면서 많은 어려움이 있었고,
또 많은 분들의 도움으로 좋은 결과를 얻을 수 있었습니다.
조금 더 깊은 내용을 다뤘으면 하는 아쉬움이 있지만,
다른 분들에게 조금이나마 도움이 되었으면 좋겠네요!
입사 예정인 회사의 과제 테스트에서 제출한 자바스크립트 라이브러리입니다.
그냥 두기에는 아까워서 이렇게 공유드립니다.
본 라이브러리는 DOM Selector, Manipulation, Event 등의 기능을 제공합니다.
사용 방법은 jQuery와 동일하며, 관련 설명은 아래 프레젠테이션을 참고하시면 됩니다.
[본문] - http://youngman.kr/?p=1432
[데모] - http://test.youngman.kr/script/exam/core/
XE 오픈 세미나(2014-06-28) - (1/3) 레이아웃 제작 기본XpressEngine
XE 오픈 세미나 - 2014-06-28
XE 레이아웃 제작 노하우 - 고진화
이 발표자료 내용은 오프라인 강의 때 구체적인 설명을 위한 키포인트 정도로 작성된 것이니 자세한 설명이나 궁금하신 사항은 고진화 강사님에게(http://cameron.co.kr) 문의하시기 바랍니다.
입사 예정인 회사의 과제 테스트에서 제출한 자바스크립트 라이브러리입니다.
그냥 두기에는 아까워서 이렇게 공유드립니다.
본 라이브러리는 DOM Selector, Manipulation, Event 등의 기능을 제공합니다.
사용 방법은 jQuery와 동일하며, 관련 설명은 아래 프레젠테이션을 참고하시면 됩니다.
[본문] - http://youngman.kr/?p=1432
[데모] - http://test.youngman.kr/script/exam/core/
XE 오픈 세미나(2014-06-28) - (1/3) 레이아웃 제작 기본XpressEngine
XE 오픈 세미나 - 2014-06-28
XE 레이아웃 제작 노하우 - 고진화
이 발표자료 내용은 오프라인 강의 때 구체적인 설명을 위한 키포인트 정도로 작성된 것이니 자세한 설명이나 궁금하신 사항은 고진화 강사님에게(http://cameron.co.kr) 문의하시기 바랍니다.
알아봅시다, Polymer: Web Components & Web AnimationsChang W. Doh
GDG Korea WebTech : 시작하세요, Polymer, Oct, 11, 2014.
Let's learn about specifications before diving into Polymer:
- Web Components
- Web Animations
This slide includes resources from HTML5Rocks, Polymer and PolyTechnic.
This document provides a summary of MongoDB update operations:
1. The $set, $unset, $inc, $push, $addToSet, $pop, $pull and $rename operators allow modifying documents in the MongoDB database without replacing the entire document.
2. The $ operator allows modifying sub-documents or array elements within a document. For example, the $inc operator can increment a field within an embedded document.
3. The findAndModify command provides an atomic find-and-update or find-and-remove operation that is useful for tasks like queue processing.
The document describes different data structures and algorithms for representing and traversing linked data structures in memory. It discusses singly linked lists, doubly linked lists, trees, and graphs. It presents pseudocode for algorithms to traverse nodes by (1) recursively exploring all links, (2) using a stack to iteratively explore links in depth-first order, and (3) using a circular buffer and pointers to explore links in breadth-first order.
This document discusses tree data structures and binary trees. It contains the following information:
- Binary trees are a type of tree data structure where each node has at most two children, described as left and right. Nodes without children are called leaves and nodes with children are branch nodes.
- The level of a node is the number of edges from that node to the root node. For example, the root node is at level 0.
- Two binary trees are equal if they have the same structure and corresponding nodes contain the same data.
- Examples of binary trees are given to illustrate tree structure and traversal algorithms like depth-first and breadth-first search. Notation for representing trees with parentheses is also
1) This document discusses calculating Fibonacci numbers using a closed-form formula and taking the limit as n approaches infinity. It derives the formulas Fn = φn/√5 and ln(φ1000/5) = 1000lnφ - ln5/2.
2) It then calculates the value of φ to high precision and uses the formulas to find the limit of Fn as n approaches infinity, which is approximately 209.
3) Additional comments provide context that this relates to efficiently calculating Fibonacci numbers using memoization and discuss applications in computer science.
The document discusses the differences between object-oriented programming (OOP) patterns and Gang of Four (GoF) design patterns. It provides examples of GoF patterns like Observer, Strategy, and Decorator and explains that GoF patterns are commonly used design patterns for object-oriented software design. The document encourages learning about GoF patterns to improve one's object-oriented programming skills.
4. 그래서?
새로운 폼 필드 타입
자동 포커스, 힌트 텍스트
contenteditable으로 HTML 요소를 입력 필드
로
5. HTML5의 새로운 입력 폼
기본적인 폼
<form method="post" action="/projects/1">
<fieldset id="personal_information">
<legend>프로젝트 정보</legend>
<ol>
<li>
<label for="name">이름</label>
<input type="text" name="name" autofocus="autofocus" id="name">
</li>
<li>
<input type="submit" value="Submit">
</li>
</ol>
</legend>
</fieldset>
</form>
ol : order list
li : list item
label(for) : 접근성(id값 참조)
13. 새로운 타입을 지원하지 않을때..
이해하지 못하는 브라우저는 단순 텍스트 필드로...
jQuery UI나 YUI(야후UI) 사용해서 텍스트 필드와 연
결
나중에.. 브라우저가 지원하면 자바스크립트를 제거하
는 꿈을... 꾸어본다...
14. 색상 선택기 교체(1)
jQuery와 CSS3속성 선택자를 이용 색상 필드
를 찾아서 교체
color 타입의 input요소를 찾아, jQuery플러그
인 simpleColor를 적용
if (!hasColorSupport()){
$('input[type=color]').simpleColor();
}
15. 색상 선택기 교체(2)
브라우저 자체에서 color타입을 지원한다면..
function hasColorSupport(){
input = document.createElement("input");
input.setAttribute("type", "color"); 브라우저 지원 체크
var hasColorType = (input.type !== "text");
if(hasColorType){
var testString = "foo";
input.value=testString; 브라우저 완벽지원 체크
hasColorType = (input.value != testString);
}
return(hasColorType);
}
if (!hasColorSupport()){
$('input[type=color]').simpleColor();
}
16. jQuery
$ == jQuery
$('input[type=color]').simpleColor();
||
jQuery('input[type=color]').simpleColor();
jQuery와 CSS3속성 선택자를 이용 색상 필드를 찾아서 교체
18. autofocus 자동 포커스 이동
페이지 하나에 autofocus 속성 하나만 가능
<label for="name">이름</label>
<input type="text" name="name" autofocus="autofocus" id="name">
지원되지 않을때(jQurey)
if(!hasAutofocus()){
$('input[autofocus=autofocus]').focus();
}
22. contenteditable
contenteditable을 이용한 즉석 편집
데이터 입력 부분을 자동으로 처리
텍스트영역을 감지해서 텍스트 필드로 바꾸는 작업 안해도
됨 <b>Name</b>
<span id="name" contenteditable="true">Hugh Mann</span>
데모
23. 데이터 유지
새로고침하면 내역이 사라짐
바꾼 내용을 서버로 전송
<b>Name</b>
<span id="name" contenteditable="true">Hugh Mann</span>
$(function(){
var status = $("#status");
$("span[contenteditable=true]").blur(function(){
var field = $(this).attr("id");
var value = $(this).text();
$.post("http://localhost:4567/users/1",
field + "=" + value,
function(data){
status.text(data); 서버에서 받은 데이터
}
);
});
});
contenteditable 속성이 true로 설정된
모든 span 요소에 이벤트 핸들러를 연결(jQuery.blur)
24. 지원되지 않을때..
편집 페이지를 만들어라
자바스크립트 차단 + HTML5 지원 X
감지 기능 추가
if(document.getElementById("edit_profile_link").contentEditable != null){
$("#edit_profile_link").hide();
...