FDS04_Summary/README/0711.md at master · owl423/FDS04_Summary

package.json

npm은 프로젝트에 대한 설정을 package.json이라는 파일에 의존하고 있고 이 파일에 JSON형식으로 작성해서 프로젝트에 대한 관리를 할 수 있습니다.

name

name, version을 통해 각 패키지의 고유성을 파악한다.

version

name, version을 통해 각 패키지의 고유성을 파악한다.

description

설명을 문자열로 기술한다. 패키지를 찾아내고 이해하는 데 도움을 준다.

keywords

키워드를 문자열 배열로 설명한다. npm search로 검색된 리스트에 표시되기 때문에 사람들이 패키지를 찾아내고 이해하는 데 도움이 된다.

homepage

프로젝트 홈페이지가 있을 경우 입력한다.

bugs

프로젝트의 이슈와 버그 트래킹을 볼 수 있는 url과 이슈를 알릴 email 주소를 입력한다.

licence

패키지 사용자들이 당신이 만든 패키지를 사용하기 위해 어떻게 권한을 얻는지, 또 어떤 금기 사항이 있는지 앍하기 위해 라이센스를 명시해야 한다.

people fields: author, contributors

author는 한 사람만을 지정하고, contributors는 여러 사람을 배열로 지정한다.

files

프로젝트에 포함된 파일의 배열이다.

main

프로그램의 시작점이 되는 모듈의 ID이다.

많은 패키지는 PATH에 설치되는 하나 이상의 실행 파일을 가지고 있다. npm에서는 이를 매우 쉽게 구현할 수 있다.

    {
        "bin": { "myapp": "./cli.js" }
    }

directories

CommonJS Packages 스펙에는 directories 개체를 사용해서 패키지 구성을 나타낼 수 있다.

directories.lib
- 모듈의 라이브러리가 어디에 있는지 보여준다.
directories.bin
- 만약 directories.bin으로 bin을 지정하면 해당 디렉토리의 모든 파일이 실행 파일로 추가된다.
directories.man
- man 문서들이 위치한 폴더를 가리킨다.
directories.doc
- 마크다운 파일들을 여기에 위치시킨다.
directories.example
- 예제 파일들을 여기에 위치시킨다.

repository

소스 코드가 관리되는 저장소 위치를 지정한다.

"repository": {
    "type": "git",
    "url": "https://github.com/npm/npm.git"
}

scripts

패키지의 생명주기 중 다양한 타이밍에서 실행되는 script 명령들을 포함하고 있는 사전이다. scripts 항목 객체에서 키는 이벤트이고, 값은 이때 실행될 커맨드이다.

config

패키지의 버전에 관계없이 패키지 스크립트에서 사용될 수 있는 설정 정보이다.

dependencies

의존성을 규정하는 것은 패키지의 이름과 해당 패키지의 버전 범위를 지정한 객체를 통해 이루어진다. 테스트 관련 모듈이나 트랜스 파일러 관련 모듈을 dependencies 개체에 추가하면 안된다. 그것들은 devDependencies에 설치해야 한다.

version: 명시한 version과 일치해야 한다.
>version: 명시한 version 보다 높아야 한다.
>=version: 명시한 version 보다 높거나 같아야 한다.
<version: 명시한 version 보다 낮아야 한다.
<=version: 명시한 version 보다 낮거나 같아야 한다.
~version: 명시한 version과 근사한 버전.
^version: 명시한 version과 호환되는 것.
1.2.x: version (1.2.0, 1.2.1 ....)
http://: URLs as Dependencies 참고
*: 모든 버전
"": *과 동일
version1 - version2: >= version1 <= version2
range1 || range2: range1 or range2
git...: Git URLs as Dependencies 참고
user/repo: GitHub URLs 참고
tag: tag가 지정되어 publish된 특정 버전. npm-tag 참조.
path/path/path: 하단의 Local Paths 항목 참조

