스타트업 엔지니어링

코드 예제로 보는 바닐라 자바스크립트 vs 리엑트 제이에스

엔디엘디(NdLd) — Tue, 11 Apr 2023 00:59:15 +0900

리엑트를 처음 배우는 분이라면 이미 기본적인 자바스크립트(Vanilla Javascript)는 사용할 줄 아실 텐데요. 본격적으로 리엑트 에이에스(ReactJs)를 배우기 전에 코드 예제를 통해서 바닐라 자바스크립트와 리엑트 제이에스가 어떻게 다른지를 살펴보는 것은 두고두고 도움이 되는 좋은 경험이 될 겁니다. 먼저 간단한 자바스크립트로 버튼이 클릭될 때마다 Like 숫자를 하나씩 올려주는 html 페이지를 하나 만들어 보겠습니다. 그다음에 동일한 동작을 하는 ReactJs 코드를 작성하려고 합니다.

1. 바닐라 자바스크립트 코드 예제

예제에 사용할 html은 아래와 같이 단 3줄의 엘리먼트를 표시하고 있습니다. 맨 첫줄의 h1은 제목 역할을 하고 있습니다. Like라고 되어 있는 버튼이 있고 p 태그로 버튼을 클릭한 횟수를 표시하려고 합니다. 지금은 엘리먼트는 만들어져 있지만 코드를 작성하지 않아서 버튼을 클릭해도 아무런 반응을 하지 않고 있죠.

바닐라 자바스크립트 기본

예제에 사용된 html 코드는 아래와 같습니다.

<head>
</head>
<body>

<h1>Hi Vanilla JS</h1>
<div>
    <button id="like_btn">Like</button>
    <p id="like_count_text">0 Likes</p>    
</div>
</body>
<script>

</script>
</html>

1.1. 엘리먼트 가져오기

html로 작성된 엘리먼트를 가져오기 위해서는 자바스트립트를 사용해서 엘리먼트를 가져와야 합니다. button과 p 태그가 각각 id를 가지고 있어서 document.getElementById를 사용해서 엘리먼트를 가져옵니다.

<script>
    let btn = document.getElementById("like_btn");
    let count_text = document.getElementById("like_count_text");
</script>

엘리먼트를 가져 왔으니 이벤트 핸들러 함수를 작성하고 이벤트를 등록합니다.

1.2. 이벤트 핸들러 작성

버튼을 클릭할 때마다 변수인 like_count 값을 1 씩 증가시킵니다. 그리고 그 값을 콘솔에 로그로 표시해 보겠습니다.
아래 코드를 추가합니다.

    let like_count = 0;
    function btn_licked() {
        like_count++;
        console.log(`Like clicked ${like_count} times!`);
    }

    btn.addEventListener("click", btn_licked);

버튼을 클릭할 때마다 콘솔에 로그가 표시되는 것을 볼 수 있습니다.

바닐라 자바스크립트 버튼 클릭

하지만 화면에는 아직도 0 Likes라고 표시가 되고 있네요.

1.3. 텍스트 업데이트

텍스트를 업데이트 하기위해서는 버튼 클릭 이벤트 핸들러에 텍스트를 업데이트하는 코드를 추가해야 합니다. 아래와 같이 btn_clicked 함수를 수정합니다.

    function btn_licked() {
        like_count++;
        console.log(`Like clicked ${like_count} times!`);

        count_text.innerText = `${like_count} Likes`;
    }

이제 버튼을 클릭하면 아래와 같이 콘솔에 로그가 찍히면서 텍스트에 있는 수자도 같이 변경되는 것을 볼 수 있습니다.

바닐라 자바스크립트 버튼 클릭2

2. 리엑트 제이에스 코드 예제

앞서 바닐라 자바스크립트로 작성된 예제 코드를 리엑트 제이에스로 작성해 보려고 합니다. ReactJs를 사용하는 경우에는 일반적으로 html 엘리먼트를 미리 생성해 두지 않습니다. 우선 먼저 예제에 사용할 코드를 보겠습니다.

<!DOCTYPE html>
<html>
<head>
</head>
<body>
    <div id="root"></div>
</body>
<script>
    
</script>
</html>

위 html을 브라우저로 읽어들이면 아무것도 표시되지 않을 겁니다. 그냥 아무것도 업이 하얀 화면만 보일 겁니다. 그게 정상입니다.

참고로 실제로 ReactJs로 개발을 할 때는 이 글에서 설명하는 방식으로 개발을 하지 않습니다. 여기서는 이 글의 목적인 바닐라 자바스크립트와 비교를 하기 위해서 예제 코드를 작성하고 있다는 점을 꼭 참고 바랍니다.

2.1. 리엑트 제이에스 추가

ReactJs를 사용하기 위해서는 2개의 자바스크립트 파일을 추가해야 합니다. 아래 2 라인을 html의 head 영역에 추가합니다. ReactJs API는 크게 react와 react-dom으로 나뉘어 있습니다. 두 종류의 API를 모두 사용하기 위해서 2개의 js 파일을 로드를 하는 것입니다.

    <script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>

이렇게 파일을 추가하면 React 오브젝트와 ReactDOM 오브젝트를 사용할 수 있게 됩니다. 콘솔에서 React. 을 타이핑해 보세요. 그러면 아래와 같이 사용할 수 있는 함수 목록이 나옵니다. 콘솔에서 ReactDOM. 도 타이핑해 보세요.

ReactJs 함수 목록 보기

2.2. 엘리먼트 생성

React의 createElement를 사용해서 우리가 사용할 엘리먼트를 만들 수 있습니다. 만들어진 엘리먼트는 ReactDOM의 render API를 사용해서 DOM에 추가하게 됩니다. 아래와 같이 코드를 추가합니다.

<script>
    let root = document.getElementById("root");
    let h1 = React.createElement('h1', null, "Hi ReactJs");
    let btn = React.createElement('button', null, "Like");
    let text = React.createElement('p', null, "0 Likes");

    let div = React.createElement('div', null, '', [btn, text]);

    ReactDOM.render([h1, div], root);
</script>

화면에 ReactJs로 생성한 엘리먼트가 잘 표시되네요.

리엑트 제이에스 엘리먼트 생성

바닐라 자바스크립트로 작성된 html과 React로 생성된 엘리먼트의 차이 중 하나는 button과 p 엘리먼트에 id가 없다는 것입니다. 이것은 예제를 위해서 의도적으로 id를 넣지 않은 것이고 원한다면 간단히 넣을 수도 있습니다.

2.3. 이벤트 핸들러 작성

이전 자바스크립트로 이벤트 핸들러를 넣기 위해서는 id를 사용해서 엘리먼트를 가져와야 했습니다. 하지만 ReactJs를 사용하는 경우는 그렇게 하지 않고 엘리먼트를 생성하면서 바로 이벤트 핸들러를 추가할 수 있습니다. 아래와 같이 코드를 추가해 줍니다.


<script>
    let root = document.getElementById("root");
    let h1 = React.createElement('h1', null, "Hi ReactJs");
    let like_count = 0;

    let text = React.createElement('p', null, `${like_count} Likes`);
    let btn = React.createElement('button', {
        onClick: () => {
            like_count++;
            console.log(`Like clicked ${like_count} times!`);
        }
    }, "Like");
    let div = React.createElement('div', null, '', [btn, text]);

    ReactDOM.render([h1, div], root);
</script>

이렇게 하고 나면 버튼이 클릭될 때마다 콘솔에 로그가 나오는 것을 볼 수 있습니다. 한번 확인해 보세요.

2.4 텍스트 업데이트

이제는 클릭된 숫자만큼 표시되는 텍스트를 변경해야 합니다. 이 부분이 조금 코드가 지저분해지는데요. 이것은 이후 ReactJs를 제대로 사용하게 되면 깔끔하게 정리가 될 것입니다. 코드를 아래와 같이 수정합니다.


<script>
    let root = document.getElementById("root");
    let h1 = React.createElement('h1', null, "Hi ReactJs");
    let like_count = 0;

    let text = React.createElement('p', null, `${like_count} Likes`);
    let btn = React.createElement('button', {
        onClick: () => {
            like_count++;
            console.log(`Like clicked ${like_count} times!`);
            let text = React.createElement('p', null, `${like_count} Likes`);
            let div = React.createElement('div', null, '', [btn, text]);
            ReactDOM.render([h1, div], root);
        }
    }, "Like");
    let div = React.createElement('div', null, '', [btn, text]);

    ReactDOM.render([h1, div], root);
</script>

추가된 코드를 보면 onClick 함수 안에서 text와 div를 새로 생성해서 reder 함수를 호출하는 것을 볼 수 있습니다. 이 부분을 JSX를 사용하면 어떻게 변경이 되는지 보도록 하겠습니다.

3. 리엑트에서 JSX 사용하기

3.1. JSX를 사용해서 코드 수정

리엑트 제이에스에서 중요한 요소 중에 하나가 JSX를 사용한다는 것입니다. 앞서 예제까지는 모두 자바스크립트 스펙 안에서 구현이 되었기 때문에 별도의 변환이 없이 코드를 실행할 수 있었습니다. 하지만 JSX는 자바스크립트 스펙이 아니기 때문에 별도의 변환툴을 사용해서 자바스크립트로 변환을 해야 브라우저에서 에러 없이 실행이 됩니다. 아래와 같이 JSX를 사용해서 코드를 수정해 보겠습니다.


<script>
    let root = document.getElementById("root");
    let Greeting = () => <h1>Hi ReactJs</h1>;
    let like_count = 0;

    let Text = () => <p id='like_count_text'>{like_count} Likes</p>;
    let Btn = () => <button id='like_btn' onClick={() => {
        like_count++;
        console.log(`Like clicked ${like_count} times!`);
        ReactDOM.render([Greeting(), Div()], root);
    }}>Like</button>

    let Div = () => <div>
            <Btn />
            <Text />
        </div>;

    ReactDOM.render([Greeting(), Div()], root);
</script>

코드를 저장하고 브라우저에서 새로고침을 하면 아래와 같이 에러가 납니다.

리엑트 에이에스 JSX 에러

3.2. 바벨 추가하기

이렇게 JSX로 작성된 코드를 브라우저가 이해할 수 있는 자바스크립트로 수정을 해 주기 위해서 사용하는 것이 바벨입니다. 아래와 같이 바벨 자바스크립트를 헤더에 추가합니다.


<head>
    <script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>

script에 type을 text/babel로 추가합니다.

<script type="text/babel">

저장하고 브라우저를 새로 고침해 봅니다. 에러 없이 잘 동작하는 것을 볼 수 있습니다.

이 글에서 사용한 html 파일

reactBasic.zip

0.00MB

맥에 홈브루로 NodeJs 설치하고 NodeJs 버전 관리하기

엔디엘디(NdLd) — Tue, 11 Apr 2023 00:46:45 +0900

