atom.xml

<?xml version="1.0" encoding="utf-8"?>
<feed xmlns="http://www.w3.org/2005/Atom">
  <title></title>
  
  
  <link href="/atom.xml" rel="self"/>
  
  <link href="https://devhaeyeon.github.io/"/>
  <updated>2018-03-07T02:24:24.000Z</updated>
  <id>https://devhaeyeon.github.io/</id>
  
  <author>
    <name>devhaeyeon</name>
    
  </author>
  
  <generator uri="http://hexo.io/">Hexo</generator>
  
  <entry>
    <title>(도커) 도커 파헤치기 step2. Webapps with Docker-1</title>
    <link href="https://devhaeyeon.github.io/2018/03/06/docker-sample-tutorial2/"/>
    <id>https://devhaeyeon.github.io/2018/03/06/docker-sample-tutorial2/</id>
    <published>2018-03-06T10:11:51.000Z</published>
    <updated>2018-03-07T02:24:24.000Z</updated>
    
    <content type="html"><![CDATA[<p><strong> 해당 글은 <a href="https://github.com/docker/labs/blob/master/beginner/chapters/webapps.md" target="_blank" rel="external">https://github.com/docker/labs/blob/master/beginner/chapters/webapps.md</a> 에서 번역 및 의역을 한 것이므로 정확한 것은 명시한 주소에서 확인할 수 있습니다. </strong></p><h2 id="서론"><a href="#서론" class="headerlink" title="서론"></a>서론</h2><p>step1에서 Running your first container에서 docker run, 도커 주요 용어에 대해서 알아 보았다.<br>이번 step2에서는 도커 애플리케이션을 배포하는 것을 다룬다. </p><h2 id="컨테이너에서-스테틱한-웹사이트를-실행하자"><a href="#컨테이너에서-스테틱한-웹사이트를-실행하자" class="headerlink" title="컨테이너에서 스테틱한 웹사이트를 실행하자."></a>컨테이너에서 스테틱한 웹사이트를 실행하자.</h2><p><a href="https://github.com/docker/labs/tree/master/beginner/static-site" target="_blank" rel="external">https://github.com/docker/labs/tree/master/beginner/static-site</a> 에서 해당 글에 해당하는 코드를 다룹니다.<br>첫번째로, 우리는 컨테이너에서 정적인 웹사이트를 실행하기 위해 도커를 사용합니다. 해당 웹사이트는 존재하고 있는 이미지를 토대로 합니다. </p><p>그 이미지는 Docker Store에서 찾을 수 있으며, 간단히 single-page 웹사이트 데모를 위해 이미 만들어진 dockersamples/static-site이다.(<a href="https://store.docker.com/community/images/dockersamples/static-site" target="_blank" rel="external">https://store.docker.com/community/images/dockersamples/static-site</a>)</p><blockquote><p>$ docker run -d dockersamples/static-site</p></blockquote><p>위의 명령어를 실행하여 이미지를 내려 받습니다.<br>“이 이미지의 최근 버젼은 -d 플래그가 없이 이미지가 실행되지 않습니다. -d 플래그는 detached mode를 가능하게 해줍니다.<br>(detached mode는 터미널/쉘로 부터 컨테이너를 실행시키는 것을 detach하고, 컨테이너 시작 이후에 명령어를 리턴해줍니다.)<br>보통 이미지의 문제들은 디버깅을 하고 있지만, 지금은 첫번째 예제에 사용하기 위해 -d 를 사용합니다.”</p><p>그래서 이 명령어를 실행하면 어떤 일이 일어날까?</p><p>도커 호스트에 이미지가 존재하지 않기 때문에 도커 데몬은 레지스트리로 부터 첫번째로 fetch를 한다. 그리고 컨테이너로 이미지를 실행시킵니다.</p><p>서버는 실행이되고 있고, 웹사이트를 볼 수 있을까? 무슨 포트가 실행이 되고 있는 중인가요? 그리고 좀 더 중요하게, 어떻게 우리들의 호스트 머신으로 부터 직접적으로 컨테이너에 접근을 할까?</p><p>실질적으로, 아직 이 질문에 답변을 할 수 없을 것이다. 이 케이스에서 클라이언트는 어느 포트에서 publish되기 위한 도커 엔진인지 알 수 없다. 그래서 docker run 명령어를 다시 재실행하는 것이 필요합니다. </p><p>재실행 하여 publish할 포트와 화면에 보여질 컨테이너의 이름을 커스텀마이징 하여봅시다.<br>detached mode을 해당 컨테이너에서 -d 옵션을 다시 사용할 것입니다. </p><p>첫번째, 실행되어져 있는 컨테이너를 멈춰야한다. 그러기 위해서는 컨테이너 아이디가 필요합니다.<br>detached mode에서 컨테이너는 실행되어져있기 때문에 우리는 이를 위해 다른 터미널을 실행할 필요가 없습니다.<br>docker ps를 통해 실행되어져 있는 컨테이너를 확인합니다. </p><blockquote><p>$ docker ps</p></blockquote><p>CONTAINER ID컬럼에서 체크아웃을 합니다.<br>우리는 CONTAINER ID값을 필요로 합니다. 여기서 CONTAINER ID는 긴 문자열의 시퀀스이고, 원하는 컨테이너를 멈추고나서 지우려고 하는 값입니다. 아레의 예는 시스템에서 CONTAINER ID을 제공합니다.<br>터미널에서 보는 이 값을 사용해야한다. </p><blockquote><p>$ docker stop 멈추려고 하는 CONTAINER ID<br>$ docker rm 지우려고 하는 CONTAINER ID</p></blockquote><p>“좋은 기능은 전체에 CONTAINER ID을 쓸 필요가 없다는 것입니다.<br>시작하는 문자열의 몇 글자를 입력할 수 있고, 실행 되어진 컨테이너들 중만약 모든 컨테이너들 중에 유니크 하다면, 도커 클라이언트는 똑똑하게 그것을 집어낸다.”<br>ex) CONTAINER ID가 35a9d35beb20라면<br>docker stop 35a<br>…</p><p>아래의 명령어처럼 deched mode에서 컨테이너를 실행시켜보자.</p><blockquote><p>$ docker run –name static-site-sample -e AUTHOR=”scarlett.kim” -d -P dockersamples/static-site</p></blockquote><p>위의 명령어에서<br> -d : 터미널로 부터 detach되어진 프로세스와 함께 컨테이너를 만드는 것.<br> -P : 노출된 모든 컨테이너 포트를 도커 호스트의 임의의 포트에 publish함.<br> -e : 컨테이너에 다양한 환경을 pass 하는 것.<br>  –name : 컨테이너 이름을 지정하는 것.<br>  -AUTHOR : 환경 변수이름이고 Your Name은 이름pass할수 있는 값이다. (작성자 느낌…)<br>docker port명령어를 실행시켜서 port를 볼 수 있습니다.</p><blockquote><p>$ docker port static-site-sample (–name로 지정한 컨테이너 이름)</p></blockquote><p>맥용 도커, 윈도우용 도커 또는 리눅스에서 실행시키면,<br><a href="http://localhost:[YOUR_PORT_FOR" target="_blank" rel="external">http://localhost:[YOUR_PORT_FOR</a> 80/tcp] 을 열 수 있습니다.<br>예는 <a href="http://localhost:32773" target="_blank" rel="external">http://localhost:32773</a></p><p>만약 맥 또는 윈도우를 통해서 도커를 사용한다면, docker-machine을 명령어를 사용하여 호스트 네임을 찾을 수 있습니다.  (default 머신을 사용하는 것으로 추측하고 있는중…)</p><blockquote><p>docker-machine ip default</p><p>참고 ) 만약 ‘Error getting IP address: Host is not running’ 에러를 만났다면,</p><p>$ docker-machine rm default</p><p>$ docker-machine create –driver virtualbox default<br>(Downloading /Users/블라블라/.docker/machine/cache/boot2docker.iso from <a href="https://github.com/boot2docker/boot2docker/releases/download/v17.12.1-ce/boot2docker.iso...에서" target="_blank" rel="external">https://github.com/boot2docker/boot2docker/releases/download/v17.12.1-ce/boot2docker.iso...에서</a> 멈추고 … 느리더라도 … 인내하고 기다리자…에러가 아니….옵…니다)<br>명령어를 실행하여 해결합니다.</p><p>Docker Machine 관련 링크</p><ul><li>Docker Machine을 이용하여 Mac에서 docker 운영하기 :<br><a href="http://blog.saltfactory.net/running-docker-on-mac-using-with-docker-machine/" target="_blank" rel="external">http://blog.saltfactory.net/running-docker-on-mac-using-with-docker-machine/</a>)</li></ul></blockquote><p>http://<your_ipaddress>:[YOUR_PORT_FOR 80/tcp] 입력하면 사이트를 볼 수 있습니다.<br>예를 들어서 , <a href="http://192.168.99.100:32773" target="_blank" rel="external">http://192.168.99.100:32773</a></your_ipaddress></p><blockquote><p>참고 ) docker-machine ip default에서 나온 아이피로 실행했을 때 안되서 찾아본 링크<br><a href="http://bluese05.tistory.com/15?category=559611" target="_blank" rel="external">http://bluese05.tistory.com/15?category=559611</a></p><p>만약 안된다면, eval “$(docker-machine env default)” 명령어 실행 후<br>컨테이너, 이미지 다시 실행.<br>docker run –name static-site-sample -e AUTHOR=”scarlett.kim” -d -P dockersamples/static-site<br>(<a href="http://docker-k8s-lab.readthedocs.io/en/latest/docker/docker-machine.html" target="_blank" rel="external">http://docker-k8s-lab.readthedocs.io/en/latest/docker/docker-machine.html</a>)</p></blockquote><p>같은 시간에 두번째 웹서버를 실행시킬 수 있다. 컨테이너의 웹서버에 커스텀 호스트 포트 번호를 정의할 수 있습니다.</p><blockquote><p>docker run –name static-site-2 -e AUTHOR=”Your Name” -d -p 8888:80 dockersamples/static-site</p></blockquote><p>실제 서버에 이를 배포하기 위해서는 우리는 도커 인스톨 그리고 docker(환경 변수로 passed된 도커의 AUTHER을 볼 수 있다.) 명령어 위에서 실행시키는 것이 필요합니다. </p><p>지금 도커 컨테이너안에서 웹서버를 실행시키는 방법은 ? 도커이미지를 어떻게 자신의 것으로 생성하는가?<br>다음 주제에서 다루지만,  먼저 사용하지 않는 컨테이너들을 모두 멈추고 지워야합니다.</p><h2 id="도커이미지"><a href="#도커이미지" class="headerlink" title="도커이미지"></a>도커이미지</h2><p>이 부분에서는 도커이미지에 대해 깊게 파고 들려고 합니다. 이미지를 만들고 해당 이미지를 사용하여 로컬에서 응옹프로그램을 실행하고 마지막으로 일부 이미지를 도커 클라우드로 푸시 할 것입니다.<br>도커 이미지는 컨테이너를 기반으로 하고 있습니다. 이전 예제에서는 레지스트리에서 dockersamples/static-site 이미지를 꺼내 도커 클라이언트에게 해당 이미지를 기반으로 컨테이너를 실행하도록 요청 했습니다. </p><p>시스템의 로컬에 사용가능한 이미지들을 보기 위해 docker images 명령어를 실행합니다. </p><blockquote><p>$ docker images</p></blockquote><p>TAG 컬럼은  이미지의 특정 스냅샷을 말하며, ID(IMAGE ID)는 해당 이미지에  해당하는 고유 식별자 입니다. </p><p>간단히 설명하면 깃 저장소의 이미지로 생각할 수 있습니다. (이미지는 변경된 것들을 커밋할 수 있고, 다양한 버젼을 가집니다) 특별한 버젼 넘버를 제공하지 않는다면, 클라이언트는 latest가 기본값입니다. </p><p>예를 들어 ubuntu이미지의 특정 버젼을 내려 받을 수 있습니다. </p><blockquote><p>$ docker pull ubuntu:12.04</p></blockquote><p>이미지의 버젼 정보를 지정하지 않으면 도커 클라이언트는 기본값으로 latest로 지정이 됩니다.<br>예를 들어 아래 docker pull명령어는 ubunto:latest의 이미지를 가져 옵니다. </p><blockquote><p>$ docker pull ubuntu</p></blockquote><p>새로운 도커 이미지를 가져오기 위해 레지스트리로부터(도커 스토어와 같은) 이미지를 얻거나 자신의 이미지를 만들 수 있습니다. </p><p>도커 스토어에는 사용가능한 이미지들이 수 십 만개의 이미지가 있습니다. </p><p>docker search라는 명령어를 통해 직접적으로 이미지들을 찾을수 있습니다. </p><p>이미지아 관련하여 중요한 차이점은 base image와 child image이다. </p><p>Base image는 parent 이미지를 가지지 않고, 일반적으로 ubuntu, apline 또는 debian과 같은 OS가 있는 이미지입니다.</p><p>Child image는 base image을 구축하고 추가적인 기능을 기반으로 추가하는 이미지 입니다. </p><p>또 다른 핵심 개념은 Official image와 User image입니다. (둘다 base image 이거나 child images입니다)</p><p>Official image는 도커가 승인한 이미지 입니다. Docker, Inc는 모든 공식 리포지토리 콘텐츠를 검토하고 게시하는 전용 팀을 후원 합니다.  이 팀은 업스트림 소프트웨어 관리자, 보안 전문가 및 광범위한 Docker 커뮤니티와 협력합니다. 이러한 이름 앞에는 조직 또는 사용자 이름이 붙지 않습니다. </p><p>위의 이미지 목록에서 파이썬, 노드, alpine, nginx 이미지는 공식 (기본) 이미지 입니다. </p><p>훨씬 더 자세한 내용은 <a href="https://docs.docker.com/docker-hub/official_repos/" target="_blank" rel="external">https://docs.docker.com/docker-hub/official_repos/</a> 에서 확일할 수 있습니다. </p><p>User image는 사용자가 만들고 공유하는 이미지 입니다. base images를 구축하고 추가적인 기능을 기반으로 추가하는 이미지 입니다. 일반적으로 이들은 user/image-name형태를 가집니다. user값은 도커스토어 user 이름 이거나 조직 이름의 값입니다. </p>]]></content>
    
    <summary type="html">
    
      
      
        &lt;p&gt;&lt;strong&gt; 해당 글은 &lt;a href=&quot;https://github.com/docker/labs/blob/master/beginner/chapters/webapps.md&quot; target=&quot;_blank&quot; rel=&quot;external&quot;&gt;https://g
      
    
    </summary>
    
    
      <category term="도커, 번역" scheme="https://devhaeyeon.github.io/tags/%EB%8F%84%EC%BB%A4-%EB%B2%88%EC%97%AD/"/>
    
  </entry>
  
  <entry>
    <title>개발 문서에서 &#39;behind the scene&#39;의 뜻</title>
    <link href="https://devhaeyeon.github.io/2018/03/06/translate-tip1/"/>
    <id>https://devhaeyeon.github.io/2018/03/06/translate-tip1/</id>
    <published>2018-03-06T09:41:39.000Z</published>
    <updated>2018-03-06T09:51:15.000Z</updated>
    
    <content type="html"><![CDATA[<h2 id="서론"><a href="#서론" class="headerlink" title="서론"></a>서론</h2><p>도커 공식 홈페이지에서 샘플 튜토리얼을 번역하다가 난관에 부딪혔다.<br>‘뒤에서 장면이?’<br>‘장면이 뒤에서?’<br> ‘뒤에서 실행이 되고 있다?’<br> ‘음 ? 무엇을’<br>…<br>수 많은 해석들을 했지만, 번역을 할 수 없었다.<br>…</p><h2 id="의미"><a href="#의미" class="headerlink" title="의미"></a>의미</h2><p>사전적인 의미 : ‘무대 뒤에서 / 이면에서’<br>개발 문서에서 번역할 때 대략적인 의미로는 ‘내부적으로 어떤 어떤 일이 일어난다.’<br>약간 ‘내부적인’ 것이라고 보면 될 것 같다.</p>]]></content>
    
    <summary type="html">
    
      
      
        &lt;h2 id=&quot;서론&quot;&gt;&lt;a href=&quot;#서론&quot; class=&quot;headerlink&quot; title=&quot;서론&quot;&gt;&lt;/a&gt;서론&lt;/h2&gt;&lt;p&gt;도커 공식 홈페이지에서 샘플 튜토리얼을 번역하다가 난관에 부딪혔다.&lt;br&gt;‘뒤에서 장면이?’&lt;br&gt;‘장면이 뒤에서?’&lt;br&gt; 
      
    
    </summary>
    
    
      <category term="번역팁, tip" scheme="https://devhaeyeon.github.io/tags/%EB%B2%88%EC%97%AD%ED%8C%81-tip/"/>
    
  </entry>
  
  <entry>
    <title>(도커) 도커 파헤치기 step1. Running your first container</title>
    <link href="https://devhaeyeon.github.io/2018/03/06/docker-sample-tutorial1/"/>
    <id>https://devhaeyeon.github.io/2018/03/06/docker-sample-tutorial1/</id>
    <published>2018-03-06T09:33:12.000Z</published>
    <updated>2018-03-06T09:36:33.000Z</updated>
    
    <content type="html"><![CDATA[<blockquote><p>아래의 글은 번역을 하였음을 사전에 알려 드립니다<br>(관련 수치는 해당 원글을 참고하였습니다.)<br>(출처 : <a href="https://github.com/docker/labs/tree/master/beginner" target="_blank" rel="external">https://github.com/docker/labs/tree/master/beginner</a>)</p></blockquote><h2 id="서론"><a href="#서론" class="headerlink" title="서론"></a>서론</h2><p>이 글을 보기 전에 도커 설치가 필요합니다. 도커를 설치했다면 이제 힘들고 긴긴 여정이 시작될 것입니다.<br>이 글에서는 경량화된 리눅스 컨테이너인 알파인을 실행시키고 docker run 명령어를 익힐 것입니다. </p><blockquote><p>$ docker pull alpine</p></blockquote><p>“도커가 시스템에 설치를 했는데, 위의 명령어를 친 후에 permission denied에러가 날 수도 있습니다.<br>그럼 <a href="https://docs.docker.com/get-started/" target="_blank" rel="external">https://docs.docker.com/get-started/</a> 로가서 해당 튜토리얼 부터 다시 시작하면 됩니다.<br>만약 리눅스 환경이라면 sudo docker 처럼 ‘sudo’가 필요 합니다.<br>대신에 이 이슈를 해결하기 위해서는 도커 그룹(<a href="https://docs.docker.com/install/linux/docker-ee/ubuntu/)을" target="_blank" rel="external">https://docs.docker.com/install/linux/docker-ee/ubuntu/)을</a> 새로 만들 수 있습니다.”</p><p>pull 명령어는 도커 레지스트리에서 부터 시스템에 ‘alpine’ 이미지를 fetch하고 save하는 명령어 입니다.<br>시스템에 모든 이미지의 리스트를 보려면 docker images라는 명령어를 치면 됩니다.</p><blockquote><p>$ docer images</p></blockquote><h2 id="docker-Run"><a href="#docker-Run" class="headerlink" title="docker Run"></a>docker Run</h2><p>이미지로부터 도커 컨테이너를 run 하기 위해서는 docker run 명령어를 사용합니다.</p><blockquote><p>$ docker run apline ls -l</p></blockquote><p>run을 하면 내부적으로 수 많은 일들이 일어납니다.</p><ol><li>도커 클라이언트는 도커 데몬을 연결합니다.</li><li>도커 데몬은 로컬 저장소를 확인합니다. 이미지가 (여기서는 alpine이미지) 로컬에서 사용할 수 있는지, Docker Store로부터 다운로드가 가능한지에 대한 여부를 확인합니다.(docker pull alpine를 하기 전에 문제가 생긴 다면, 다운로드에 실패합니다.)</li></ol><p>docker run alpine를 실행하면, ls -l과 같은 명령어를 입력하면 도커는 지정한 명령어를 실행하고, list하고 있는 것들을 볼수 있습니다. </p><p>좀 더 흥미로운 아래의 명령어를 입력해보면</p><blockquote><p>$docker run alpine echo “hello from alpine”</p></blockquote><p>화면에 “hello from alpine”를 볼 수 있습니다.<br>이 케이스는 도커 클라이언트가 alpine 컨테이너로 부터 echo 명령어를 실행하고 종료하는 케이스 입니다.<br>만약 해당 명령어를 이미 실행했었다면, 빠르게 실행이 됩니다.<br>이미지는 가상 머신을 부팅하고, 명령어를 실행하고, killing합니다.<br>컨테이너가 훨씬 더 빠른 것을 알 수 있습니다.</p><blockquote><p>$ docker run apline /bin/sh</p></blockquote><p>기다리면, 아무 것도 발생하지 않습니다. 이건 버그가 아닙니다. 대화식 쉘은 대화식 터미널에서 실행시키지 않는다면,  명령어를 실행한 후 종료 됩니다. ( 그래서 이 예제에서 이 명령어가 종료 되지 않게 하기 위해서는 docker run -it alpine /bin/sh 명령어를 사용합니다.)</p><p>컨테이너 쉘 내부에서는 ls -l, uname -a와 같은 몇몇의 명령어를 사용할 수 있습니다. exit 명령어는 컨테이너를 종료하는 명령어입니다.</p><p>docker ps라는 명령어는 최근에 실행된 모든 도커 컨테이너를 보는 명령어입니다.</p><blockquote><p>$ docker ps</p></blockquote><p>실행되고 있는 컨테이너가 없다면, 빈 줄을 볼 수 있습니다.<br>유용히 쓰이는 명령어는 ‘docker ps -a’</p><p>위의 명령어를 통해 실행했던 모든 컨테이너 목록을 볼 수 있습니다.<br>STATUS 컬럼을 통해 이들 컨테이너가 종료된 시간을 알 수 있습니다.  </p><p>컨테이너에 하나의 명령어만 입력할 수 있을까요?<br>NO!</p><blockquote><p>$ docker run -it run alpine /bin/sh<br>/ # ls<br>/ # uname -a</p></blockquote><p>run 명령어에 -it를 플래그를 같이 쓰면  컨테이너에서의 대화식 tty을 사용할 수 있습니다. (컨테이너에서 여러개의 명령어를 입력하여 사용할 수 있습니다.) </p><p> docker run명령어는 편하고 시간을 단축 시켜주는 가장 자주 사용하는 명령어입니다.<br>run에 대해 훨씬 더 많이 알고 싶으면  docker run –help이라는 명령어를 사용하면 지원하는 모든 플래그 리스트들을 볼 수 있습니다. </p><p> 도커를 사용하면서 docker run명령어는 자주 보게 될 것 입니다. </p><h2 id="Terminology"><a href="#Terminology" class="headerlink" title="Terminology"></a>Terminology</h2><p>수 많은 도커 용어를 볼 수 있는데, 도커 용어에 대해서 설명하려 합니다.</p><ul><li>Image : 파일 시스템과 애플리케이션의 형태는 컨테이너를 생성하여 사용합니다. docker inspect alpine을 실행하면 이에 대한 자세한 것을 알 수 있다. alpine이미지를 다운 받기 위해 docker pull 명령어를 사용할 수 있습니다.<br>docker run hello-world라는 명령어를 실행하면,  docker pull이 백그라운드에서 실행되어 hello-world 이미지를 다운 받습니다. </li><li>Container : 도커 이미지의 인스턴스를 실행하면 컨테이너는 실질적인 애플리케이션을 실행합니다. 컨테이너는 애플리케이션, 의존성이 있는 컨테이너들을 포함합니다. 이것은 다른 컨테이너에 있는 커널을 공유하고,  호스트 OS위에 있는 공간에 유저에 있는 연관되어진 프로세스들을 실행합니다. 컨테이너는 다운로드 받아진 alpine 이미지를 docker run 명령어를 통해서 컨테이너가 생성됩니다. docker ps 명령어를 사용하여 실행되어진 컨테이너 리스트를 볼 수 있습니다. </li><li>Docker daemon : 도커 컨테이너를 구축, 실행 및 배포하는 호스트에서 실행되는 백그라운드 서비스입니다.</li><li>Docker client : 도커 데몬과 함께 사용자와 상호 작용할 수 있게 허용하는 명령어 툴입니다.</li><li>Docker Store : 컨테이너, 플러그인 등등 도커 에디션을 찾을 수 있고, 엔터프라이즈에서 사용할 수 있는 도커 이미지 레지스트리이다. (<a href="https://store.docker.com/" target="_blank" rel="external">https://store.docker.com/</a>)</li></ul>]]></content>
    
    <summary type="html">
    
      
      
        &lt;blockquote&gt;
&lt;p&gt;아래의 글은 번역을 하였음을 사전에 알려 드립니다&lt;br&gt;(관련 수치는 해당 원글을 참고하였습니다.)&lt;br&gt;(출처 : &lt;a href=&quot;https://github.com/docker/labs/tree/master/beginne
      
    
    </summary>
    
    
      <category term="도커, 번역" scheme="https://devhaeyeon.github.io/tags/%EB%8F%84%EC%BB%A4-%EB%B2%88%EC%97%AD/"/>
    
  </entry>
  
  <entry>
    <title>웹 성능 최적화</title>
    <link href="https://devhaeyeon.github.io/2017/12/03/web-performance/"/>
    <id>https://devhaeyeon.github.io/2017/12/03/web-performance/</id>
    <published>2017-12-03T13:10:17.000Z</published>
    <updated>2017-12-12T16:27:03.000Z</updated>
    
    <content type="html"><![CDATA[<blockquote><p>아래의 글은 번역을 하였음을 사전에 알려 드립니다<br>(관련 수치는 해당 원글을 참고하였습니다.)<br>(출처 : <a href="http://zuu.kr/izgd" target="_blank" rel="external">http://zuu.kr/izgd</a>)</p></blockquote><h2 id="효과적인-성능-개선-가이드"><a href="#효과적인-성능-개선-가이드" class="headerlink" title="효과적인 성능 개선 가이드"></a>효과적인 성능 개선 가이드</h2><p>인터넷을 사용하는 사용자들도 늘어나고 있고, 웹 플랫폼도 점점 커지고 있습니다.<br>이를 개발하는 우리들은 인터넷 네트워크 환경, 데이터 크기 등등 복잡성을 반영하지 못하는 경우가 많지만 웹에서 사용자들은 느낄 수 있습니다. </p><p>오늘날의 웹 상태를 살펴보면 평균 네트워크 속도는 7Mb/s의 속도 제한을 가지고 있고, 전 세계 74억 인구 중 단지 46%만이 인터넷에 접속할 수 있습니다. 인터넷 사용자의 93%가 모바일 기기를 통해 온라인에 접속하고 있습니다. </p><p>독일과 브라질과 같은 인터넷이 발달하지 않은 나라에서는 데이터 500MB 패킷을 구매하는데 1시간에서 13 시간 정도 소요됩니다.  </p><p>웹사이트는 완벽한 형태가 아니어서 평균적으로 사이트는 약 3MB정도 입니다.<br>(이미지는 400MB, 1.7MB의 대역폭) 이는 웹 플랫폼에만 관련된 문제는 아닙니다. </p><p>불특정 버그 수정을 위해 200MB를 다운로드 해야하는 사례도 있었습니다. </p><p>플랫폼들을 개발하는 기술자들은 항상 최신의 노트북, 초고속 인터넷 환경에서 진행하고 있기 때문에 대부분의 사용자들(일반적인 유저)의 환경을 고려하지 않기도 합니다.</p><p>어떻게 하면 성능을 염두에 두고 개발할 수 있을지에 대해 이제 설명을 하려고 합니다. </p><h2 id="모든-asset을-최적화하기"><a href="#모든-asset을-최적화하기" class="headerlink" title="모든 asset을 최적화하기"></a>모든 asset을 최적화하기</h2><p>성능을 크게 향상시키는 가장 강력하지만 활용도가 낮은 방법 중 하나는 브라우저가 asset을 분석하고 제공하는 방법을 이해하는 것 부터 시작됩니다. 브라우저는 context 분석과 동시에 우선 순위를 결정하는 동안 리소스를 발견하는 데 매우 유용합니다. </p><blockquote><p>request는 사용자의 뷰포트 내에 콘텐츠를 렌더링하는 데 필요한 asset이 포함되어있는 경우 중요합니다.</p></blockquote><p>대부분의 사이트에서 asset은 HTML, CSS, 로고, 웹 글꼴 및 이미지로 볼 수 있습니다.<br>그 외 javascript, 추적코드, 광고 등등 수십 가지의 asset이 있다. 하지만 이 중 가장 중요한 asset에 대해 우선순위를 정하여 최적화를 시킬 수 있습니다.</p><p><link rel="preload">를 사용하면 원하는 콘텐츠가 제 시간에 렌더링 되도록 asset의 우선 순위를  high로 수동으로 강요할 수 있습니다. </p><p>이 기술은 Time to Interactive 메트릭에서 상당한 개선을 가져와 최적의 사용자 경험을 가능하게합니다.<br><img src="https://cdn-images-1.medium.com/max/800/1*JT-53LslhwOOqTgv1dGoXg.png" alt="linkImage"></p><p>중요한 request는 여전히 ​​많은 사람들에게 블랙 박스처럼 보입니다. 공유 가능한 자료가 부족해도 이를 변경하는 데 도움이되지 않습니다.<br>(참고 : Chrome에서 Addy의 사전 로드, 프리 페치 및 우선 순위 <a href="https://medium.com/reloading/preload-prefetch-and-priorities-in-chrome-776165961bbf" target="_blank" rel="external">https://medium.com/reloading/preload-prefetch-and-priorities-in-chrome-776165961bbf</a>)<br><img src="https://cdn-images-1.medium.com/max/800/1*ju18GQzgF-TQDMrYdtPelg.gif" alt="linkimage2"></p><p>Light Lighthouse 성능 도구 및 Critical Request Chains 검사를 사용 하거나 Chrome 개발자 도구의 네트워크 탭에서 요청 우선 순위를 확인하여 요청의 우선 순위 를 정하는 방법을 추적합니다 .</p><h3 id="일반적인-성능-체크리스트"><a href="#일반적인-성능-체크리스트" class="headerlink" title="일반적인 성능 체크리스트"></a>일반적인 성능 체크리스트</h3><ol><li>캐시하기</li><li>압축 사용</li><li>중요 asset의 우선 순위 지정</li><li>콘텐츠 전송 네트워크 사용</li></ol><h2 id="이미지-최적화"><a href="#이미지-최적화" class="headerlink" title="이미지 최적화"></a>이미지 최적화</h2><p>이미지는 종종 웹 페이지의 전송 된 페이로드의 대부분을 차지하므로 이미지에서 최적화가 가장 큰 성능 향상을 가져올 수 있습니다. 여분의 바이트를 제거하는 데 도움이되는 기존의 많은 전략과 도구가 있지만 질문 할 첫 번째 질문은 “이 이미지가 메시지와 효과를 전달하는 것이 필수적입니까?” 입니다. 이를 제거 할 수 있다면 대역폭을 절약 할뿐만 아니라 요청도 줄일 수 있습니다.<br>어떤 경우에는 다른 기술로도 비슷한 결과를 얻을 수 있습니다. CSS에는 그림자, 그라디언트, 애니메이션 또는 모양과 같은 아트 방향에 대한 다양한 속성이있어 적절하게 스타일이 지정된 DOM 요소에 대한 asset을 교환 할 수 있습니다.</p><h2 id="이미지의-올바른-형식-선택"><a href="#이미지의-올바른-형식-선택" class="headerlink" title="이미지의 올바른 형식 선택"></a>이미지의 올바른 형식 선택</h2><p>저작물을 삭제할 수없는 경우 어떤 형식이 적합할지 결정하는 것이 중요합니다. 초기 선택은 벡터 그래픽과 래스터 그래픽 사이에 적용됩니다.</p><blockquote><p>벡터 : 해상도는 독립적이며 대개 크기가 상당히 작습니다. 기본 도형 (선, 다각형, 원 및 점)으로 구성된 로고와 같은 간단한 asset이 적합합니다. </p><p>래스터 : 훨씬 더 자세한 결과를 제공합니다. 사진에 적합합니다.</p></blockquote><p>이 결정을 내린 후에는 JPEG, GIF, PNG-8, PNG-24 또는 WEBP 또는 JPEG-XR과 같은 최신 형식 중에서 선택할 수있는 적절한 형식의 비트가 있습니다. 이러한 선택의 폭이 넓어지면 우리는 어떻게 올바른 선택을 할 수 있을까요? 가장 적합한 형식을 찾는 기본 방법은 다음과 같습니다.</p><blockquote><p>JPEG : 다양한 색상의 사진 (예 : 사진)<br>PNG-8 : 몇 가지 색상의 이미지<br>PNG-24 : 부분 투명성이있는 이미지<br>GIF : 애니메이션 이미지</p></blockquote><p>Photoshop은 품질 저하, 노이즈 또는 색상 수 감소 등과 같은 다양한 설정을 통해 이러한 각 항목을 내보낼 때 최적화 할 수 있습니다. 설계자가 성능 관행에 대해 알고 올바른 올바른 사전 설정을 통해 올바른 유형의 asset을 준비 할 수 있는지 할 수 있습니다. (more info : <a href="http://designingforperformance.com/optimizing-images/#choosing-an-image-format" target="_blank" rel="external">http://designingforperformance.com/optimizing-images/#choosing-an-image-format</a>)</p><h2 id="이미지를-새로운-형식으로-실험하기"><a href="#이미지를-새로운-형식으로-실험하기" class="headerlink" title="이미지를 새로운 형식으로 실험하기"></a>이미지를 새로운 형식으로 실험하기</h2><p>이미지 형식의 스펙트럼에서 WebP, JPEG 2000 및 JPEG-XR과 같은 새로운 플레이어가 있습니다. 이 모든 것은 브라우저 공급 업체가 개발했습니다. WebP by Google, Apple의 JPEG 2000, Microsoft의 JPEG-XR입니다.</p><blockquote><p>WebP 는 무손실 압축과 손실 압축을 모두 지원하므로 가장 널리 사용되는 경쟁자입니다. 무손실 WebP는 PNG보다 26 % 작으며 JPG보다 25-34 % 작습니다. 74 % 브라우저 지원을 통해 폴백 (fallback)과 함께 안전하게 사용할 수 있으며 전송 된 바이트의 1/3 비용 절감 효과가 있습니다. JPG 및 PNG는 Photoshop 및 기타 이미지 처리 응용 프로그램뿐만 아니라 명령 줄 인터페이스 ( brew install webp) 를 통해 WebP로 변환 될 수 있습니다 .</p></blockquote><h2 id="이미지를-도구-및-알고리즘으로-최적화"><a href="#이미지를-도구-및-알고리즘으로-최적화" class="headerlink" title="이미지를 도구 및 알고리즘으로 최적화"></a>이미지를 도구 및 알고리즘으로 최적화</h2><p>일반적으로 크기가 비교적 작은 SVG를 선택했다면 SVG도 압축해야합니다. SVGO 는 불필요한 메타 데이터를 제거하여 SVG를 신속하게 최적화 할 수있는 명령줄 도구입니다. 또는 웹 인터페이스를 선호하거나 운영 체제에 따라 제한되는 경우 Jake Archibald의 SVGOMG 를 사용 하면 됩니다. SVG는 XML 기반 형식이기 때문에 서버 측에서 GZIP 압축을받을 수도 있습니다.</p><p>ImageOptim 은 대부분의 다른 이미지 유형에 탁월한 선택입니다. pngcrush, pngquant, MozJPEG, Google Zopfli 등으로 구성된 포괄적 인 오픈 소스 패키지에 훌륭한 도구 모음이 번들로 제공됩니다. Mac OS 응용 프로그램, 명령 줄 인터페이스 및 Sketch 플러그인으로 제공되는 ImageOptim은 기존 워크 플로우에 쉽게 구현할 수 있습니다. Linux 또는 Windows 사용자의 경우 대부분의 ImageOptim CLI는 사용중인 플랫폼에서 사용할 수 있습니다.</p><p>올해 초 신형 인코더를 사용해 보려면 Google은 Guetzli를 사용하면 됩니다. WebP 및 Zopfli에 대한 학습에서 파생 된 Open Source 알고리즘입니다. Guetzli는 사용 가능한 다른 압축 방법보다 최대 35 % 더 작은 JPEG을 생성합니다. 유일한 단점은 처리 속도가 느리다는 것입니다 (메가 픽셀 당 1 분의 CPU).</p><p>원하는 결과를 얻고 팀의 워크 플로우에 맞는 도구를 선택하는 것이 좋습니다.  최적화 과정을 자동화하는 것이 이상적입니다. 최적화되지 않은 균열을 미끄러지는 이미지는 없습니다.</p><h2 id="책임-있고-반응이-빠른-이미지"><a href="#책임-있고-반응이-빠른-이미지" class="headerlink" title="책임 있고 반응이 빠른 이미지"></a>책임 있고 반응이 빠른 이미지</h2><p>10 년 전에 모든 것을 제공하기 위해 한 가지 해결책을 찾지 못했지만 끊임없이 변화하고 반응이 빠른 웹 환경은 오늘날 매우 다릅니다. 그렇기 때문에 신중하게 최적화 된 시각적 리소스를 구현하고 뷰포트 및 장치의 다양한 기능을 제공 할 수 있도록 특별한주의를 기울여야합니다. 다행히도 Responsive Images Community Group (<a href="https://responsiveimages.org/" target="_blank" rel="external">https://responsiveimages.org/</a>) 덕분에 picture요소 및 srcset속성 (둘 다 85 % 이상 지원)을 제공 할 수 있습니다.</p><h2 id="이미지의-srcset속성"><a href="#이미지의-srcset속성" class="headerlink" title="이미지의 srcset속성"></a>이미지의 srcset속성</h2><p>srcset사용자의 화면 밀도와 크기를 기반으로 이미지를 표시하고자 할 때 해상도 전환 시나리오에서 가장 효과적입니다. 미리 정의 된 규칙의 집합을 기반으로 srcset하고 sizes브라우저가 뷰포트에 따라 제공하는 최상의 이미지를 선택합니다. srcset속성은특히 모바일 사용자를 위해 대역폭을 크게 늘리고 절감을 요청할 수 있습니다.<br><img src="https://cdn-images-1.medium.com/max/800/1*87BIfYsjZTh-bikjmp7eow.png" alt="imagelink3"></p><h2 id="picture-요소"><a href="#picture-요소" class="headerlink" title="picture 요소"></a>picture 요소</h2><p>picture요소 및 media속성은 아트 방향을 쉽게 만들 수 있도록 설계되었습니다. 다양한 조건에 대해 다양한 소스를 제공함으로써 (테스트를 통해 테스트 됨 media-queries), 우리는 해상도에 관계없이 항상 가장 중요한 이미지 요소를 사용할 수있게되었습니다.<br><img src="https://cdn-images-1.medium.com/max/800/1*NeyfH6Vu1xCWE2SY5w1cDQ.png" alt="imagelink4"></p><blockquote><p>두 가지 접근법에 대한 철저한 설명은 Jason Grigsby의 Responsive Images 101 가이드 를 읽으십시오 .<br>(<a href="https://cloudfour.com/thinks/responsive-images-101-definitions/" target="_blank" rel="external">https://cloudfour.com/thinks/responsive-images-101-definitions/</a>)</p></blockquote><h2 id="이미지-CDN-제공"><a href="#이미지-CDN-제공" class="headerlink" title="이미지 CDN 제공"></a>이미지 CDN 제공</h2><p>성능에 대한 마지막 단계는 전달입니다. 모든 asset은 콘텐츠 전송 네트워크를 사용하면 이익을 얻을 수 있지만 Cloudinary 또는 imgx 와 같이 이미지를 타겟팅하는 특정 도구가 있습니다 . 이러한 서비스를 사용하면 서버의 트래픽을 줄이고 응답 대기 시간을 크게 줄일 수 있습니다.</p><p>CDN은 이미지가 많은 사이트에서 응답성이 뛰어난 최적화 된 asset을 제공함으로써 많은 복잡성을 겪을 수 있습니다. 오퍼링은 다르기는하지만 대부분의 경우 크기 조정, 자르기 및 장치 및 브라우저를 기반으로 사용자에게 제공하는 것이 가장 적합한 형식 결정을 처리합니다.<br>또한 압축, 픽셀 밀도 감지, 워터 마크, 얼굴 인식 및 후 처리를 기능을 제공합니다. 이러한 강력한 기능과 이미지를 제공하는 URL에 매개 변수를 추가 할 수 있습니다.</p><h3 id="이미지-성능-점검표"><a href="#이미지-성능-점검표" class="headerlink" title="이미지 성능 점검표"></a>이미지 성능 점검표</h3><ol><li>올바른 형식 선택</li><li>가능하면 벡터 사용</li><li>변화가 눈에 띄지 않으면 품질을 낮추십시오.</li><li>새로운 형식으로 실험 해보기</li><li>도구 및 알고리즘으로 최적화</li><li>srcset및picture 에 대해 알아보기 </li><li>이미지 CDN 사용</li></ol><h2 id="웹-글꼴-최적화"><a href="#웹-글꼴-최적화" class="headerlink" title="웹 글꼴 최적화"></a>웹 글꼴 최적화</h2><p>사용자 정의 글꼴을 사용할 수있는 기능은 매우 강력한 디자인 도구입니다.<br>강력하지만  웹 글꼴을 사용하는 웹 사이트의 68%가 이 유형의 자산은 가장 큰 성능 위반자중 하나입니다. (쉽게 1백킬로바이트 평균 변형 및 서체의 수에 따라).<br>무게가 가장 중요한 문제가 아니더라도, 보이지 않는 텍스트 (FOIT)의 플래시입니다 . FOIT는 웹 글꼴이 여전히로드되거나 가져 오지 못한 경우에 발생합니다. 그러면 빈 페이지가 생겨 액세스 할 수없는 내용이됩니다. 웹 글꼴이 필요한지 여부 를 신중하게 검토하는 것이 가치가있을 수 있습니다. 그렇다면 실적에 부정적인 영향을 줄 수있는 몇 가지 전략이 있습니다.</p><h2 id="웹글꼴의-올바른-형식-선택"><a href="#웹글꼴의-올바른-형식-선택" class="headerlink" title="웹글꼴의 올바른 형식 선택"></a>웹글꼴의 올바른 형식 선택</h2><p>EOT, TTF, WOFF 및 최근 WOFF2의 네 가지 웹 글꼴 형식이 있습니다. TTF와 WOFF가 가장 널리 채택되어 90% 이상의 브라우저 지원을 자랑합니다. 타겟팅하는 지원에 따라 WOFF2를 제공 하고 이전 브라우저의 경우 WOFF로 대체 하는 것이 가장 안전 합니다. WOFF2를 사용하는 장점은 사용자 지정 사전 처리 및 압축 알고리즘(예 : Brotli )의 조합으로 인해 약 30 %의 파일 크기 감소 및 향상된 구문 분석 기능입니다. </p><p>웹 글꼴 소스를 정의 할 때 @font-face사용할 format()형식을 지정하는 힌트를 사용하면 됩니다. </p><p>글꼴을 제공하기 위해 Google Fonts 또는 Typekit을 사용하는 경우이 두 도구는 실적 발자국을 완화하기위한 몇 가지 전략을 구현했습니다. Typekit은 이제 모든 키트를 비동기 적으로 지원하므로 FOIT를 방지 할뿐만 아니라 JavaScript 키트 코드 (10 분이 아닌)를 10일 연장 할 수 있습니다. Google 글꼴은 사용자 기기의 기능에 따라 가장 작은 파일을 자동으로 제공합니다.</p><h2 id="글꼴-선택"><a href="#글꼴-선택" class="headerlink" title="글꼴 선택"></a>글꼴 선택</h2><p>셀프 호스팅 여부와 관계없이 서체 수, 글꼴 두께 및 스타일이 성능 예산에 중요한 영향을 미칩니다.<br>(글꼴 선택 참고 : <a href="http://designingforperformance.com/weighing-aesthetics-and-performance/" target="_blank" rel="external">http://designingforperformance.com/weighing-aesthetics-and-performance/</a>)</p><h2 id="유니-코드-범위-하위-집합-사용"><a href="#유니-코드-범위-하위-집합-사용" class="headerlink" title="유니 코드 범위 하위 집합 사용"></a>유니 코드 범위 하위 집합 사용</h2><p>유니 코드 범위 하위 집합을 사용하면 큰 글꼴을 더 작은 집합으로 분할 할 수 있습니다. 상대적으로 진보 된 전략이지만 특히 아시아 언어를 타겟팅 할 때 상당한 절약 효과를 가져올 수 있습니다 (중국어 글꼴의 평균 글꼴 크기는 20,000 글리프입니다). 첫 번째 단계는 글꼴을 라틴어, 그리스어 또는 키릴 어와 같이 필요한 언어 집합으로 제한하는 것입니다. 웹 글꼴이 로고 유형 사용에만 필요하면 유니 코드 범위 설명자를 사용하여 특정 문자를 선택하는 것이 좋습니다.<br>Filament Group 은 파일이나 URL을 기반으로 필요한 글리프 목록을 생성 할 수있는 글리프 행거 (glyph hanger) 라는 오픈 소스 명령 줄 유틸리티를 출시했습니다 . 또는 웹 기반 글꼴 다람쥐 웹 글꼴 생성기 는 고급 하위 설정 및 최적화 옵션을 제공합니다. Google Fonts 또는 Typekit을 사용하는 경우 서체 선택기 인터페이스에 언어 하위 집합을 선택하면 기본 하위 집합을 더 쉽게 만들 수 있습니다.</p><h2 id="글꼴로드-전략-수립"><a href="#글꼴로드-전략-수립" class="headerlink" title="글꼴로드 전략 수립"></a>글꼴로드 전략 수립</h2><p>브라우저는 DOM과 CSSOM을 모두 빌드해야하기 때문에 글꼴은 렌더링을 차단합니다. 웹 글꼴은 기존 노드와 일치하는 CSS 선택기에서 사용되기 전에 다운로드되지 않습니다. 이 동작으로 인해 텍스트 렌더링이 상당히 지연 되어 이전에 언급 한 FOIT (Flash of Invisible Text)가 발생합니다. FOIT는 느린 네트워크 및 모바일 장치에서 더욱 두드러집니다.</p><p>글꼴로드 전략을 구현하면 사용자가 귀하의 콘텐츠에 액세스 할 수 없게됩니다. 종종 FAS (Flash of Unstyled Text)를 선택하는 것이 가장 쉽고 효과적인 솔루션입니다.</p><p>font-display비자바 스크립트 의존 솔루션을 제공하는 새로운 CSS 속성입니다. 불행히도, 부분적인 지원 (크롬과 오페라 전용)을 가지고 있으며 현재 Firefox와 WebKit에서 개발 중에 있습니다. 여전히 다른 글꼴 로딩 메커니즘과 함께 사용할 수 있고 사용해야합니다.<br>![imageurl4] (<a href="https://cdn-images-1.medium.com/max/800/1*Kuky8fVepcjU3tMbTjewdw.png" target="_blank" rel="external">https://cdn-images-1.medium.com/max/800/1*Kuky8fVepcjU3tMbTjewdw.png</a>)</p><p>다행히 Typekit의 Web Font Loader 와 Bram Stein의 Font Face Observer 는 글꼴 로딩 동작을 관리하는 데 도움이 될 수 있습니다. 또한 웹 글꼴 성능 전문가 인 Zach Leatherman은 글꼴로드 전략에 대한 포괄적 인 안내서를 게시 하여 프로젝트에 올바른 방법을 선택하는 데 도움을줍니다. (<a href="https://www.zachleat.com/web/comprehensive-webfonts/" target="_blank" rel="external">https://www.zachleat.com/web/comprehensive-webfonts/</a>)</p><h3 id="웹-폰트-성능-체크리스트"><a href="#웹-폰트-성능-체크리스트" class="headerlink" title="웹 폰트 성능 체크리스트"></a>웹 폰트 성능 체크리스트</h3><ol><li>적절한 형식 선택</li><li>글꼴 선택 감사</li><li>유니 코드 범위 하위 집합 사용</li><li>글꼴로드 전략 수립</li></ol><h2 id="자바-스크립트-최적화"><a href="#자바-스크립트-최적화" class="headerlink" title="자바 스크립트 최적화"></a>자바 스크립트 최적화</h2><p>현재 JavaScript 번들의 평균 크기는 446KB 이며, 이미 이미지 크기에 따라 두 번째로 큰 asset 유형이됩니다.</p><blockquote><p>우리가 깨닫지 못할 수도있는 점은 우리가 사랑하는 자바 스크립트 뒤에 숨겨진 성능 병목 현상이 훨씬 더 심각 하다는 것입니다 .</p></blockquote><h2 id="얼마나-많은-JavaScript가-전달되는지-모니터하십시오"><a href="#얼마나-많은-JavaScript가-전달되는지-모니터하십시오" class="headerlink" title="얼마나 많은 JavaScript가 전달되는지 모니터하십시오."></a>얼마나 많은 JavaScript가 전달되는지 모니터하십시오.</h2><p>최적화 된 전달은 웹 페이지 팽창을 막기위한 한 걸음입니다. 자바 스크립트를 다운로드 한 후에는 브라우저에서 파싱, 컴파일 및 실행해야합니다. 몇 가지 인기있는 사이트를 간략히 살펴보면 포장을 풀면gzipped JS가 최소 3 배 이상 커 집니다. 효과적으로, 우리는 코드의 거대한 얼룩을 전선 아래로 보내고 있습니다.<br>![imageurl5] (<a href="https://cdn-images-1.medium.com/max/800/1*Yrn4kTkaYHX0PWj4HB-mQg.jpeg" target="_blank" rel="external">https://cdn-images-1.medium.com/max/800/1*Yrn4kTkaYHX0PWj4HB-mQg.jpeg</a>)</p><p>분석 및 분석 시간 분석은 앱이 언제 상호 작용할 준비가되었는지를 이해하는 데 중요합니다. 이러한 타이밍은 사용자 장치의 하드웨어 기능에 따라 크게 다릅니다. 파싱 ​​및 컴파일은 로우 엔드 모바일에서 2-5 배 높일 수 있습니다 . Addy의 조사에 따르면 평균적인 전화에서 앱은 대화형 상태에 도달하는 데 16초가 걸리고 데스크톱에서는 8초가 걸리는 것으로 나타났습니다. 이러한 통계를 분석하는 것이 중요하며 다행스럽게도 Chrome DevTools를 통해 이를 수행 할 수 있습니다.<br><img src="https://cdn-images-1.medium.com/max/800/1*eV83YP2fnoOllUleaWa5lw.gif" alt="imageurl6"><br>(JavaScript Addy Osmani의 JavaScript 시작 성능 관련 자료 : <a href="https://medium.com/reloading/javascript-start-up-performance-69200f43b201" target="_blank" rel="external">https://medium.com/reloading/javascript-start-up-performance-69200f43b201</a>)</p><h2 id="불필요한-의존성-제거"><a href="#불필요한-의존성-제거" class="headerlink" title="불필요한 의존성 제거"></a>불필요한 의존성 제거</h2><p>현대 패키지 관리자가 작업하는 방식은 종속성의 수와 크기를 쉽게 가려 낼 수 있습니다. webpack-bundle-analyzer 및 Bundle Buddy 는 코드 중복, 가장 큰 성능 위반자 및 오래된 불필요한 종속성을 식별하는 데 도움이되는 훌륭한 시각 도구입니다.<br><img src="https://cdn-images-1.medium.com/max/800/1*dusVhPiL44VDoS4gJHMWSg.gif" alt="imageurl7"></p><h6 id="작동중인-Webpack-번들-분석기"><a href="#작동중인-Webpack-번들-분석기" class="headerlink" title="작동중인 Webpack 번들 분석기."></a>작동중인 Webpack 번들 분석기.</h6><p>VS 코드 와 Atom 을 Import Cost확장 하면 가져온 패키지 비용을 훨씬 더 쉽게 볼 수 있습니다.<br><img src="https://cdn-images-1.medium.com/max/800/1*LbfI4D9XXiZYS1Slwsys5g.gif" alt="imageurl8"></p><h2 id="코드-분할-구현"><a href="#코드-분할-구현" class="headerlink" title="코드 분할 구현"></a>코드 분할 구현</h2><p>가능할 때마다 필요한 사용자 경험을 생성하는 데 필요한 asset만 제공해야합니다. bundle.js사용자에게 보이지 않는 코드 처리 상호 작용을 포함 하여 전체 파일을 보내는 것은 최적이 아닙니다 (방문 페이지를 방문 할 때 전체 앱을 처리하는 자바 스크립트를 다운로드하는 경우). 마찬가지로 특정 브라우저 또는 사용자 에이전트를 타겟팅하는 코드를 보편적으로 게재해서는 안됩니다.</p><p>가장 널리 사용되는 모듈 번들 중 하나 인 Webpack에는 코드 분할 지원이 제공 됩니다. 가장 간단한 코드 분할은 페이지 당 ( home.js방문 페이지, contact.js연락처 페이지 등) 구현할 수 있지만 Webpack은 동적 가져 오기 또는 지연로드 와 같은 기능을 제공하므로 한 번 살펴 볼 수 있습니다. </p><h2 id="대안-프레임-워크-고려"><a href="#대안-프레임-워크-고려" class="headerlink" title="대안 프레임 워크 고려"></a>대안 프레임 워크 고려</h2><p>JavaScript 프론트 엔드 프레임 워크는 끊임없이 증가하고 있습니다. 스크립트 2016 설문 조사따르면 React은 가장 인기있는 프레임웍입니다. 조심스럽게 아키텍처 선택 사항을 검사 하겠지만 Preact 와 같은 훨씬 가벼운 대안을 사용하는 것이 더 나을 것 입니다 (Preact는 완전한 React 구현, 높은 성능의 적은 가상 DOM 라이브러리 임).<br>(참고 preact : <a href="https://preactjs.com/" target="_blank" rel="external">https://preactjs.com/</a>)<br>마찬가지로, 우리는 작은 대안을 moment.js에 대한 date-fns(또는 특별한 경우에 moment.js 제거되지 않은locales) 와 같은 더 큰 라이브러리를 교체 할 수 있습니다.<br>새 프로젝트를 시작하기 전에 어떤 종류의 기능이 필요한지 결정하고 필요와 목표에 가장 적합한 프레임 워크를 선택하는 것이 좋습니다. 때로는 바닐라가 자바 ​​스크립트를 대신하는 것을 의미 할 수도 있습니다.</p><h3 id="자바-스크립트-성능-체크리스트"><a href="#자바-스크립트-성능-체크리스트" class="headerlink" title="자바 스크립트 성능 체크리스트"></a>자바 스크립트 성능 체크리스트</h3><ol><li>얼마나 많은 JavaScript가 전달되는지 모니터하십시오.</li><li>불필요한 의존성 제거</li><li>코드 분할 구현</li><li>대안 프레임 워크 고려</li></ol><h2 id="추적-성능-및-앞으로의-도로"><a href="#추적-성능-및-앞으로의-도로" class="headerlink" title="추적 성능 및 앞으로의 도로"></a>추적 성능 및 앞으로의 도로</h2><p>우리는 대부분의 경우 구축 중인 제품의 사용자 경험에 긍정적인 변화를 가져올 수있는 몇 가지 전략에 대해 이야기했습니다.<br>성능은 까다로운 부분이 될 수 있으며, 우리의 비틀기의 장기적인 결과를 추적하는 것이 필요합니다.</p><h2 id="사용자-중심의-성과-측정-기준"><a href="#사용자-중심의-성과-측정-기준" class="headerlink" title="사용자 중심의 성과 측정 기준"></a>사용자 중심의 성과 측정 기준</h2><p>뛰어난 성능 측정 기준은 가능한 사용자 경험을 묘사하는데 근접하는 것을 목표로 합니다. 오랫동안 onLoad, onContentLoaded 또는 SpeedIndex에 기반하여 사이트가 얼마나 빨리 상호작용할 수 있는지에 대해 알려주지 않습니다.<br>asset 전달에만 집중할 경우 인지 된 성과 를 수치화하는 것은 쉽지 않습니다 . 다행스럽게도 콘텐츠가 얼마나 빨리 표시되고 대화식으로 표시되는지에 대한 포괄적인 그림을 그리는 몇 가지 타이밍이 있습니다.<br>이러한 측정 항목은 First Paint, First Meaningful Paint, Visually Complete 및 Interactive Time입니다.<br><img src="https://cdn-images-1.medium.com/max/800/1*fjqW4fRUD7iIrzcKfUkfIg.png" alt="imageurl9"></p><blockquote><p>첫 번째 페인트 : 브라우저가 흰색 화면에서 첫 번째 시각적 변경으로 변경되었습니다.<br>첫 번째 의미있는 페인트 : 텍스트, 이미지 및 주요 항목을 볼 수 있습니다.<br>시각적으로 완료 : 뷰포트의 모든 내용이 표시됩니다.<br>대화형 시간 : 뷰포트의 모든 내용이 표시되며 상호 작용할 준비가되었습니다 (주요한 주요 스레드 JavaScript 활동 없음).</p></blockquote><p>이러한 타이밍은 사용자가 보는 것과 직접적으로 일치하므로 추적을위한 훌륭한 후보자가됩니다. 가능하다면 모두를 기록하고 그렇지 않으면 1-2 가지를 선택하여인지 된 성능을 더 잘 이해하십시오. 다른 측정 항목들, 특히 우리가 전송하는 바이트 수 (최적화 및 압축 해제)에 주목할 필요가 있습니다.</p><h2 id="실적-예산-설정"><a href="#실적-예산-설정" class="headerlink" title="실적 예산 설정"></a>실적 예산 설정</h2><p>이 수치들은 모두 혼란스러워지고 이해하기가 번거로울 수 있습니다. 실행 가능한 목표와 목표가 없으면 달성하려는 목표를 추적하기가 쉽습니다. 몇 년 전 Tim Kadlec 은 실적 예산 의 개념에 관해 썼습니다.<br>(<a href="https://timkadlec.com/2013/01/setting-a-performance-budget/" target="_blank" rel="external">https://timkadlec.com/2013/01/setting-a-performance-budget/</a>)</p><p>불행히도, 그들을 설정하는 마법의 공식은 없습니다. 성능 예산은 종종 각 비즈니스에 고유 한 경쟁력 분석 및 제품 목표에 따라 결정됩니다.</p><p>예산을 정할 때 눈에 띄는 차이를 목표로하는 것이 중요합니다. 이 차이는 일반적으로 최소 20 % 개선에 해당합니다. (직역 : Lara Hogan의 접근 방식 인 새로운 디자인에 성능 예산 을 참고로 하여 예산을 실험하고 반복하십시오.)</p><p>Performance 예산 생성을 돕기 위해 성능 예산 계산기(<a href="http://www.performancebudget.io/" target="_blank" rel="external">http://www.performancebudget.io/</a>) 또는 <a href="https://browserdiet.com/calories/" target="_blank" rel="external">https://browserdiet.com/calories/</a> 을 사용하여 성능을 체크를 해보세요.</p><h2 id="지속적인-모니터링"><a href="#지속적인-모니터링" class="headerlink" title="지속적인 모니터링"></a>지속적인 모니터링</h2><p>모니터링 성능은 수동으로해서는 안됩니다. 다양한 보고 기능을 제공하는 몇 가지 강력한 도구가 있습니다.</p><p>Google Lighthouse 는 성능, 접근성, 점진적인 웹 앱 등을 감사하는 오픈 소스 프로젝트입니다. 등대를 명령 줄에서 사용하거나 최근에 바로 Chrome 개발자 도구에서 직접 사용할 수 있습니다.<br><img src="https://cdn-images-1.medium.com/max/800/1*T3HA3VrN48JsCAHWFfnu3g.gif" alt="imageurl11"></p><p>성능 예산, 장치 에뮬레이션, 분산 모니터링 및 신중하게  구축하지 않고 얻을 수 없는 많은 다른 기능을 제공 하는 Calibre를 통해 지속적으로 추적합니다.<br><img src="https://cdn-images-1.medium.com/max/800/1*LTFZ7zMASCWUz3r0eqXdoQ.gif" alt="imageurl12"></p><p>어디를 추적하든 데이터를 투명하게 만들어 전체 팀 또는 소규모 조직에서 전체 비즈니스에 액세스 할 수있게하십시오.</p><blockquote><p>성과는 개발자 팀 이상의 공유 책임입니다. 우리는 역할이나 직함에 상관없이 우리가 만드는 사용자 경험에 대해 책임을집니다.</p></blockquote><p>속도를 옹호하고 협업 프로세스를 수립하여 제품 결정이나 설계 단계에서 가능한 병목 현상을 찾아내는 것이 매우 중요합니다.</p><h2 id="성능에-인식-및-공감-수립"><a href="#성능에-인식-및-공감-수립" class="headerlink" title="성능에 인식 및 공감 수립"></a>성능에 인식 및 공감 수립</h2><p>성능에 신경을 쓰는 것은 비즈니스 목표 일 뿐 아니라 영업 통계를 통해 판매해야하는 경우 PWA 통계를 사용 하여 수행해야 합니다. 그것은 기본적인 공감과 사용자의 최대 관심을 가장 먼저 생각합니다.</p><blockquote><p>기술자로서 사람들이 행복하게 다른 곳에서 보낼 수있는 관심과 시간을 납치하지 않는 것이 우리의 책임입니다. 우리의 목표는 시간과 인간의 초점을 의식한 도구 를 만드는 것입니다.</p></blockquote>]]></content>
    
    <summary type="html">
    
      
      
        &lt;blockquote&gt;
&lt;p&gt;아래의 글은 번역을 하였음을 사전에 알려 드립니다&lt;br&gt;(관련 수치는 해당 원글을 참고하였습니다.)&lt;br&gt;(출처 : &lt;a href=&quot;http://zuu.kr/izgd&quot; target=&quot;_blank&quot; rel=&quot;external&quot;
      
    
    </summary>
    
    
  </entry>
  
  <entry>
    <title>WebGL을 사용한 애니메이션 및 상호 작용 기법 탐색 (사례 연구)</title>
    <link href="https://devhaeyeon.github.io/2017/12/03/webgl-casestudy/"/>
    <id>https://devhaeyeon.github.io/2017/12/03/webgl-casestudy/</id>
    <published>2017-12-03T12:21:54.000Z</published>
    <updated>2017-12-04T11:30:42.000Z</updated>
    
    <content type="html"><![CDATA[<blockquote><p>아래의 글은 번역을 하였음을 사전에 알려 드립니다<br>출처 : <a href="http://zuu.kr/izge" target="_blank" rel="external">http://zuu.kr/izge</a><br>작성자 : Karim Maaloul</p></blockquote><p>코드펜에서 짧은 WebGL을 작업을 하다 이 사이트에서(<a href="https://moments.epic.net/" target="_blank" rel="external">https://moments.epic.net/</a>)<br>다양한 애니메이션 및 인터렉션을 찾아내기 시작하였다.</p><p>각 게임마다 게임 플레이는 매우 다르지만, 모든 실험은 하나의 원칙을 공유합니다.</p><p> 각 캐릭터의 행동은 프로그래밍 방식으로 사용자 입력에 응답합니다.<br> (미리 계산 된 애니메이션 없음)<br> 모든 동작은 런타임에 정의됩니다.<br> 단 몇 줄의 코드만으로 이러한 캐릭터에 생명을 불어 넣는 것이 주요 과제였습니다.</p><h2 id="제약-조건"><a href="#제약-조건" class="headerlink" title="제약 조건"></a>제약 조건</h2><p>주로 three.js(<a href="https://threejs.org/" target="_blank" rel="external">https://threejs.org/</a>) 및 GreenSock 라이브러리(<a href="https://greensock.com/)를" target="_blank" rel="external">https://greensock.com/)를</a> 사용하여 제작 된 이 실험은 3D 또는 애니메이션 소프트웨어를 사용하지 않고 손으로 직접 코딩했습니다.</p><p>이 과정은 한 번에 한 큐브 씩 프로그래밍 방식으로 문자를 형성하는 것으로 구성됩니다. 대부분의 노력은 코드의 값을 미세 조정하여 비율, 위치 및 전체 렌더링을 수정 한 다음 마지막으로 사용자 입력 (마우스 이동, 클릭, 드래그 등)에 따라 각 파트를 이동하는 데 소요되었습니다.</p><p> 이 프로세스의 이점은 분명하지 않습니다. 하지만 텍스트 편집기 만 사용하여 전체 실험을 만들 수 있으므로 많은 도구를 사용하여 자산을 내보내고 문자의 속성을 조정하는 모든 노력을 피할 수 있습니다. Codepen에서 제공하는 실시간 미리보기를 활용 하면 전체 프로세스가 매우 유연 해졌 습니다.</p><p> 즉, 프로세스는 관리하기 쉽도록 자체적 인 제약 조건을 갖게되었습니다. 가능한 한 적은 수의 파트로 문자를 작성해야했습니다. 각 부분은 매우 낮은 수의 정점으로 구성됩니다. 애니메이션은 제한된 수의 행동을 목표로해야했습니다.</p><p> 참고 : 이 과정은 3D 앱이 마음에 들면 모델을 만들 때 사용하는 것이 좋습니다. 가능한 한 효과적 이도록 자신의 기술간에 올바른 균형을 찾는 것입니다. 필자의 경우 모든 프로세스를 하나의 도구로 유지할 때 훨씬 효율적입니다.</p><p><img src="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/04db1828-53f7-4ef0-87b9-5809e9377ea6/moments-of-happiness-800w-opt.png" alt="img1"></p><h2 id="제약-조건을-기회로-전환"><a href="#제약-조건을-기회로-전환" class="headerlink" title="제약 조건을 기회로 전환"></a>제약 조건을 기회로 전환</h2><p>이 과정에서 요구되는 미니멀리즘은 궁극적으로 각 행동 (편안함, 기쁨, 실망 등)을 묘사하는 가장 정확한 동작을 찾는 좋은 기회였습니다.</p><p>모든 입방체와 모든 움직임에 대해 질문을 받았다. 나는 이것을 정말로 필요로 하는가? 그것은 경험을 더 좋게 만들지 않습니까, 아니면 그냥 열렬한 캐릭터 디자이너의 변덕입니까?</p><p>나는 매우 단순한 장난감으로 끝을 맺었습니다. 모두 조용하고 미니멀 한 환경에 살고있었습니다.</p><p>프로그래밍 방식으로 사물을 애니메이션화하는 것은 아마도 가장 큰 도전이었습니다. 애니메이션 소프트웨어 나 시각적 타임 라인없이 자연 및 유기적인 움직임을 어떻게 조성합니까? 이 애니메이션을 자연스러운 상태에서 사용자 입력에 어떻게 응답합니까?</p><p><img src="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/53a006b3-6570-4602-b557-dd194378bf45/moments-of-happiness-dragon.gif" alt="img2"></p><h2 id="1-단계-관측"><a href="#1-단계-관측" class="headerlink" title="1 단계 : 관측"></a>1 단계 : 관측</h2><p>이 실험을 시작하기 전에 나는 전하고 싶었던 느낌을 관찰하고 기억하고 고안하는 데 시간을 보냈다.</p><p>Chill the Lion을 만들 때까지, 나의 개를 애 태우는 것은 영감의 위대한 원천이되었습니다. 나는 그가 즐거움을 위해 눈을 감은 방법을 관찰하고 그의 목에 긁힘을달라고 요청했다. 프로그래밍 방식으로이를 번역 할 올바른 알고리즘을 찾는 것은 공감과 기본 수학 기술을 혼합 한 것입니다.<br><img src="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/431d55c0-9712-4196-8dd6-85b14088a9f1/moments-of-happiness-lion.gif" alt="img3"></p><p>“paranoid 새”(아래)에 대해, 나는 한순간의 표정을 가진 불편한 외모를 모방 한 것을 기억하고, 얼마나 많은 시간이 눈과 머리 움직임을 분리했는지 알아내어 설득력있는 행동을 보이도록 노력했습니다.<br><img src="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/ced05c55-bb18-48d7-b6cb-b9051847326d/moments-of-happiness-birds.gif" alt="img4"></p><p>그러나 때때로, 당신은 당신의 자신의 경험에 의지 할 수 없습니다. 시각적 영감은 때때로 특정 형태을 파악하는 데 필요합니다. 다행히도, 어떤 종류의 미묘한 표현을 찾을 수있는 Giphy 가 있습니다. YouTube와 Vimeo에서 올바른 움직임을 찾기 위해 많은 시간을 보냈습니다.</p><h2 id="실행주기-관찰"><a href="#실행주기-관찰" class="headerlink" title="실행주기 관찰"></a>실행주기 관찰</h2><p>행복의 순간에 만들어야 할 가장 까다로운 애니메이션 중 하나는 토끼가 늑대에게서 달아나는<a href="https://moments.epic.net/#rabbit" target="_blank" rel="external">https://moments.epic.net/#rabbit</a>) 것이 었습니다.<br><img src="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/0e8f9b9c-c4eb-4302-a084-8d51cefc26ab/moments-of-happiness-rabbit.gif" alt="img5"> </p><p>이를 달성하기 위해서는 먼저 실행주기가 어떻게 작동하는지 이해하는 것이 중요합니다. Giphy에서 사용할 수있는 가장 흥미로운 슬로우 모션 GIF를 살펴 보았습니다.<br><img src="https://media.giphy.com/media/NmGbJwLl7Y4lG/giphy.gif" alt="img6"></p><p>이 GIF에서 흥미로운 점은 달리기는 다리를 움직이는 것만이 아니라는 것입니다.<br>그것은 몸 전체에 관한 것입니다. 가장 작은 부분을 포함하여 완벽한 동기화로 움직입니다. 속도와 중력의 느김을 높이기 위해 참여하는 귀, 입, 심지어 혀를 보면 알 수 있습니다.</p><p>진실은 동물과 달리기가 가능한 한 많은 실행주기가 있다는 것입니다. 달리기 사이클을 파헤 치고 싶다면 좀 더 정확한 참조 정보를 얻는 것이 좋지 않을 것입니다. 두 가지 유용한 자료는 Pinterest 의 “Run Cycle”컬렉션(<a href="https://www.pinterest.co.kr/c3ck1na/run-cycle/?lp=true" target="_blank" rel="external">https://www.pinterest.co.kr/c3ck1na/run-cycle/?lp=true</a>) 과 멋진 “ Quadruped Locomotion Tutorial” (<a href="https://vimeo.com/202205778)비디오입니다" target="_blank" rel="external">https://vimeo.com/202205778)비디오입니다</a>.</p><p>이러한 연구를 보면 각 실행주기의 역학이보다 명확 해집니다. 당신의 두뇌는 신체의 각 부분 사이의 관계를 파악하기 시작할 것이고, 경기의 순서와 리듬은 순환적이고 반복적이며 재현 가능한 형태를 나타낼 것입니다.</p><p>이제 이를 달성하기위한 기술적 인 솔루션이 필요합니다.</p><h2 id="관찰-자동화"><a href="#관찰-자동화" class="headerlink" title="관찰 자동화"></a>관찰 자동화</h2><p>하나의 핸들을 돌릴 때 복잡한 동작을하는 기계식 장난감에 흥미를 느낀 저는 유사한 기술을 시도하고 타임 라인과 키 프레임보다 프로세스에 더 적합한 코드 기반 솔루션을 탐색하려고했습니다.</p><p>단순하거나 복잡한 루핑 동작은 전적으로 한주기의 진행에 달려 있다고 생각 합니다 .<br><img src="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/e7ceaa94-b297-43ee-9cb7-838ed8d84bd8/boat.gif" alt="img7"></p><p>달리기 사이클에서, 이는 각 다리, 귀, 눈, 몸체 및 머리의 움직임이 동일한 주주기에 의해 유발된다는 것을 의미합니다. 어떤 경우에는 생성 된 회전이 수평 이동으로 변환되고 다른 경우에는 수직으로 변환됩니다.</p><p>원형 운동을 선형 운동으로 변환 할 때 삼각법이 최선의 선택 인 것 같습니다.</p><h2 id="2-단계-무기를-연마하고-삼각법을-배우십시오"><a href="#2-단계-무기를-연마하고-삼각법을-배우십시오" class="headerlink" title="2 단계 : 무기를 연마하고 삼각법을 배우십시오."></a>2 단계 : 무기를 연마하고 삼각법을 배우십시오.</h2><p>도망 가지 마! 여기에 필요한 삼각법의 종류는 매우 기본입니다. 대부분의 수식은 다음과 같습니다.</p><p><code>x = cos(angle)*distance;y = sin(angle)*distance;</code></p><p>이것은 기본적으로 점의 극좌표 (각도, 거리)를 직교 좌표 (x, y)로 변환하는 데 사용됩니다.</p><p>각도를 변화시킴으로써 우리는 점을 중심 주위로 회전시킬 수 있습니다.<br><img src="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/bf1b140f-3097-4cfc-a765-91fb05de04d8/moments-of-happiness-circle1.gif" alt="img9"></p><p>삼각법 덕분에 우리는 수식의 다른 값으로 놀아서 훨씬 더 정교한 운동을 할 수 있습니다. 이 기술의 아름다움은 당신이 운동에서 얻는 부드러움입니다.</p><p>여기 몇 가지 예가 있습니다.<br><img src="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/2618b6f1-95e6-490c-90b7-95f7d3a8e794/moments-of-happiness-circles2.gif" alt="img10"></p><h2 id="실습"><a href="#실습" class="headerlink" title="실습!"></a>실습!</h2><p>삼각법을 이해하려면 손을 더럽혀야 합니다.<br>경험이없는 이론은 단순한 지적 놀이이다.</p><p>위의 수식 중 일부를 구현하려면 기본 환경을 설정해야합니다. 이 작업은 canvas, SVG 또는 three.js , PixiJS 또는 BabylonJS 와 같은 그래픽 API가있는 라이브러리를 사용하여 수행 할 수 있습니다 .</p><p>매우 기본적인 three.js 설정을 살펴 보겠습니다.</p><p>먼저 최신 버전의 three.js를 다운로드하고 라이브러리를 html머리글로 가져옵니다 .</p><p><code>&lt;script type=&quot;text/javascript&quot; src=&quot;js/three.js&quot;&gt;&lt;/script&gt;</code></p><p>HTML</p><p><code>&lt;div id=&quot;world&quot;&gt;&lt;/div&gt;</code></p><p>CSS</p><pre><code>#world {position: absolute;width: 100%;height: 100%;overflow: hidden;background: #ffffff;}</code></pre><p>JAVASCRIPT</p><pre><code>// Initialize variables.var scene, camera, renderer, WIDTH, HEIGHT;var PI = Math.PI;var angle = 0;var radius = 10;var cube;var cos = Math.cos;var sin = Math.sin;function init(event) {  // Get the container that will hold the animation.  var container = document.getElementById(&apos;world&apos;);  // Get window size.  HEIGHT = window.innerHeight;  WIDTH = window.innerWidth;  // Create a three.js scene; set up the camera and the renderer.  scene = new THREE.Scene();  camera = new THREE.PerspectiveCamera( 50, WIDTH / HEIGHT, 1, 2000 );  camera.position.z = 100;  renderer = new THREE.WebGLRenderer({ alpha: true, antialias: true });  renderer.setSize(WIDTH, HEIGHT);  renderer.setPixelRatio(window.devicePixelRatio ? window.devicePixelRatio : 1);  container.appendChild(renderer.domElement);  // Create the cube.  var geom = new THREE.CubeGeometry(16,8,8, 1);  var material = new THREE.MeshStandardMaterial({    color: 0x401A07  });  cube = new THREE.Mesh(geom, material);  // Add the cube to the scene.  scene.add(cube);  // Create and add a light source.  var globalLight = new THREE.AmbientLight(0xffffff, 1);  scene.add(globalLight);  // Listen to the window resize.  window.addEventListener(&apos;resize&apos;, handleWindowResize, false);  // Start a loop that will render the animation in each frame.  loop();}function handleWindowResize() {  // If the window is resized, we have to update the camera aspect ratio.  HEIGHT = window.innerHeight;  WIDTH = window.innerWidth;  renderer.setSize(WIDTH, HEIGHT);  camera.aspect = WIDTH / HEIGHT;  camera.updateProjectionMatrix();}function loop(){  // Call the update function in each frame to update the cube position.  update();  // Render the scene in each frame.  renderer.render(scene, camera);  // Call the loop function in next frame.  requestAnimationFrame(loop);}// Initialize the demo when the page is loaded.window.addEventListener(&apos;load&apos;, init, false);``</code></pre><p>여기서는 기본적으로 장면, 카메라, 조명 및 큐브를 만들었습니다. 그런 다음 각 프레임에서 큐브의 위치를 ​​업데이트하는 루프를 시작했습니다.</p><p>이제 우리는 update()함수 를 추가 할 필요가 있습니다. 삼각 함수 공식을 삽입하여 다음과 같이 플레이 할 수 있습니다 </p><pre><code>function update(){  // The angle is incremented by 0.1 every frame. Try higher values for faster animation.  angle += .1;  // Try modifying the angle and/or radius for a different movement.  cube.position.x = cos(angle) * radius;  cube.position.y = sin(angle) * radius;  // You might want to use the same principle on the rotation property of an object. Uncomment the next line to see what happens.  //cube.rotation.z = cos(angle) * PI/4;  //Or vary the scale. Note that 1 is added as an offset to avoid a negative scale value.  //cube.scale.y = 1 + cos(angle) * .5;  /*  Your turn! You might want to:  - comment or uncomment the lines above to try new combinations,  - replace cos by sin and vice versa,  - replace radius with an other cyclic function.  For example :  cube.position.x = cos(angle) * (sin(angle) *radius);  ...  */}</code></pre><p>잃어버린 느낌이라면 Codepen 에서 사용할 준비가 된 것 입니다. 사인 및 코사인 함수를 사용하여 큐브를 다른 방식으로 이동하고 애니메이션에 삼각법을 활용하는 방법을 더 잘 이해할 수 있습니다.</p><p>또는 다음 데모로 이동하여 자신의 걷기 또는 달리기 사이클을 시작하기위한 출발점으로 사용할 수 있습니다.</p><h2 id="삼각법을-사용하여-걷기-또는-달리기-사이클을-만드는-방법"><a href="#삼각법을-사용하여-걷기-또는-달리기-사이클을-만드는-방법" class="headerlink" title="삼각법을 사용하여 걷기 또는 달리기 사이클을 만드는 방법"></a>삼각법을 사용하여 걷기 또는 달리기 사이클을 만드는 방법</h2><p>이제는 코드를 사용하여 큐브를 움직이는 방법을 배웠고 동일한 원리를 사용하여 단계별로 간단한 걷기 사이클을 만들 계획입니다.</p><p>우리는 이전과 같은 설정을 주로 사용합니다. 가장 큰 차이점은 다른 신체 부위를 만들기 위해 더 많은 큐브가 필요하다는 것입니다.</p><p>three.js를 사용하면 다른 그룹 안에 오브젝트 그룹을 내장 할 수 있습니다. 예를 들어 다리, 팔, 머리를 지탱하는 몸체 그룹을 만들 수 있습니다.</p><p>우리의 주인공이 어떻게 만들어 졌는지 보자.</p><pre><code>Hero = function() {  // This will be incremented later at each frame and will be used as the rotation angle of the cycle.  this.runningCycle = 0;  // Create a mesh that will hold the body.  this.mesh = new THREE.Group();  this.body = new THREE.Group();  this.mesh.add(this.body);  // Create the different parts and add them to the body.  var torsoGeom = new THREE.CubeGeometry(8,8,8, 1);//  this.torso = new THREE.Mesh(torsoGeom, blueMat);  this.torso.position.y = 8;  this.torso.castShadow = true;  this.body.add(this.torso);  var handGeom = new THREE.CubeGeometry(3,3,3, 1);  this.handR = new THREE.Mesh(handGeom, brownMat);  this.handR.position.z=7;  this.handR.position.y=8;  this.body.add(this.handR);  this.handL = this.handR.clone();  this.handL.position.z = - this.handR.position.z;  this.body.add(this.handL);  var headGeom = new THREE.CubeGeometry(16,16,16, 1);//  this.head = new THREE.Mesh(headGeom, blueMat);  this.head.position.y = 21;  this.head.castShadow = true;  this.body.add(this.head);  var legGeom = new THREE.CubeGeometry(8,3,5, 1);  this.legR = new THREE.Mesh(legGeom, brownMat);  this.legR.position.x = 0;  this.legR.position.z = 7;  this.legR.position.y = 0;  this.legR.castShadow = true;  this.body.add(this.legR);  this.legL = this.legR.clone();  this.legL.position.z = - this.legR.position.z;  this.legL.castShadow = true;  this.body.add(this.legL);  // Ensure that every part of the body casts and receives shadows.  this.body.traverse(function(object) {    if (object instanceof THREE.Mesh) {      object.castShadow = true;      object.receiveShadow = true;    }  });}</code></pre><p>이제 이 캐릭터를 장면에 추가해야합니다.</p><pre><code>function createHero() {  hero = new Hero();  scene.add(hero.mesh);}</code></pre><p>이것은 three.js로 간단한 캐릭터를 만드는 방법입니다. three.js를 사용하여 문자를 만드는 방법에 대해 자세히 알고 싶으면 Codrops에 대한 자세한 자습서 를 읽어보십시오 .</p><p>이 몸체를 만든 후에는 간단한 걷기 사이클에 도달 할 때까지 점차적으로이 모든 부분을 하나씩 움직이게 할 것입니다.</p><p>전체 논리는 객체 의 run함수에 위치 Hero합니다.</p><pre><code>Hero.prototype.run = function(){  // Increment the angle.  this.runningCycle += .03;  var t = this.runningCycle;  // Ensure that the angle we will use is between 0 and 2 Pi.  t = t % (2*PI);  // Amplitude is used as the main radius of the legs movement.  var amp = 4;  // Update the position and rotation of every part of the body.  this.legR.position.x =  Math.cos(t) * amp;  this.legR.position.y = Math.max (0, - Math.sin(t) * amp);  this.legL.position.x =  Math.cos(t + PI) * amp;  this.legL.position.y = Math.max (0, - Math.sin(t + PI) * amp);  if (t&lt;PI){    this.legR.rotation.z = Math.cos(t * 2 + PI/2) * PI/4;    this.legL.rotation.z = 0;  } else{    this.legR.rotation.z = 0;    this.legL.rotation.z = Math.cos(t * 2 + PI/2) *  PI/4;  }  this.torso.position.y = 8 - Math.cos(  t * 2 ) * amp * .2;  this.torso.rotation.y = -Math.cos( t + PI ) * amp * .05;  this.head.position.y = 21 - Math.cos(  t * 2 ) * amp * .3;  this.head.rotation.x = Math.cos( t ) * amp * .02;  this.head.rotation.y =  Math.cos( t ) * amp * .01;  this.handR.position.x = -Math.cos( t ) * amp;  this.handR.rotation.z = -Math.cos( t ) * PI/8;  this.handL.position.x = -Math.cos( t + PI) * amp;  this.handL.rotation.z = -Math.cos( t + PI) * PI/8;}</code></pre><p>이 코드 라인은 가장 흥미로운 부분이지만 Codepen에서 워킹 사이클 의 전체 코드 를 찾을 수 있습니다 .(<a href="https://codepen.io/Yakudoo/pen/YxMJMv?editors=0010" target="_blank" rel="external">https://codepen.io/Yakudoo/pen/YxMJMv?editors=0010</a>)</p><p>따라하기 쉽도록 다음과 같은 데모를 만들었습니다.이 데모는 동작을 분해하고 이동되는 신체 부분과 각 단계에서 사용되는 수식을 강조 표시합니다.</p><p><a href="https://codepen.io/Yakudoo/pen/qXaNeN" target="_blank" rel="external">https://codepen.io/Yakudoo/pen/qXaNeN</a></p><h2 id="네-차례-야"><a href="#네-차례-야" class="headerlink" title="네 차례 야!"></a>네 차례 야!</h2><p>나는 토끼와 놀지 않고 너를 보내지 않을 것이다.</p><p>아래의 Codepen을 사용하면 몸의 각 부분마다 다른 각도 오프셋과 다른 진폭을 적용 할 수 있습니다. 보다 빠른 결과를 위해주기의 속도를 수정할 수도 있습니다.</p><p>이 사람에 대해 다른 실행주기를 알아낼 수 있습니까? 재미있어!<br><a href="https://codepen.io/Yakudoo/pen/PjaeGV" target="_blank" rel="external">https://codepen.io/Yakudoo/pen/PjaeGV</a></p><h2 id="결론"><a href="#결론" class="headerlink" title="결론"></a>결론</h2><p>코드 기반 애니메이션이 부 자연스러운 움직임을 일으킨다 고 생각할 수도 있습니다. 오히려 나는 매우 유연한 방식으로 움직임을 조정할 수있는 좋은 기회를 제공하여 자신의 성격에 맞는 설득력있는 행동을 쉽게 취할 수 있다고 믿습니다.</p><p>행복의 순간 (Moments of Happiness) 은 다양한 실험의 모음이며 각 실험마다 고유 한 문제가 있습니다. 이 기사에서는 실행주기를 만드는 데 사용 된 솔루션을 자세히 설명했습니다. 내 Codepen 페이지에서이 모든 실험을 원하는대로 사용할 수 있습니다. 자유롭게 놀고 대화 형 장난감을 만들 수 있습니다.</p>]]></content>
    
    <summary type="html">
    
      
      
        &lt;blockquote&gt;
&lt;p&gt;아래의 글은 번역을 하였음을 사전에 알려 드립니다&lt;br&gt;출처 : &lt;a href=&quot;http://zuu.kr/izge&quot; target=&quot;_blank&quot; rel=&quot;external&quot;&gt;http://zuu.kr/izge&lt;/a&gt;&lt;br&gt;작성
      
    
    </summary>
    
    
  </entry>
  
  <entry>
    <title>5가지 자바스크립트 스타일 가이드</title>
    <link href="https://devhaeyeon.github.io/2017/12/03/five-js-styleguide/"/>
    <id>https://devhaeyeon.github.io/2017/12/03/five-js-styleguide/</id>
    <published>2017-12-03T12:06:09.000Z</published>
    <updated>2017-12-04T09:48:32.000Z</updated>
    
    <content type="html"><![CDATA[<blockquote><p>아래의 글은 번역을 하였음을 사전에 알려 드립니다<br>(출처 : <a href="http://zuu.kr/izdf" target="_blank" rel="external">http://zuu.kr/izdf</a> )</p></blockquote><h1 id="5가지-자바스크립트-스타일-가이드-—-Airbnb-amp-google-gitbut"><a href="#5가지-자바스크립트-스타일-가이드-—-Airbnb-amp-google-gitbut" class="headerlink" title="5가지 자바스크립트 스타일 가이드 — Airbnb &amp; google , gitbut"></a>5가지 자바스크립트 스타일 가이드 — Airbnb &amp; google , gitbut</h1><h2 id="구글러-같은-코드를-배워보자"><a href="#구글러-같은-코드를-배워보자" class="headerlink" title="구글러 같은 코드를 배워보자"></a>구글러 같은 코드를 배워보자</h2><p>자바 스크립트를 배우기 시작하거나 AirBnB와 같은 대규모 인터뷰를 준비할 때,<br>더 깨끗한 코드를 작성하는 데 도움이되는 5 가지 스타일 가이드가 있습니다.</p><h2 id="스타일-가이드-란-무엇일까요"><a href="#스타일-가이드-란-무엇일까요" class="headerlink" title="스타일 가이드 란 무엇일까요?"></a>스타일 가이드 란 무엇일까요?</h2><p>스타일 가이드는 코드를 작성하고 구성하는 방법을 설명하는 표준 집합입니다.<br>이 가이드를 읽으면서 각 회사에서 코드를 작성하는 방법에 대한 아이디어를 얻을 수 있습니다.</p><h2 id="스타일-가이드가-필요한-이유는-무엇입니까"><a href="#스타일-가이드가-필요한-이유는-무엇입니까" class="headerlink" title="스타일 가이드가 필요한 이유는 무엇입니까?"></a>스타일 가이드가 필요한 이유는 무엇입니까?</h2><p>한 가지 주된 이유로는 누구나 코드를 다르게 작성합니다.<br>한 가지 방법으로 뭔가를하고 싶을 수도 있고, 다른 방식으로하고 싶을 수도 있습니다.<br>우리가 코드에 대해 작업하는 한 괜찮습니다.<br>하지만 10, 100, 심지어 1,000 명의 개발자가 모두 동일한 코드베이스에서 작업 할 때 어떤 일이 발생할까요?<br>상황이 매우 지저분 해집니다.<br>스타일 가이드는 새로운 개발자가 코드 기반을 신속하게 익히고 다른 개발자가 쉽고 빠르게 이해할 수있는 코드를 작성할 수 있도록 만들어졌습니다!</p><h2 id="airbnb-스타일-가이드"><a href="#airbnb-스타일-가이드" class="headerlink" title="airbnb 스타일 가이드"></a>airbnb 스타일 가이드</h2><p><a href="https://github.com/airbnb/javascript" target="_blank" rel="external">https://github.com/airbnb/javascript</a><br>자바 스크립트에 대한 합리적인 접근법<br>Airbnb는 인터넷에서 가장 인기있는 JavaScript 스타일 가이드 중 하나입니다.<br>자바 스크립트의 거의 모든 측면을 다루고 있습니다.</p><h2 id="Google-자바-스크립트-스타일-가이드"><a href="#Google-자바-스크립트-스타일-가이드" class="headerlink" title="Google 자바 스크립트 스타일 가이드"></a>Google 자바 스크립트 스타일 가이드</h2><p><a href="https://google.github.io/styleguide/jsguide.html" target="_blank" rel="external">https://google.github.io/styleguide/jsguide.html</a><br>자바 스크립트 소스 파일은 여기에있는 규칙을 준수하는 경우에만<br>Google 스타일로 설명됩니다.</p><h2 id="관용적-인-JavaScript-스타일-가이드"><a href="#관용적-인-JavaScript-스타일-가이드" class="headerlink" title="관용적 인 JavaScript 스타일 가이드"></a>관용적 인 JavaScript 스타일 가이드</h2><p><a href="https://github.com/rwaldron/idiomatic.js/" target="_blank" rel="external">https://github.com/rwaldron/idiomatic.js/</a><br>얼마나 많은 사람들이 공헌했는지에 관계없이 모든 코드 기반의 모든 코드는 한 사람이 입력 한 것처럼 보입니다.<br>가장 많이 사용되는 JavaScript 스타일 가이드 중 하나 인 관용구 가이드는 여러 언어로 제공되며 요청을 받아 들일 수 있습니다.</p><h2 id="JavaScript-표준-스타일-가이드"><a href="#JavaScript-표준-스타일-가이드" class="headerlink" title="JavaScript 표준 스타일 가이드"></a>JavaScript 표준 스타일 가이드</h2><p><a href="https://github.com/standard/standard" target="_blank" rel="external">https://github.com/standard/standard</a><br>이 스타일 가이드는 NPM , GitHub , mongoDB 및 ZenDesk를 포함한 많은 기술 회사에서 사용됩니다.</p><h2 id="jQuery-JavaScript-스타일-가이드"><a href="#jQuery-JavaScript-스타일-가이드" class="headerlink" title="jQuery JavaScript 스타일 가이드"></a>jQuery JavaScript 스타일 가이드</h2><p>jQuery를 향상시키는 데 도움이되는 몇 가지 코드를 작성하고 싶습니까? 스타일 가이드를 읽고 JavaScript의 형식을 확인하십시오.<br>웹 사이트 에서 jQuery 스타일 가이드를 볼 수 있습니다.</p>]]></content>
    
    <summary type="html">
    
      
      
        &lt;blockquote&gt;
&lt;p&gt;아래의 글은 번역을 하였음을 사전에 알려 드립니다&lt;br&gt;(출처 : &lt;a href=&quot;http://zuu.kr/izdf&quot; target=&quot;_blank&quot; rel=&quot;external&quot;&gt;http://zuu.kr/izdf&lt;/a&gt; )&lt;/p
      
    
    </summary>
    
    
      <category term="번역" scheme="https://devhaeyeon.github.io/tags/%EB%B2%88%EC%97%AD/"/>
    
  </entry>
  
</feed>