reactjs 

just the ui

virtual dom

data flow

jsx : xml과 비슷한 js확장문법. react를 위해 꼭 사용할 필요는 없지만 추천. attr를 가진 트리구조로 정의가능한 익숙한 문법이기 때문. 

flux : facebook에서 client-side-web-application을 만들기 위해 사용하는 어플리케이션 아키텍쳐.

핵심 세가지 : dispatcher(흐름관리), stores, view



dispatcher : 데이터 흐름관리, store의 콜백 등록하고 action과 store에 배분해주는 간단한 작동. 

stores : 어플리케이션의 상태와 로직 포함, 전통 mvc모델과 비슷하지만, 어플리케이션내의 개별적인 도메인에서 어플리케이션의 상태를 관리 

view :  읽어봤는데 잘 모르겠음 sencha touch가 생각남. (관련글 : http://funnygangstar.tistory.com/entry/%ED%95%98%EC%9D%B4%EB%B8%8C%EB%A6%AC%EB%93%9C-%EB%A0%8C%EB%8D%94%EB%A7%81-%EC%A0%84%EB%9E%B5-%E2%80%93-%EB%91%90-%EB%B2%88%EC%A7%B8-%EC%9D%B4%EC%95%BC%EA%B8%B0-React-Backbone)



http://haruair.github.io/flux/docs/todo-list.html(번역본 : http://haruair.github.io/flux/docs/overview.html#content)




이거엔 몇가지 방법이 있다

예전엔 스크립트를 많이 썼었는데...

css만으로도 됨!


<!DOCTYPE html>

<html>

<head>

  <meta charset="utf-8">

  <title>JS Bin</title>

  <style>

    .layer {

      position: absolute;

 left: 0;

 top: 0;

 right: 0;

 bottom: 0;

 width: 150px;

 height: 150px;

 margin: auto; 

      background:red;

    }

  </style>

</head>

<body>

<div class="layer">

</div>

</body>

</html>



<!DOCTYPE html>

<html>

<head>

<script src="//code.jquery.com/jquery-1.9.1.min.js"></script>

  <meta charset="utf-8">

  <title>JS Bin</title>

  <script>

    function event1() {

      alert("a");

      $("#a").prop("disabled", true);

   }

  </script>

</head>

<body>

  <button type="button" onclick="event1()" id="a">클릭행</button>

</body>

</html>


버튼 클릭한담에 바로 disable을 주면 됨

끝.






+ Recent posts