이번 글에서는 맥오에스에서 홈브루로 NodeJs를 설치하고 버전 관리를 하는 방법을 알아보겠습니다. 요즘 백엔드 개발을 NodeJs로 하는 것이 아주 큰 흐름으로 자리 잡고 있는 것 같습니다. 개발환경으로 맥북이나 아이맥을 사용하는 경우 노드를 설치하게 되는 것은 기본이 되겠죠. 그리고 여러 프로젝트를 하다 보면 여러 개의 노드 버전을 사용하게 되고요. 이 두 경우 홈브루를 사용해서 어떻게 관리를 할 수 있는지가 이번 글의 주제입니다.

1. 홈브루 NodeJs 버전 확인

NodeJs는 어떤 버전이 있는지 확인해 보고 홈브루는 어떤 버전을 지원하고 있는지를 확인해 보려고 합니다.

1.1. NodeJs 버전 종류

NodeJs의 버전은 크게 현재(Current) 버전과 LTS(Long Term Support) 버전으로 나뉩니다. 이는 NodeJs 공식 홈페이지에 가서 보면 확인을 할 수 있는데요. 이 글을 쓰는 현재 LTS버전은 18.15.0버전이고 Current 버전은 19.8.1입니다. 실제로는 NodeJs는 버전을 Current, Active LTS, Maintenance 3가지 종류로 구분해서 관리하고 있습니다.

1.1.1. Current

메이저 변경사항이 아니고 버전 호환성을 망가트리는 변경이 아닌 내용이 적용되고 있는 버전입니다. NodeJs 소스의 main 브랜치의 내용이 반영되는 버전이라고 할 수 있습니다. 버전의 라이프 사이클이 비교적 짧게 유지됩니다. 19.x 버전의 경우 2022-10-18에 시작을 해서 2023-06-01까지 밖에 버전관리를 하지 않습니다. 그래서 가능하면 상용버전에는 사용하지 않는 것이 좋습니다.

1.1.2. Active LTS

LTS 팀에서 검토한 새로운 기능, 버그 수정 등이 포함된 버전입니다. 기능이나 수정사항이 적절한지 판단이 되고 안정적이라는 것이 확인이 된 경우 포함이 됩니다. 또한 버전을 유지하는 기간도 깁니다. 18.x 버전의 경우 2022-04-19에 시작을 해서 2025-04-30까지 버전을 관리합니다. 상용 소프트웨어를 개발하는데 사용하기 적적한 버전입니다. 참고로 LTS 버전은 짝수로 되어 있습니다. 홀수 버전은 LTS 버전으로 승격이 되지 않습니다.

1.1.3. Maintenance

LTS 버전이 Actvie한 기긴을 지나게 되면 Maintenance 기간으로 들어가게 됩니다. 이때는 심각한 버그에 대한 수정 사항과 보안 관련 업데이트만 추가가 됩니다. 간혹 새로운 기능도 추가되는 경우가 있지만 다음 버전으로 마이그레이션을 하는데 도움이 되는 경우 미리 추가하는 경우가 대부분입니다.

전체적으로 버전의 라이프 사이클을 볼 수 있는 그래프를 공식 홈페이지에서 가져왔습니다.

NodeJs 버전 라이프 사이클

1.2. 홈브루에서 지원하는 NodeJs 버전 확인

앞서 알아본 NodeJs 버전은 공식 홈페이지에서 확인한 버전이었는데요. 홈브루에서는 어떤 버전을 설치할 수 있을지는 홈브루 명령어를 사용해서 알 수 있습니다. 터미널에서 brew search node라고 명령어를 실행합니다.

ken@kMac ~ % brew search node
==> Formulae
libbitcoin-node       node-build            node@14               nodebrew
linode-cli            node-sass             node@16               nodeenv
llnode                node@10               node@18               nodenv
node                  node@12               node_exporter         ode

==> Casks
capslocknodelay              nodebox                      nodeclipse

실행한 결과에서 보면 node라고 되어 있는 것이 있고 node 뒤에 @가 붙어서 node@18로 보이는 것이 있습니다. 그냥 node로 되어 있는 것은 최신버전으로 Current 버전을 말하고 @뒤에 붙어 있는 숫자는 특정 NodeJs 버전을 의미합니다. 터미널 명령어 결과에서 보시면 알겠지만 홈브루에서는 Current 버전과 짝수 버전(LTS 버전)만 지원하고 있습니다.

2. 맥에서 홈브루로 NodeJs 설치

맥에서 홈브루로 NodeJs를 설치하는 것은 아주 간단합니다. brew install 명령어만 입력하면 되니까요.

2.1. 홈브루로 NodeJs 설치하기

첫번째로 홈르루에서 지원하는 최신버전 NodeJs를 설치해 보겠습니다. 터미널에 brew install node를 실행합니다.

ken@kMac ~ % brew install node
Running `brew update --auto-update`...
==> Auto-updated Homebrew!
Updated 1 tap (homebrew/core).
==> New Formulae
arjun                 thriftgo              trust-dns             wxlua

==> Fetching node
==> Downloading https://ghcr.io/v2/homebrew/core/node/manifests/19.8.1
######################################################################## 100.0%
==> Downloading https://ghcr.io/v2/homebrew/core/node/blobs/sha256:baaac8a39fb91928842b74890985fbb176f9c5769
==> Downloading from https://pkg-containers.githubusercontent.com/ghcr1/blobs/sha256:baaac8a39fb91928842b748
######################################################################## 100.0%
==> Pouring node--19.8.1.ventura.bottle.tar.gz
   /usr/local/Cellar/node/19.8.1: 2,357 files, 56.7MB
==> Running `brew cleanup node`...
Disable this behaviour by setting HOMEBREW_NO_INSTALL_CLEANUP.
Hide these hints with HOMEBREW_NO_ENV_HINTS (see `man brew`).

설치되는 과정이 보이는데요. 지금 글을 쓰고 있는 현재의 최신버전인 19.8.1 버전의 node가 설치되는 것을 알 수 있습니다. 설치된 node의 버전을 확인해 봅니다.

ken@kMac ~ % node -v
v19.8.1

예상대로 버전은 19.8.1입니다.

2.2. 홈프루로 다른 버전 NodeJs 설치하기

홈브루에서 node의 다른 버전을 설치할 수 있습니다. 특히나 상용으로 운영될 소프트웨어를 개발하고 있다면 Active LTS 버전을 설치해서 실행하는 것이 좋습니다. 우선 설치 가능한 버전을 알아보기 위해서 brew search node 명령어를 실행해 봅니다. 이 글에선 18.x 버전을 설치해 보겠습니다.

ken@kMac ~ % brew install node@18 
==> Downloading https://formulae.brew.sh/api/formula.jws.json
######################################################################## 100.0%
==> Fetching node@18
==> Downloading https://ghcr.io/v2/homebrew/core/node/18/manifests/18.15.0-1
Already downloaded: /Users/ken/Library/Caches/Homebrew/downloads/4b9fd970d9076f6842dfa69804d5c7e23c2008da12f36d600539c60f13982057--node@18-18.15.0-1.bottle_manifest.json
==> Downloading https://ghcr.io/v2/homebrew/core/node/18/blobs/sha256:971d9e3c187e07010cace1ed4060fea6e1e399
Already downloaded: /Users/ken/Library/Caches/Homebrew/downloads/50a0bc2b58a49f6ab48969827d437bb854f109a8e40035e8a490ad48bccc1c51--node@18--18.15.0.ventura.bottle.1.tar.gz
==> Pouring node@18--18.15.0.ventura.bottle.1.tar.gz
==> Caveats
node@18 is keg-only, which means it was not symlinked into /usr/local,
because this is an alternate version of another formula.

If you need to have node@18 first in your PATH, run:
  echo 'export PATH="/usr/local/opt/node@18/bin:$PATH"' >> ~/.zshrc

For compilers to find node@18 you may need to set:
  export LDFLAGS="-L/usr/local/opt/node@18/lib"
  export CPPFLAGS="-I/usr/local/opt/node@18/include"
==> Summary
   /usr/local/Cellar/node@18/18.15.0: 2,343 files, 56.6MB
==> Running `brew cleanup node@18`...
Disable this behaviour by setting HOMEBREW_NO_INSTALL_CLEANUP.
Hide these hints with HOMEBREW_NO_ENV_HINTS (see `man brew`).

설치된 노드를 확인해 보겠습니다. 명령어는 /usr/local/opt/node@18/bin/node -v 입니다.

ken@kMac ~ % /usr/local/opt/node@18/bin/node -v
v18.15.0

3. 맥에서 NodeJs 버전관리

앞서서 node 19.x 버전과 18.x 버전을 설치해 보았습니다. 하지만 18.x 버전을 실행하기 위해서는 그냥 node라고 명령어를 치는 대신에 /usr/local/opt/node@18/bin/node라고 길게 명령어를 쳐야 합니다. 이렇게 되면 개발하는 동안에 괭장히 귀찮겠죠. 만일 새로 설치한 버전을 기본 node로 사용하고 싶다면 PATH 환경변수를 설정해 줘야 합니다.

우선 현재 맥에서 사용하고 있는 shell이 무엇인지 확인해 봅니다. 명령어는 echo $0입니다.

ken@kMac ~ % echo $0
-zsh

제 맥은 zsh를 사용하고 있습니다. 에디터로 ~/. zshrc를 열어 아래 라인을 추가합니다.

사용하시는 쉘에따라서 파일이 좀 다릅니다.
bash: ~/.bashrc
zsh: ~/.zshrc
ksh: ~/.profile

export PATH="/usr/local/opt/node@18/bin:$PATH"

그리고 source ~/.zshrc 를 실행합니다. ~/. zshrc는 새로 터미널을 열거나 새로 로그인할 때 자동으로 실행되므로 매번 해 줄 필요는 없습니다.

이제 node를 실행해 보니다. 새로 설치된 NodeJs 버전이 표시되는 것을 알 수 있습니다.

맥오에스 홈브루 설치, 디렉토리 구조 이해하기

엔디엘디(NdLd) — Tue, 11 Apr 2023 00:21:25 +0900

홈브루(Homebrew)는 주로 개발자들이 애플 맥오에스(Apple macOS)를 사용하게 되면 필수적으로 사용하게 되는 프로그램인데요. 홈브루를 아직 설치해 보지 않은 경우 설치부터 홈브루 디렉터리 구조와 추가적인 프로그램 설치(패키지 설치)까지 단계적으로 해 볼 수 있도록 하겠습니다. 우선 홈브루란 무엇인지부터 이야기를 해야겠죠.

홈브루 설치 at 공식 페이지

1. 맥오에스(macOS) 홈브루란?

홈브루(Homebrew)는 애플 맥오에스(Apple macOS)에서 기본적으로 제공하지 않는 소프트웨어 패키지를 쉽게 설치할 수 있도록 도와주는 프로그램입니다. 저는 사용해 보지는 않았지만 현재 홈브루는 맥오에스뿐 아니라 리눅스 환경에서도 사용가능하다고 공식 홈페이지에서 안내를 하고 있습니다. 설치 정보는 공식 홈페이지에도 나와 있으니 간단히 설치만 하고 싶으시면 공식 홈페이지를 통해서 명령어를 복사해서 실행하시면 됩니다.

