W' page

출처 :

http://blog.remotty.com/blog/2014/01/28/lets-study-rest/

https://ko.wikipedia.org/wiki/REST

https://ko.wikipedia.org/wiki/HTTP_%EC%83%81%ED%83%9C_%EC%BD%94%EB%93%9C

1. RESTful 이란?

REST(Representational State Transfer)는 월드 와이드 웹과 같은 분산 하이퍼미디어 시스템을 위한 소프트웨어 아키텍처의 한 형식이다. 엄격한 의미로 REST는 네트워크 아키텍처 원리의 모음이다. 간단한 의미로는, 웹 상의 자료를 HTTP위에서 SOAP이나 쿠키를 통한 세션 트랙킹 같은 별도의 전송 계층 없이 전송하기 위한 아주 간단한 인터페이스를 말한다.

REST 원리를 따르는 시스템은 종종 RESTful이란 용어로 지칭된다. 열정적인 REST 옹호자들은 스스로를 RESTafrians 이라고 부른다.

2. URI 설계

- URI(Uniform Resource Identifier) : '균등한 리소스 식별자'

a - http://abc.com/haha

b - HTTP://ABC.COM/haha

c - http://abc.com/HAHA

d - http://abc.com/hAhA

  -> where, a == b && c != d

- 하이픈(-, hyphen)을 사용하자

공백 대신 %20 이 쓰을 수 있으며, _ 는 링크가 걸릴 때 생기는 밑줄에 가려질 수 있다.

- 확장자를 사용하지 말자

