본문 바로가기

Language

[React Native] React Native 시작하기 (iOS) React Native를 이용해서 iOS, Android 앱을 동시에 개발하려고 합니다.그전에 React Native를 어떻게 설치하고 실행하는지 알아보도록 하겠습니다.설치환경이글을 쓰는 현재 React Native는 0.43 버전입니다.Mac에서는 iOS, Android가 동시에 개발가능하므로 가지고 있는 Mac air(Sierra 10.12.3)에 설치하도록 하겠습니다.Node.js, Watchman 설치Mac의 패키지 관리툴인 Homebrew를 사용하여 Node.js와 Watchman을 설치하도록 하겠습니다.# brew install node# brew install watchmanWatchman은 Facebook에서 개발한 파일시스템 변화감지툴입니다. 추후 동적빌드 등에 성능을 위해 설치를 권장합.. 더보기
[React JS] React JS 시작하기 준비하기React를 사용하기 위해서는 일단 Node.js가 설치되어있어야 합니다. 그냥 쓸려고 했는데...그냥 로 쓰기에는 잘 안됩니다. Node.js를 설치하고 npm을 이용하는 것이 속편합니다.기본 프로젝트 생성하기create-react-app이라는 것을 제공합니다. 다음과 같이 설치 및 실행하시면 됩니다.// create-react-app 설치$ npm install -g create-react-app// 샘플 프로젝트 생성$ create-react-app helloworld// 샘플 프로젝트 이동 후 실행$ cd helloworld$ npm start 다음과 같이 실행되어 접속할 수 있습니다.배포하기소스만 가진채로 배포할순 없겠죠? 다음 명령을 실행하면 배포가 가능한 형태로 변경을 해줍니다.$ n.. 더보기
[JavaScript] Chrome(또는 IE)에서 뒤로가기 버튼 방지하기 뒤로가기 버튼막기 웹 프로젝트를 하다보면 가끔 Back버튼을 막아야 할 때가 있다. Chrome의 경우에는 Backspace 버튼을 막아놓은 상태이기도 하다. Backspace 방지 먼저 Backspace의 경우에는 keydown 또는 onkeydown에서 입력에 관련된 필드를 제외한 나머지에서 preventDefault를 이용하여 이벤트를 방지하는 방법으로 처리하면 된다. // 뒤로가기 버튼 방지 var killBackSpace = function(e) { e = e ? e : window.event; var t = e.target ? e.target : e.srcElement ? e.srcElement : null; if(t && t.tagName && (t.type && /(password)|(te.. 더보기
[JavaScript] jQuery-UI의 Dialog에 Button Class 지정 What?jQuery-UI의 Dialog를 이용하여 Confirm 등의 메시지박스를 사용할 때 버튼에 별도 Class를 지정해줘야하는 경우가 있다. 그럴때에는 create라는 속성을 이용하여 해당 Button을 찾아서 addClass 처리를 하면 된다.How? $('div').dialog({ modal : true , buttons : dialogButtons , create : function() { $(this).closest('.ui-dialog').find('.ui-dialog-buttonset .ui-button:not(:first)') .addClass('subbutton'); } });Tips일반적으로 find할 때 ".ui-dialog-buttonset"을 제외해도 되는데, 나의 경우에는 .. 더보기
[WebSocket] Spring 4를 이용한 WebSocket 구현하기 HTTP 환경에서 client-server간의 상호작용을 위한 WebSocket 기능이 있습니다. Spring 4에서 해당 기능을 지원하며 다음과 같은 절차로 사용할 수 있습니다. 작업 환경 SpringFramework 4.0.4-RELEASE Tomcat 7.0.54 Maven Spring MVC로 구성된 프로젝트 구성 절차 1. Maven의 종속성 설정하기 org.springframework spring-websocket ${spring.version} spring-websocket 을 추가합니다. 2. websocket에 대한 핸들러를 등록합니다. 이때 Client에서 접속할 Path를 지정하고 해당 Path에서 들어오는 WebSocket 요청을 처리할 클래스를 등록합니다. 여기서는 “/echo”로.. 더보기
[XStream] XML 파싱할 때 언더바(_)가 2개 생기는 문제점 해결방법 XStream을 이용해서 XML 파싱을 하고 다시 XML로 원복할 때 언더바”_”가 2개 생기는 문제점이 있습니다. 위 파일을 TestVO로 오브젝트화 시킨뒤 다시 XML로 변환하면 이렇게 언더바가 2개 생기게 됩니다. 해결방법은 XStream 객체를 만들 때 replacer를 함께 등록해주면 되는데, XmlFriendlyNameCoder replacer = new XmlFriendlyNameCoder("__", "_"); XStream xstream = new XStream(new DomDriver("UTF-8", replacer)); XmlFriendlyNameCoder라는 객체를 사용하면 됩니다. 일부 인터넷 검색해보니 XmlFriendlyReplacer 를 사용하라고 되어있는데 현재는 Deprec.. 더보기
[jQuery & jQgrid] 화면 Resize에 따른 jQgrid 갱신 jQgrid를 사용할 때 화면이 변경되면 그리드의 영역도 갱신을 해야 됩니다. 그래서 보통 $(window).bind(‘resize’, function() {~~~~}).trigger(‘resize’); 방식을 많이 쓰게 됩니다. 여기서 문제점은 명확한 갱신 시점이 없기 때문에 약간의 텀을 둬서 그리드 갱신을 할 필요가 있습니다. 검색을 하는 중 멋진 방법이 있어서 같이 공유하고자 합니다. var resizeTimer; var resizeGrid = function() { if (grid = $('.ui-jqgrid-btable:visible')) { grid.each(function(index) { gridId = $(this).attr('id'); gridParentWidth = $('#gbox_' .. 더보기