Homebrew

The Missing Package Manager for macOS (or Linux).

brew.sh

1. 1 홈브루는 개발자들이 많이 사용합니다.

일반적으로 맥오에스를 사용하시는 분들 보다는 개발자들이 주로 설치해서 사용하게 됩니다. 그 이유는 개발자들이 주로 사용하는 프로그램들이 유닉스나 리눅스에 동작하는 것이 많은데요. 이 프로그램을 애플이 맥오에스에 기본으로 설치를 해 주지 않기 때문입니다. 다행인 것은 맥오에스가 유닉스와 유사하기 때문에 프로그램의 소스를 다운로드하여서 컴파일을 해서 설치를 하는 것이 가능한데요. 이 과정을 홈브루가 대신해 주게 되어 개발에 필요한 거의 모든 프로그램을 홈브루 명령어만으로 설치하는 것을 가능하게 해 주는 것입니다.

1.2 홈브루는 개발에 필요한 거의 모든 프로그램 설치가 가능합니다.

홈프루에서는 설치 가능한 프로그램을 홈브루 포뮬러(Homebrew Formulae)라고 합니다. 여기에는 gcc, Python, NodeJs, Java 등 프로그래밍 언어, wget, curl 등의 유틸리티도 있습니다. 구글의 자바스크립트 엔진인 V8도 설치할 수 있고요.

홈브루 포뮬라(Homebrew Formulae) 리스트 보기

지난 30일 동안 홈브루를 통해 설치된 상위 10개의 포뮬러 리스트입니다.

순위	포뷸라	인스톨 수	비율
1	openssl@1.1	16,615	1.56%
2	sqlite	16,386	1.53%
3	ca-certificates	15,877	1.49%
4	xz	14,531	1.36%
5	icu4c	14,198	1.33%
6	glib	12,015	1.13%
7	readline	11,448	1.07%
8	pcre2	11,377	1.07%
9	libpng	11,082	1.04%
10	freetype	10,618	0.99%

2. macOS 홈브루(Homebrew) 설치

맥오에스에서 홈브루를 설치하는 것은 실제로 매우 간단합니다. 간단히 말하면 홈브루 공식 홈페이지 Install Homebrew라고 쓰여 있는 바로 밑에 있는 명령어를 실행하기만 하면 됩니다.

2.1 터미널 열기

키보드에서 커맨드키와 스페이스(command+space) 키를 같이 눌어서 스폿라이트를 실행합니다. 스폿라이트 입력창에 terminal이라고 입력한 후 엔터키를 눌러서 터미널을 실행합니다.

2.2 공식 홈페이지에서 설치 명령어 복사하기

홈브로 공식 페이지에 가면 제일먼저 보이는 것이 홈브루 설치하는 명령어입니다. 오른쪽에 복사하기 버튼을 눌어서 명령어를 복사합니다. 바로 명령어를 복사하고 싶으신 분을 위해서 아래 명령어를 복사해 두었습니다.

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

2.3 터미널에서 복사한 명령어 실행하기

앞에서 열어둔 터미널에 복사한 명령어를 붙여 넣기를 합니다. 엔터키를 누르면 홈브루 설치가 시작됩니다. 이때 홈브루를 설치하기 위해서 sudo 비밀번호를 입력할 겁니다. 비번을 입력해서 홈브루 설치를 계속합니다.

ken@kMac ~ % /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
==> Checking for `sudo` access (which may request your password)...
Password:

2.4 홈브루 설치 확인

설치가 완료되면 터미널에 brew info라는 명령어를 실행합니다. 아래와 비슷한 내용이 나오면 설치가 완료된 것입니다.

ken@kMac ~ % brew info
8 kegs, 10,887 files, 160.4MB

3. 홈브루 디렉토리 구조

홈브루의 디렉토리 구조를 알면 홈브루를 사용하면서 겪게 되는 문제점들을 이해하고 해결하는 데 많은 도움이 됩니다. 구조를 이해하기 위해서 wget을 홈브루를 사용해서 설치해 보겠습니다.

아래 명령어를 실행해서 wget을 설치합니다.

brew install wget

설치가 완료되면 which wget이라고 명령어를 실행합니다. 이 명령어는 wget 이 설치된 위치를 알려줍니다.

ken@kMac ~ % which wget
/usr/local/bin/wget

wget이 /usr/local/bin 디렉터리에 설치되었다는 것을 알 수 있습니다. 터미널에서 /usr/local/bin로 이동을 해서 ls -l wget 명령어를 실행합니다.

ken@kMac bin % ls -l wget
lrwxr-xr-x  1 ken  admin  32  7 Apr 13:04 wget -> ../Cellar/wget/1.21.3_1/bin/wget

이제 /usr/local/bin에 있는 wget이 실제로는 /usr/local/Cellar/wget/1.21.3_1/bin/wget이라는 것을 알게 되었습니다. 실제로 홈브루는 프로그램을 /usr/local/Cellar 디렉터리에 설치를 하고 /usr/local/bin 디렉터리에 씸볼릭 링크를 걸어서 실행이 되도록 합니다.

디렉터리를 /usr/local로 이동후 ls -l을 해 봅니다.

ken@kMac local % ls -l
total 0
drwxrwxr-x   2 ken  admin    64  3 Apr 21:55 Caskroom
drwxrwxr-x  16 ken  admin   512  7 Apr 13:04 Cellar
drwxrwxr-x   3 ken  admin    96  7 Apr 10:58 Frameworks
drwxr-xr-x  23 ken  admin   736  3 Apr 22:00 Homebrew
drwxrwxr-x  32 ken  admin  1024  7 Apr 13:04 bin
drwxrwxr-x   8 ken  admin   256  7 Apr 13:04 etc
drwxrwxr-x  32 ken  admin  1024  7 Apr 13:04 include
drwxrwxr-x  49 ken  admin  1568  7 Apr 13:04 lib
drwxrwxr-x  18 ken  admin   576  7 Apr 13:04 opt
drwxrwxr-x   3 ken  admin    96  7 Apr 10:58 sbin
drwxrwxr-x  14 ken  admin   448  7 Apr 13:04 share
drwxrwxr-x   3 ken  admin    96  3 Apr 21:55 var

여기서 주요하게 봐야할 것은 디렉터리의 소유주입니다. 디렉터리의 소유주가 모두 ken이라고 하는 사용자로 되어 있어서 ken이 brew 명령어를 사용해서 새로운 포뮬러를 설치하거나 제거하는 것이 가능하게 된 것입니다. 그렇지 않았으면 매번 sudo 명령어를 사용해야 할 거고요.

정리

이 글에서 홈브루란 무엇이고 홈브루를 설치하는 방법과 홈브루 디렉터리 구조까지 살펴보았습니다. 특히 디렉터리 구조를 알고 있으면 나중에 홈부루를 사용하는 과정에서 겪게 되는 문제점을 빨리 이해하고 해결하는 데 많은 도움이 될 것입니다.

깃(git) 실전 가이드

엔디엘디(NdLd) — Tue, 27 Nov 2018 22:04:51 +0900

소프트웨어 버전 관리 툴인 깃을 10년 가까이 사용해 오면서 깃에 많이 익숙해 진 건 사실입니다.

하지만 언젠가는 한번 전체적인 기능을 리뷰를 해 보는 시간을 갖어야겠다고 생각했죠.

깃을 사용하는데 필요한 실전 가이드 목록을 소개합니다.

생각보다 내용이 좀 깁니다.

그래도 소프트웨어 개발을 할 때 피해갈 수 없는 관문이기도 하니 이 기회에 잘 읽고 많은 도움 받기를 기대합니다.

ES6 자바스크립트 소개

엔디엘디(NdLd) — Sun, 11 Nov 2018 17:43:24 +0900

ES6 소개

자바스크립트는 2009년에 이크마스크립트 2009(ECMAScript 2009)가 발표된 후 2015년에 새로운 표준을 발표하게 됩니다. 새로 발표된 이크마스크립트 6(ECMAScript 6, ECMAScript 2015, ES6)는 프로그래밍을 좀 더 유연하고 편하게 할 수 있는 다수의 기능을 포함하고 있습니다. 현재 주요 자바스크립트 엔진에서는 대부분의 기능을 구현한 상태입니다. 각 브라우저별 구현 상태는 ES6 호환 테이블에서 확인 할 수 있습니다.

최근 상당한 인기를 끌고 있는 Node.js를 배우기 위해서는 ES6에 새로 추가된 기능을 알아두는 것이 여러모로 유용합니다. 특히나 이미 자바스크립트로 프로그래밍을 하는데 익숙하신 분들은 ES6에 추가된 기능을 한번 쭉 훌어보는 것만으로 도움이 됩니다.

이번 글에서는 ES6에 추가된 기능을 뽑아서 간략하게 설명을 하려고 합니다. 목록과 내용은 Luke Hoban의 글에서 가져왔고 새로 작성한 내용과 번역으로 옮겨 놓은 내용이 섞여 있습니다.

전체 ES6의 내용을 보시려면 ES6 표준을 참고하세요.

계속해서 살펴 보게될 ES6의 기능은 아래와 같습니다.

- 화살표 함수

- 클라스

- 확장 오브젝트 리터럴

- 템프릿 스트링

- 디스트럭처링

- 기본 함수 파라미터

- 함수 나머지 파라미터

- 전개 문법

- let + const

- for..of

- 이터레이션 프로토콜

- 제너레이터

- 유니코드

- 모듈

- 모듈 로더

- Map, Set(WeakMap, WeakSet)

- 프록시

- 심볼

- 새로운 라이브러리 추가 기능

- 이진수, 팔진수

- 프로미스

- 리플렉트 API

- 테일 콜 옵티마이제이션

ES 6 새로운 기능

ES 6의 새로운 기능을 하나씩 살펴 보도록 하겠습니다.

화살표 함수

화살표 함수는 ES 6에 추가된 기능중에 단연 가장 많이 사용되는 기능입니다. 화살표 함수(Arrow function)를 사용하면 콜백 함수를 만들 때 간략하면서도 유용하게 사용할 수 있습니다. 예를 보겠습니다.


const prices = [100, 200, 300];
// function callback
const changed = prices.map(function (p) {
  return p + 200;
});

배열에 있는 값을 받아서 200을 더한 후 새로운 배열을 생성하는 코드입니다. prices.map에 일반 함수를 인자로 넣었습니다.

간단히 보면 위처럼 `function (p)`부분을 `(p) =>` 변경하면 화살표 함수가 됩니다.

const prices = [100, 200, 300];
const changed = prices.map((p) => {
  return p + 200;
});

단순하게 보면 function이라는 키워드를 지우고 파리미터 목록 다음에 화살표(`=>`)를 넣는다고 생각해도 되고요.

함수의 내용이 하나의 익스프레션으로 표현이 되는 경우는 중괄호를 없애고 좀 더 간략하게 사용할 수 있습니다.