Accept의 헤드를 적극적으로 활용하여

    GET /hello HTTP/1.1

    Host: remotty.com

    Accept: text/csv,text/html;q=0.5,application/xml;q=0.6,text/plain;q=0.9,application/pdf,*/*;q=0.3

처럼 사용하자. 앞 부터 우선순위다.

3. HTTP Method의 알맞은 역할

HTTP Method는 여러가지가 있지만 REST API에서는 4개 혹은 5개의 Method만 사용됩니다. POST, GET, PUT, DELETE 이 4가지의 Method를 가지고 CRUD를 할 수 있습니다. 그러나 REST API에서 사용되는 개수는 4개 혹은 5개라고 한 이유는 PATCH를 포함하면 5개가 됩니다.

    POST : 현재 리소스 보다 한단계 아래에 리소스를 생성

    GET : 현재 리소스를 조회

    PUT : 현재 리소스를 수정

    DELETE : 현재 리소스를 삭

※ PATCH : 기존에는 수정(update)을 위한 Method로 주로 PUT을 사용했지만, 앞으로는 PUT대신 PATCH를 자주 쓰일 수 있다. 자세한 설명 - http://weblog.rubyonrails.org/2012/2/26/edge-rails-patch-is-the-new-primary-http-method-for-updates/

4. 반응형 웹에서의 REST

http://m.remotty.com/abc 또는 http://www.remotty.com/m/abc처럼 사용하지 말자.

RESTFul한 웹사이트에서는 User-Agent를 이용하여 다른 곳으로 리다이렉트 시켜주는게 아니라 URI는 그대로이지만 화면만 장비에따라 알아서 최적화 되도록 설계해야 한다.

5. I18n과 REST

다국어 지원을 Accept-Language에 맡긴다면 URI는 그대로인데, 사용자의 환경에 따라 알맞은 언어로 응답할 수 있다. 사용자가 원하는 언어를 설정하게하여 해당 언어를 세션 또는 쿠키 등에 저장하여 보여줄 언어를 선정할때 우선순위를 약간 조정하여 보여주는게 좋다.

6. HTTP 상태 코드

- 1xx (조건부 응답)

    요청을 받았으며 작업을 계속한다. 이 상태의 상태 코드는 상태-라인과 선택적 헤더(컴퓨터에서 출력될 때 각 페이지 맨 윗부분에 자동으로 붙는 부분)만을 포함하는 임시의 응답을 나타내고 빈 라인에 의해서 종결된다. HTTP/1.0이래로 어떤 1XX 상태 코드들도 정의 되지 않았다. 서버들은 1XX 응답을 실험적인 상태를 제외하고 HTTP/1.0 클라이언트(서버에 연결된 컴퓨터)로 보내면 안 된다.

100(계속): 요청자는 요청을 계속해야 한다. 서버는 이 코드를 제공하여 요청의 첫 번째 부분을 받았으며 나머지를 기다리고 있음을 나타낸다.

101(프로토콜 전환): 요청자가 서버에 프로토콜 전환을 요청했으며 서버는 이를 승인하는 중이다.

102(처리, RFC 2518)

- 2xx (성공)

    이 클래스의 상태 코드는 클라이언트가 요청한 동작을 수신하여 이해했고 승낙했으며 성공적으로 처리했음을 가리킨다.

200(성공): 서버가 요청을 제대로 처리했다는 뜻이다. 이는 주로 서버가 요청한 페이지를 제공했다는 의미로 쓰인다.

201(작성됨): 성공적으로 요청되었으며 서버가 새 리소스를 작성했다.

202(허용됨): 서버가 요청을 접수했지만 아직 처리하지 않았다.

203(신뢰할 수 없는 정보): 서버가 요청을 성공적으로 처리했지만 다른 소스에서 수신된 정보를 제공하고 있다.

204(콘텐츠 없음): 서버가 요청을 성공적으로 처리했지만 콘텐츠를 제공하지 않는다.

205(콘텐츠 재설정): 서버가 요청을 성공적으로 처리했지만 콘텐츠를 표시하지 않는다. 204 응답과 달리 이 응답은 요청자가 문서 보기를 재설정할 것을 요구한다(예: 새 입력을 위한 양식 비우기).

206(일부 콘텐츠): 서버가 GET 요청의 일부만 성공적으로 처리했다.

207(다중 상태, RFC 4918)

208(이미 보고됨, RFC 5842)

226 IM Used (RFC 3229)

-3xx (리다이렉션 완료)

    클라이언트는 요청을 마치기 위해 추가 동작을 취해야 한다.

300(여러 선택항목): 서버가 요청에 따라 여러 조치를 선택할 수 있다. 서버가 사용자 에이전트에 따라 수행할 작업을 선택하거나, 요청자가 선택할 수 있는 작업 목록을 제공한다.

301(영구 이동): 요청한 페이지를 새 위치로 영구적으로 이동했다. GET 또는 HEAD 요청에 대한 응답으로 이 응답을 표시하면 요청자가 자동으로 새 위치로 전달된다.

302(임시 이동): 현재 서버가 다른 위치의 페이지로 요청에 응답하고 있지만 요청자는 향후 요청 시 원래 위치를 계속 사용해야 한다.

303(기타 위치 보기): 요청자가 다른 위치에 별도의 GET 요청을 하여 응답을 검색할 경우 서버는 이 코드를 표시한다. HEAD 요청 이외의 모든 요청을 다른 위치로 자동으로 전달한다.

304(수정되지 않음): 마지막 요청 이후 요청한 페이지는 수정되지 않았다. 서버가 이 응답을 표시하면 페이지의 콘텐츠를 표시하지 않는다. 요청자가 마지막으로 페이지를 요청한 후 페이지가 변경되지 않으면 이 응답(If-Modified-Since HTTP 헤더라고 함)을 표시하도록 서버를 구성해야 한다.

305(프록시 사용): 요청자는 프록시를 사용하여 요청한 페이지만 액세스할 수 있다. 서버가 이 응답을 표시하면 요청자가 사용할 프록시를 가리키는 것이기도 하다.

307(임시 리다이렉션): 현재 서버가 다른 위치의 페이지로 요청에 응답하고 있지만 요청자는 향후 요청 시 원래 위치를 계속 사용해야 한다.

308(영구 리다이렉션, RFC에서 실험적으로 승인됨)

-4xx (요청 오류)

    4xx 클래스의 상태 코드는 클라이언트에 오류가 있음을 나타낸다.

400(잘못된 요청) : 서버가 요청의 구문을 인식하지 못했다.

401(권한 없음): 이 요청은 인증이 필요하다. 서버는 로그인이 필요한 페이지에 대해 이 요청을 제공할 수 있다.

403(금지됨): 서버가 요청을 거부하고 있다.

404(찾을 수 없음): 서버가 요청한 페이지를 찾을 수 없다. 예를 들어 서버에 존재하지 않는 페이지에 대한 요청이 있을 경우 서버는 이 코드를 제공한다.

405(허용되지 않는 방법): 요청에 지정된 방법을 사용할 수 없다.

406(허용되지 않음): 요청한 페이지가 요청한 콘텐츠 특성으로 응답할 수 없다.

407(프록시 인증 필요): 이 상태 코드는 401(권한 없음)과 비슷하지만 요청자가 프록시를 사용하여 인증해야 한다. 서버가 이 응답을 표시하면 요청자가 사용할 프록시를 가리키는 것이기도 한다.

408(요청 시간초과): 서버의 요청 대기가 시간을 초과하였다.

409(충돌): 서버가 요청을 수행하는 중에 충돌이 발생했다. 서버는 응답할 때 충돌에 대한 정보를 포함해야 한다. 서버는 PUT 요청과 충돌하는 PUT 요청에 대한 응답으로 이 코드를 요청 간 차이점 목록과 함께 표시해야 한다.

410(사라짐): 서버는 요청한 리소스가 영구적으로 삭제되었을 때 이 응답을 표시한다. 404(찾을 수 없음) 코드와 비슷하며 이전에 있었지만 더 이상 존재하지 않는 리소스에 대해 404 대신 사용하기도 한다. 리소스가 영구적으로 이동된 경우 301을 사용하여 리소스의 새 위치를 지정해야 한다.

411(길이 필요): 서버는 유효한 콘텐츠 길이 헤더 입력란 없이는 요청을 수락하지 않는다.

412(사전조건 실패): 서버가 요청자가 요청 시 부과한 사전조건을 만족하지 않는다.

413(요청 속성이 너무 큼): 요청이 너무 커서 서버가 처리할 수 없다.

414(요청 URI가 너무 긺): 요청 URI(일반적으로 URL)가 너무 길어 서버가 처리할 수 없다.

415(지원되지 않는 미디어 유형): 요청이 요청한 페이지에서 지원하지 않는 형식으로 되어 있다.

416(처리할 수 없는 요청범위): 요청이 페이지에서 처리할 수 없는 범위에 해당되는 경우 서버는 이 상태 코드를 표시한다.

417(예상 실패): 서버는 Expect 요청 헤더 입력란의 요구사항을 만족할 수 없다.

418(I'm a teapot, RFC 2324)

420(Enhance Your Calm, 트위터)

422(처리할 수 없는 엔티티, WebDAV; RFC 4918)

423(잠김,WebDAV; RFC 4918)

424(실패된 의존성, WebDAV; RFC 4918)

424(메쏘드 실패, WebDAV)

425(정렬되지 않은 컬렉션, 인터넷 초안)

426(업그레이드 필요, RFC 2817)

428(전제조건 필요, RFC 6585)

429(너무 많은 요청, RFC 6585)

431(요청 헤더 필드가 너무 큼, RFC 6585)

444(응답 없음, Nginx)

449(다시 시도, 마이크로소프트)

450(윈도 자녀 보호에 의해 차단됨, 마이크로소프트)

451(법적인 이유로 이용 불가, 인터넷 초안)

451(리다이렉션, 마이크로소프트)

494(요청 헤더가 너무 큼, Nginx)

495(Cert 오류, Nginx)

496(Cert 없음, Nginx)

497(HTTP to HTTPS, Nginx)

499(클라이언트가 요청을 닫음, Nginx)

- 5xx (서버 오류)

    서버가 유효한 요청을 명백하게 수행하지 못했음을 나타낸다.

500(내부 서버 오류): 서버에 오류가 발생하여 요청을 수행할 수 없다.

501(구현되지 않음): 서버에 요청을 수행할 수 있는 기능이 없다. 예를 들어 서버가 요청 메소드를 인식하지 못할 때 이 코드를 표시한다.

502(불량 게이트웨이): 서버가 게이트웨이나 프록시 역할을 하고 있거나 또는 업스트림 서버에서 잘못된 응답을 받았다.

503(서비스를 사용할 수 없음): 서버가 오버로드되었거나 유지관리를 위해 다운되었기 때문에 현재 서버를 사용할 수 없다. 이는 대개 일시적인 상태이다.

504(게이트웨이 시간초과): 서버가 게이트웨이나 프록시 역할을 하고 있거나 또는 업스트림 서버에서 제때 요청을 받지 못했다.

505(HTTP 버전이 지원되지 않음): 서버가 요청에 사용된 HTTP 프로토콜 버전을 지원하지 않는다.

506(Variant Also Negotiates, RFC 2295)

507(용량 부족, WebDAV; RFC 4918)

508(루프 감지됨, WebDAV; RFC 5842)

509(대역폭 제한 초과, Apache bw/limited extension)

510(확장되지 않음, RFC 2774)

511(네트워크 인증 필요, RFC 6585)

598(네트워크 읽기 시간초과 오류, 알 수 없음)

599(네트워크 연결 시간초과 오류, 알 수 없음)

1. Generator 기본 개념

여기서 increase라는 이름으로 만든 것이 제너레이터고 제너레이터라는 의미로 function를 사용했다.

여기서 제너레이터를 할당한 index에 index.toString()를 실행해 보면 "[object Generator]"로 나와서 제너레이터임을 알 수 가 있다.

이 예제에서 제너레이터는 for문을 순회하면서 yield로 인덱스 값을 반환하게 되는데 제너레이터는 여기서 멈추고 next()를 호출될 때마다 다음 yield를 만날 때까지만 다시 실행을 하게 된다.

next()를 실행할 때마다 yield의 값이 value에 담기고 done은 완료 여부를 나타낸다.

2. 기본 예제

function* increase(){

    for (var i = 0 ; i < 5 ; i++ ){

        yield i;

    }

}

var index = increase();

// console.log(index.toString());

// console.log(index.next());

// console.log(index.next());

// console.log(index.next());

// console.log(index.next());

// console.log(index.next());

// console.log(index.next());

do {

    var res = index.next();

    if (res.done) {

        break;

    }

    console.log(res.value);

} while(true);

3. 무한급수 예제

function* Seq() {

    var idx = 0;

    do {

        yield idx++;

    } while(true)

}

var seq = Seq();

for (var i = 0 ; i < 10 ; i++ ) {

    console.log(seq.next());

}

출처 : http://www.nextree.co.kr/p4150/

자바스크립트에서 함수는 first-class object다.

  first-class object는 변수에 저장할 수 있어야 합니다.

  first-class object는 함수의 파라미터로 전달할 수 있어야 합니다.

  first-class object는 함수의 반환값으로 사용할 수 있어야 합니다.

  first-class object는 자료 구조에 저장할 수 있어야 합니다.

// 기명 함수표현식(named function expression)

var company = function company() {

    // 실행코드

};

// 익명 함수표현식(anonymous function expression)

var company = function() {

    // 실행코드

};

// 기명 즉시실행함수(named immediately-invoked function expression)

(function company() {

    // 실행코드

}());

// 익명 즉시실행함수(immediately-invoked function expression)

// Javascript 대가이신 더글라스 클락포트의 권장 표기법

(function() {

    // 실행코드

}());

// 익명 즉시실행함수(immediately-invoked function expression)

(function() {

    // 실행코드

})();

즉시 실행 함수

var buyCar = function(carName) {

    // "내가 구매한 차는 sonata입니다." 출력

    console.log('내가 구매한 차는 ' + carName + '입니다.');

};

buyCar('sonata');

(function(carName) {

    // "내가 구매한 차는 sonata입니다." 출력

    console.log('내가 구매한 차는 ' + carName + '입니다.');

}('sonata'));

/**

ex) at JQuery

(function($) {

    // 함수 스코프 내에서 $는 jQuery Object임.

    console.log($);

}(jQuery));

*/