"dependencies": {
    "foo": "1.0.0 - 2.9999.9999",
    "bar": ">=1.0.2 <2.1.2",
    "baz": ">1.0.2 <=2.3.4",
    "boo": "2.0.1",
    "qux": "<1.0.0 || >=2.3.1 <2.4.5 || >=2.5.2 <3.0.0",
    "asd": "http://asdf.com/asdf.tar.gz",
    "til": "~1.2",
    "elf": "~1.2.3",
    "two": "2.x",
    "thr": "3.3.x",
    "lat": "latest",
    "dyl": "file:../dyl"
}

URLs as Dependencies

tarball의 url을 지정할 수도 있다. 지정된 tarball은 패키지 설치에 다운로드되고 설치된다. tarball: .tar나 .tar.gz로 끝나는 파일이다. 기본적으로, tarball은 하나의 파일(.tar)이나 때로는 압축되기도 하는(.gz) 디렉토리 트리의 묶음이다. .tar: 배포 또는 아카이브 용도로 많은 파일을 디렉토리 구조, 파일 속성들을 보전하면서 하나의 큰 파일로 묶는데 사용. .gz: .gz 확장자를 가진 첨부 파일은 GNU 압축 아카이브 파일이라고하고, .gz 파일은 GZ 압축 파일 형식 GNU 프로젝트에 의해 개발 된 인코딩 사양 및 압축 표준으로 구현된다.

Git URLs as Dependencies

아래와 같은 형태의 Git url을 지정할 수 있다.

git://github.com/user/project.git#commit-ish
git+ssh://user@hostname:project.git # commit-ish
git+ssh://user@hostname/project.git#commit-ish
git+http://user@hostname/project.git#commit-ish
git+https://user@hostname/project.git#commit-ish

GitHub URLs

npm 버전 1.1.65 부터 GitHub url을 "foo":"user/foo-projet"와 같이 사용할 수 있다.

{
    "name": "foo",
    "version": "0.0.0",
    "dependencies": {
        "express": "visionmedia/express",
        "mocha": "visionmedia/mocha#4727d357ea"
    }
}

Local Paths

npm 버전 2.0.0부터 로컬 경로를 패키지에 포함시킬 수 있다. 로컬 경로는 npm install -S 나 npm install --save로 설치할 수 있다.

{
    "name": "baz",
    "dependencies": {
        "bar": "file:../foo/bar"
    }    
}

devDependencies

패키지 테스트 및 문서 작성에 사용되는 외부 프레임워크를 다운 받지 않도록 개발자용 Dependencies를 만들어 사용한다.

peerDependencies

dependencies와 반대로 내가 만든 모듈이 다른 모듈과 함께 동작할 수 있다는 호환성을 표시하는 것이다.

{
    "name": "tea-latte",
    "version": "1.3.5",
    "peerDependencies": {
        "tea": "2.x"
    }
    // 위와 같은 경우 tea-latte는 tea라는 호스트 패키지의 2.x버전대와 함께 설치디는 것이 보장된다.
}

bundledDependencies

패키지를 퍼빌리싱할 때 번들되는 패키지 이름들의 목록

optionalDependencies

사용을 원하는 모듈이지만, 없거나 설치가 실패해도 npm의 패키지 설치과정이 중단되지 않도록 하는 것이다.

engines

동작 가능한 node의 버전을 지정할 수 있다

어떤 운영체제에서 작동하는지 지정할 수 있다.

특정한 CPU 아키텍쳐에서만 동작한다고 명시해준다.

preferGlobal

패키지가 글로벌 설치를 수행해야만 한다면, 이 값을 true로 해서 local 설치시에 경고 메세지를 제공할 수 있다.

private

"private": true로 package.json에 설정 해두면, publish 명령을 거부하게 된다.

publishConfig

punlish 할 때 사용되는 설정이다.

DEFAULT VALUES

npm은 패키지 내용에 따라 몇 가지 기본값을 설정한다.

참고자료