const prices = [100, 200, 300];
let changed = prices.map(p => p + 200);
console.log(changed);
changed = prices.map((p, index) => p + 200 + index);
console.log(changed);

이때 익스프레션을 이벨류에이션한 값이 화살표 함수의 리턴 값이 됩니다.

일반 함수와 화살표 함수의 차이이면서 꼭 기억해야할 중요한 점은 `this`를 다루는 방식입니다.

함수를 콜백으로 전달할 때 this는 콜백 함수 자신을 의미합니다. 그래서 보통은 아래와 같이 self라고 하는 변수를 하나 생성해서 사용합니다.

function HelloEs6() {
  this.name = "ES 6";
}
// const self = this 로 해서 콜백에서는 self를 사용
HelloEs6.prototype.sayHello = function () {
  const self = this;
  setTimeout( function () {
	console.log('Hello ' + self.name);
  }, 500);
};
const es6 = new HelloEs6();
es6.sayHello();
// Hello ES 6

`화살표 함수` 에서 `this`는 자신을 둘러싸고 있는 컨텍스트의 this를 의미합니다. 그래서 별도로 self라는 변수를 만들지 않고 바로 this를 사용할 수 있습니다. 아래 예에서 setTimeout의 파라이터인 화살표 함수에서 사용한 this는 `ES 6 Arrow`가 됩니다.

function HelloEs6Arrow() {
  this.name = "ES 6 Arrow";
}
// this.name 을 사용
HelloEs6Arrow.prototype.sayHello = function () {
  setTimeout( ()  => {
    console.log('Hello ' + this.name);
  }, 500);
};
const es6Arrow = new HelloEs6Arrow();
es6Arrow.sayHello();
// Hello ES 6 Arrow

참고: [MDN Arrow Functions]

클라스

ES6에서는 `class` 키워드를 사용해서 클라스를 생성하는 문법이 추가되었습니다. 이 방법은 전통적인 오브젝트 오리엔티드 언어들이 클라스를 정의하는 방식과 유사합니다. 아무래도 많은 개발자들이 좀 더 편하게 느낄 수 있는 방식이기도 합니다. 기억해야하는 점은 `class` 키워드를 사용하는 문법은 코드를 작성하는 문법적인 편리성만 제공한다는 것입니다. 내부 인터프리터는 전과 동일하게 포로토타입에 기반한 오브젝트 오리엔티드 방식을 유지하고 있습니다.

상속이 가능하고 `super`를 사용해서 부모의 메써드 호출이 가능합니다. 객체화, 스태틱 메써드, 생성자 등을 지원합니다.

ES5에서 프로토타입 문법을 사용해서 클라스를 생성하려면 function 키워드를 사용해서 함수를 생성하고 prototype에 프라퍼티를 추가하는 방식으로 클라스를 구현할 수 있습니다.

function Product(productId, product, numReview) {
  this.productId = productId;
  this.product = product;
  this.numReview = numReview;
}

Product.prototype.getProduct = function () {
  return this.productId + ': ' + this.product;
};

Product.moreReview = function (product1, product2) {
  return (product1.numReview >= product2.numReview) ? product1: product2;
};

const product1 = new Product(1, 'iPhone', 50);
const product2 = new Product(2, 'Android', 53);
const moreReview = Product.moreReview(product1, product2);

console.log(moreReview.getProduct());

위의 코드와 동일한 코드를 `class` 키워드를 사용해서 작성면 아래와 같습니다.

class Product {
  constructor (productId, product, numReview) {
    this.productId = productId;
    this.product = product;
    this.numReview = numReview;
  }


  getProduct () {
    return this.productId + ': ' + this.product;
  };


  static moreReview (product1, product2) {
    return (product1.numReview >= product2.numReview) ? product1: product2;
  };
}

const product1 = new Product(1, 'iPhone', 50);
const product2 = new Product(2, 'Android', 53);
const moreReview = Product.moreReview(product1, product2);
console.log(moreReview.getProduct());

Java나 C++등 다른 언어를 사용하시던 분이시라면 좀 더 친숙한 느낌을 받을 수 있습니다. 게다가 매번 prototype에 프라퍼티를 추가하는 형식으로 코딩을 하는 것 보다 훨씬 간결해 보여서 좋습니다. class를 상속받는 서브 클라스는 `extends` 키워드를 사용합니다.

class ProductWithOS extends Product {
  constructor (productId, product, os, numReview) {
    super(productId, product, numReview);
    this.os = os;
  }
  getProduct () {
    return this.productId + ': ' + this.product + '(' + this.os + ')';
  };
}


const product1 = new ProductWithOS(1, 'iPhone 7', 'iOS', 50);
const product2 = new ProductWithOS(2, 'Galaxy S7', 'Android', 53);
const moreReview = ProductWithOS.moreReview(product1, product2);


console.log(moreReview.getProduct());

서브클라스는 constructor에서 `super()`를 통해서 부모 클라스의 생성자를 호출합니다. getProduct는 함수를 다시 정의하면서 오버라이드 되었습니다. `class`와 `extends`를 사용한 클라스 정의와 상속은 직관적이고 구조적인 오브젝트 오리엔티드 프로그래밍을 하려는 많은 개발자들에게 희소식이 아닐 수 없네요.

참고: [MDN Classes](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Classes)

확장 오브젝트 리터럴

오브젝트 리터럴은 중괄호({})를 사용해서 오브젝트를 생성하는 문법입니다. 멤버의 이름인 키(key)와 값을 쌍으로 이루진 오브젝트 멤버를 저장할 수 있습니다. ES6에 추가된 확장 오브젝트 리터럴은 변수나 함수를 오브젝트 멤버로 저장하는 간편한 방법을 제공합니다. 멤버의 키를 바로 지정하는 대신에 계산된 값으로 지정할 수 있습니다. 세터와 게터를 사용해서 오브젝트 프라퍼티를 읽거나 저장할 수 있습니다.

아래 예에서와 같이 newProduct 오브젝트를 생성시 `const newProduct = {product, numReview}`로 지정할 수 있습니다. 일반적인 오브젝트 문법으로 변경을 하면 `const newProduct = {product: product, numReview: numReview}`와 같습니다. ES5에서라면 오브젝트 프라퍼티 이름을 지정해 주고 `:`를 찍고 값을 넣어줘야합니다. ES6에서는 오브젝트 리터럴인 중괄호에 변수를 넣으면 변수의 이름으로 키를 갖는 프라퍼티를 생성해 줍니다.

const product = 'iPhone';
const numReview = 5;
const newProduct = {product, numReview};
console.log(newProduct);

프라퍼티와 마찬가지로 확장 오브젝트 리터럴로 함수도 추가할 수 있습니다. 역시 함수 이름과 동일한 키로 멤버를 생성해 줍니다.

const name = 'iPhone';
const price = 100;


const newProduct = {
  getProductName() {
    return name;
  },
  getPrice() {
    return price;
  }
};


//ES5로 작성한 newProduct 오브젝트
const newProductES5 = {
  getProductName: function () {
    return name;
  },
  getPrice: function() {
    return price;
  }
};

ES5에서는 오브젝트의 프라퍼티 이름으로 계산된 값을 넣기 위해서는 오브젝트를 생성한 후 괄호([])를 사용해서 이름을 지정할 수 있었습니다. ES6의 오브젝트 리터럴에서는 오브젝트 생성시 바로 계산된 값으로 이름을 지정하는 것이 가능해졌습니다.

const name = 'iPhone';
const product = {
  [name + '_color']: 'blue',
  [name + '_screen']: '4.7 inch'
};
console.log(product.iPhone_color);
console.log(product.iPhone_screen);

게터(getter)와 세터(setter)는 오브젝트의 멤버함수를 프라퍼티처럼 사용할 수 있도록 해 줍니다. 오브젝트로부터 가져와야하는 데이터가 연산을 거친 후에 받을 수 있는 것이면 멤버 함수로 구현을 하게 됩니다. 오브젝트를 사용하는 쪽에서는 이 함수로부터 리턴 받은 값을 변수에 저장된 값과 비료를 하려면 `obj.productFullName() === 'Android:Galaxy S7'`처럼 코드를 작성해야합니다. 게다가 값을 넣을 때는 다른 함수를 사용해서 `obj.setProductFullName('iOS:iPhone 7')` 이렇게 해야합니다. 함수 이름을 정하는 규칙을 정해서 할 수는 있지만 직관적이지 않고 번거롭기만 합니다. 아래는 ES6를 사용한 예입니다.

const product = {
  os : 'iOS',
  name: 'iPhone 7',
  get productFullName () {
    return this.os + ':' + this.name;
  },
  set productFullName (fullName) {
    let names = fullName.split(':');
    this.os = names[0];
    this.name = names[1];
  }
};


console.log(product.productFullName);
product.productFullName = 'Android:Galaxy S7';
console.log(product.os);
console.log(product.name);

참고: [MDN Grammar and types: Object literals]

템프릿 스트링