모듈 패턴 (Module Pattern)

즉시실행함수를 위와 같이 사용하여 언어레벨에서 제공하지 못하는 모듈화 지원도구를 극복할 수 있으며,

이렇게 작성된 코드를 분리된 파일로 구성하면 재사용성을 높일 수 있습니다.

var clerk = (function() {

    var name = 'Teo';

    var sex = '남자';

    var position = '수석 엔지니어';

    // salary private

    var salary = 2000;

    var taxSalary = 200;

    var totalBonus = 100;

    var taxBonus = 10;

    var payBonus = function() {

        totalBonus = totalBonus - taxBonus;

        return totalBonus;

    };

    var paySalary = function() {

        return salary - taxSalary;

    };

    // Public 속성, 메소드

    return {

        name : name,

        sex : sex,

        position : position,

        paySalary : paySalary,

        payBonus : payBonus

    };

}());

// name 속성은 public

console.log(clerk.name); // 'Teo' 출력

// salary 변수는 즉시실행함수 내부 변수이므로 private

console.log(clerk.salary); // undefined 출력

// paySalary 메소드는 public

console.log(clerk.paySalary()); // 1800 출력

// payBonus 메소드는 public

console.log(clerk.payBonus()); // 90 출력

console.log(clerk.payBonus()); // 80 출력

