레이블이 method인 게시물을 표시합니다. 모든 게시물 표시
레이블이 method인 게시물을 표시합니다. 모든 게시물 표시

2014년 9월 14일 일요일

[links] DevOps, NoOps

DevOps라는 단어가 많이 눈에 띄길래 찾아봄.
2010년 경에 많이 사용된것 같고 2012년에 DevOps vs NoOps 의 논쟁이 있었던 것으로 보이고 워낙 관련 글들이 많아서 내용은 정리하지 않고 링크만 정리함.

그냥 보면서 처음 들었던 생각은
"나는 mobile side 개발을 하고 릴리즈와는 거리가 있는지라 상관없는 얘기네?"이었지만
곰곰히 생각해보면 개발만 하고 생까는 개발 조직과 결과물을 받아서 운영하는 팀간의 협업 문제점을 해결하고자 나온 문화니 소프트웨어 개발을 하는 입장이라면 누구나 해당되는 얘기이다. 좀 더 나아가 애자일 방법론의 철학과도 일부 연관이 있으니 함께 보고 생각해 두는 것이 좋을 것 같다.

하지만 개념이 제대로 정립되지 않아 운영의 모든 일들이 몰아지거나 프로젝트 자체가 더이상 개발 task가 사라지고 그냥 운영 task만 남을 경우는 어떻게 될지 좀 궁금함.


DevOps와 NoOps에 대하여, 하호진님
: http://www.mimul.com/pebble/default/2012/05/01/1335849442107.html

개념부터 논란에 까지 잘 정리한 글이라 한번 읽어보면 깔끔하게 이해된다.
그리고 아래 조대협님의 글은 좀 더 풀어서 상세히 설명한 글이다.

개발과 운영의 조화 - Devops, 조대협님
: http://bcho.tistory.com/815
: http://bcho.tistory.com/817

DevOps 적용을 위한 10가지 실행방안 정리 (방안만 정리되어 있음)
: https://www.software.kr/mbs/swkr/jsp/board/view.jsp?spage=1&boardId=183&boardSeq=3050787&mcategoryId=&id=swkr_040500000000

DevOps cluture
: https://www.ibm.com/developerworks/community/blogs/c914709e-8097-4537-92ef-8982fc416138/entry/the_devops_culture?lang=en


What is DevOps
: http://radar.oreilly.com/2012/06/what-is-devops.html
: (번역, 질은 그닥) http://www.hanbit.co.kr/network/view.html?bi_id=1831
제목을 보면 DevOps에 대한 얘기같지만 실제로는 역사를 되돌아보며 NoOps에 반론을 제기하는 글이고 아래 마지막 문구가 다 대답해주는 것 같다.

And what about NoOps? Ultimately, it’s a bad name, but the name doesn’t really matter. A group practicing “NoOps” successfully hasn’t banished operations. It’s just moved operations elsewhere and called it something else.

DevOps팀으로써 1년, Seongsiks 님
: http://devopser.me/belongs-to-devops%20-team/
국내에서 초창기 DevOps 팀으로 1년을 보내신 감회를 적어 놓은 포스팅...


시간: 댓글 없음:
라벨: , , , ,

2013년 12월 17일 화요일

jQuery study 정리, selector, 주요 method, event

이전 블로그에서 이전 함 (원본 글 2013/12/17 작성)

jQuery, a fast, small, and feature-rich JavaScript library.

 
 jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. With a combination of versatility and extensibility, jQuery has changed the way that millions of people write JavaScript.

jQuery 에 대해서 잘 소개한 블로그 post

일반 JavaScript 코드와 jQuery를 사용한 JavaScript 코드
style만 보라고 넣어 둔거고 사실 아래 처럼 간단한 코드는 일반 javascript로 해결하기에 간단하지만 다수 element들의 조작, 검색, 변경에 대해서는 jQuery가 훨 편하다.

 <!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
<script type="text/javascript">
window.onload = function() {

var elem = document.querySelector("#hello");
alert(elem.textContent);
console.log(elem.textContent);
};
</script>
</head>
<body>
<h1 id="hello">Hello World</h1>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
<script
src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('h1').on({
click : function() {
alert($(this).text());
console.log($(this).text());
}
});
});
</script>
</head>
<body>
<h1>Hello World</h1>
</body>
</html>


* jQuery 의 메서드르 사용하기 위해서는 jQuery 객체이어야 한다. 자바스크립트 객체를 jQuery 객체로 바꾸려면


[간단 비교 정리]


JavaScript
jQuery 사용 
 DOM element 선택
 document.getElementById()
