이든의 생활코딩

체크 박스 전부 체크 / 전부 해제 코드 $("#table1 #checkall").click(function () { if ($("#table1 #checkall").is(':checked')) { $("#table1 input[type=checkbox]").each(function () { $(this).prop("checked", true); }); } else { $("#table1 input[type=checkbox]").each(function () { $(this).prop("checked", false); }); } });

01. 데이터 바인딩AngularJs 공식 홈페이지 Data-bindnig 개념 - https://docs.angularjs.org/guide/databinding AngularJs( 이하 ng ) 에서의 데이터 바인딩 기술은 ng 에서 가장 특징적인 기능 중에 하나 입니다.데이터 바인딩은 모델(데이터) 와 View 컴퍼넌트 사이에 자동 동기화를 해주는 기능입니다.모델 즉 입력된 데이터가 변하면, 화면에 보여지는 View 부분도 바로 변화가 적용됩니다.아래는 데이터 바인딩의 예제 입니다. 입력 창에 데이터를 입력하면 바로 화면에 출력 됩니다이러한 기능은 jquery를 이용해서 이벤트를 등록해서도 구현할 수 있지만, ng를 이용하면 간편하게 구현할 수 있습니다. 02. Dependency Injection..

Node.js 애플리케이션에서 JWT를 이용한 토큰 인증을 구현해보려고 합니다!!토큰 인증 절차는 다음과 같습니다.사용자가 로그인을 진행할 때! 사용자 정보로 토큰 정보를 생성하여 저장하고, 이 토큰을 이용하여, 사용자 인증을 필요로 하는 부분을 대체하는 것입니다.기존에 가장 쉬운 세션에 사용자 로그인 후 정보를 담아두고 하는 것은 보안에 취약하기 때문에, 그보다는 토큰 방식의 사용자 인증 방식이 좋습니다.자세한 것은 토큰 인증 방식에 대해서 검색하시면 내용이 많이 있어요!!책을 보면서 하고 있는데 소스 자체는 MIT 라이센스 이니 소스를 보면서 하도록 하겠습니다~~~!(소스 출처는 scotch.io 라는 외국 사이트에 MEAN Stack beginner 책에 대한 소스 코드입니다.)먼저, Node.js..

JSON Web Tokens ( JWT )JWT는 "jot" 이라고 불리기도 합니다.JWT의 장점은 다른 프로그래밍 언어와 잘 작동한다는 점!.NET, Phthon, Node.js, Java, PHP, Ruby, GO ... 등 많이 있고, 여러분은 많은 다양한 라이브러리와 호환해서 사용할 수 있습니다자체에 정보를 담는다. JWT 는 기본적인 정보를 스스로 담아 전달할 수 있습니다. ( Payload 또는 Signature 를 통해 )정보를 자체에 담기 때문에, HTTP 헤더안에 담아 사용되어집니다. ( API 인증 등 ) 또한 URL을 통해서도 가능 합니다.JWT는 세가지 부분으로 나뉩니다headerJWT 타입의 선언사용하는 해싱 알고리즘 ex ) { "typ" : "jwt" , "alg" : "HS2..

Node.js 를 하다보면 package.json 파일을 통해 node.js로 진행하는 애플리케이션의 대한 정보와 모듈에 대한 정보를 관리할 수 있습니다.JSON 형태로 작성해서 프로젝트를 관리 할 수 있습니다.package.json 을 작성하면 npm install 명령어를 통해 의존성을 가진 모듈들의 설치가 가능합니다. { "name": "start-code", "main": "server.js", "dependencies" : { "express" : "~4.8.6" } }package.json 이러한 형태로 작성이 되고, 자세한 속성들은 찾아보면 알 수 있습니다.여기서 살펴 볼 내용은 모듈명 옆에 버전에서 ~ 과 같이 버전에 대한 범위를 지정할 수 있는데요 이에 대한 설명을 하려고 합니다.: "~..

PC에서 모바일 페이지로 이동하기 입니다. 보통 PC와 모바일 버전이 따로 있는 경우 ( 레이아웃 반응형이 아닌 별도의 페이지의 있는 경우) 에는 모바일 페이지 URL을 따로 사용한다. m.url.com 이라던지 url.com/m/main.do 등의 컨셉을 사용할 때 적용하는 방법! 모바일 디바이스를 확인하는 소스는 매우 흔한듯.. 다음과 같이 적용하면 매우 쉽게! 적용 가능~ 메인 JSP 파일이나, JAVA에서 적용하면 될 듯 쉽다..(JSP에서만 해봄..) String ua=request.getHeader("User-Agent").toLowerCase(); if (ua.matches(".*(android|avantgo|blackberry|blazer|compal|elaine|fennec|hiptop|..

https://github.com/btford/angular-express-seed

https://docs.angularjs.org/tutorial/step_11이번 단계에서는 앱에서 데이터를 가지고오는 방식이 변경됩니다. Restful한 클라이언트를 표현하는 서비스를 정의합니다. 이 방법을 이용하여, 저단계의 $http API를 사용하지 않고, 쉽게 서버의 데이터를 요청할 수 있수 있게됩니다.RestFul 하게 Angular를 구현하기 위해 ngResource 모듈을 사용합니다. ngResource는 Angular Core와 개별적으로 나뉘어져 있으므로, ngRoute와 마찬가지로 다운로드를 받아야 합니다. Bower 또는 npm 을 이용하여 다운로드 받으세요. (인터넷에서 찾으셔도 됩니다.) angluar-resource 1.3.3 버전을 다운로드 받았습니다.본격적으로 resourc..

https://docs.angularjs.org/tutorial/step_09https://docs.angularjs.org/tutorial/step_10이번에는 두개의 튜토리얼입니다. 간단하고 어렵지 않은 내용이므로 빠르게 소스만 집고 넘어가겟습니다.STEP : 09 Custom Filterng 에서는 표현식을 사용할 때 기본 제공하는 Filter를 이용하여, 여러가지 표현식으로 변경할 수 있습니다 {{ expression | filter option }} 이러한 형태로 filter option을 설정하여 표현식의 값을 바꿀 수 있습니다.기본 제공하는 Filter Option은 ( * https://docs.angularjs.org/api/ng/filter 참조 )currency(화폐), date(날짜..

https://docs.angularjs.org/tutorial/step_07AngularJS에 Routing 기술과 멀티 뷰에 대한 튜토리얼입니다. 튜토리얼 정리는 모두 angularjs.org 홈페이지의 내용을 바탕으로 진행하였습니다.AngularJS에서 Routing은 URL을 구분하여, 뷰를 변경하는 기술입니다.AgnularJS routing 은 ngRoute 라고 요약해서 부르고, 튜토리얼을 따라하면, npm이 설치 되있으므로, 아래와 같이 명령어로 설치가 가능합니다. ( 튜토리얼에서 bower.json에 추가하여 bower install을 사용하도록 하는데 이상하게 버전을 제대로 찾이 못하여 설치가 되지않았습니다. 하여 npm을 이용하였습니다.)npm install angular-route a..