banana like sunshine RSS FEED

알고 보면 간단한 팁이지만, 원스텝으로 이용자 확인 받고 다른 링크로 넘어가는 과정을 보여드리겠습니다.

당연히 다른 페이지로 넘어가는 데에는 a tag을 이용합니다.

여기에 onclick event를 설정해서 이용자 input을 받는 거지요.

예를 들어, delete.php로 이동하기 전에 삭제 확인을 받으려면 다음과 같이 합니다.

삭제

node 자체를 upgrade 해주어야 할 경우가 있습니다.

이럴 때에는 shell에서 다음과 같이 해줍니다 :

sudo npm cache clean -f
sudo npm install -g n
sudo n stable
node -v

2번 라인은 npm을 이용, n이라는 패키지를 설치합니다. 응? node를 update하는데 또 n 이라는 거를 깔아야 해?

물론 node package 자체를 새로 다운받는 것도 방법이지만, n은 일종의 helper package라고 보시면 됩니다.

그냥 쉘에서 바로 업그레이드가 되니 훨씬 편하지요.

3번 라인이 실제로 stable version을 설치하는 명령이고,

4번은 새 버전이 잘 설치되었는지 확인해보는 겁니다.

이제 한참 NetBeans 가지고 AngularJS app 만드는 데 익숙해지고 있는데, 서버와 통신하는 부분 테스트하면서 고민이 되었습니다. CORS 이슈(요청하는 클라이언트와 서버가 다른 도메인이면 javascript에서 이를 허용하지 않지요) 때문에 데스크탑에서 테스팅하면서 작업하는데 한계가 생겼습니다. 그렇다고 서버 설정을 바꾸기도 좀 난감한 상황이었고.. 작업하는 데스크탑에 웹서버며 데이터베이스 등등을 얹기도 애매하고 했습니다. 

잠시 구글링을 해보니.. Chrome 브라우저에서는 꼼수로 이를 회피할 수 있는 방법이 있네요.

open -a Google\ Chrome --args --disable-web-security

이렇게 보안을 비활성화 시켜서 크롬을 실행시키면 됩니다.

물론 좋은 방법은 아니지만 작업환경을 풀로 세팅하기 어려운 상황에서 테스팅 용도로는 잘 사용할 수 있을 것 같습니다. 

아, 위 command는 Mac OSX 용입니다. 윈도용도.. 아마 있겠지요;;

UPDATE 09/15/2014 : 그러면 아래 그림처럼 경고창이 뜬 상태로 크롬이 실행됩니다. 보안과 편의성을 맞바꾼 거라 생각하시면 됩니다. 어차피 테스트용으로만 하니까.. 크롬은 NetBeans에서 바로 디버깅하면서 작업할 수 있으니까 크롬은 이 용도로 보안을 끄고 이용하고, 동시에 다른 웹 이용이 필요하면 Safari나 Firefox 켜놓고 작업을 하면 되니까 괜찮을거라 생각됩니다.

며칠째 angularJS 자료를 찾아보다 개발과정을 한눈에 딱 볼 수 있는 글이 있어 소개차(잊어먹지 않도록) 포스팅합니다. 글쓴이는 Matt Raible씨라고.. AngularJS 관련 자료 찾아보다 보면 동영상 강의나 프리젠테이션으로 많이 볼 수 있는 개발자입니다. 읽다 보면 삽질(?)한 이야기까지 써있어서.. 꽤 재미있습니다. ^^

1. Developing with AngularJS - Part I: The Basics
2. Developing with AngularJS - Part II: Dialogs and Data
3. Developing with AngularJS - Part III: Services
4. Developing with AngularJS - Part IV: Making it Pop

간단한 팁 정리.. 

간혹 다른 사이트 코드를 보다 보면 폼 요소 검사를 하면서 form.action을 수정한 후 form.submit()을 하는 경우가 있다. 

차라리 이럴 때는 예전 방식대로 처리하는게 더 간단한 것 같다.

<form ... onsubmit="return checkForm();">

<script>

function checkForm() {

... code here ...

return false;

}

해버리면 submit되기 전에 원하는 validation을 할 수 있다.

소스 코드는 조금 수정 예정..

    $('.btnLikeComment').click(function() {
        // 함수 내용        
    });	    

이렇게 바인딩을 설정해놓았는데, 해당 클래스가 있는 부분을 ajax call을 통해서 내용 변경 후에는 바인딩이 풀린다고 해야 하나.. 실행이 안되는 경우가 생겼습니다. 구글링을 하다 보니, 단순히 $('.btnLikeComment').click(function() { 이렇게 하면 해당 시점에 생성된 요소들에 대해서만 바인딩이 되는 거네요. 동적으로 생성되는 클래스에 대해서 바인딩 설정을 하려면 아래와 같이 $(document).on('click', '.btnLikeComment', function ... 이렇게 on()을 이용하면 document 자체에 바인딩이 되어 버리기 때문에 이후에 동적으로 추가되더라도 처음에 바인딩한 것과 같은 효과가 된다고 합니다. 

    $(document).on('click', '.btnLikeComment', function(event) {
        // 함수 내용        
    });	    

.on()을 사용하는게 점점 유행이 되는건가 하고 생각없이 많이 이용하던 것이었는데, 그렇게 단순한 문제는 아니었네요.

옛날에 누가 작업해 놓으신 페이지를 건드리다가.. 아래와 같이 수정을 했는데 생긴 문제입니다.

<a href="javascript:window.open('/home/test.php');">test</a>

위와 같이 자바스크립트를 이용해서 링크를 클릭하면 새 창이 열리도록 코드를 바꾸었는데, 크롬이나 파이어폭스에서는 별 문제 없이 열리는데, 유독 IE에서는 새 창이 열리고 부모 창은 덜렁 [object]라고만 떠 버리는 황당한 상황이 발생하였습니다. 

'이게 뭥미' 하고 이것 저것 하다 보니.. 

새 창을 열고 돌아오는 창 객체 때문에 발생하는 문제였습니다. 

보통 

myWin = window.open(url) 

이런 식으로 하고 처리하는데.. 위처럼 간단하게 인라인으로 처리한다고 해놓으니 리턴값이 부모창에 표시되는 문제였더군요.

이렇게 a tag안에 javascript를 넣어주면 스크립트 실행값이 평가되어 남게됩니다. 하지만, 크롬이나 파이어폭스에서는 [object]로 돌아오면 표시를 안해주지만, IE에서는 이를 표시해주도록 되어 있는 것 같습니다. 

그래서 뒤에 void(0)을 붙여주니 정상적으로 원래 페이지에 남아 있게 되네요.

<a href="javascript:window.open('/home/test.php'); void(0)">test</a>

하여튼 IE의 세계는 예측불허라.. 꼭 롹인을 해보아야 하게 만드네요.

다른 좋은 방법이 있으면 알려주십시오. ^^