ES6에는 편리하면서도 강력한 기능을 제공하는 스트링 리터럴이 추가 되었습니다. 이 문법은 기존의 작은 따옴표(')나 큰 따옴표(") 대신에 백틱(\`)을 사용합니다. 기존 스트링 리터럴과 탈리 템프릿 스트링 리터럴은 변수나 익스프레션을 스트링 안에 넣을 수 있습니다. `$(expression)`처럼 사용하면 이 부분을 실제 변수의 값이나 익스프레션의 결과로 치환을 해 줍니다. 마치 탬플릿 언어를 사용하는 것처럼 말이죠. 또한 여러 라인에 걸쳐서 스트링을 만들 수도 있습니다.

const product = {
  os : 'iOS',
  name: 'iPhone 7',
  get productFullName () {
    // ES6 Template String
    return `${this.os}: ${this.name}`;
  },
  set productFullName (fullName) {
    let names = fullName.split(':');
    this.os = names[0];
    this.name = names[1];
  }
};


console.log(product.productFullName);
product.productFullName = 'Android:Galaxy S7';
// Multi lines
const result =`   *** Product ***
   * OS : ${product.os}
   * Name : ${product.name}
   * FullName: ${product.os + ':' + product.name}`;
console.log(result);

템플릿 스트링 관련해서 추가로 알고 넘어갈 내용으로는 태그드 템플릿이 있습니다. 템플릿 스트링의 내용을 인자로 받아서 필요한 연산을 한 후 스트링이나 다른 오브젝트를 리턴하는 함수를 구현합니다. 그리고 이 함수를 템프릿 스트링 앞에 배치합니다. 함수의 인자로는 `$(expression)` 앞 뒤로 나뉘는 스트링을 배열로 갖는 파라미터와 각 익스프레션이 순대대로 들어갑니다.

const product = {
  os : 'iOS',
  name: 'iPhone 7'
};


function addCompany(strings, nameExp, osExp) {
  const str0 = strings[0]; // "The "
  const str1 = strings[1]; // " OS is "
  let company;
  if (osExp === 'iOS')
    company = 'Apple';
  else
    company = 'Samsung';


  return `${str0}${nameExp}${str1}${osExp} and made by ${company}.`;
}
//${product.name}과 ${product.os}로 나뉜 2개의 string
const taggedString = addCompany`The ${product.name} OS is ${product.os}`;
console.log(taggedString);

참고: [MDN Template Strings](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/template_strings)

디스트럭처링

디스트럭처링은 여러 값을 패킹(pack)에서 가지고 있는 변수에서 언패킹(unpack)을 해서 다른 변수에 값을 할당하는 문법입니다. 정확히는 디스트럭처링 어사인먼트라고 해야합니다. 배열에서는 값을 오브젝트에서는 프라퍼티를 언패킹할 수 있습니다. 먼저 배열 디스트럭처링을 살펴 보겠습니다.

변수를 선언하면서 바로 할당하거나 이미 선언된 변수에 디스트럭처링을 할 수 있습니다. 배열의 갯수가 할당 받을 변수의 갯수보다 적은 경우에 기본 값을 지정할 수 있습니다. 배열을 언패킹할때 앞에 일부는 각각 변수에 할당하고 나머지는 하나의 변수에 배열로 저장할 수 있습니다. 이는 나머지 패턴(rest pattern)을 통해서 지정할 수 있습니다.

const phones = ['iPhone', 'Android', 'featurePhone', 'Others'];
// 변수를 선언하면서 바로 할당
let [phone1, phone2, phone3, phone4] = phones;
console.log(phone1); // iPhone
console.log(phone2); // Android
console.log(phone3); // featurePhone
console.log(phone4); // Others


// 이미 선언된 변수에 할당
let first, second, others;
[first, second] = phones; // 2개 이후 나머지는 무시됨.
console.log(first); // iPhone
console.log(second); // Android


[phone1, phone2, phone3='Unknown'] = [second, first];
console.log(phone1); // Android
console.log(phone2); // iPhone
console.log(phone3); // Unknown


// 나머지 패턴
[first, second, ...others] = phones;
console.log(phone1); // iPhone
console.log(phone2); // Android
console.log(others); // ['featurePhone', 'Others']

오브젝트 디스트럭처링도 변수를 선언하면서 혹은 이미 선언된 변수에도 가능합니다. 특별히 변수 선언 후에 디스트럭처링 저장을 하는 경우에는 꼭 압뒤로 (....)처럼 괄호를 넣어 주어야합니다. 라인의 시작에 있는 중괄호({)는 블럭의 시작으로 해석이 되기때문입니다.

const iphone = {
  name: 'iPhone 7',
  os: 'iOS'
};
const android = {
  name: 'Galaxy S7',
  os: 'Android'
};


let {name, os} = iphone;
console.log(name);  // iPhone 7
console.log(os);    // iOS


// 괄호를 꼭 해 줘야합니다.
({name, os} = android);
console.log(name);   // Galaxy S7
console.log(os);     // Android

디스트럭처링을 하면서 바로 다른 변수에 저장을 할 수도 있습니다. 매칭되는 키가 없는 경우에 사용할 기본 값을 지정할 수도 있습니다.

const iphone = {
  name: 'iPhone 7',
  os: 'iOS'
};


// 다른 이름으로 저장
let {name: phoneName, os: phoneOS} = iphone;
console.log(phoneName);  // iPhone 7
console.log(phoneOS);    // iOS


// 기본값 지정
let {name, os, color='Blue'} = iphone;
console.log(name);   // iPhone 7
console.log(os);     // iOS
console.log(color);  // Blue

참고: [MDN Destructuring assignment](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment)

기본 함수 파라미터

함수를 정의할 때 파라미터에 기본 값을 지정할 수 있습니다. 함수가 호출될 때 파라미터를 넣지 않았거나, `undefined`로 값이 들어오면 기본 값으로 파라미터가 세팅됩니다. ES5를 사용할 때는 파라미터에 기본 값을 넣기 위해서는 파라미터를 확인하고 기본 값을 넣는 코드를 추가해야했습니다. 파라미터를 입력하지 않으면 파라미터가 `undefined`가 되기때문에 `param === undefined`처럼 비교하여 기본 값을 지정하는 코드를 사용했습니다. 간단하게는 `||`를 사용해서 기본 값을 지정하기도 했죠.

function totalPrice(price, itemCount) {
  // ES5 : itemCount 가 undefined 이면 1
  itemCount = itemCount || 1;
  return price * itemCount;
}
console.log(totalPrice(100, 2)); // 100 * 2
console.log(totalPrice(100));    // 100 * 1

기본 함수 파라미터를 사용하면 함수의 파라미터를 정할 때 기본 값을 지정할 수 있습니다.

function totalPrice(price, itemCount=1) {
  return price * itemCount;
}


console.log(totalPrice(100, 2)); // 100 * 2
console.log(totalPrice(100));    // 100 * 1

기본 파라미터로는 숫자뿐 아니라 스트링, 함수, 디스트럭처링 된 변수 등이 들어갈 수 있습니다.

//함수로 지정
function totalPrice(price, itemCount=defaultCount()) {
  return price * itemCount;
}
function defaultCount() {
  return 1;
}
console.log(totalPrice(100));    // 100 * 1


//오브젝트 디스트럭처링, 배열 디스트럭처링
function setPhone({name, os} = {name: 'iPhone 7', os: 'iOS'}, [price, count] = [200, 2]) {
  //오브젝트 확장 리터럴로 세팅
  return {
    name, os, price, count
  };
}
console.log(setPhone());

참고: [Default parameters](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Default_parameters)

함수 나머지 파라미터

함수 파라미터의 이름 앞에 `...`를 붙이면 파라미터의 개수에 관계없이 지정된 이름에 배열로 담아 줍니다. 나머지 파라미터 앞에 있는 파라미터를 제외한 나머지 파라미터만 배열로 주기때문에 이름도 나머지 파라미터입니다.

function createCart(id, name='Unknown', ...products) {
  const count = products.length;
  return {
    id, name, count,
    products
  }
}
let cart = createCart(1, 'Good Customer', 'iPhone 7', 'Galaxy S7', 'Charger');
console.log(cart);
//{"id":1,"name":"Good Customer","count":3,"products":["iPhone 7","Galaxy S7","Charger"]}


//파라미터가 주어지지 않아도 나머지 파라미터는 빈 배열로 생성됩니다.
cart = createCart(2);
console.log(cart);
//{"id":2,"name":"Unknown","count":0,"products":[]}


//나머지 파라미터를 디스트럭처링하는 예제입니다.
function createCartOnly2(id, name='Unknown', ...[product1, product2]) {
  const count = 2;
  return {
    id, name, count,
    products2: [product1, product2]
  }
}
//디스트럭처링 갯수를 넘는 파라미터는 무시됩니다.
cart = createCartOnly2(3, 'New Customer', 'iPhone 7', 'Galaxy S7', 'Charger');
console.log(cart);
//{"id":3,"name":"New Customer","count":2,"products2":["iPhone 7","Galaxy S7"]}

나머지 파라미터를 보면 `arguments` 오브젝트와 기능이 유사한 것처럼 보입니다. 하지만 중요한 차이점이 있습니다.

- 나머지 파라미터는 파라미터 이름이 지정되지 않은 나머지 파라미터만 포함하고 있습니다. 반면 arguments는 모든 파라미터를 포함하고 있습니다.

- 나머지 파라미터는 자바스크립트 `배열(Array)`입니다. 따라서 배열의 여러가지 메써드를 사용할 수 있습니다. `sort`, `map`, `forEach` 등을 말입니다. 하지만 arguments는 배열이 아니기때문에 배열이 가진 기능을 사용할 수 없습니다.

아래 예제는 `arguments`를 사용해서 createCart()를 구현한 예입니다.

function createCart(id, name='Unknown') {
  const count = arguments.length - 2;
  const args = Array.from(arguments).splice(2);
  return {
    id, name, count,
    products: args
  }
}


let cart = createCart(1, 'Good Customer', 'iPhone 7', 'Galaxy S7', 'Charger');
console.log(cart);
//{"id":1,"name":"Good Customer","count":3,"products":["iPhone 7","Galaxy S7","Charger"]}

참고: [Rest parameters](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/rest_parameters)

전개 문법

전개 문법(spread syntax)은 배열이나 스트링처럼 이터레이션이 가능한 데이터를 개별 데이터로 펼쳐서(전개, spread) 전달해 주는 기능입니다. 이터러블한 변수 이름 앞에 `...`를 붙여 사용합니다. 함수 인자의 경우 `values`라는 배열을 함수 인자로 `someFunction(...values)`처럼 넣을 수 있습니다. 또한 배열이나 오브젝트를 생성할 때도 사용할 수 있습니다.

// 1. 함수 전체 인자로 사용한 예
function createCart(id, name, count) {
  return {
    id, name, count
  }
}
const product = [1, 'iPhone 7', 3];
// Spread Syntax
let cart = createCart(...product);
console.log(cart);
//{"id":1,"name":"iPhone 7","count":3}


// 2. 함수 일부 인자로 사용한 예
const selection = ['Galaxy S7', 5];
cart = createCart(2, ...selection);
console.log(cart);
//{"id":2,"name":"Galaxy S7","count":5}

배열 리터럴에서도 전개 문법을 사용할 수 있습니다. 배열의 복사나 여래개의 배열을 하나로 합치는 데도 이용할 수 있습니다.

const product1 = ['iPhone 7', 'iOS'];
const product2 = ['Galaxy S7', 'Android'];


//배열 리터럴에서 사용
const products = ['iPhone X', 'iOS', ...product1, 'Galaxy 9', 'Android'];
console.log(products);
//["iPhone X","iOS","iPhone 7","iOS","Galaxy 9","Android"]


//배열 복사
const copied = [...products];
console.log(copied);
//["iPhone X","iOS","iPhone 7","iOS","Galaxy 9","Android"]


//2개의 배열을 연결할 때
const two_products = [...product1, ...product2];
console.log(two_products);
//["iPhone 7","iOS","Galaxy S7","Android"]

오브젝트도 전개 문법을 사용할 수 있습니다. 배역의 예와 마찬가지고 생성, 복사, 합치는 것이 가능합니다. 주의할 점은 오브젝트의 키가 동일한 경우 앞에 있는 오브젝트의 키의 내용은 뒤에 있는 오브젝트의 것으로 덮어 써집니다. 아래 예제에서 결과를 보실 수 있습니다.

const product1 = {name: 'iPhone 7', os: 'iOS'};
const product2 = {name: 'Galaxy S7', type: 'Smart Phone'};


//오브젝트 리터럴에서 사용
const products = {id: 3, ...product1};
console.log(products);
//{"id":3,"name":"iPhone 7","os":"iOS"}


//오브젝트 복사
const copied = {...product2};
console.log(copied);
//{"name":"Galaxy S7","type":"Smart Phone"}


//2개의 오브젝트를 합칠 때
const two_products = {...product1, ...product2};
console.log(two_products);
//{"name":"Galaxy S7","os":"iOS","type":"Smart Phone"}

참고: [Spread Operator](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_operator)

let + const

`let`은 블록 스코프를 갖는 변수를 정의할 수 있습니다. 글로벌 스코프이거나 함수 단위 스코프를 갖는 `var`와는 스코프에서 차이가 있습니다. var는 같은 글로벌 혹은 함수 내부에서도 중괄호({ })로 구분되는 블록을 벗어나도 변수가 유지됩니다. 하지만 let은 블록 안에서만 유효합니다.

function priceCheck() {
  let price1 = 200;
  var price2 = 200;

  if (true) {
    let price1 = 300;
    var price2 = 300;

    console.log(price1);  //300
    console.log(price2);  //300
  }


  //if 블록 안의 price1과 밖의 price1은 서로 다른 변수 입니다.
  console.log(price1);  //200
  console.log(price2);  //300
}
priceCheck();

`const`는 스코프는 let과 동일한 범위를 갖는 상수를 정의할 수 있습니다. 여기서 상수는 const로 정의된 변수에 다른 것을 다시 어사인할 수 없다는 것입니다. 하지만 이 const 변수가 레퍼런스하고 있는 오브젝트의 내용은 얼마든지 변경이 가능합니다.



const PI = 3.14;
//아래 코드는 Uncaught TypeError: Assignment to constant variable 를 발생합니다.
//PI = 4;


const product = {
  name: 'Galaxy S7',
  os : 'Android'
};
// product가 레퍼런스를 하고 있는 오브젝트 내용을 변경하는 것은 가능합니다.
product.name = 'Galaxy 9';

참고: [let statement](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let), [const statement](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/const)

for...of

`for...of` 스테이트먼트를 사용하여 이터러블한 오브젝트를 루프를 돌 수 있습니다. String, Array와 Array처럼 동작하는 arguments나 NodeList, TypedArray, Map, Set 등의 오브젝트에 사용할 수 있습니다. 추가로 사용자 정의 이터러블 오브젝트에서 사용 가능합니다.(사용자 정의 이터러블 프로토콜은 다음에 설명합니다.)

let iterable = [10, 20, 30];
for (let vaule of interable) {
  value += 1;
  colsole.log(value);
}
// 11
// 21
// 31

참고 : [MDN for...of](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...of)

이터레이션 프로토콜

자바스크립트 `이터레이션 프로토콜`을 사용하여 오브젝트를 이터레이션이 가능하게 할 수 있습니다. 이터레이션이 가능한 오브젝트가 되면 for...of 스테이트먼트에서 사용 가능하게 됩니다.

이터러블한 오브젝트가 되기 위해서는 이터레이터 함수를 리턴하는 메써드를 구현해야합니다. `@@interator`를 키로 하는 메써드를 구현하면 됩니다. 키는 `@@interator`를 직접 사용하는 대신 `Symbol.interator`로 사용하면 됩니다.

이터레이터는 `next()` 메써드를 구현합니다. `next()` 메써드는 `done`과 `value` 프라퍼티를 갖는 오브젝트를 리턴합니다.

let fibonacci = {
  [Symbol.iterator]() {
    let pre = 0, cur = 1;
    return {
      next() {
        [pre, cur] = [cur, pre + cur];
        return { done: false, value: cur }
      }
    }
  }
}


for (var n of fibonacci) {
  // truncate the sequence at 1000
  if (n > 1000)
    break;
  console.log(n);
}

참조: [MDN for...of](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Iteration_protocols)

제너레이터

간단히 말해서 제너레이터는 `function*`과 `yield`를 사용해서 이터레이터를 구현한 것과 같습니다. 할수를 정의할 때 function*를 사용하면 제너레이터가 리턴됩니다. 이터레이터의 `next`외에 추가로 `return`와 `throw` 메써드를 호출할 수 있습니다. next는 yield 익스프레션 값을 리턴합니다.return은 파라미터로 주어진 값을 리턴하면서 제너레이터를 종료합니다. throw는 제너레이터에 에러를 전달합니다.

var fibonacci = {
  [Symbol.iterator]: function*() {
    var pre = 0, cur = 1;
    for (;;) {
      var temp = pre;
      pre = cur;
      cur += temp;
      yield cur;
    }
  }
}


for (var n of fibonacci) {
  // truncate the sequence at 1000
  if (n > 1000)
    break;
  console.log(n);
}

참조: [MDN Generator](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Generator)

유니코드

전체 유니코드를 지원합니다. 스트링 안에서 유니코드를 표현할 수 있는 새로운 방식이 추가되었습니다. RegExp에는 코드 포인트를 처리하기 위해 `u` 모드가 추가되었습니다. 추가로 21bit 코드 포인트 레벨에서 스트링을 처리하는 API가 추가되었습니다.

// same as ES5.1
" ".length == 2


// new RegExp behaviour, opt-in ‘u’
" ".match(/./u)[0].length == 2


// new form
"\u{20BB7}"==" "=="\uD842\uDFB7"


// new String ops
" ".codePointAt(0) == 0x20BB7


// for-of iterates code points
for(var c of " ") {
  console.log(c);
}

참조: [MDN RegExp.prototype.unicode](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp/unicode)

모듈

콤포넌트를 정의할 수 있도록 모듈을 지원합니다.

// lib/math.js
export function sum(x, y) {
  return x + y;
}
export var pi = 3.141593;

// app.js
import * as math from "lib/math";
alert("2π = " + math.sum(math.pi, math.pi));

// otherApp.js
import {sum, pi} from "lib/math";
alert("2π = " + sum(pi, pi));

추가적으로 `export default`와 `import *`:

// lib/mathplusplus.js
import * from "lib/math";
export var e = 2.71828182846;
export default function(x) {
    return Math.log(x);
}

// app.js
import ln, {pi, e} from "lib/mathplusplus";
alert("2π = " + ln(e)*pi*2);

참고: [import statement], [export statement]

모듈 로더

모듈 로더는 아래 기능을 지원합니다.:

- Dynamic loading

- State isolation

- Global namespace isolation

- Compilation hooks

- Nested virtualization

기본 모듈 로더는 설정이 가능합니다. 또한 별도로 구분되어 있거나 정해진 컨텍스트 내에서 새 로더를 구성하는 것도 가능합니다.

// Dynamic loading – ‘System’ is default loader
System.import('lib/math').then(function(m) {
  alert("2π = " + m.sum(m.pi, m.pi));
});


// Create execution sandboxes – new Loaders
var loader = new Loader({
  global: fixup(window) // replace ‘console.log’
});
loader.eval("console.log('hello world!');");


// Directly manipulate module cache
System.get('jquery');
System.set('jquery', Module({$: $})); // WARNING: not yet finalized

Map, Set(WeakMap, WeakSet)

일반적인 알고리즘에서 많이 사용되는 데이터 구조가 추가되었습니다. WeakMap과 WeakSet은 weak reference를 지원해서 메모리 릭을 방지할 수 있습니다.

// Sets
var s = new Set();
s.add("hello").add("goodbye").add("hello");
s.size === 2;
s.has("hello") === true;


// Maps
var m = new Map();
m.set("hello", 42);
m.set(s, 34);
m.get(s) == 34;


// Weak Maps
var wm = new WeakMap();
wm.set(s, { extra: 42 });
wm.size === undefined


// Weak Sets
var ws = new WeakSet();
ws.add({ data: 42 });
// Because the added object has no other references, it will not be held in the set

참조: [Map], [Set], [WeakMap], [WeakSet]

프록시

오브젝트에 새로 정의된 기능(함수)를 수행할 수 있도록 합니다. 원래 오브젝트의 동작을 중간에 가로채거나, 오브젝트를 가상화, 로깅을 하는데 사용할 수 있습니다.

// Proxying a normal object
var target = {};
var handler = {
  get: function (receiver, name) {
    return `Hello, ${name}!`;
  }
};


var p = new Proxy(target, handler);
p.world === 'Hello, world!';

// Proxying a function object
var target = function () { return 'I am the target'; };
var handler = {
  apply: function (receiver, ...args) {
    return 'I am the proxy';
  }
};


var p = new Proxy(target, handler);
p() === 'I am the proxy';

프록시에서 수행 가능한 모든 목록은 아래와 같습니다.:

var handler =
{
  get:...,
  set:...,
  has:...,
  deleteProperty:...,
  apply:...,
  construct:...,
  getOwnPropertyDescriptor:...,
  defineProperty:...,
  getPrototypeOf:...,
  setPrototypeOf:...,
  enumerate:...,
  ownKeys:...,
  preventExtensions:...,
  isExtensible:...
}

참고: [MDN Proxy](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy)

심볼

오브젝트의 키로 사용될 수 있는 기본 타입입니다. 오브젝트의 키로 `string`을 사용할 수도 있지만 `symbol`도 사용할 수 있게 추가되었습니다. 파라미터로 `description`을 추가할 수 있지만 필수는 아닙니다.

var MyClass = (function() {


  // module scoped symbol
  var key = Symbol("key");


  function MyClass(privateData) {
    this[key] = privateData;
  }


  MyClass.prototype = {
    doStuff: function() {
      ... this[key] ...
    }
  };


  return MyClass;
})();


var c = new MyClass("hello")
c["key"] === undefined

참고: [MDN Symbol](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Symbol)

새로운 라이브러리 추가 기능

Math + Number + String + Array + Object APIs

라이브러리에 새로운 기능이 다수 추가되었습니다.


Number.EPSILON
Number.isInteger(Infinity) // false
Number.isNaN("NaN") // false


Math.acosh(3) // 1.762747174039086
Math.hypot(3, 4) // 5
Math.imul(Math.pow(2, 32) - 1, Math.pow(2, 32) - 2) // 2


"abcde".includes("cd") // true
"abc".repeat(3) // "abcabcabc"


Array.from(document.querySelectorAll('*')) // Returns a real Array
Array.of(1, 2, 3) // Similar to new Array(...), but without special one-arg behavior
[0, 0, 0].fill(7, 1) // [0,7,7]
[1, 2, 3].find(x => x == 3) // 3
[1, 2, 3].findIndex(x => x == 2) // 1
[1, 2, 3, 4, 5].copyWithin(3, 0) // [1, 2, 3, 1, 2]
["a", "b", "c"].entries() // iterator [0, "a"], [1,"b"], [2,"c"]
["a", "b", "c"].keys() // iterator 0, 1, 2
["a", "b", "c"].values() // iterator "a", "b", "c"


Object.assign(Point, { origin: new Point(0,0) })

참고: [Number](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number), [Math](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math), [Array.from](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/from), [Array.of](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/of), [Array.prototype.copyWithin](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/copyWithin), [Object.assign](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign)

이진수, 팔진수

이진수(`b`)와 팔진수(`o`)가 뉴머릭 리터럴에 추가되었습니다.


0b111110111 === 503 // true
0o767 === 503 // true

프로미스

어싱크 프로그래밍에 사용할 수 있는 라이브러리입니다.

function timeout(duration = 0) {
    return new Promise((resolve, reject) => {
        setTimeout(resolve, duration);
    })
}


var p = timeout(1000).then(() => {
    return timeout(2000);
}).then(() => {
    throw new Error("hmm");
}).catch(err => {
    return Promise.all([timeout(100), timeout(200)]);
})

More info: [MDN Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise)

리플렉트 API

런타임 레벨에서 오브젝트에 리플렉션 API를 제공합니다. 프록시의 트랩 목록과 동일한 API를 제공합니다. 프록시를 구현할 때 유용하게 사용할 수 있습니다.

// No sample yet

참고: [MDN Reflect](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Reflect)

테일 콜 옵티마이제이션

자바스크립트 인터프리터 구현과 관련된 사항입니다. 함수의 리턴하기 전 마지막 해야할 일이 함수를 이벨류에이션하는 것이라면 ES6 인터프리터는 테일 콜 옵티마이제이션을 할 수 있습니다. 마지막 호출되는 함수는 로컬 변수를 따로 가지고 있지 않아야 합니다. 이 경우 별도의 스택 프레임을 만들지 않기때문에 메모리 사용량이 줄어들게 됩니다. 특히나 리컬시브 함수인 경우에는 스택 오버플로우 에러를 방지할 수 있습니다.

function factorial(n, acc = 1) {
    'use strict';
    if (n <= 1) return acc;
    return factorial(n - 1, n * acc);
}


// Stack overflow in most implementations today,
// but safe on arbitrary inputs in ES6
factorial(100000)

참고: [ES6 tail calls](http://benignbemine.github.io/2015/07/19/es6-tail-calls/)

비트코인 코어(Bitcoin Core) 소스 분석에 도움이 되는 자료 모음

엔디엘디(NdLd) — Sun, 15 Apr 2018 23:19:16 +0900

비트코인 개발자 문서

링크 : https://bitcoin.org/en/developer-documentation

비트코인 org에서 제공하는 문서

비트코인 에지 워크숍 튜토리얼

링크 : https://bitcoinedge.org/tutorials

Dev++2017에서 발표된 튜토리얼 모음

비트코인 완전 정복(Mastering Bitcoin) 2nd Edition

링크: https://github.com/bitcoinbook/bitcoinbook

Mastering Bitcoin 2판 영문 책

나이가 들면 뇌세포는 생산이 안되는 걸까?

엔디엘디(NdLd) — Sun, 8 Apr 2018 14:58:51 +0900

오랫동안 들어오고 자연스럽게 받아들였던 말들이 있습니다.

사람이 나이가 들면 뇌세포는 더 이상 새로 만들어 지지 않는다.
나이가 들면 기억력이 감퇴하는 건 생물학적으로 당연하다.
뇌세포가 점점 사라져서 더 노력해도 예전처럼은 안될꺼야.

최근에 발표된 한 연구에따르면 어쩌면 이 말들은 사실이 아닐 수도 있습니다.

나이가 70이 되어도 여전히 새로운 뇌세포가 만들어지고 있다는 점이 발견되었기때문이죠.

더군다다 20대와도 세포로만 봤을 때는 차이가 없다는 내용입니다.

뇌에서 사람의 기억과 관련된 중요한 기능을 담당하는 부분은 해마(Hippocampus)인데요.

20대의 뇌와 70대의 뇌를 비교했을 때 해마에서 새로운 세포의 숫자가 거의 동일하다는 것입니다.

20대의 해마(위)와 70대의 해마(아래)에 있는 새로운 세포의 수사 거의 동일하다고 합니다.
이미지 출처 : 사이언스뉴스

10대, 20대를 거치면서 뇌세포가 나이가 들수록 점점 줄어든다는 말은 별 신경쓸 이야기가 아니었죠.

하지만 더 나이가 들어 40대를 지나게 되면 자연스럽게 나오는 말이 있습니다.

나이가 드니까 역시 예전처럼 머리가 돌아가지 않네.
예전에는 기억력 하나는 좋았는데, 뇌도 나이가 드니 어쩔 수 없군.
이제는 새로운 공부를 하기는 글렀어. 더 이상 머리가 바쳐주지를 않네.

어쩌면 무의적으로 나오는 이런 말들은 오랜기간에 걸쳐 나에게 익숙해진 뇌에관한 사실때문일 겁니다.

나이가 들면 뇌는 더 이상 세포를 생성하지 않는다.
어릴 때 가지고 있던 세포들이 죽어가면서 숫자가 줄어들기만 한다.

사실관계보다 이미 나를 길들이고 있는 이런 말이 더 무서운게 아닐까요?

이번 연구의 특이점은 다른 연구에 비해서 많은 양의 증거를 제시했다는 점입니다.

연구에 사용한 사람의 뇌는 14살에서 79살의 28명의 것이라고 하고요.

일반 기증자의 뇌가 아닌 과거 병력이나 약물 복용 여부에 관한 데이터도 확인된 것이라고 하고요.

반대로 뇌 세포는 더 이상 생산되지 않는다는 연구결과도 발표되고 있습니다.

아직 어떤 것이 옳다는 단정을 할 수 있는 단계는 아니라고 하네요.

하지만 예전처럼 나이가 들면 무조건 머리가 안돌아가고 뇌가 죽어간다는 핑게는 대지 말아야할 것 같습니다.

연구 결과에는 한가지 전제가 있습니다.

70세의 뇌이지만, 건강한 70세라는 겁니다.

뇌도 몸의 일부이니 전체적으로 몸이 건강해야 뇌가 가지고 있는 기능을 잘 발휘할 수 있겠죠.

나이가 들어 머리가 나빠지는 것은 어쩔 수 없다는 고정관념은 이제 의심을 해 봐야합니다.

과학자들이 70대가 되어도 20대와 똑같이 새로운 뇌 세포가 있다고 하니까요.

나이가 들어 근육양은 줄어들었지만, 뇌 세포만큼은 20대처럼 항상 생생하다는 말 믿어보시죠!

롱제티 - 석양을 보러 가는 여행 (시드니 근교)

엔디엘디(NdLd) — Sun, 8 Apr 2018 00:35:07 +0900

롱제티(Long Jetty)는 시드니에서 북쪽으로 약 1시간 20분을 달리면 나오는 작은 마을입니다.

센트럴 코스트(Central Coast)지역에 위치하고 있으면서 관광객들이 많이 찾는 엔트란스(The Entrance)와 아주 가깝게 위치하고 있죠.

제티(Jetty)라는 단어는 배를 대고 사람들이 내리고 탈 수 있는 선착장 같은 곳을 의미합니다.

지금부터 100년도 더 전인 1915년에 와이용으로 사람들을 실어 나르는 페리를 위해서 만들어 졌습니다.

페리가 들어올 수 있는 깊이까지 연결을 하기위해서는 길이가 무려 315미터나 되어야했죠.

롱제티에서 마을쪽을 바라본 모습

롱제티 나무다리 위로 막 올라서서

호수를 끼고 있는 작은 마을

자연 스럽게 제티 근방의 마을은 롱제티라고 불리게 되었습니다.

물위로 쭉 뻗어 있는 제티 3개가 약 600 미터 정도의 간격을 두고 만들어져 있습니다.

이 제티가 있는 곳은 바다가 아니라 터가라 호수(Tuggerah Lake)인데요.

엔트란스를 통해서 바다와 연결되어 있는 내륙에 있는 커다란 바닷물로 되어 있는 호수죠.

롱제티도 예전에는 관광객을 위한 카라반 파크, 숙소, 롤러스케이트장 등이 있었지만 지금은 다 문을 닫았고요.

1990년대 초만 하더라도 금융 서비스 기관들이 여럿 들어차 있어서 번성을 했었습니다. 지금은 역시 다 문을 닫은 상태입니다.

대신 현대적인 가구, 중고 가구 상점들이 들어서면서 조금 다시 활력을 얻어가고는 있죠.

롱제티 100년을 기념하는 안내

옛 롱제티 모습 : 롱제티 100년을 기념하는 안내판에서

페리를 타던 곳에서 석양을 바라보는 곳으로

특히 주말이면 이곳을 찾는 관광객들이 끊이지를 않습니다. 롱제티를 찾아서 넓은 호수를 바라보는 기분은 하루 중 어느때는 평안한 느낌을 주기에 충분하죠.

호수를 바라볼 수 있게 배치된 의자들과 가족끼리 가벼운 바베큐를 즐길 수 있는 시설도 잘 마련되어 있어요.

롱제티에 오니 내 다리도 따라서 롱~~~

해가 너무 밝아요.

세개의 제티중에서 호수를 바라봤을 때 제일 오른쪽에 위치한 것이 가장 긴데요.

일일히 다 걸어볼 시간이나 체력이 없다면 바로 이곳으로 오는게 좋습니다.

호수를 향해 놓인 나무위를 걸으면서 호수를 바라보고요.

얕은 물에 다니는 물고기를 보고 있으면 그냥 마음이 편해지면서 왜 여길 사람들이 찾는 지 자연스럽게 알게됩니다.

운이 좋다면 저처럼 물위를 날개치듯 헤험치는 가오리를 만날 수도 있어요.

사진보다 실제로 보면 더 신기해요.

펠리컨은 엔트런스의 명물이기도 하죠.

하지만 무엇보다 이곳을 찾는 사람들은 해가 막 지기전 1~2시간을 맞춰 오는 경우가 많습니다.

석양을 보기 위한 것이죠.

해가 질 때쯤 제티 끝으로 걸어가는 사람

벌써 붉은 색을 내는 군요.

아직 이글거리네요.

마지막 붉은 빛깔

마지막 사라지기전 폭팔하는 붉음

꼭 제티에 나가지 않더라도 가족들 간, 친구들간에 모여 석약을 바라보며 샴페인, 와인을 함께 나누는 사람들도 꽤 있네요.

아이들을 위한 작은 놀이터도 있는데요.

놀이터에서 바라보는 마지막 노을도 꽤 운치있었습니다.

어디를 가든 아이들을 위한 놀이터는 있어요.

노을을 바라보며 타는 미끄럼틀

다음에는 좀 더 일찍 나와서 유미나비치를 먼저 들리기로 했습니다.

근처에 있는 맛있는 식당에서 늦은 점심으로 빅브렉퍼스트도 하나 시켜 먹고 롱제티로 오려고요.

[블록체인] 해시함수 이해 4 - 특성 3 - 퍼즐 게임을 만들 수 있다==코인 마이닝 문제 출제

엔디엘디(NdLd) — Sat, 31 Mar 2018 14:35:49 +0900

블록체인에 사용되는 해시함수는 무엇이고 어떤 특성을 가지고 있는지 알아보고 있습니다.

그 네번째 마지막 글로 해시 함수의 특성 3 - 퍼즐 게임을 만들 수 있다입니다.

이전 글은 아래 링크에서 보실 수 있습니다.

[블록체인]해시함수 이해1 - 해시함수란?

[블록체인] 해시함수 이해 2 - 특성 1 - 충돌이 거의 발생하지 않는다.

[블록체인] 해시함수 이해 3 - 특성 2 - 원본 내용을 알 수 없다

이글에서 말하는 해시 퍼즐 게임이 비트코인 채굴자(마이너)들이 푸는 문제와 같은 종류입니다.

흔히 암호를 푼다고 하는데요.

알고보면 암호를 푼다기 보다는 랜덤하게 값을 입력해서 원하는 해시가 나오는지 확인하는 작업을 반복하는 겁니다.

모래밭에서 금조각 찾기라고 할 수 있는데요.

금속 탐지기나 심지어는 사금 채취하듯 물에 흘려보내면서 찾는 등 어떤 기술 도입을 전혀 할 수 없다는거죠.

문제는 이런식입니다.

256 bits 결과를 내는 SHA256 해시의 결과가 아래와 같은 입력값을 찾으시오.
해시 : '38744961f4eda323853183a6f6bc135434347285158efaaba7b9280fdb569a95'

해답을 찾는 지름길이 없다

해시의 특성중 충돌이 일어나지 않는다와 해시 결과로 입력을 원본을 알 수 없다는 것이 있습니다.

예를들어 숫자 256으로 나누어서 나머지 값을 해시 결과로 갖는 해시함수가 있다고 하죠.

해시 결과 10일 입력을 찾으라는 문제를 내면 어떻게 하시겠어요?

256 + 10

256 X 2 + 10

256 X 3 + 10

....

아주 간단한 공식으로 바로 해결이 됩니다.

이런 해시는 사용불가입니다.

여기서 예로들고 있는 SHA256은 아직까지는 이런 지름길이 없는 것으로 알려져 있습니다.

무조건 어떤 값을 넣어서 해시를 계산해 보고 해답과 일치하는 지를 봐야하는 거죠.

그래도 뭔가 꼼수를 부릴 수 있지 않을까?

가능합니다.

해시 결과를 미리 계산해서 저장해 두는 데이터 베이스를 만드는 거죠.

일단 최대한 많이 만들고, 계속 만들어 둡니다.

그리고 문제로 출제되는 해시와 이미 저장된 것과 일치되는 것이 나오면 계산할 필요도 없이 바로 답을 알게되는 거죠.

이를 방지하기 위해서 실제 어플리케이션에는 좀 더 다른 방법으로 문제를 출제합니다.

랜덤하게 생성된 키값을 주고요.

이 키와 어떤 값(X)를 붙여서 해시 입력으로 넣었을 때 해시 결과가 아래와 같이 나오는 X를 찾으시오.

예를들면

SHA256 해시의 입력으로 아래 주어진 키에 X를 붙여서 넣었을 때 아래 주어진 해시를 출력하는 X를 찾으시오.
키 : '0c62f876ef1dea830de9f32c2f4b46dd6d74d50d15896e09ef5a2fcd4ac7e1d7'
해시 : '38744961f4eda323853183a6f6bc135434347285158efaaba7b9280fdb569a95'

라고 문제를 출제합니다.

해시의 충돌은 발생할 수 밖에 없습니다.

즉 같은 해시를 만들어 낼 수 있는 입력은 아주 많이 존재한다는 거죠.

하지만 랜덤으로 선택된 키를 제공함으로서 내가 미리 계산해둔 해시 입력값은 의미가 없어집니다.

정답이 미리 계산해 둔 데이터베이스에 있을 수도 있지만, 역시 하늘에 별따기죠.

문제의 난이도 조정은 어떻게 하지?

그런데, 위에 예를 든 것처럼 문제를 출제하면 어떤 경우에는 평생 아무도 못 푸는 문제가 되고 맙니다.

해시의 특성 2에서 40조의 8 제곱에 관한 설명을 보셨죠?

문제의 난이도를 조정하는 법은 의외로 쉽습니다.

아래와 같이 하는 거죠.

256 bits 결과를 내는 SHA256 해시의 결과가 아래와 같은 입력값을 찾으시오.
단, X는 아무 값이나 들어가 일치하지 않아도 됩니다.
해시 : 'XXXXXXXXXXeda323853183a6f6bc135434347285158efaaba7b9280fdb569a95'

해시 결과를 하나의 값으로 고정하는 것이 아니라 특정 그룹으로 묶어 문제를 출제하는 것입니다.

제일 쉬운 문제는 마지막 한 bit만 일치하면 되는 문제겠죠.

확율적으로 2번만 시도하면 1번은 정답을 맞출 수 있습니다.

제일 어려운 문제는 당연히 256 bits가 모두 일치하는 문제고요.

지금까지 블록체인에서 사용되는 해시함수의 특징에 대해서 간단히, 가능하면 쉽게 알아봤습니다.

포스트 순서입니다.
[블록체인] 해시함수 이해 1 - 해시함수란?
[블록체인] 해시함수 이해 2 - 특성 1 - 충돌이 거의 발생하지 않는다.
[블록체인] 해시함수 이해 3 - 특성 2 - 원본 내용을 알 수 없다
[블록체인] 해시함수 이해 4 - 특성 3 - 퍼즐 게임을 만들 수 있다==코인 마이닝 문제 출제

[블록체인] 해시함수 이해 3 - 특성 2 - 원본 내용을 알 수 없다

엔디엘디(NdLd) — Sat, 31 Mar 2018 00:53:40 +0900

블록체인에 사용되는 해시함수는 무엇이고 어떤 특성을 가지고 있는지 알아보고 있습니다.

그 세번째 글로 해시 함수의 특성 2 - 원본 내용을 알 수 없다입니다.

이전 글은 아래 링크에서 보실 수 있습니다.
[블록체인]해시함수 이해1 - 해시함수란?
[블록체인] 해시함수 이해 2 - 특성 1 - 충돌이 거의 발생하지 않는다.

첫번째 글에서 해시함수란

어떤 길이의 데이터를 입력해도 정해진 길이의 결과를 주는 함수

라고 했습니다.

이번 해시함수의 특징은 이 해시결과를 보고서는 원본 메시지가 무엇인지 알아내는 것이 거의 불가능하다는 것입니다.

바로 앞의 글에서 해시 함수는 입력 데이터가 다르면 해시 결과가 다르다라고 말했습니다.

같은 해시결과를 만드는 값은 반드시 존재하지만 실제로 그 값을 찾는 것은 불가능에 가깝다고 설명했습니다.

다시 말하면 해시 결과를 알려줘도 그 결과를 만드는 입력 데이터를 찾는 일은 불가능하다는 거죠.

원본을 알아내는 것이 불가능할까? 동전 던지기 문제

동전을 던저 앞(head), 뒤(tail)을 맞추는 게임을 생각해 보겠습니다.

A와 B가 미리 앞, 뒤를 선택해서 심판을 보기로한 C에게 제출합니다.

이때 그냥 제출하는 것이 아니라 SHA256 해시를 돌려서 결과를 제출합니다.

심판 C가 실제 동전을 던진 후에 A, B가 제출한 답과 비교를 하려고 합니다.

제출된 해시는 모두가 볼 수 있게 그냥 공개합니다.
해시 원본을 알아내는 것은 불가능하니까 동전을 던지기 전이라도 본인이 선택한 결과의 해시를 공개해도 문제가 없겠죠?

정말 문제가 없을까요?

A가 제출한 해시는 아래와 같습니다.

'38744961f4eda323853183a6f6bc135434347285158efaaba7b9280fdb569a95'

B가 제출한 값입니다.

'38744961f4eda323853183a6f6bc135434347285158efaaba7b9280fdb569a95'

해시를 보면 무얼 적어냈는지 모르겠네요.

동전던지기에서 가능한 입력은 head와 tail뿐이니까 해시를 한번 구해볼까요?

>>> a = b'tail'
>>> b = b'head'
>>> sha256(a).hexdigest()
'0c62f876ef1dea830de9f32c2f4b46dd6d74d50d15896e09ef5a2fcd4ac7e1d7'
>>> sha256(b).hexdigest()
'9f2e6d33a3717ee826353a404ba4618d1aeeb6879ad7936bce8ed5f46814924d'

이런, 위의 내용을 보니 금방 알아보겠네요.

A가 제출한 해시는 tail의 해시이고 B는 head의 해시를 제출했군요.

그렇습니다.

이렇게 입력 데이터가 한정된 경우(이번 예에서는 head나 tail)는 미리 입력에대한 해시를 구해보면 쉽게 제출된 해시가 어떤 값인지 분별이 가능합니다.

동전 던지기 문제의 해결 방법은?

이를 해결할 방법은 있는 걸까요?

256 bits의 랜덤한 데이터를 원본 데이터에 덪붙이면 어떨까요?

해시결과가 충돌되지 않는다는 글을 보시면 256 bits 데이터가 갖는 의미를 알 수 있을 겁니다.

이 랜덤값을 키(Key)라고 부르겠습니다.

이 키를 추가해서 해시를 구해볼까요?

>>> a = b'e6d85489f5082f21b2ecb993c799bb45e3ba7ca24618c553ff3b650b2b4e0c9btail'
>>> b = b'96f77711bac6bb95014d94f3b19c604176412101054d6d439a9b142ed2642278head'
>>> sha256(a).hexdigest()
'6c8f20b2fea69cded0afe060ebb80b79a5d0e850f1c1f621c0aadb09454f49d0'
>>> sha256(b).hexdigest()
'3401b7f3ab6d4f1555bf53dc0692611c900fb29fcb9679d5ac6b65880d7847d3'

A와 B가 선택한 값의 앞에 랜덤 키를 추가해서 해시를 구했습니다.

입력에 랜덤 키가 들어가서 해시만 보고 원본이 무엇인지 알수가 없게 되었습니다.

그럼 심판 C는 어떻게 확인을 하죠?

A와 B는 각각 랜덤하게 선택한 키를 가지고 있습니다. 그리고 실제로 자기가 선택한 값을 알고 있죠.

처음에는 해시값만 C에게 제출을 했지만 C가 동전을 던진 후 결과를 확인할 때는 키와 실제 본인이 선택한 값을 제출합니다.

C는 키와 선택한 값(head 또는 tail)을 붙인 후 해시를 실행해 보고 원래 제출한 해시값과 일치하는지 확인만 하면 됩니다.

그런데 만일 A가 동전 던진 결과를 보고 조작된 키와 선택한 값을 제출하면 어떻게 될까요?

가능은 하지만 그런 값을 찾는 것은 불가능에 가깝다고 앞의 글 해시결과가 충돌되지 않는다에서 설명을 했습니다.

이렇게 해서 해시의 두번째 특성까지 알아봤습니다.

다음 이어질 내용은 해시의 세번째 특성이면서 비트코인 마이닝과 관련된 내용입니다.

포스트 순서입니다.
[블록체인] 해시함수 이해 1 - 해시함수란?
[블록체인] 해시함수 이해 2 - 특성 1 - 충돌이 거의 발생하지 않는다.
[블록체인] 해시함수 이해 3 - 특성 2 - 원본 내용을 알 수 없다
[블록체인] 해시함수 이해 4 - 특성 3 - 퍼즐 게임을 만들 수 있다==코인 마이닝 문제 출제