CDN(Content delivery network or Content Distribution network)

콘텐츠를 효율적으로 전달하기 위해 여러 노드를 가진 네트워크에 데이터를 저장하여 제공하는 시스템을 말한다.

원리

ISP 네트워크 말단에 캐시 서버를 여러 대 설치하고 사용요청이 오면 요청지에서 제일 가까운 복수의 캐시 서버에서 데이터를 가져와 전송한다. CDN은 캐시 서버가 설치된 지역 또는 국가의 데이터를 우선적으로 전송한다.
- ISP(Internet Service Provider): 개인이나 기업체에게 인터넷 접속 서비스, 웹사이트 구축 및 웹호스팅 서비스 등을 제공하는 회사
CDN을 구성하면 접속이 몰릴 경우 병목현상이 발생하여 전송 속도가 저하되는 것을 막을 뿐만 아니라 타사의 ISP를 거치며 발생하는 데이터 손실을 방지할 수 있다.
- 병목현상: 어떠한 특정 요소의 한계 때문에 전체가 제한받는 상황

장점

ISP에 장애가 발생해도 다른 ISP에 있는 캐시 서버에서 데이터를 전송하므로 전송 중단이 발생하지 않는다

jQuery

jQuery는 자바스크립트의 생산성을 향상시켜주는 자바스크립트 라이브러리 입니다.

라이브러리란 자주 사용되는 로직들을 재활용,유통 가능하도록 만든 로직들의 묶음을 의미합니다.

jQuery Method가 chaining이 가능한 이유

jQuery 객체가 메서드마다 반환되기 때문

var h1_el = $('h1').css('color', 'tan').addClass('is-3').removeClass('is-1');

    var h1_el = [ $('h1') ]  [ .css(...) ]  [ .addClass(...) ]  [ .removeClass(...) ]
          ┃         ┃             ┃               ┃                     ┃
          ┃         ┗━━━━━┳━━━━━━━┛               ┃                     ┃
          ┃              (1)                      ┃                     ┃
          ┃               ┗━━━━━━━━━━┳━━━━━━━━━━━━┛                     ┃
         (4)                        (2)                                 ┃
          ┃                          ┗━━━━━━━━━━━━━━━━━┳━━━━━━━━━━━━━━━━┛   
          ┃                                           (3) 
          ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛

(1) : elementNode의 css스타일을 적용한 후 $(this)를 반환
(2) : 반환된 elNode의 클래스를 추가한 후 $(this)를 반환
(3) : 반환된 elNode의 클래스를 제거한 후 $(this)를 반환
(4) : 체이닝 과정을 모두 거친 $(this)를 h1_el 변수에 참조

es6 =>(arrow)에서의 this 참조

this는 상위의 context를 참조한다.

$(document).on('click', e => {
    console.log(e.target);
    console.log(this);  //상위의 context      
});

//  ▼

$(document).on('click', function() {
    console.log(e.target);
    console.log(this);  //document 객체를 참조      
});

jQuery Method

hasClass(className)

엘리먼트 집합에서 매개변수로 지정된 CSS 클래스를 지닌 엘리먼트가 존재하는지 알려준다.
클래스 존재여부에 따라 Boolean 값으로 반환한다. (해당 className를 가지고 있으면 true)

<div id="mydiv" class="foo bar"></div>

//true 반환
$( "#mydiv" ).hasClass( "foo" );
$( "#mydiv" ).hasClass( "bar" );

// false 반환
$( "#mydiv" ).hasClass( "quux" );

addClass()

클래스를 추가한다. addClass('추가할 클래스 이름');

.addClass()XML 또는 SVG 문서에서 사용할 수 있다.
한 번에 두 개 이상의 클래스는 띄어쓰기를 이용한다.

$(document).ready(function(){
    $("button").click(function(){
        $("p:first").addClass("intro");
    });
});

removeClass()

addClass의 반대 개념, 클래스 삭제