자바스크립트 모듈 작성시 코드 순서

  Javascript로 SPA를 구현할  때, 다음과 같은 순서의 코드로 모듈을 작성하게 되면 협업하는 개발자들에게 집약되고 일관된 코드를 제공하여 많은 도움이 될 것입니다. 이렇게 코드의 순서를 정하는 이유는 집약되고 일관된 코드를 제공하는데 있으므로 코드의 순서는 개발상황과 모듈용도에 맞춰가며 조정하고 추가 및 삭제될 수도 있습니다. 아래 순서는 단지 코드작성 순서의 예일뿐입니다.

    - 모듈 스코프 내에서 사용할 변수 작성

    - 유틸리티 메소드 작성

    - DOM 조작 메소드 작성

    - 이벤트 핸들러 작성

    - Public 메소드 작성

// SPA 모듈 작성 순서 예시

var app = (function() {

    // 1. 모듈 스코프 내에서 사용할 변수 작성

    var scopeVar = {};

    var utilMethod;

    var manipulateDom;

    var eventHandle;

    var initModule;

    // 2. 유틸리티 메소드 작성

    utilMethod = function() {

        // 실행코드

    };

    // 3. DOM 조작 메소드 작성

    manipulateDom = function() {

        // 실행코드

    };

    // 4. 이벤트 핸들러 작성

    eventHandle = function() {

        // 실행코드

    };

    // Public 메소드 작성

    initModule = function() {

        // 실행코드

    };

    return {

        init : initModule

    };

}());

모듈화 하는 코딩 기법 정리

/**

 * Library 모듈화를 위한 코딩기법 1

 * call 함수 이용

 */

(function() {

    'use strict';

    var root = this;

    var version = '1.0';

    var Module1;

    if(typeof exports !== 'undefined') {

        Module1 = exports;

    } else {

        Module1 = root.Module1 = {};

    }

    Module1.getVersion = function() {

        return version;

    }

}).call(this);

// console.log(Module1.getVersion());

/**

 * Library 모듈화를 위한 코딩기법 2

 * 글로벌 객체를 파라미터로 전달

 */

(function(global) {

    var root = global;

    var version = '1.0';

    var Module2;

    if(typeof exports !== 'undefined') {

        Module2 = exports;

    } else {

        Module2 = root.Module2 = {};

    }

    Module2.getVersion = function() {

        return version;

    }

}(this));

// console.log(Module2.getVersion());

/**

 * Library 모듈화를 위한 코딩기법 3

 * 즉시실행함수 내부에서 글로벌 객체를 내부 변수에 할당

 */

(function() {

    var root = this;

    var version = '1.0';

    var Module3;

    if(typeof exports !== 'undefined') {

        Module3 = exports;

    } else {

        Module3 = root.Module3 = {};

    }

    Module3.getVersion = function() {

        return version;

    }

}());

// console.log(Module3.getVersion());

/**

 * Library 모듈화를 위한 코딩기법 4

 * apply 함수 이용

 */

(function() {

    var root = this;

    var version = '1.0';

    var Module4;

    if(typeof exports !== 'undefined') {

        Module4 = exports;

    } else {

        Module4 = root.Module4 = {};

    }

    Module4.getVersion = function() {

        return version;

    }

}).apply(this) ;

// console.log(Module4.getVersion());

/**

 * Library 모듈화를 위한 코딩기법 5

 * 기명 즉시실행함수 이용

 */

var Module5 = (function() {

    var root = this;

    var version = '1.0';

    var Module;

    if(typeof exports !== 'undefined') {

        Module = exports;

    } else {

        Module = root.Module = {};

    }

    Module.getVersion = function() {

        return version;

    }

    return Module;

}());

console.log(Module5.getVersion());

출처

http://blog.aliencube.org/ko/2014/01/02/reasons-behind-using-strict-mode-while-coding-javascript/

Strict Mode는 ECMAScript 5 버전에 있는 새로운 기능으로써,

당신의 프로그램 또는 함수를 엄격한 운용 콘텍스트 안에서 실행시킬 수 있게끔 합니다.

이 엄격한 콘텍스트는 몇가지 액션들을 실행할 수 없도록 하며, 좀 더 많은 예외를 발생시킵니다.

Strict Mode는 몇가지 면에서 도움이 되는데:

  흔히 발생하는 코딩 실수를 잡아내서 예외를 발생시킵니다.

  상대적으로 안전하지 않은 액션이 발생하는 것을 방지하거나 그럴 때 예외를 발생시킵니다.

  예를 들자면 전역객체들에 접근하려 한다거나 하는 것들이겠지요.

  혼란스럽거나 제대로 고려되지 않은 기능들을 비활성화시킵니다.

이 strict mode는 파일 전체에 적용시킬 수도 있고,

아니면 특정한 함수 안에서만 적용시킬 수도 있습니다.

따라서, 기존의 자바스크립트 코드에 대해 좀 더 엄격한 검사를 실행시키고 싶다면 문서의 첫 줄에 "use strict";를 추가한다.

