hello_js_node.ipynb

{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "source": [
    "# javascript\n",
    "\n",
    "Last update 20190322FRI0600 20190204MON0600\n",
    "\n",
    "* 설치\n",
    "* 1.1 ipython display\n",
    "* 1.2 magic\n",
    "* 1.3 Javascript\n",
    "* 1.3.1 dom\n",
    "* 1.4 JQuery\n",
    "* 1.5 external library\n",
    "* 1.6 Node\n",
    "* 1.6.1 requireJS\n",
    "* 1.6.2 Require\n",
    "* 1.6.3 node\n",
    "* 1.6.4 pixiedust\n",
    "* 1.7 npm\n",
    "* 1.7.1 설치\n",
    "* 1.7.2 패키지 생성"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "source": [
    "## 1.1 ipython display\n",
    "\n",
    "```ipython notebook```에서 python과 javascript를 섞어쓰려면 kernel을 통해서 사용할 수 있다.\n",
    "또한 javascript를 직접 사용하려면 ```ijavascript```를 설치해서 쓰면 된다.\n",
    "\n",
    "* todo2.txt에서 정리\n",
    "* program_installer 정리"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "ipython notebook에서 HTML을 사용할 수 있다."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 1,
   "metadata": {
    "collapsed": false,
    "slideshow": {
     "slide_type": "subslide"
    }
   },
   "outputs": [
    {
     "data": {
      "text/html": [
       "<h1>hello</h1>"
      ],
      "text/plain": [
       "<IPython.core.display.HTML object>"
      ]
     },
     "execution_count": 1,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "from IPython.core.display import HTML\n",
    "HTML('<h1>hello</h1>')"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 2,
   "metadata": {
    "collapsed": false,
    "slideshow": {
     "slide_type": "subslide"
    }
   },
   "outputs": [
    {
     "data": {
      "text/html": [
       "\n",
       "<div style=\"background-color:gainsboro; border:solid black; width:300px; padding:20px;\">\n",
       "Variable Name: <input type=\"text\" id=\"var_name\" value=\"foo\"><br>\n",
       "Variable Value: <input type=\"text\" id=\"var_value\" value=\"bar\"><br>\n",
       "<button onclick=\"set_value()\">Set Value</button>\n",
       "</div>\n",
       "\n",
       "<script type=\"text/Javascript\">\n",
       "    function set_value(){\n",
       "        var var_name = document.getElementById('var_name').value;\n",
       "        var var_value = document.getElementById('var_value').value;\n",
       "        var command = var_name + \" = '\" + var_value + \"'\";\n",
       "        console.log(\"Executing Command: \" + command);\n",
       "        \n",
       "        var kernel = IPython.notebook.kernel;\n",
       "        kernel.execute(command);\n",
       "    }\n",
       "</script>\n"
      ],
      "text/plain": [
       "<IPython.core.display.HTML object>"
      ]
     },
     "execution_count": 2,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "from IPython.display import HTML\n",
    "\n",
    "input_form = \"\"\"\n",
    "<div style=\"background-color:gainsboro; border:solid black; width:300px; padding:20px;\">\n",
    "Variable Name: <input type=\"text\" id=\"var_name\" value=\"foo\"><br>\n",
    "Variable Value: <input type=\"text\" id=\"var_value\" value=\"bar\"><br>\n",
    "<button onclick=\"set_value()\">Set Value</button>\n",
    "</div>\n",
    "\"\"\"\n",
    "\n",
    "javascript = \"\"\"\n",
    "<script type=\"text/Javascript\">\n",
    "    function set_value(){\n",
    "        var var_name = document.getElementById('var_name').value;\n",
    "        var var_value = document.getElementById('var_value').value;\n",
    "        var command = var_name + \" = '\" + var_value + \"'\";\n",
    "        console.log(\"Executing Command: \" + command);\n",
    "        \n",
    "        var kernel = IPython.notebook.kernel;\n",
    "        kernel.execute(command);\n",
    "    }\n",
    "</script>\n",
    "\"\"\"\n",
    "\n",
    "HTML(input_form + javascript)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 3,
   "metadata": {
    "collapsed": false
   },
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "bar\n"
     ]
    }
   ],
   "source": [
    "print foo"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## 1.2 magic\n",
    "\n",
    "* %%javascript 셀명령어를 사용할 수 있다.\n",
    "* 결과는 브라우저의 javascript console에서 볼 수 있다.\n",
    "    * Chrome은 Tools > JavaScript console Shift+Ctrl+J"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 3,
   "metadata": {
    "collapsed": false
   },
   "outputs": [
    {
     "data": {
      "application/javascript": [
       "console.log(\"Hello World!\")"
      ],
      "text/plain": [
       "<IPython.core.display.Javascript object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "%%javascript\n",
    "console.log(\"Hello World!\")"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "* window object의 속성에 값을 넣을 수 있다. 콘솔에 변수를 확인할 수 있다.\n",
    "    ```\n",
    "    \\> myvar\n",
    "    \\<- 12\n",
    "    ```"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 4,
   "metadata": {
    "collapsed": false
   },
   "outputs": [
    {
     "data": {
      "application/javascript": [
       "window.myvar = 12;"
      ],
      "text/plain": [
       "<IPython.core.display.Javascript object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "%%javascript\n",
    "window.myvar = 12;"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 5,
   "metadata": {
    "collapsed": false
   },
   "outputs": [
    {
     "data": {
      "application/javascript": [
       "console.log(myvar)"
      ],
      "text/plain": [
       "<IPython.core.display.Javascript object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "%%javascript\n",
    "console.log(myvar)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 6,
   "metadata": {
    "collapsed": false
   },
   "outputs": [
    {
     "data": {
      "application/javascript": [
       "element.append(myvar)"
      ],
      "text/plain": [
       "<IPython.core.display.Javascript object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "%%javascript\n",
    "element.append(myvar)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### element설명\n",
    "\n",
    "http://blog.nacyot.com/articles/2015-05-21-d3js-in-jupyter/\n",
    "\n",
    "주피터 노트북의 %%javascript 매직 안에서는 element라는 특별한 요소가 정의되어있다.\n",
    "이 element에는 현재 주피터 노트북 셀의 결과 요소가 지정되어 있고, 이를 조작해서 현재 셀의 출력 결과에 대한 조작을 할 수 있다."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 1,
   "metadata": {
    "collapsed": false
   },
   "outputs": [
    {
     "data": {
      "application/javascript": [
       "\n",
       "window.get_element = function(el){\n",
       "    if(el){ $(el).html('') }\n",
       "    return (el !== undefined) ? el[0] : $('script').last().parent()[0];\n",
       "};\n",
       "\n",
       "element = undefined;"
      ],
      "text/plain": [
       "<IPython.core.display.Javascript object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "%%javascript\n",
    "window.get_element = function(el){\n",
    "    if(el){ $(el).html('') }\n",
    "    return (el !== undefined) ? el[0] : $('script').last().parent()[0];\n",
    "};\n",
    "\n",
    "element = undefined;"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 2,
   "metadata": {
    "collapsed": false
   },
   "outputs": [
    {
     "data": {
      "application/javascript": [
       "\n",
       "var target = get_element(element)\n",
       "$(target).append('<div class=\"hello-world\">Hello, js magic!</div>')"
      ],
      "text/plain": [
       "<IPython.core.display.Javascript object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "%%javascript\n",
    "\n",
    "var target = get_element(element)\n",
    "$(target).append('<div class=\"hello-world\">Hello, js magic!</div>')"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## 1.3 Javascript\n",
    "\n",
    "w3schools의 연습"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### 1.3.1 dom\n",
    "\n",
    "* html element 찾기\n",
    "```\n",
    "document.getElementByid\n",
    "document.getElementsByTagName\n",
    "document.getElementsByClassName\n",
    "```\n",
    "* html element 변경하기\n",
    "```\n",
    "element.innerHTML =  new html content\tChange the inner HTML of an element\n",
    "element.attribute = new value\tChange the attribute value of an HTML element\n",
    "```\n",
    "* css selectors\n",
    "    * The querySelectorAll() method does not work in Internet Explorer 8 and earlier versions."
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "collapsed": true
   },
   "source": [
    "* getElementById('demo').innerHTML은 id명 'demo'를 찾아서 변경"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 6,
   "metadata": {
    "collapsed": false
   },
   "outputs": [
    {
     "data": {
      "text/html": [
       "<!DOCTYPE html>\n",
       "<html>\n",
       "<head>\n",
       "<script>\n",
       "function myFunction() {\n",
       "    document.getElementById(\"demo\").innerHTML = \"Paragraph changed.\";\n",
       "}\n",
       "</script>\n",
       "</head>\n",
       "<body>\n",
       "<h1>My Web Page</h1>\n",
       "<p id=\"demo\">A Paragraph</p>\n",
       "<button type=\"button\" onclick=\"myFunction()\">Try it</button>\n",
       "</body>\n",
       "</html>"
      ],
      "text/plain": [
       "<IPython.core.display.HTML object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "%%HTML\n",
    "<!DOCTYPE html>\n",
    "<html>\n",
    "<head>\n",
    "<script>\n",
    "function myFunction() {\n",
    "    document.getElementById(\"demo\").innerHTML = \"Paragraph changed.\";\n",
    "}\n",
    "</script>\n",
    "</head>\n",
    "<body>\n",
    "<h1>My Web Page</h1>\n",
    "<p id=\"demo\">A Paragraph</p>\n",
    "<button type=\"button\" onclick=\"myFunction()\">Try it</button>\n",
    "</body>\n",
    "</html>"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 15,
   "metadata": {
    "collapsed": false
   },
   "outputs": [
    {
     "data": {
      "text/html": [
       "<!DOCTYPE html>\n",
       "<html>\n",
       "\n",
       "<body>\n",
       "\n",
       "<p id=\"demo\">Hello</p>\n",
       "<script>\n",
       "var demo=document.getElementById(\"demo\");\n",
       "alert(demo.attribute);\n",
       "</script>\n",
       "\n",
       "\n",
       "</body>\n",
       "</html>"
      ],
      "text/plain": [
       "<IPython.core.display.HTML object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "%%HTML\n",
    "<!DOCTYPE html>\n",
    "<html>\n",
    "\n",
    "<body>\n",
    "\n",
    "<p id=\"demo\">Hello</p>\n",
    "<script>\n",
    "var demo=document.getElementById(\"demo\");\n",
    "console.log(demo);\n",
    "</script>\n",
    "\n",
    "\n",
    "</body>\n",
    "</html>"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 16,
   "metadata": {
    "collapsed": false
   },
   "outputs": [
    {
     "data": {
      "text/html": [
       "<!DOCTYPE html>\n",
       "<html>\n",
       "<body>\n",
       "\n",
       "<p>Hello World!</p>\n",
       "\n",
       "<p class=\"intro\">The DOM is very useful.</p>\n",
       "<p class=\"intro\">This example demonstrates the <b>querySelectorAll</b> method.</p>\n",
       "\n",
       "<p id=\"demo\"></p>\n",
       "\n",
       "<script>\n",
       "var x = document.querySelectorAll(\"p.intro\");\n",
       "document.getElementById(\"demo\").innerHTML =\n",
       "'The first paragraph (index 0) with class=\"intro\": ' + x[0].innerHTML;\n",
       "</script>\n",
       "\n",
       "</body>\n",
       "</html>"
      ],
      "text/plain": [
       "<IPython.core.display.HTML object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "%%HTML\n",
    "<!DOCTYPE html>\n",
    "<html>\n",
    "<body>\n",
    "\n",
    "<p>Hello World!</p>\n",
    "\n",
    "<p class=\"intro\">The DOM is very useful.</p>\n",
    "<p class=\"intro\">This example demonstrates the <b>querySelectorAll</b> method.</p>\n",
    "\n",
    "<p id=\"demo\"></p>\n",
    "\n",
    "<script>\n",
    "var x = document.querySelectorAll(\"p.intro\");\n",
    "document.getElementById(\"demo\").innerHTML =\n",
    "'The first paragraph (index 0) with class=\"intro\": ' + x[0].innerHTML;\n",
    "</script>\n",
    "\n",
    "</body>\n",
    "</html>\n"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "* 요거는 되네.."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 21,
   "metadata": {
    "collapsed": false
   },
   "outputs": [
    {
     "data": {
      "text/html": [
       "<html>\n",
       "<body>\n",
       "\n",
       "<h1>My First JavaScript</h1>\n",
       "\n",
       "<button type=\"button\"\n",
       "onclick=\"document.getElementById('demo').innerHTML = Date()\">\n",
       "Click me to display Date and Time.</button>\n",
       "\n",
       "<p id=\"demo\"></p>\n",
       "\n",
       "</body>\n",
       "</html>\n"
      ],
      "text/plain": [
       "<IPython.core.display.HTML object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "%%HTML\n",
    "<html>\n",
    "<body>\n",
    "\n",
    "<h1>My First JavaScript</h1>\n",
    "\n",
    "<button type=\"button\"\n",
    "onclick=\"document.getElementById('demo').innerHTML = Date()\">\n",
    "Click me to display Date and Time.</button>\n",
    "\n",
    "<p id=\"demo\"></p>\n",
    "\n",
    "</body>\n",
    "</html>\n",
    "\n"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 18,
   "metadata": {
    "collapsed": false
   },
   "outputs": [
    {
     "data": {
      "text/html": [
       "<html>\n",
       "<body>\n",
       "\n",
       "<p id=\"p2\">Hello World!</p>\n",
       "\n",
       "<script>\n",
       "document.getElementById(\"p2\").style.color = \"blue\";\n",
       "</script>\n",
       "\n",
       "<p>The paragraph above was changed by a script.</p>\n",
       "\n",
       "</body>\n",
       "</html>"
      ],
      "text/plain": [
       "<IPython.core.display.HTML object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "%%HTML\n",
    "<html>\n",
    "<body>\n",
    "\n",
    "<p id=\"p2\">Hello World!</p>\n",
    "\n",
    "<script>\n",
    "document.getElementById(\"p2\").style.color = \"blue\";\n",
    "</script>\n",
    "\n",
    "<p>The paragraph above was changed by a script.</p>\n",
    "\n",
    "</body>\n",
    "</html>"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 20,
   "metadata": {
    "collapsed": false
   },
   "outputs": [
    {
     "data": {
      "text/html": [
       "<!DOCTYPE html>\n",
       "<html>\n",
       "<body>\n",
       "\n",
       "<h1 id=\"id1\">My Heading 1</h1>\n",
       "\n",
       "<button type=\"button\" \n",
       "onclick=\"document.getElementById('id1').style.color = 'red'\">\n",
       "Click Me!</button>\n",
       "\n",
       "</body>\n",
       "</html>"
      ],
      "text/plain": [
       "<IPython.core.display.HTML object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "%%HTML\n",
    "<!DOCTYPE html>\n",
    "<html>\n",
    "<body>\n",
    "\n",
    "<h1 id=\"id1\">My Heading 1</h1>\n",
    "\n",
    "<button type=\"button\" \n",
    "onclick=\"document.getElementById('id1').style.color = 'red'\">\n",
    "Click Me!</button>\n",
    "\n",
    "</body>\n",
    "</html>"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## 1.4 JQuery"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 3,
   "metadata": {
    "collapsed": false,
    "scrolled": false
   },
   "outputs": [
    {
     "data": {
      "text/html": [
       "<!DOCTYPE html>\n",
       "<html>\n",
       "<head>\n",
       "<script src=\"https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js\"></script>\n",
       "<script>\n",
       "$(document).ready(function(){\n",
       "    $(\"button\").click(function(){\n",
       "        $(\"p\").hide();\n",
       "    });\n",
       "});\n",
       "</script>\n",
       "</head>\n",
       "<body>\n",
       "\n",
       "<h2>This is a heading</h2>\n",
       "\n",
       "<p>This is a paragraph.</p>\n",
       "<p>This is another paragraph.</p>\n",
       "\n",
       "<button>Click me to hide paragraphs</button>\n",
       "\n",
       "</body>\n",
       "</html>"
      ],
      "text/plain": [
       "<IPython.core.display.HTML object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "%%HTML\n",
    "<!DOCTYPE html>\n",
    "<html>\n",
    "<head>\n",
    "<script src=\"https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js\"></script>\n",
    "<script>\n",
    "$(document).ready(function(){\n",
    "    $(\"button\").click(function(){\n",
    "        $(\"p\").hide();\n",
    "    });\n",
    "});\n",
    "</script>\n",
    "</head>\n",
    "<body>\n",
    "\n",
    "<h2>This is a heading</h2>\n",
    "\n",
    "<p>This is a paragraph.</p>\n",
    "<p>This is another paragraph.</p>\n",
    "\n",
    "<button>Click me to hide paragraphs</button>\n",
    "\n",
    "</body>\n",
    "</html>\n"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": true
   },
   "outputs": [],
   "source": []
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## 1.5 external library\n",
    "\n",
    "* script 태그가 src 속성이 있으면 내용은 무시\n",
    "```\n",
    "<script src=\"myscripts/my.js\" type=\"text/javascript\">Hello</script>\n",
    "```\n",
    "* 따라서 외부 스크립트를 포함시키려면 2개의 스크립트 태그를 사용\n",
    "```\n",
    "<script src=\"myscripts/my.js\" type=\"text/javascript\"></script>\n",
    "<script>\n",
    "    document.write(sayHello());\n",
    "</script>\n",
    "```\n",
    "\n",
    "* 상대경로 vs 절대경로\n",
    "    * 로컬 파일은 보안정책으로 인해 읽을 수가 없다 Cross-Origin Restriction Policy\n",
    "        * 따라서 자신이 로컬javascript에서 로컬파일을 읽으려 해도 허용되지 않는다 (절대 경로)\n",
    "        * jsonp를 사용하면 예외\n",
    "        * 따라서 javascript가 실행되는 곳으로부터 상대경로로 읽어야 한다.\n",
    "\n",
    "* 절대경로 \n",
    "    * http://domain/ or just / (replace domain with your actual domain, such as www.example.com).\n",
    "* 상대경로\n",
    "    * 현재 HTML page로부터의 경로"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 18,
   "metadata": {
    "collapsed": false
   },
   "outputs": [
    {
     "data": {
      "text/plain": [
       "u'/home/jsl/Code/git'"
      ]
     },
     "execution_count": 18,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "!ls my"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 1,
   "metadata": {
    "collapsed": false
   },
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "Writing _scripts/my.js\n"
     ]
    }
   ],
   "source": [
    "%%writefile _scripts/my.js\n",
    "function sayHello(){\n",
    "   return \"myscripts/hello\";\n",
    "}"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 2,
   "metadata": {
    "collapsed": false
   },
   "outputs": [
    {
     "data": {
      "text/html": [
       "\n",
       "<script src=\"myscripts/my.js\" type=\"text/javascript\"></script>\n",
       "<script>\n",
       "    document.write(sayHello());\n",
       "</script>\n"
      ],
      "text/plain": [
       "<IPython.core.display.HTML object>"
      ]
     },
     "execution_count": 2,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "from IPython.display import HTML\n",
    "\n",
    "javascript = \"\"\"\n",
    "<script src=\"_scripts/my.js\" type=\"text/javascript\"></script>\n",
    "<script>\n",
    "    document.write(sayHello());\n",
    "</script>\n",
    "\"\"\"\n",
    "\n",
    "HTML(javascript)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 5,
   "metadata": {
    "collapsed": false
   },
   "outputs": [
    {
     "data": {
      "text/html": [
       "<html>\n",
       "   <body>\n",
       "   \n",
       "      <script language=\"javascript\" type=\"text/javascript\" >\n",
       "         <!--\n",
       "            document.write(\"Hello World!\")\n",
       "         //-->\n",
       "      </script>\n",
       "      \n",
       "   </body>\n",
       "</html>"
      ],
      "text/plain": [
       "<IPython.core.display.HTML object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "%%html\n",
    "<html>\n",
    "   <body>   \n",
    "      <script language=\"javascript\" type=\"text/javascript\" >\n",
    "         <!--\n",
    "            document.write(\"Hello World!\")\n",
    "         //-->\n",
    "      </script>\n",
    "      \n",
    "   </body>\n",
    "</html>"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "collapsed": true
   },
   "source": [
    "* loading external script from console\n",
    "* 아래 하고서 console.log(document.head);하면 추가된 것을 확인할 수 있슴."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 6,
   "metadata": {
    "collapsed": false
   },
   "outputs": [
    {
     "data": {
      "application/javascript": [
       "var script = document.createElement('script');\n",
       "script.type = 'text/javascript';\n",
       "script.src = 'bb/jsl/bitcoin/_lib/node_modules/bignumber.js/bignumber.js';\n",
       "document.head.appendChild(script);\n",
       "console.log(script);"
      ],
      "text/plain": [
       "<IPython.core.display.Javascript object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "%%javascript\n",
    "var script = document.createElement('script');\n",
    "script.type = 'text/javascript';\n",
    "script.src = 'bb/jsl/bitcoin/_lib/node_modules/bignumber.js/bignumber.js';\n",
    "document.head.appendChild(script);\n",
    "console.log(script);"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "collapsed": true
   },
   "source": [
    "* console -> how to get cwd"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 1,
   "metadata": {
    "collapsed": false
   },
   "outputs": [
    {
     "data": {
      "application/javascript": [
       "console.dir(document.location);"
      ],
      "text/plain": [
       "<IPython.core.display.Javascript object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "%%javascript\n",
    "console.dir(document.location);"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "collapsed": true
   },
   "source": [
    "* D3"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": true
   },
   "outputs": [],
   "source": [
    "%%javascript\n",
    "require.config({\n",
    "    paths: {\n",
    "        d3: '//cdnjs.cloudflare.com/ajax/libs/d3/3.4.8/d3.min'\n",
    "    }\n",
    "});"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": true
   },
   "outputs": [],
   "source": [
    "%%javascript\n",
    "element.append(\"<div id='chart1'></div>\");"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## 1.6 Node\n",
    "\n",
    "### 1.6.1 설치\n",
    "\n",
    "* 우분투\n",
    "```python\n",
    "sudo apt install nodejs\n",
    "sudo apt install npm\n",
    "```\n",
    "\n",
    "* 윈도우에서는 https://nodejs.org/ 다운로드하고 실행파일을 설치. npm.exe도 "
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### pixiedust"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 1,
   "metadata": {
    "collapsed": false,
    "scrolled": true
   },
   "outputs": [
    {
     "ename": "ImportError",
     "evalue": "No module named pixiedust",
     "output_type": "error",
     "traceback": [
      "\u001b[0;31m---------------------------------------------------------------------------\u001b[0m",
      "\u001b[0;31mImportError\u001b[0m                               Traceback (most recent call last)",
      "\u001b[0;32m<ipython-input-1-920006ea8d6e>\u001b[0m in \u001b[0;36m<module>\u001b[0;34m()\u001b[0m\n\u001b[0;32m----> 1\u001b[0;31m \u001b[0;32mimport\u001b[0m \u001b[0mpixiedust\u001b[0m\u001b[0;34m\u001b[0m\u001b[0m\n\u001b[0m",
      "\u001b[0;31mImportError\u001b[0m: No module named pixiedust"
     ]
    }
   ],
   "source": [
    "import pixiedust"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": true
   },
   "outputs": [],
   "source": [
    "%%node\n",
    "var date = new Date();\n",
    "print(date);"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": true
   },
   "outputs": [],
   "source": [
    "%%node\n",
    "var Web3=require('web3');\n",
    "var web3 = new Web3(new Web3.providers.HttpProvider(\"http://localhost:8545\"));"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### 1.6.1 requireJS\n",
    "\n",
    "* add to hello_javascript.ipynb requireJS\n",
    "    https://www.sitepoint.com/understanding-requirejs-for-effective-javascript-module-loading/\n",
    "\n",
    "Java or Python use the import function to load other libraries, while PHP and Ruby use require. Node implements the CommonJS interface for modules. In Node you can also load other depencies using the require keyword.\n",
    "\n",
    "* 오류\n",
    "    * main.js에서 다음과 같이 호출하면 오류\n",
    "    ```\n",
    "    var result = purchaseProduct();\n",
    "    ```\n",
    "    * purchase.js가 product.js, credits.js에 의존적\n",
    "    * purchase.js가 실행되기 전에 이들 파일이 먼저 loading되어야 함."
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### 1.6.2 Require\n",
    "\n",
    "#### 라이브러리 가져오기 require\n",
    "\n",
    "```require('xyz')``` xyz 라이브러리를 import하는 명령어이다."
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "#### 경로에서 라이브러리 검색\n",
    "\n",
    "node는 'xyz'를 ```module.paths```에 명시된 모든 경로를 **순서대로** 찾게 된다.\n",
    "```node_modules```는 npm에서 내려받은 라이브러리가 설치되는 경로이다.\n",
    "아래에서 보듯이, 현재 ```myWinHere```에서 찾아보고 없으면 부모디렉토리를 모두 올라가며 ```node_modules```에서 'xyz'를 찾는다. 그러다가 발견하면 그 패키지 'xyz'를 사용하게 된다.\n",
    "\n",
    "```python\n",
    "> module.paths\n",
    "[ 'C:\\\\Users\\\\jsl\\\\Code\\\\git\\\\bb\\\\jsl\\\\bitcoin\\\\myWinHere\\\\repl\\\\node_modules',\n",
    "  'C:\\\\Users\\\\jsl\\\\Code\\\\git\\\\bb\\\\jsl\\\\bitcoin\\\\myWinHere\\\\node_modules',\n",
    "  'C:\\\\Users\\\\jsl\\\\Code\\\\git\\\\bb\\\\jsl\\\\bitcoin\\\\node_modules',\n",
    "  'C:\\\\Users\\\\jsl\\\\Code\\\\git\\\\bb\\\\jsl\\\\node_modules',\n",
    "  'C:\\\\Users\\\\jsl\\\\Code\\\\git\\\\bb\\\\node_modules',\n",
    "  'C:\\\\Users\\\\jsl\\\\Code\\\\git\\\\node_modules',\n",
    "  'C:\\\\Users\\\\jsl\\\\Code\\\\node_modules',\n",
    "  'C:\\\\Users\\\\jsl\\\\node_modules',\n",
    "  'C:\\\\Users\\\\node_modules',\n",
    "  'C:\\\\node_modules',\n",
    "  'C:\\\\Users\\\\jsl\\\\.node_modules',\n",
    "  'C:\\\\Users\\\\jsl\\\\.node_libraries',\n",
    "  'C:\\\\Program Files\\\\nodejs\\\\lib\\\\node' ]\n",
    "```"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "#### main 찾기\n",
    "\n",
    "그 라이브러리가 설치된 디렉토리에서 ```package.json```을 읽어서 ```main```을 찾는다. \n",
    "예를 들어, ```./node_modules/web3```를 찾으면 그 아래 다음과 같이 ```package.json```이 저장되어 있고, 그 파일을 열어보면 ```main```이 무엇인지 확인할 수 있다..\n",
    "\n",
    "```python\n",
    "node_modules/web3\n",
    "    |- package.json  이 파일을 열어보면, main이 src/index.js라고 적혀있다.\n",
    "    |- src/\n",
    "        |- index.js\n",
    "```\n",
    "\n",
    "```python\n",
    "{\n",
    "  \"name\": \"web3\",\n",
    "  ...\n",
    "  \"version\": \"1.2.5-rc.0\",\n",
    "  ...\n",
    "  \"main\": \"src/index.js\"  package.json의 main 필드에 src/index.js가 적혀 있다.\n",
    "}\n",
    "```\n",
    "\n",
    "따라서 ```require('web3.js')```라고 하면, ```main```의 ```src/index.js```가 반환된다.\n",
    "```index.js```에 ```module.exports=Web3``` 등 필요한 필요한 설정이 적혀있다.\n",
    "```package.json```에 ```main```이 명시되어 있지 않으면, ```index.js```가 그냥 쓰이게 된다."
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "#### 간단한 exports\n",
    "\n",
    "**상대경로**는 ./ 또는 ../를 사용하는 경우를 말하는데, 현재 파일을 기준으로 상대적으로 require()의 경로로 넣으면 된다.\n",
    "예를 들어, ```src/testImport.js```에서 ```src/test.js```를 호출한다면, ```require('./src/test.js')```가 아닌 ```require('./test.js')```라고 써준다."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 22,
   "metadata": {
    "collapsed": false
   },
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "Overwriting src/test.js\n"
     ]
    }
   ],
   "source": [
    "%%writefile src/test.js\n",
    "exports.DateOfBirth = '11.11.1999';"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 23,
   "metadata": {
    "collapsed": false
   },
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "Overwriting src/testImport.js\n"
     ]
    }
   ],
   "source": [
    "%%writefile src/testImport.js\n",
    "const my = require('./test');\n",
    "console.log(my)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 24,
   "metadata": {
    "collapsed": false
   },
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "const my = require('./test');\r\n",
      "console.log(my)"
     ]
    }
   ],
   "source": [
    "!cat src/testImport.js"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 25,
   "metadata": {
    "collapsed": false
   },
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "{ DateOfBirth: '11.11.1999' }\r\n"
     ]
    }
   ],
   "source": [
    "!node src/testImport.js"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "#### 여러 파일 export"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 10,
   "metadata": {
    "collapsed": false
   },
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "Writing purchase.js\n"
     ]
    }
   ],
   "source": [
    "%%writefile purchase.js\n",
    "function purchaseProduct(){\n",
    "  console.log(\"Function : purchaseProduct\");\n",
    "\n",
    "  var credits = getCredits();\n",
    "  if(credits > 0){\n",
    "    reserveProduct();\n",
    "    return true;\n",
    "  }\n",
    "  return false;\n",
    "}"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 11,
   "metadata": {
    "collapsed": false
   },
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "Writing products.js\n"
     ]
    }
   ],
   "source": [
    "%%writefile products.js\n",
    "function reserveProduct(){\n",
    "  console.log(\"Function : reserveProduct\");\n",
    "\n",
    "  return true;\n",
    "}"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 12,
   "metadata": {
    "collapsed": false
   },
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "Writing credits.js\n"
     ]
    }
   ],
   "source": [
    "%%writefile credits.js\n",
    "function getCredits(){\n",
    "  console.log(\"Function : getCredits\");\n",
    "\n",
    "  var credits = \"100\";\n",
    "  return credits;\n",
    "}"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "collapsed": true
   },
   "source": [
    "* 해결\n",
    "    * 디렉토리 구성\n",
    "    * html 파일에 require.js를 포함\n",
    "        * data-main속성 - 초기화 스크립트를 명시 -> scripts/main.js\n",
    "\n",
    "```python\n",
    "<script data-main=\"scripts/main\" src=\"scripts/require.js\"></script>\n",
    "```\n",
    "\n",
    "    * scripts/main.js를 만듦.\n",
    "        * 의존 관계를 넣어줌.\n",
    "        * requireJS는 js파일이라고 가정하므로, 파일확장자 'js'생략\n",
    "\n",
    "```python\n",
    "require([\"purchase\"],function(purchase){\n",
    "    purchase.purchaseProduct();\n",
    "});\n",
    "```\n",
    "        "
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 13,
   "metadata": {
    "collapsed": false
   },
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "Writing main.js\n"
     ]
    }
   ],
   "source": [
    "%%writefile main.js\n",
    "require([\"purchase\"],function(purchase){\n",
    "  purchase.purchaseProduct();\n",
    "})"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 21,
   "metadata": {
    "collapsed": false
   },
   "outputs": [
    {
     "data": {
      "application/javascript": [
       "require([\"purchase\"],function(purchase){\n",
       "  purchase.purchaseProduct();\n",
       "})\n",
       "alert(purchase.purchaseProduct());"
      ],
      "text/plain": [
       "<IPython.core.display.Javascript object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "%%javascript\n",
    "require([\"purchase\"],function(purchase){\n",
    "  purchase.purchaseProduct();\n",
    "})\n",
    "alert(purchase.purchaseProduct());"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 18,
   "metadata": {
    "collapsed": false
   },
   "outputs": [
    {
     "data": {
      "text/html": [
       "<script src=\"main.js\"></script>\n",
       "<script>\n",
       "var m=require(main);\n",
       "var result = m.purchaseProduct();\n",
       "alert(result);\n",
       "</script>"
      ],
      "text/plain": [
       "<IPython.core.display.HTML object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "%%html\n",
    "<script src=\"main.js\"></script>\n",
    "<script>\n",
    "var m=require(main);\n",
    "var result = m.purchaseProduct();\n",
    "alert(result);\n",
    "</script>"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 23,
   "metadata": {
    "collapsed": false
   },
   "outputs": [
    {
     "data": {
      "text/html": [
       "<script src=\"products.js\"></script>\n",
       "<script src=\"purchase.js\"></script>\n",
       "<script src=\"main.js\"></script>\n",
       "<script src=\"credits.js\"></script>\n",
       "<script>\n",
       "var result = purchaseProduct();\n",
       "alert(result);\n",
       "</script>"
      ],
      "text/plain": [
       "<IPython.core.display.HTML object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "%%html\n",
    "<script src=\"products.js\"></script>\n",
    "<script src=\"purchase.js\"></script>\n",
    "<script src=\"main.js\"></script>\n",
    "<script src=\"credits.js\"></script>\n",
    "<script>\n",
    "var result = purchaseProduct();\n",
    "alert(result);\n",
    "</script>"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 4,
   "metadata": {
    "collapsed": false
   },
   "outputs": [
    {
     "data": {
      "application/javascript": [
       "element.append(\"<div id='chart1'>hello</div>\");"
      ],
      "text/plain": [
       "<IPython.core.display.Javascript object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "%%javascript\n",
    "element.append(\"<div id='chart1'>hello</div>\");"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 10,
   "metadata": {
    "collapsed": false
   },
   "outputs": [
    {
     "data": {
      "application/javascript": [
       "\n",
       "$(element).append('<div class=\"hello-world\">hello</div>');"
      ],
      "text/plain": [
       "<IPython.core.display.Javascript object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "%%javascript\n",
    "\n",
    "$(element).append('<div class=\"hello-world\">hello</div>');"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 5,
   "metadata": {
    "collapsed": false
   },
   "outputs": [
    {
     "data": {
      "text/html": [
       "<div class='hello-world'>\n",
       "hello\n",
       "</div>"
      ],
      "text/plain": [
       "<IPython.core.display.HTML object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "%%html\n",
    "<div class='hello-world'>\n",
    "hello\n",
    "</div>"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 2,
   "metadata": {
    "collapsed": false
   },
   "outputs": [
    {
     "data": {
      "application/javascript": [
       "require.config({\n",
       "    paths: {\n",
       "        d3: '//cdnjs.cloudflare.com/ajax/libs/bignumber.js/2.4.0/bignumber.min.js'\n",
       "    }\n",
       "});"
      ],
      "text/plain": [
       "<IPython.core.display.Javascript object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "%%javascript\n",
    "require.config({\n",
    "    paths: {\n",
    "        d3: '//cdnjs.cloudflare.com/ajax/libs/bignumber.js/2.4.0/bignumber.min.js'\n",
    "    }\n",
    "});"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 20,
   "metadata": {
    "collapsed": false,
    "scrolled": true
   },
   "outputs": [
    {
     "data": {
      "application/javascript": [
       "require(['bignumber'], function(){\n",
       "    var big=new BigNumber(123);\n",
       "    console.log(\"hj\");\n",
       "});"
      ],
      "text/plain": [
       "<IPython.core.display.Javascript object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "%%javascript\n",
    "require(['bignumber'], function(){\n",
    "    var big=new BigNumber(123);\n",
    "    console.log(\"hj\");\n",
    "});\n"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": true
   },
   "outputs": [],
   "source": [
    "from w3schools\n",
    "A closure is a function having access to the parent scope, even after the parent function has closed.\n",
    "```\n",
    "var add = (function () {\n",
    "    var counter = 0;\n",
    "    return function () {return counter += 1;}\n",
    "})();\n",
    "\n",
    "add();\n",
    "add();\n",
    "add();\n",
    "```"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### 1.6.3 node"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 1,
   "metadata": {
    "collapsed": false,
    "scrolled": true
   },
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "Writing hello.js\n"
     ]
    }
   ],
   "source": [
    "%%writefile hello.js\n",
    "console.log('hello');"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 2,
   "metadata": {
    "collapsed": false,
    "scrolled": false
   },
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "hello\r\n"
     ]
    }
   ],
   "source": [
    "!node hello.js"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "* to load and save \n",
    "```\n",
    "> .save myfilename\n",
    "> .load myfilename\n",
    "```\n",
    "\n",
    "* to check data type\n",
    "\n",
    "```\n",
    "typeof()\n",
    "```"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "collapsed": true
   },
   "source": [
    "### 1.6.4 pixiedust jupyter notebook에서 nodejs를 사용\n",
    "\n",
    "jupyter notebook에서 nodejs를 사용하려면 pixiedust_node\n",
    "Install both pixiedust and pixiedust_node using pip, the Python package manager.\n",
    "\n",
    "In a Jupyter Notebook cell:\n",
    "IBM에서 제공하는 pixiedust를 사용하자.\n",
    "```python\n",
    "pip install pixiedust\n",
    "pip install pixiedust_node\n",
    "```\n",
    "![alt text](figures/1_jupyterToUseNode.png \"to use nodejs inside jupyter notebook\")"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "npm bin 실행명령어가 설치된 디렉토리. 로컬 node_modules/.bin/ (전역은 /usr/local/bin)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 15,
   "metadata": {
    "collapsed": false
   },
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "/home/jsl/Code/git/bb/jsl/bitcoin/node_modules/.bin\r\n"
     ]
    }
   ],
   "source": [
    "!npm bin"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## 1.7 NPM\n",
    "\n",
    "NPM은 Node.js 패키지 관리자, **Node Package Manager**.\n",
    "\n",
    "\n"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### 1.7.1 설치\n",
    "\n",
    "npm은 패키지를 설치할 때, 로컬 또는 전역으로 할 수 있다.\n",
    "\n",
    "\n",
    "* **로컬**\n",
    "패키지는 로컬로 사용하는 것을 원칙으로 하고, 설치하면 현재 작업 디렉토리에 node_modules 경로 생성\n",
    "\n",
    "```python\n",
    "C:\\Users\\Code\\myProject>npm install web3\n",
    "```\n",
    "\n",
    "C:\\Users\\Code\\myProject\\node_modules\\web3에 설치\n",
    "\n",
    "\n",
    "* **전역** 설치하면 ```{prefix}/lib/node_modules/``` prefix는 /usr/ 또는 /usr/local/\n",
    "\n",
    "```python\n",
    "C:\\Users\\Code\\myProject>node\n",
    "> var Web3 = require('web3');\n",
    "```"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "depth 0은 설치한 패키지만, 1은 그 패키지가 필요한 패키지까지, 2는 그 다음 필요한 패키지까지 목록으로 보여준다."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 13,
   "metadata": {
    "collapsed": false,
    "scrolled": true
   },
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "/home/jsl/Code/git/bb/jsl/bitcoin\r\n",
      "├─┬ eth-lightwallet@2.5.3\r\n",
      "│ ├── bignumber.js@2.0.7 (git://github.com/debris/bignumber.js.git#94d7146671b9719e00a09c29b01a691bc85048c2)\r\n",
      "│ ├── bitcore-lib@0.13.19\r\n",
      "│ ├── bitcore-mnemonic@1.1.1\r\n",
      "│ ├── buffer@4.9.1\r\n",
      "│ ├── crypto-js@3.1.8\r\n",
      "│ ├── elliptic@3.1.0\r\n",
      "│ ├── ethereumjs-tx@1.2.2\r\n",
      "│ ├── ethereumjs-util@4.5.0\r\n",
      "│ ├── rlp@2.0.0\r\n",
      "│ ├── scrypt-async@1.3.0\r\n",
      "│ ├── tweetnacl@0.13.2\r\n",
      "│ └── web3@0.15.3\r\n",
      "└─┬ solidity-repl@0.2.0\r\n",
      "  ├── bluebird@3.4.7\r\n",
      "  ├── eth-new-contract@0.1.0\r\n",
      "  ├── ethereumjs-testrpc@2.2.7\r\n",
      "  ├── promise.waterfall@3.1.4\r\n",
      "  ├── solc@0.3.6\r\n",
      "  └── web3@0.17.0-beta\r\n",
      "\r\n"
     ]
    }
   ],
   "source": [
    "!npm ls --depth 1"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "#### npm root"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": true
   },
   "outputs": [],
   "source": [
    "명령어  | 설명 | 예\n",
    "-------|-------|-------\n",
    "npm root | 라이브러리가 설치되는 디렉토리 | /Code/git/bb/jsl/bitcoin/node_modules/\n"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 14,
   "metadata": {
    "collapsed": false,
    "scrolled": true
   },
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "/usr/lib/node_modules\r\n"
     ]
    }
   ],
   "source": [
    "!npm root -g"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 2,
   "metadata": {
    "collapsed": false
   },
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "/usr/lib\r\n",
      "└─┬ npm@4.2.0\r\n",
      "  ├── abbrev@1.0.9\r\n",
      "  ├── ansi-regex@2.1.1\r\n",
      "  ├── ansicolors@0.3.2\r\n",
      "  ├── ansistyles@0.1.3\r\n",
      "  ├── aproba@1.0.4\r\n",
      "  ├── archy@1.0.0\r\n",
      "  ├── asap@2.0.5\r\n",
      "  ├── chownr@1.0.1\r\n",
      "  ├── cmd-shim@2.0.2\r\n",
      "  ├─┬ columnify@1.5.4\r\n",
      "  │ └─┬ wcwidth@1.0.0\r\n",
      "  │   └─┬ defaults@1.0.3\r\n",
      "  │     └── clone@1.0.2\r\n",
      "  ├─┬ config-chain@1.1.11\r\n",
      "  │ └── proto-list@1.2.4\r\n",
      "  ├── debuglog@1.0.1\r\n",
      "  ├── dezalgo@1.0.3\r\n",
      "  ├── editor@1.0.0\r\n",
      "  ├── fs-vacuum@1.2.9\r\n",
      "  ├── fs-write-stream-atomic@1.0.8\r\n",
      "  ├── fstream@1.0.10\r\n",
      "  ├─┬ fstream-npm@1.2.0\r\n",
      "  │ └─┬ fstream-ignore@1.0.5\r\n",
      "  │   └─┬ minimatch@3.0.3\r\n",
      "  │     └─┬ brace-expansion@1.1.6\r\n",
      "  │       ├── balanced-match@0.4.2\r\n",
      "  │       └── concat-map@0.0.1\r\n",
      "  ├─┬ glob@7.1.1\r\n",
      "  │ ├── fs.realpath@1.0.0\r\n",
      "  │ ├─┬ minimatch@3.0.3\r\n",
      "  │ │ └─┬ brace-expansion@1.1.6\r\n",
      "  │ │   ├── balanced-match@0.4.2\r\n",
      "  │ │   └── concat-map@0.0.1\r\n",
      "  │ └── path-is-absolute@1.0.1\r\n",
      "  ├── graceful-fs@4.1.11\r\n",
      "  ├── has-unicode@2.0.1\r\n",
      "  ├── hosted-git-info@2.1.5\r\n",
      "  ├── iferr@0.1.5\r\n",
      "  ├── imurmurhash@0.1.4\r\n",
      "  ├── inflight@1.0.6\r\n",
      "  ├── inherits@2.0.3\r\n",
      "  ├── ini@1.3.4\r\n",
      "  ├─┬ init-package-json@1.9.4\r\n",
      "  │ ├─┬ glob@6.0.4\r\n",
      "  │ │ ├─┬ minimatch@3.0.3\r\n",
      "  │ │ │ └─┬ brace-expansion@1.1.6\r\n",
      "  │ │ │   ├── balanced-match@0.4.2\r\n",
      "  │ │ │   └── concat-map@0.0.1\r\n",
      "  │ │ └── path-is-absolute@1.0.0\r\n",
      "  │ └── promzard@0.3.0\r\n",
      "  ├─┬ JSONStream@1.3.0\r\n",
      "  │ ├── jsonparse@1.2.0\r\n",
      "  │ └── through@2.3.8\r\n",
      "  ├── lockfile@1.0.3\r\n",
      "  ├── lodash._baseindexof@3.1.0\r\n",
      "  ├─┬ lodash._baseuniq@4.6.0\r\n",
      "  │ ├── lodash._createset@4.0.3\r\n",
      "  │ └── lodash._root@3.0.1\r\n",
      "  ├── lodash._bindcallback@3.0.1\r\n",
      "  ├── lodash._cacheindexof@3.0.2\r\n",
      "  ├── lodash._createcache@3.1.2\r\n",
      "  ├── lodash._getnative@3.9.1\r\n",
      "  ├── lodash.clonedeep@4.5.0\r\n",
      "  ├── lodash.restparam@3.6.1\r\n",
      "  ├── lodash.union@4.6.0\r\n",
      "  ├── lodash.uniq@4.5.0\r\n",
      "  ├── lodash.without@4.4.0\r\n",
      "  ├─┬ mississippi@1.3.0\r\n",
      "  │ ├─┬ concat-stream@1.6.0\r\n",
      "  │ │ └── typedarray@0.0.6\r\n",
      "  │ ├─┬ duplexify@3.5.0\r\n",
      "  │ │ ├─┬ end-of-stream@1.0.0\r\n",
      "  │ │ │ └── once@1.3.3\r\n",
      "  │ │ └── stream-shift@1.0.0\r\n",
      "  │ ├─┬ end-of-stream@1.1.0\r\n",
      "  │ │ └── once@1.3.3\r\n",
      "  │ ├── flush-write-stream@1.0.2\r\n",
      "  │ ├── from2@2.3.0\r\n",
      "  │ ├─┬ parallel-transform@1.1.0\r\n",
      "  │ │ └── cyclist@0.2.2\r\n",
      "  │ ├── pump@1.0.2\r\n",
      "  │ ├── pumpify@1.3.5\r\n",
      "  │ ├─┬ stream-each@1.2.0\r\n",
      "  │ │ └── stream-shift@1.0.0\r\n",
      "  │ └─┬ through2@2.0.3\r\n",
      "  │   └── xtend@4.0.1\r\n",
      "  ├─┬ mkdirp@0.5.1\r\n",
      "  │ └── minimist@0.0.8\r\n",
      "  ├─┬ node-gyp@3.5.0\r\n",
      "  │ ├─┬ minimatch@3.0.3\r\n",
      "  │ │ └─┬ brace-expansion@1.1.6\r\n",
      "  │ │   ├── balanced-match@0.4.2\r\n",
      "  │ │   └── concat-map@0.0.1\r\n",
      "  │ └── nopt@3.0.6\r\n",
      "  ├─┬ nopt@4.0.1\r\n",
      "  │ └─┬ osenv@0.1.4\r\n",
      "  │   ├── os-homedir@1.0.2\r\n",
      "  │   └── os-tmpdir@1.0.2\r\n",
      "  ├── normalize-git-url@3.0.2\r\n",
      "  ├─┬ normalize-package-data@2.3.5\r\n",
      "  │ └─┬ is-builtin-module@1.0.0\r\n",
      "  │   └── builtin-modules@1.1.1\r\n",
      "  ├── npm-cache-filename@1.0.2\r\n",
      "  ├── npm-install-checks@3.0.0\r\n",
      "  ├── npm-package-arg@4.2.0\r\n",
      "  ├─┬ npm-registry-client@7.4.5\r\n",
      "  │ └─┬ concat-stream@1.5.2\r\n",
      "  │   ├─┬ readable-stream@2.0.6\r\n",
      "  │   │ ├── core-util-is@1.0.2\r\n",
      "  │   │ ├── isarray@1.0.0\r\n",
      "  │   │ ├── process-nextick-args@1.0.7\r\n",
      "  │   │ ├── string_decoder@0.10.31\r\n",
      "  │   │ └── util-deprecate@1.0.2\r\n",
      "  │   └── typedarray@0.0.6\r\n",
      "  ├── npm-user-validate@0.1.5\r\n",
      "  ├─┬ npmlog@4.0.2\r\n",
      "  │ ├─┬ are-we-there-yet@1.1.2\r\n",
      "  │ │ └── delegates@1.0.0\r\n",
      "  │ ├── console-control-strings@1.1.0\r\n",
      "  │ ├─┬ gauge@2.7.2\r\n",
      "  │ │ ├── object-assign@4.1.0\r\n",
      "  │ │ ├── signal-exit@3.0.2\r\n",
      "  │ │ ├─┬ string-width@1.0.2\r\n",
      "  │ │ │ ├── code-point-at@1.1.0\r\n",
      "  │ │ │ └─┬ is-fullwidth-code-point@1.0.0\r\n",
      "  │ │ │   └── number-is-nan@1.0.1\r\n",
      "  │ │ ├── supports-color@0.2.0\r\n",
      "  │ │ └── wide-align@1.1.0\r\n",
      "  │ └── set-blocking@2.0.0\r\n",
      "  ├── once@1.4.0\r\n",
      "  ├── opener@1.4.2\r\n",
      "  ├─┬ osenv@0.1.4\r\n",
      "  │ ├── os-homedir@1.0.2\r\n",
      "  │ └── os-tmpdir@1.0.2\r\n",
      "  ├── path-is-inside@1.0.2\r\n",
      "  ├─┬ read@1.0.7\r\n",
      "  │ └── mute-stream@0.0.5\r\n",
      "  ├── read-cmd-shim@1.0.1\r\n",
      "  ├─┬ read-installed@4.0.3\r\n",
      "  │ └── util-extend@1.0.3\r\n",
      "  ├─┬ read-package-json@2.0.4\r\n",
      "  │ ├─┬ glob@6.0.4\r\n",
      "  │ │ ├─┬ minimatch@3.0.3\r\n",
      "  │ │ │ └─┬ brace-expansion@1.1.6\r\n",
      "  │ │ │   ├── balanced-match@0.4.2\r\n",
      "  │ │ │   └── concat-map@0.0.1\r\n",
      "  │ │ └── path-is-absolute@1.0.0\r\n",
      "  │ └─┬ json-parse-helpfulerror@1.0.3\r\n",
      "  │   └── jju@1.3.0\r\n",
      "  ├── read-package-tree@5.1.5\r\n",
      "  ├─┬ readable-stream@2.2.2\r\n",
      "  │ ├── buffer-shims@1.0.0\r\n",
      "  │ ├── core-util-is@1.0.2\r\n",
      "  │ ├── isarray@1.0.0\r\n",
      "  │ ├── process-nextick-args@1.0.7\r\n",
      "  │ ├── string_decoder@0.10.31\r\n",
      "  │ └── util-deprecate@1.0.2\r\n",
      "  ├── readdir-scoped-modules@1.0.2\r\n",
      "  ├── realize-package-specifier@3.0.3\r\n",
      "  ├─┬ request@2.79.0\r\n",
      "  │ ├── aws-sign2@0.6.0\r\n",
      "  │ ├── aws4@1.5.0\r\n",
      "  │ ├── caseless@0.11.0\r\n",
      "  │ ├─┬ combined-stream@1.0.5\r\n",
      "  │ │ └── delayed-stream@1.0.0\r\n",
      "  │ ├── extend@3.0.0\r\n",
      "  │ ├── forever-agent@0.6.1\r\n",
      "  │ ├─┬ form-data@2.1.2\r\n",
      "  │ │ └── asynckit@0.4.0\r\n",
      "  │ ├─┬ har-validator@2.0.6\r\n",
      "  │ │ ├─┬ chalk@1.1.3\r\n",
      "  │ │ │ ├── ansi-styles@2.2.1\r\n",
      "  │ │ │ ├── escape-string-regexp@1.0.5\r\n",
      "  │ │ │ ├── has-ansi@2.0.0\r\n",
      "  │ │ │ └── supports-color@2.0.0\r\n",
      "  │ │ ├─┬ commander@2.9.0\r\n",
      "  │ │ │ └── graceful-readlink@1.0.1\r\n",
      "  │ │ ├─┬ is-my-json-valid@2.15.0\r\n",
      "  │ │ │ ├── generate-function@2.0.0\r\n",
      "  │ │ │ ├─┬ generate-object-property@1.2.0\r\n",
      "  │ │ │ │ └── is-property@1.0.2\r\n",
      "  │ │ │ ├── jsonpointer@4.0.0\r\n",
      "  │ │ │ └── xtend@4.0.1\r\n",
      "  │ │ └─┬ pinkie-promise@2.0.1\r\n",
      "  │ │   └── pinkie@2.0.4\r\n",
      "  │ ├─┬ hawk@3.1.3\r\n",
      "  │ │ ├── boom@2.10.1\r\n",
      "  │ │ ├── cryptiles@2.0.5\r\n",
      "  │ │ ├── hoek@2.16.3\r\n",
      "  │ │ └── sntp@1.0.9\r\n",
      "  │ ├─┬ http-signature@1.1.1\r\n",
      "  │ │ ├── assert-plus@0.2.0\r\n",
      "  │ │ ├─┬ jsprim@1.3.1\r\n",
      "  │ │ │ ├── extsprintf@1.0.2\r\n",
      "  │ │ │ ├── json-schema@0.2.3\r\n",
      "  │ │ │ └── verror@1.3.6\r\n",
      "  │ │ └─┬ sshpk@1.10.1\r\n",
      "  │ │   ├── asn1@0.2.3\r\n",
      "  │ │   ├── assert-plus@1.0.0\r\n",
      "  │ │   ├── bcrypt-pbkdf@1.0.0\r\n",
      "  │ │   ├── dashdash@1.14.1\r\n",
      "  │ │   ├── ecc-jsbn@0.1.1\r\n",
      "  │ │   ├── getpass@0.1.6\r\n",
      "  │ │   ├── jodid25519@1.0.2\r\n",
      "  │ │   ├── jsbn@0.1.0\r\n",
      "  │ │   └── tweetnacl@0.14.3\r\n",
      "  │ ├── is-typedarray@1.0.0\r\n",
      "  │ ├── isstream@0.1.2\r\n",
      "  │ ├── json-stringify-safe@5.0.1\r\n",
      "  │ ├─┬ mime-types@2.1.13\r\n",
      "  │ │ └── mime-db@1.25.0\r\n",
      "  │ ├── oauth-sign@0.8.2\r\n",
      "  │ ├── qs@6.3.0\r\n",
      "  │ ├── stringstream@0.0.5\r\n",
      "  │ ├─┬ tough-cookie@2.3.2\r\n",
      "  │ │ └── punycode@1.4.1\r\n",
      "  │ └── tunnel-agent@0.4.3\r\n",
      "  ├── retry@0.10.1\r\n",
      "  ├── rimraf@2.5.4\r\n",
      "  ├── semver@5.3.0\r\n",
      "  ├── sha@2.0.1\r\n",
      "  ├── slide@1.1.6\r\n",
      "  ├── sorted-object@2.0.1\r\n",
      "  ├─┬ sorted-union-stream@2.1.3\r\n",
      "  │ ├─┬ from2@1.3.0\r\n",
      "  │ │ └─┬ readable-stream@1.1.14\r\n",
      "  │ │   ├── core-util-is@1.0.2\r\n",
      "  │ │   ├── isarray@0.0.1\r\n",
      "  │ │   └── string_decoder@0.10.31\r\n",
      "  │ └── stream-iterate@1.1.1\r\n",
      "  ├── strip-ansi@3.0.1\r\n",
      "  ├─┬ tar@2.2.1\r\n",
      "  │ └── block-stream@0.0.8\r\n",
      "  ├── text-table@0.2.0\r\n",
      "  ├── uid-number@0.0.6\r\n",
      "  ├── umask@1.1.0\r\n",
      "  ├─┬ unique-filename@1.1.0\r\n",
      "  │ └── unique-slug@2.0.0\r\n",
      "  ├── unpipe@1.0.0\r\n",
      "  ├── uuid@3.0.1\r\n",
      "  ├─┬ validate-npm-package-license@3.0.1\r\n",
      "  │ ├─┬ spdx-correct@1.0.2\r\n",
      "  │ │ └── spdx-license-ids@1.2.0\r\n",
      "  │ └─┬ spdx-expression-parse@1.0.2\r\n",
      "  │   ├── spdx-exceptions@1.0.4\r\n",
      "  │   └── spdx-license-ids@1.2.0\r\n",
      "  ├─┬ validate-npm-package-name@2.2.2\r\n",
      "  │ └── builtins@0.0.7\r\n",
      "  ├─┬ which@1.2.12\r\n",
      "  │ └── isexe@1.1.2\r\n",
      "  ├── wrappy@1.0.2\r\n",
      "  └── write-file-atomic@1.3.1\r\n",
      "\r\n"
     ]
    }
   ],
   "source": [
    "!npm ls -g"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "package json는 패키지에 존재하고 필요한 속성을 정의하고 있다. web3를 살펴보자."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 4,
   "metadata": {
    "collapsed": false,
    "scrolled": true
   },
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "bower\t    coverage  gulpfile.js  LICENSE\t    package.js\t  styleguide.md\r\n",
      "bower.json  dist      index.js\t   node_modules     package.json\r\n",
      "circle.yml  example   lib\t   package-init.js  README.md\r\n"
     ]
    }
   ],
   "source": [
    "!ls ./node_modules/web3"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### 1.7.2 패키지 생성\n",
    "\n",
    "패키지를 생성하려면 pacakge.json이 필요하다\n",
    "* npm에서 패키지 관리는 package.json이라는 파일로 관리\n",
    "* package.json을 npm 명령어를 통해 생성.\n",
    "* 자신의 module을 만들기 위해 프로젝트를 처음 시작 할 경우, node_modules를 현재 디렉토리에 설치"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": false
   },
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "This utility will walk you through creating a package.json file.\n",
      "It only covers the most common items, and tries to guess sensible defaults.\n",
      "\n",
      "See `npm help json` for definitive documentation on these fields\n",
      "and exactly what they do.\n",
      "\n",
      "Use `npm install <pkg> --save` afterwards to install a package and\n",
      "save it as a dependency in the package.json file.\n",
      "\n",
      "Press ^C at any time to quit.\n",
      "\u001b[1G\u001b[0Jname: (bitcoin) \u001b[17G"
     ]
    }
   ],
   "source": [
    "!npm init"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "* npm link\n",
    "    * means to symlink a package folder"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "전역에서 설치된 패키지를 현재 디렉토리 node_modules로 symlink를 만든다.\n",
    "\n",
    "```python\n",
    "npm link package-name\n",
    "```\n",
    "will create a symbolic link from globally-installed package-name to node_modules/ of the current folder. "
   ]
  }
 ],
 "metadata": {
  "celltoolbar": "Slideshow",
  "kernelspec": {
   "display_name": "Python 2",
   "language": "python",
   "name": "python2"
  },
  "language_info": {
   "codemirror_mode": {
    "name": "ipython",
    "version": 2
   },
   "file_extension": ".py",
   "mimetype": "text/x-python",
   "name": "python",
   "nbconvert_exporter": "python",
   "pygments_lexer": "ipython2",
   "version": "2.7.17"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 0
}