addClass와 마찬가지로 한 번에 두 개 이상의 클래스는 띄어쓰기를 이용한다.

$(document).ready(function(){
    $("button").click(function(){
        $("p").removeClass("intro");
    });
});

hasClass, removeClass, addClass 활용 예시

<div class="test">테스트입니다.</div>
<button class="btn">변경</button>

.test.active {color:red;}

$(document).ready(function() {
   $(".btn").off("click").on("click", function() {
	// test class를 포함하는 DOM 객체가 active class를 포함하면 true 아니면 false를 반환
       if ($(".test").hasClass("active")) { 
		// active class 제거
           	$(".test").removeClass("active");
       } else {
		// active class 추가
        	$(".test").addClass("active");
       }
   });
});

ready()

DOM이 준비된 후에(ready) 실행할 함수
리턴 값 : jQuery

.ready() 메서드는 페이지의 DOM이 안전하게 조작될 수 있는 상황이 되면 즉시 코드를 실행 할 수 있게 함.
이는 사용자가 페이지를 보거나 상호 작용하기 전에 필요한 작업(플러그인 초기화 등)을 수행할 타이밍.
이 함수를 연속적으로 호출하여 여러 함수를 추가하면 DOM이 추가 된 순서대로 준비가 완료되면 실행됩니다.

사용 방법

$( handler )
$( document ).ready( handler )
$( "document" ).ready( handler )
$( "img" ).ready( handler )
$().ready( handler )

내용이 많으니 꼭 가서 읽어보자
jQuery .ready()에 대하여 # jQuery.noConflict()jQuery가 $ 변수를 제어권을 포기하게 함.

리턴 값 : Object

jQuery.noConflict([removeAll ])
전역 범위 (jQuery 자체 포함)에서 모든 jQuery 변수를 제거할지 여부를 나타내는 boolean입니다.
많은 JavaScript 라이브러리는 $를 함수 또는 변수 이름으로 사용합니다.
jQuery와 함께 다른 라이브러리를 사용해야하는 경우 $.noConflict()를 호출하여 $의 제어를 다른 라이브러리로 설정가능
어떤 이유로 두 가지 버전의 jQuery가로드 된 경우 (권장하지 않음)
두 번째 버전에서 $.noConflict(true)를 호출하면 전역적으로 범위가 지정된 jQuery 변수가 첫 번째 버전의 변수로 반환됩니다.

<script src="other_lib.js"></script>
<script src="jquery.js"></script>
<script>
$.noConflict();
// 다른 라이브러리의 $를 사용하는 코드는 여기에..
</script>

특히 .ready() 메소드가 jQuery객체를 앨리어스 (alias) 할 수 있는 능력과 함께 효과적입니다.
콜백을 .ready()로 전달하면 나중에 충돌 할 염려 없이 $를 사용할 수 있습니다.

<script src="other_lib.js"></script>
<script src="jquery.js"></script>
<script>
$.noConflict();
jQuery( document ).ready(function( $ ) {
  // jQuery의 $를 사용한 코드는 여기에..
});
// 다른 라이브러리의 $를 사용하는 코드는 여기에..
</script>

jQuery.holdReady()jQuery ready 이벤트의 실행을 지연(hold) 및 해제합니다.

리턴 값 : boolean

이 메소드는 jQuery 스크립트 태그 바로 다음에있는 와 같이 문서 초기에 호출해야합니다.
ready 이벤트가 이미 실행 된 후에이 메서드를 호출해도 아무 효과가 없습니다.

ready 이벤트를 지연시키려면 $.holdReady(true)
ready 이벤트가 실행시키려면 $.holdReady(false)
ready 상태 이벤트에는 여러 개의 지연 조치를 적용 할 수 있음.
ready 상태 이벤트는 지연조치 횟수와 실행조치 횟수가 같아지고 normal document ready 상태가 충족 될 때까지 실행되지 않습니다.