기존의 것은 그대로 놔두고, 새로운 코드에 대해서만 추가하고 싶다면 각각의 함수 블록 처음에 추가하는 것이 좋겠다.

// 출처 : http://programmingsummaries.tistory.com/

// 추천 링크

// https://developer.mozilla.org/ko/docs/A_re-introduction_to_JavaScript

// https://developer.mozilla.org/ko/docs/Web/JavaScript/Data_structures

// https://developer.mozilla.org/ko/docs/Web/JavaScript/Guide/Inheritance_and_the_prototype_chain

// https://developer.mozilla.org/ko/docs/Web/JavaScript/Guide/Closures

// 재귀함수와 arguments.callee

// arguments.callee는 스스로의 함수를 호출

function factorial(x) {

    if(x<=1) {

        return 1;

    }

    else {

        return x*arguments.callee(x-1);

    }

}

console.log(factorial(5))

// 멤버 관리 구조와 prototype

function Person(name) {

    var firstName = "홍";

    this.name = name;

    this.speak = function(){ console.log(firstName + this.name); }

}

console.log(Person.firstName); //undefined 접근할 수 없다.

var p = new Person("길동"); //객체 생성

console.log(p.firstName); //undefined 역시 접근할 수 없다.

console.log(p.name); //"길동" 접근 가능하다.

Person.prototype.tellme = function(){ console.log('zzz'); }; //메서드 추가!!

console.log(p.tellme()); //zzz라는 팝업이 뜬다!! 즉 객체 프로토타입 변경 가능!!

console.log(p["firstName"]); //undefined 마찬가지로 접근할 수 없다.

console.log(p["name"]); //"길동" 접근 가능하다.

// 멤버 확장

Object.prototype.extend = function(parent) {

    for(var property in parent) {

        this[property] = parent[property];

    }

};

// Max & min

var test = [0, 77, 33, 11, 99, 88, 55];

console.log(Math.max.apply(null, test)); //결과값은 99

console.log(Math.min.apply(null, test)); //결과값은 0

var max = test.reduce( function (previous, current) {

    return previous > current ? previous:current;

});

//최소값

var min = test.reduce( function (previous, current) {

    return previous > current ? current:previous;

});

console.log("max :", max, "| min :", min)

// 배열 복사, 객체를 가진 경우엔 조심해야 함

var aaa = [0, 1, 2, 3, 4, 5];

var bbb = JSON.parse(JSON.stringify( aaa )); //참조없는 복사

var aaaa = [0, 1, 2, 3, 4, 5];

var bbbb = aaaa.slice(); //indexOf 혹은 contains로 검색 가능

// 배열 함수 : http://programmingsummaries.tistory.com/357

// Array.forEach

var testArray = ["aaa", "bbb", "ccc", "ddd"];

//배열의 모든 요소에 EDIT라는 문자열을 더하기

//메서드 수행 후 리턴값은 undefined

testArray.forEach(function (item, index, array) {

    array[index] = item + "EDIT";

});

console.log(testArray);

// Array.some

var testArraySome = ["aaa", "bbb", "ccc", "ddd"];

//배열의 중에서 "bbb"가 있으면 true를 리턴

//메서드 수행 중 true가 리턴되면 메서드 수행을 중단하고 true를 리턴

console.log(testArraySome.some(function (item, index, array) {

    console.log(index + "번째 요소 : " + item);

    return !!~item.search("bbb");

}));

//true를 리턴하는 콜백이 있었으므로 리턴값은 true

// Array.every

var testArray = ["aaa", "bbb", "ccc", "ddd"];

//배열의 모든 요소에 "aaa"가 있으면 true를 리턴

//메서드 수행 중 false가 리턴되면 메서드 수행을 중단하고 false를 리턴

console.log(testArray.every(function (item, index, array) {

    console.log(index + "번째 요소 : " + item);

    return !!~item.search("aaa");

    // return !!~item.search(/[a-z]+/);  -> true

}));

//false를 리턴하는 콜백이 있었으므로 리턴값은 false

// Array.filter

var testArray = ["aaa", "bbb", "ccc", "ddd"];

//배열의 요소가 a 또는 b로 이루어져 있으면 추출

//메서드가 종료되면 추출된 요소로만 이루어진 새로운 배열을 리턴

var newArray = testArray.filter(function (item, index, array) {

    return !!~item.search(/[ab]+/);

});

console.log(testArray);

console.log(newArray);

// Array.reduce

var testArray = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

//각 콜백마다의 리턴값을 previousItem 으로 넘겨받아 어떤 작업을 수행

//메서드가 종료되면 마지막 콜백의 리턴값을 리턴

var result = testArray.reduce(function (previousItem, currentItem, index, array) {

    //반환된 결과는 다음번 콜백의 첫번째 파라메터로 다시 전달된다.

    return previousItem + currentItem;

}, 0);

console.log(testArray);

console.log(result);

// setTimeout function

setTimeout(console.log("setTimeoutTest - Start"), 1000);

console.log("setTImeoutTest - End")

/**

1초 후에 "setTImeoutTest - End" 이 뜰 것 같지만 그렇지 않다.

*/

// 모듈, module

var circle = require('./node.circle.js');

console.log( 'The area of a circle of radius 4 is ' + circle.area(4));

// 정규표현식, regular expression

// 시각화 해주는 사이트 : http://regexper.com/

// 정규표현식 실습 : http://www.regexr.com/

var pattern = /a/

// var pattern = new RegExp('a');

console.log(pattern.exec('abcdef')); // ["a"]

