목록자바스크립트 (12)
내맘대로 살기🎉
사실 나도 정규표현식을 직접 사용해보지 않았고, 많이 알고 있지 못하다. 공부를 하던 중에 공유하고 싶고, 정리를 하면서 머리 속 깊은 곳에 새겨두고 싶은 마음이 있어서 글을 쓰게 되었다. 함께 사용 가능한 세 가지의 플래그 i - 정규표현식이 대소문자를 구분하지 않도록 한다. /harris/i는 harris뿐만 아니라 Harris, hARris 등 대소문자를 구분하지 않는다.regexper.com에서 확인해본 결과 Flags:Ignore Case라고 표현되는 것을 확인할 수 있다. /harris/라고 하면 "harris"라는 문자 그대로 가져온다. g - 지정된 패턴에 해당하는 모든 부분을 매치시킨다. Flags를 확인해보면 Global을 확인할 수 있다. m - 여러 줄을 포함하고 있는 문자열을 매치..
md5로 암호화를 하는 방법 1. md5방식의 해싱. (터미널에서 npm install md5 --save)2. 터미널에서 node3. var md5 = require('md5');4. md5('javascript'); 를 검색해보면 암호화된 문자('de9b9ed78d7e2e1dceeffee780e2f919')를 출력한다. 암호화를 푸는 것을 "복호화".복호화가 불가능 한 것을 "단방향 암호화 방법"이라고 한다. md5가 단방향이다.5. 터미널에서 md5('원래의 비밀번호');로 원래의 비밀번호를 암호화한 문자로 얻고 그 문자를 코드에 넣는다. 6. 코드에서 사용자가 입력한 비밀번호도 md5(입력받은 비밀번호) 이렇게 묶어준다. 사용자가 입력한 비밀번호가 어떤 것인지 확인하는 것이 아니라, 사용자가 입력..
간략하게 두가지 방법으로만 정리해보자. 메서드를 이용한 재귀 메서드를 이용할 때는 익명함수를 사용한다. 어차피 메서드의 이름으로 그 함수를 동작시킬 수 있기 때문에 굳이 함수의 이름을 부여해줄 필요가 없다. 이런 말이 있다. "부르지도 않는데, 고양이에게 이름이 왜 지어줘 ?"(자바스크립트 닌자 비급 中). 맞는 말이다 :-) 코드로 바로 확인해보자. 메서드를 이용한 재귀함수는 이런 식으로 사용하며 된다. 어렵지 않다. 하지만, 주의해야할 점이 있다. 객체를 만들 때, 항상 염두해야할 점으로 재사용성이라고한다. phone이라는 함수를 재사용하려면 위의 ring이라는 메서드의 콘텍스트를 직접 지정해주는 것이 아니라, this로 알아서 자신의 콘텍스트를 잡게 해줘야한다. 재귀를 이용한 인라인 함수 인라인함수..
자바스크립트 닌자 비급이라는 책으로 공부 중에, 정리가 너무 잘되어 있어서, 나 또한 정리를 하고 머릿속에 더 깊숙한 곳에 넣고 싶었다. 다른 언어들과는 다르게 javascript에서는 유효범위가 조금은 다르다. JAVA를 예로 들면, if (window) {var x = 111;}alert(x);라고 하면, x는 undefined 값이 나온다. 하지만 Javascript에서는 x가 111이라는 값을 갖고 있다. 위의 코드에서 변수 a,b,c와 함수 inner()의 유효범위를 확인해보자. outer() 함수 내에 있는 변수 a,b,c는 초기화된 시점에서 outer() 함수가 끝나는 지점까지 그 값을 갖는다.그렇다면 inner() 함수도 선언된 시점에서 outer() 함수가 끝나는 지점까지 함수의 기능을 ..
편집(Edit) view.jade(뷰 단)에 - rid = encodeURIComponent(topic['@rid'])a(href='/topic/'+rid+'/edit') edit를 추가하여 edit기능을 넣어줄 수 있는 버튼(?)을 넣어준다. - rid = encodeURIComponent(topic['@rid'])를 넣어주지 않으면 주소에 #이 들어간다. #이 주소창에 있으면 문제가 생길 수 있으므로 특수문자로 변경해주는 코드를 사용해서 #을 다른 문자로 변형시켜준다. 편집을 하기 위해서는 edit.jade에 db에 있는 글을 읽어오는 로직이 추가되어야 한다. app.get('/topic/:id/edit', function(req, res){ var sql = 'SELECT FROM topic'; /..
regexper에서 document를 읽는 도중에 greedy quantifier와 non-greed qunatifier가 있다. greedy를 사전에 검색해본 결과, "탐욕적인"이라고 나와서 검색을 잘못한 줄 알았는데, 맞더라 ㅎㅎ - greedy quantifier(탐욕적인 수량자)는 말 그대로 탐욕적이다. 쉽게 말하자면, 모든 페이지를 샅샅이 뒤져서 있는 녀석은 모두 가지고 온다. - non-greedy quantifier(탐욕적이지 않은 수량자)는 말 그대로 탐욕적이지 않은이다. 몇몇 사람들은 Lazy quantifier로 정의를 하여, 귀찮은으로 표현하는 사람도 있다. 이 녀석은 쉽게 말하면, 모든 페이지 중에 하나만 제일 먼저 검색된 것 하나만 하는 것이다. 백문이 불여일견, 한번 더 쉽게 그..
MVC와 MVVM의 차이 MVC - controller와 통신한다. model - view - controller MVVM - 자기 자신과 통신하는 선언적 데이터 바인딩. model - view - view - model. 양방향 데이터 바인딩을 하기 때문에 model과 view가 알아서 통신한다. 그러므로 controller가 없어도 작성 가능 !! 데이터를 제공하는 컨트롤러 없이 ng-repeat을 사용하여 생성하는 것이다 {{ number }} 스코프 주석 유효범위 내의 범위를 스코프주석으로 묶어준다. 그러면 어디까지가 유효범위인지 한 번에 확인할 수 있다.
동적 뷰와 라우팅 angular를 이용해서 웹 사이트의 header, footer, left, right로 나누는 것을 쉽게 할 수 있다. angular의 동적 뷰를 이용하면 되는데, 그 방법은 URL을 기준으로 $routeProvider를 통해서 특정 뷰를 얻어온 다음 적용하면 된다. myApp.config(['$routeProvider', function($routeProvider){ $routeProvider .when('/', { templateUrl:'views/main.html' }); .when('/emails', { templateUrl:'views/emails.html' }); .otherwise({ redirectTo:'/' }); }]); - URL이 '/'이면 main.html로 주..
선언적 DOM 메서드 디렉티브이며, 스크립트로 작성해서 DOM에 기능을 제공한다. ng-show와 ng-click을 사용한 토글 네비게이션 예제로 확인해본다. Toggle nav Link 1 Link 2 Link 3 - 이 코드를 실행시키면 아래와 같이 실행되는데, "Toggle nav"를 클릭하면 밑의 Link 1~3이 사라지거나 보인다. 말 그래도 토글이다. 표현식 어떤 식으로 작성하는지 먼저 확인해보자. {{ data.length > 0 && 'My data' || 'No data'}} 이런 식으로 작성하면, data.length가 0보다 크다면, My data. 작다면, No data라고 출력하는 문이다. if문을 쓰지 않아도 아주 짧게 표현할 수 있다. 내 생각 - javacript에서 data..
Angular의 철학,- 기능이 풍부한 동적 HTML을 생성해서 웹 클라이언트 측에서 많은 일을 보이지 않게 처리해준다.(view에서 거의 다 해준다는 것인가 ?) var myApp = angular.module('myApp', []); myApp.controller('EmailsCtrl', ['$scope', function ($scope) { $scope.emails = {}; $scope.emails.messages = [{ "from": "Steve Jobs", "subject": "I think I'm holding my phone wrong :/", "sent": "2013-10-01T08:05:59Z" },{ "from": "Ellie Goulding", "subject": "I've got..