((global, $) => {
  'use strict';

  let api_id = 'f0etn';
  let api_address = `https://api.myjson.com/bins/${api_id}`;

  // jQuery Ready()를 붙잡자(hold)
  console.log('jQuery Ready()를 붙잡자(hold: true)');
  
  $.holdReady(true); // Ready 이벤트 지연(hold)

  // Ajax GET
  $.get(api_address).then(data => {
    
    console.log('jQuery Ready()를 놓아주다(hold: false)');
    
    $.holdReady(false); // Ready 이벤트 실행
  });

})(window, window.jQuery);

익스프레스 템플릿(Jade, Pug), Express template

Pug 소개

Pug는 node.js용으로 만들어진 view 템플릿 엔진이다.
2016년 초에 이름의 라이센스 문제로 Jade에서 Pug로 강제 개명당했다.
Pug 홈페이지에서 API, Language Reference를 찾아볼 수 있다.
- API
  - Getting Started
  - Express Integration
  - Reference
  - Migrating to Pug 2
- Language Reference
  - Attributes
  - Case
  - Code
  - Comments
  - Conditionals
  - Doctype
  - Filters
  - Includes
  - Inheritance: Extends and Block
  - Interpolation
  - Iteration
  - Mixins
  - Plain Text
  - Tags
Pug 홈페이지
Pug syntax 참고

Pug 문법

pug 특성상 들여쓰기에 주의해야한다.
- 들여쓰기를 이용해서 부모 자식 관계를 표현한다.
- 들여쓰기는 space든 tab이든 상관없지만 하나로 통일해야 하고 항상 일정한 간격으로 들여써야한다.
```
doctype html
html(lang="ko-KR")
  head
    meta(charset="utf-8")
    title 
  body
    main
```

출력되면 안되는 for 문같은 것을 활용할 때는 앞에 " - "를 붙여준다.

-
  for(var i = 0; i < 5; i++)
    li coding

랜더결과

  <li>coding</li>
  <li>coding</li>
  <li>coding</li>
  <li>coding</li>
  <li>coding</li>

변수를 활용할 땐 " = " 를 활용한다.

-
  var list = ["Uno", "Dos", "Tres",
          "Cuatro", "Cinco", "Seis"]
  each item in list
  li= item

랜더결과

<li>Uno</li>
<li>Dos</li>
<li>Tres</li>
<li>Cuatro</li>
<li>Cinco</li>
<li>Seis</li>

Pug는 믹스인을 정의하고 재사용 할 수 있다.

//- Declaration
-
  mixin list
    ul
      li foo
      li bar
      li baz
//- Use
+list
+list

랜더결과

<ul>
  <li>foo</li>
  <li>bar</li>
  <li>baz</li>
</ul>
<ul>
  <li>foo</li>
  <li>bar</li>
  <li>baz</li>
</ul>

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

package.json

참고자료

CDN(Content delivery network or Content Distribution network)

원리

장점

jQuery

jQuery Method가 chaining이 가능한 이유

es6 =>(arrow)에서의 this 참조

jQuery Method

hasClass(className)

addClass()

removeClass()

hasClass, removeClass, addClass 활용 예시

ready()

jQuery.holdReady()jQuery ready 이벤트의 실행을 지연(hold) 및 해제합니다.

익스프레스 템플릿(Jade, Pug), Express template

Pug 소개

Pug 문법

FilesExpand file tree

0711.md

Latest commit

History

0711.md

File metadata and controls

package.json

참고자료

CDN(Content delivery network or Content Distribution network)

원리

장점

jQuery

jQuery Method가 chaining이 가능한 이유

es6 =>(arrow)에서의 this 참조

jQuery Method

hasClass(className)

addClass()

removeClass()

hasClass, removeClass, addClass 활용 예시

ready()

jQuery.holdReady()jQuery ready 이벤트의 실행을 지연(hold) 및 해제합니다.

익스프레스 템플릿(Jade, Pug), Express template

Pug 소개

Pug 문법