console.log(pattern.exec('bcdefg')); // null

console.log(pattern.test('abcdef')); // true

console.log(pattern.test('bcdefg')); // false

console.log('abcdef'.match(pattern)); // ["a"]

console.log('bcdefg'.match(pattern)); // null

console.log('abcdef'.replace(pattern, 'A'));  // Abcdef

var xi = /a/;

console.log("Abcde".match(xi)); // null

var oi = /a/i;

console.log("Abcde".match(oi)); // ["A"];

var xg = /a/;

console.log("abcdea".match(xg));

var og = /a/g;

console.log("abcdea".match(og));

var pattern = /(\w+)\s(\w+)/;

var str = "coding everybody";

var result = str.replace(pattern, "$2, $1");

console.log(result);

var urlPattern = /\b(?:https?):\/\/[a-z0-9-+&@#\/%?=~_|!:,.;]*/gim;

var content = '생활코딩 : http://opentutorials.org/course/1 입니다. 네이버 : http://naver.com 입니다. ';

var result = content.replace(urlPattern, function(url){

    return '<a href="'+url+'">'+url+'</a>';

});

console.log(result);

// 함수, function, 유효 범위

for(var i = 0; i < 1; i++){

    var name = 'coding everybody';

}

console.log(name);

var i = 5;

function a(){

    var i = 10;

    b();

}

function b(){

    console.log(i);

}

a();

// function, value, 값으로서의 함수, 콜백, callback

function cal(func, num){

    return func(num)

}

function increase(num){

    return num+1

}

function decrease(num){

    return num-1

}

console.log(cal(increase, 1));

console.log(cal(decrease, 1));

function cal(mode){

    var funcs = {

        'plus' : function(left, right){return left + right},

        'minus' : function(left, right){return left - right}

    }

    return funcs[mode];

}

console.log(cal('plus')(2,1));

console.log(cal('minus')(2,1));

var process = [

    function(input){ return input + 10;},

    function(input){ return input * input;},

    function(input){ return input / 2;}

];

var input = 1;

for(var i = 0; i < process.length; i++){

    input = process[i](input);

}

console.log(input);

var numbers = [20, 10, 9,8,7,6,5,4,3,2,1];

console.log(numbers.sort(function (a, b){

    return b-a;

})); // array, [20,10,9,8,7,6,5,4,3,2,1]

// 클로저, closure

function outter(){

    var title = 'coding everybody';

    return function(){

        console.log(title);

    }

}

inner = outter();

inner();

function factory_movie(title){

    return {

        get_title : function (){

            return title;

        },

        set_title : function(_title){

            title = _title

        }

    }

}

ghost = factory_movie('Ghost in the shell');

matrix = factory_movie('Matrix');

console.log(ghost.get_title());     // Ghost in the shell

console.log(matrix.get_title());    // Matrix

ghost.set_title('공각기동대');

console.log(ghost.get_title());     // 공각기동대

console.log(matrix.get_title());    // Matrix

var movies = {

    'title' : null,

    'get_title' : function (){

        return this.title;

    },

    'set_title' : function(title){

        this.title = title;

    }

}

m1 = movies;

m1.set_title("m1")

console.log(m1.get_title())

console.log(movies.get_title())

var arr = []

for(var i = 0; i < 5; i++){

    arr[i] = function(id) {

        return function(){

            return id;

        }

    }(i);

}

for(var index in arr) {

    console.log(arr[index]());

}

// arguments, 아규먼트

function sum(){

    var _sum = 0;

    for(var i = 0; i < arguments.length; i++){

        // console.log(i+' : '+arguments[i]);

        _sum += arguments[i];

    }

    return _sum;

}

console.log('result : ' + sum(1,2,3,4));

// 매개변수

function zero(){

    console.log(

        'zero.length', zero.length,

        'arguments', arguments.length

    );

}

function one(arg1){

    console.log(

        'one.length', one.length,

        'arguments', arguments.length

    );

}

function two(arg1, arg2){

    console.log(

        'two.length', two.length,

        'arguments', arguments.length

    );

    return arg1 + arg2

}

zero(); // zero.length 0 arguments 0

one('val1', 'val2');  // one.length 1 arguments 2

two('val1');  // two.length 2 arguments 1

// 함수의 호출, call function

o1 = {val1:1, val2:2, val3:3}

o2 = {v1:10, v2:50, v3:100, v4:25}

function sum2(){

    var _sum = 0;

    for(name in this){

        _sum += this[name];

    }

    return _sum;

}

console.log(sum2.apply(o1)) // 6

console.log(sum2.apply(o2)) // 185

o1.sum2 = sum2;

console.log(o1.sum2()); // sum 중간에 객체의 타입을 검사하는 과정이 필요

// 변수, variable

var aaa = 2; //숫자

var bbb = "2"; //문자

var bbb = '2'; //얘도 문자

var ccc = true; //얘는 불린

var ddd = [1, 2, 3, 4]; //얘는 배열

var eee = { p1 : 2, p2 : '2' }; //얘는 객체

var fff = null; //null

var ggg = undefined; //undefined

var hhh = function(){ console.log('ㅋㅋㅋ'); } //얘는 함수!!

hhh()

// 수학, 정수, math

console.log(

    Math.pow(3,2),       // 9,   3의 2승

    Math.round(10.6),    // 11,  10.6을 반올림

    Math.ceil(10.2),     // 11,  10.2를 올림

    Math.floor(10.6),    // 10,  10.6을 내림

    Math.sqrt(9),        // 3,   3의 제곱근

    Math.random()       // 0부터 1.0 사이의 랜덤한 숫자

);

// 속성, type, typedef

console.log(

    typeof 1,

    typeof "1"

);

// 문자열, string

console.log(

    'kanziw\'s javascript\n',

    "javascript\nworld\n",

    "have a " + "nice day\n",

    'hihello'.length

);

// 비교, equal

console.log(

    1 == 1,             // true

    1 == "1",           // true

    1 === "1",          // false

    null == undefined,  // true

    null === undefined, // false

    true == 1,          // true

    true === 1,         // false

    true == '1',        // true

    true === '1',       // false

    0 === -0,           // true

    NaN === NaN        // false

);

// if, while, for

var a;

if(!'' && !undefined && !a && !null && !NaN){

    console.log('조건문의 경우가 모두 false임');

}

var i = 0;

var sum = 0;

while(i < 10){

    sum += ++i;

}

console.log(sum);

sum = 0;

for(i = 1; i <= 10; i++){

    if(i == 2) continue;

    sum += i;

    if(i == 5) break;

}

console.log(sum);

// function numbering(){

var numbering = function (){

    i = 0;

    while(i < 10){

        console.log(i);

        i += 1;

    }

}

numbering();

// list, 배열

var li = ['a', 'c', 'z'];

li.push('d');

li.concat('e', 'f');

li.unshift('-a');

console.log(li);

li.splice(2, 1, 'B');   // 2번째부터 1개를 삭제 후 'B'를 삽입

console.log(li);

console.log(

    li.shift(),

    li.pop(),

    li.sort()

);

console.log(li.reverse());

// 객체, object

var grades = {};

grades['egoing'] = 10;

grades['k8805'] = 6;

grades['sorialgi'] = 80;

// var grades = {'egoing': 10, 'k8805': 6, 'sorialgi': 80}

for(key in grades) {

    console.log("key : "+key+" | value : "+grades[key]);

}

grades = {

    'list': {'egoing': 10, 'k8805': 6, 'sorialgi': 80},

    'show' : function(){

        for(var name in this.list){

            console.log(name+':'+this.list[name]);

        }

    }

};

grades.show();

출처 : http://www.phpschool.com/gnuboard4/bbs/board.php?bo_table=qna_function&wr_id=412766&sca=&sfl=wr_subject%7C%7Cwr_content&stx=%3C%3Fphp+%BE%F8%C0%CC&sop=and

기본적으로 <?php ?>과<? ?>은 같다.

하지만 <? ?>으로는 되지 않는 경우가 있다.

이 경우엔 <?=$var?> 와 같이 변수를 간략하게 출력하는 것도 되지 않는다.

해결 방법

short_open_tag 옵션을 켜주면 된다.

# vi /etc/php.ini

    229 short_open_tag = On

1. 제작 동기

java 수업의 강사님께서는 hfs라는 프로그램을 이용하여 WebFileServer를 구축하셔서 파일을 공유하셨다.

해당 프로그램의 모든 기능을 구현하기란 아직 내 실력으로 힘들겠지만

디렉터리 이동 및 개별파일 다운로드 기능 구현은 할만하다고 생각되어 도전해보았고 어느정도 구현하였다.

2. 구현 환경

리눅스 가상머신을 설치하여 Apache, php가 설치된 리눅스 웹서버에서 동작하는 환경을 구축하였다.

(내가 구축한 소스는 리눅스 웹서버에서만 동작한다.)

1) Apache 설정