document.querySelector("selector")
$("selector")
$("selector", context) 
Event 
Object.onXXX = function(event) {}
Object.addEventListener("event", callback)
 $Object.on("event_name", function() {}
$Object.click(function() {})
 DOM 로드 후 실행
(function() {}) ();
window.onload = function() {}
script tag 에 defer 속성 추가 
 $(function() {});
 속성 변경
대부분 속성으로 정의 되어 있음. 
대부분 함수 형태로 되어 있어 method chain으로 사용 가능 

* jQuery 메서드를 사용하기 위해서는 jQuery 객체여야 한다. 자바스크립트 객체를 jQuery 객체로 바꾸려면 $(Javascript_object) 로 변환 할 수 있음.


[jQuery Selectors]

- 전역선택자 : $("*")
 - 태그 선택자 : $("tag_name")
 - 아이디 선택자 : $("#id_value")
 - 클래스 선택자 : $(".class_value")
 - 자손 선택자 : $("parent > a_child")
 - 후손 선택자 : $("parent all_childs")
 - 속성 선택자 :  [속성=값]   |, ~, ^, $, *
 - 가상클래스선택자 : $(:button)

   : 자세한 설명과 소스코드는 아래 링크 참고 
 http://learn.jquery.com/using-jquery-core/selecting-elements/ 


[DOM element 관련 주요 jQuery 메서드]

 - 엘리먼트의 값 관련 메서드
  . html(), text()
  . val() : form tag들에 입력되거나 선택된 값들 

 - 속성 관련 메서드
  . attr(속성이름) : 속성의 값을 반환
  . attr(속성, 값) : 속성의 값을 지정
  . removeAttr(속성이름) : 속성 자체를 지운다

 - Javascript 속성 과 jQuery의 메서드 비교
  . innerHTML -> html()
 . textContent -> text()
 . value -> val()
 . AJAX -> ajax(), get(), post()
 . 스타일 변경  -> css()

 . each() : 배열 관리
   $.each(object, function(index, item){ } )
   $("selector").each(function(index, item){ })

http://api.jquery.com/jQuery.each/
 If an object is used as the collection, the callback is passed a key-value pair each time:
1
2
3
4
5
6
7



var obj = {







  "flammable": "inflammable",







  "duh": "no duh"







};







$.each( obj, function( key, value ) {







  alert( key + ": " + value );







});
Once again, this produces two messages:
flammable: inflammable 
duh: no duh

 Suppose you have a simple unordered list on the page:
1
2
3
4



<ul>







  <li>foo</li>







  <li>bar</li>







</ul>
You can select the list items and iterate across them:
1
2
3



$( "li" ).each(function( index ) {







  console.log( index + ": " + $( this ).text() );







});
A message is thus logged for each item in the list:
0: foo 
1: bar

* 기존 JavaScript 객체들에 대해서 사용하던 for( var key in item) 는 사용 못할 수도 있다.

: 자세한 설명은 아래 링크 참조 
http://learn.jquery.com/using-jquery-core/iterating/



[객체 탐색]

- filter() : 조건에 맞는 객체 선택
  . $("h3:even").css
  . $("h3").filter(":even").css
  . $("h3").filter(function(index) {
        return index %  3 == 0;
       });

- end() : 문서 객체 탐색 종료
  . $("h1").css("background", "orange").filter(":even").css("color", "red").filter(":odd"); 
   => filter 사용 시 전체 결과가 리턴되는 것이 아니라 filter된 element들만 리턴되어 의도대로 처리되지 않는다. 이를 해결하기 위해서는 아래와 같이 메서드 체이닝을 분리해서 처리하던가
    
    $("h1").css("background", "orange");
    $("h1:even).css("color", "white");
    $("h1:odd).css("color", "red");

   end() 메서드를 사용하여 filter전 element들을 대상으로 처리하도록 해야 함.
    $("h1").css("background", "orange").filter(":even").css("color", "white").end().filter(":odd").css("color", "red");


 - eq(), first(), last() : 조건에 맞는 객체 선택
  . $("h1:frist").css()
  . $("h1").first().css()

 - is() : true/false , 인자로 넣은 선택자 인지 아닌지
  . $("h1").each(function() {
      if($(this).is('.selected')) {
          //현재 실행되는 엘리먼트에 selected라는 클래스 속성이 있으면 실행하는 코드
        }
      }

 - find() 특정 엘리먼트를 찾아준다.


[Event]

 - event를 등록하는데는 특정 이벤트에 해당되는 메서드를 사용하거나 on 메서드를 사용해서 등록하거나 할 수 있으며 on 메서드는 필요에 따라 여러 event를 한번에 등록 가능.

  ex) <input type="button" value="확인">

  $("input").on("click", function(event) {
      //클릭됐을 경우 실행할 문장
  });

  $("input").click(function(event) {
      //클릭됐을 경우 실행할 문장
  }); 

http://learn.jquery.com/events/event-basics/

1
2
3
4



// Event setup using a convenience method







$( "p" ).click(function() {







    console.log( "You clicked a paragraph!" );







});
1
2
3
4



// Equivalent event setup using the `.on()` method







$( "p" ).on( "click", function() {







    console.log( "click" );







});

 <!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
<style type="text/css">
.reverse {
           background: black;
           color: white;
}
</style>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript">
$(function() {
           $("h1").on({
                     click: function() {
                                console.log($(this).text());
                     },
                     mouseenter: function() {
                                $(this).addClass("reverse");
                     },
                     mouseleave: function() {
                                $(this).removeClass("reverse");
                     }
           });
});
</script>
</head>
<body>
<H1>event - 1</H1>
<H1>event - 2</H1>
<H1>event - 3</H1>
</body>
</html>


 - 이벤트 관련 메서드들이 많이 제공된다.
   . blur(), focus(), load(), click(), mousedown(), submit(), keydown(), ready()

 - 이벤트 제거 : off()
    이벤트를 한번만 실행 : one()



1
2
3
4
5
6
7



// Switching handlers using the `.one()` method







$( "p" ).one( "click", function() {







    console.log( "You just clicked this for the first time!" );







    $( this ).click(function() {







        console.log( "You have clicked this before!" );







    });







});


1
2



// Unbinding all click handlers on a selection







$( "p" ).off( "click" );
1
2
3
4
5
6
7
8
9
10
11
12
13



// Unbinding a particular click handler, using a reference to the function







var foo = function() {







    console.log( "foo" );







};







 







var bar = function() {







    console.log( "bar" );







};







 







$( "p" ).on( "click", foo ).on( "click", bar );







 







// foo will stay bound to the click event







$( "p" ).off( "click", bar );

시간: 댓글 없음:
라벨: , , ,
피드 구독하기: 글 (Atom)