기존 /var/www/html 에는 구동중인 웹서버가 있기 때문에 다른 공간이 필요했다.

그래서 선택한 것은 Apache에서 제공하는 UserDir 기능이다.

UserDir기능은 http://Serverip/~Username 의 경로에 각 사용자별 웹서버를 띄우는 기능이다.

# vi /etc/httpd/conf/httpd.com

    # 특정 사용자만 UserDir 사용하도록 설정

    366     UserDir disabled
    367     UserDir enabled username

    # 사용자 홈 디렉터리 밑에 사용할 Web Root Directory

    374     UserDir public_html

    # /home/*/public_html 에 적용되는 Apache세부 설정

    382 <Directory /home/*/public_html>

          ...

          # Options 에서 Indexes를 설정하면 내가 구현한 정도의 기능은 자동으로 구현된다.
    384     Options -Indexes

    # index.php가 아닌 숨김파일을 index page로 설정
    385     DirectoryIndex .....list.php

          ...

    # 다른 기타 설정은 개인의 취향에 맞게 설정
    394 </Directory>

httpd 재시작

# service httpd restart

2) 사용자 홈 디렉터리 설정

사용자 홈 디렉터리에 웹 루트 디렉터리 생성 및 외부에서 접근 가능하도록 권한 설정

# cd ~username

# mkdir public_html/

# chmod o+x public_html/

3) 개발 툴

Editplus를 사용하였으며, FTP 설정을 해주면 실시간으로 업로드하여 결과를 확인할 수 있다.

구지 FTP를 연동하여 실시간 업로드를 설정한 이유는 리눅스에 명령어를 입력하여 파싱해왔기 때문이다.

3. 구현 코드

문법적 오류가 다분한 영어로 주석을 달아놓았다.

(다운로드하여 리눅스 웹서버에 올려놓고 직접 확인하면서 보면 좋을것 같다.

.....list.php

<!--
 @ Copyright : Jiwoong Jung
 @ E-mail : kanziwoong@gmail.com
-->
<?php
 // For Index where title and body
 // 1. Execute "pwd" command and Get result to $pwdExecc
 // 2. Explode $pwdExecc with "/" and Save result to $curPathArr
 // 3. In Linux Server, web root directory is located in /home/$USERNAME/public_html/
 //    So conceal "/home/$USER/public_html" through rearrangement to $curPathArr.
 $curPathArr = explode("/", exec("pwd", $pwdExecc, $er));
 $curPath = "/";
 for ($i=0;$i<count($curPathArr)-4 ;$i++ ) {
    $curPath = "$curPath".$curPathArr[$i+4]."/";
  }
?>
<html>
 <head>
  <title>Index of <?php echo "$curPath"; ?></title>
  <!-- CSS from http://ftp.kaist.ac.kr/CentOS/ -->
  <style type="text/css">
   a, a:active {text-decoration: none; color: blue;}
   a:visited {color: #48468F;}
   a:hover, a:focus {text-decoration: underline; color: red;}
   body {background-color: #F5F5F5;}
   h2 {margin-bottom: 12px;}
   table {margin-left: 12px;}
   th, td {font: 90% monospace; text-align: left;}
   th {font-weight: bold; padding-right: 14px; padding-bottom: 3px;}
   td {padding-right: 14px;}
   td.s, th.s {text-align: right;}
   div.list {background-color: white; border-top: 1px solid #646464; border-bottom: 1px solid #646464; padding-top: 10px; padding-bottom: 14px;}
   div.foot {font: 90% monospace; color: #787878; padding-top: 4px;}
  </style>
 </head>

 <body>
  <h2>Index of <?php echo "$curPath"; ?></h2>
  <div class="list">
   <table summary="Directory Listing" cellpadding="0" cellspacing="0">
    <thead><tr><th class="n">Name</th><th class="m">Last Modified</th><th class="s">Size</th><th class="t">Type</th></tr></thead>
    <tbody>
<?php
 // If $cupPath != "/", print Parent Directory Link
 if ($curPath!="/"){
?>
     <tr>
      <td class="n"><a href="../">Parent Directory/</a></td>
      <td class="m"></td>
      <td class="s">-</td>
      <td class="t">Directory</td>
     </tr>
<?php
 }
?>
     <tr>
<?php

 // For save parameter for print table
 // 1. Execute "ls -l" command and Get result to $output
 exec("ls -l ./", $output, $error);
 // 2. Seperate $output per line to $val
  while(list($key, $val) = each($output)) {
 // 3. ls -l command prints "total Size", so except this.
   if ($key!=0) {
 // 4. Seperate $val by space and save this to $rst
    $rst = explode(" ", $val);
 // 5. Some $rst array has NULL value, so rearray to rstTrue
    $j=0;
    for ( $i=0 ; $i<count($rst) ; $i++)
    {
     if ($rst[$i]){
      $rstTrue[$j]=$rst[$i];
      $j++;
     }
    }
 // 6. Mark FILENAME, SIZE and DATE parameter
    $FILENAME = $rstTrue[8];
    $SIZE = $rstTrue[4];
    $DATE = "$rstTrue[5]"." $rstTrue[6]"." $rstTrue[7]";
 // 7. Mark Directory PROPERTY parameter
    if (substr($rstTrue[0], 1)=="d"){
     $PROPERTY = "Directory";
    }

 // 8. Mark Application PROPERTY parameter
    else if (substr($rstTrue[0], 4, 1)=="x" || substr($rstTrue[0], 7, 1)=="x" || substr($rstTrue[0], -1)=="x"){
     $PROPERTY = "application";
 // 9. Mark Additional Application PROPERTY parameter
     if (substr($rstTrue[0], -6)=="tar.gz")
      $PROPERTY = "$PROPERTY"."/tar.gz";
     }
 // 10. with else if, we can set more PROPERTY parameter
    else $PROPERTY = "text/plain";
?>
      <td class="n"><a href="./<?php echo "$FILENAME" ?>"><?php echo "$FILENAME" ?></a></td>
      <td class="m"><?php echo "$DATE" ?></td>
      <td class="s"><?php echo "$SIZE" ?></td>
      <td class="t"><?php echo "$PROPERTY" ?></td>
     </tr>
<?php
   
  }
 }
?>
    </tbody>
   </table>
  </div>
  <div class="foot">Copyright Jiwoong Jung</div>
 </body>
</html>

4. 단점 및 추가/개선해야할 점

가장 큰 단점은 .....list.php 파일을 생성되는 모든 디렉터리 안에 넣어줘야 한다는 것이다.

디렉터리가 생성 될 떄마다 위 파일을 넣어주는 것이 여간 귀찮은 일이 아닐 것이다.

또한 이 코드는 Linux환경에서만 유효하다.

나는 CentOS6.6 인데 다른 배포판, 혹은 다른 버젼은 안될 수도 있다.

하지만 리눅스 환경이라면 코드를 조금만 수정 하면바로 적용 가능할 것이다.

가능하다고 생각되어 지는 추가 기능으로는 버튼을 눌렀을 때 디렉터리 째로 압축되는 기능이다.

하지만 .....list.php의 존재 때문에 모든 하위디렉터리까지는 힘들것 같다.

혹 .....list.php를 모든 디렉터리에 넣어야 하는 단점이 극복된다면 하위디렉터리까지도 압축 가능하다.

개선해야할 점으론 디렉터리 링크 클릭 시에는 디렉터리간 이동이,

비 디렉터리 파일 클릭 시에는 파일 다운로드가 진행되어야 하는데 html, php 등의 파일이 업로드 되어있으면 다운로드가 되지 않는다.

<a> 태그에 download를 기입하면 다운로드 창이 뜬다고는 하는데 알 수 없는 이유로 구현 실패했다.

Directory가 아니면 download를 <a>태그에 추가하는 기능이었는데 구현 실패했다.