atom.xml

<?xml version="1.0" encoding="utf-8"?>
<feed xmlns="http://www.w3.org/2005/Atom">
  <title>freeseamew`s blog</title>
  
  <link href="/atom.xml" rel="self"/>
  
  <link href="http://freeseamew.github.io/"/>
  <updated>2017-12-02T15:16:25.000Z</updated>
  <id>http://freeseamew.github.io/</id>
  
  <author>
    <name>freeseamew</name>
    
  </author>
  
  <generator uri="http://hexo.io/">Hexo</generator>
  
  <entry>
    <title>무한 스크롤 뒤로가기 문제 해결 1</title>
    <link href="http://freeseamew.github.io/2017/12/02/meteor-Infinite-scroll-1/"/>
    <id>http://freeseamew.github.io/2017/12/02/meteor-Infinite-scroll-1/</id>
    <published>2017-12-01T15:40:32.000Z</published>
    <updated>2017-12-02T15:16:25.000Z</updated>
    
    <content type="html"><![CDATA[<h3 id="0-강좌-소개"><a href="#0-강좌-소개" class="headerlink" title="0. 강좌 소개"></a>0. 강좌 소개</h3><p>무한 스크롤을 구현하다 보면 자연스럽게 만나게 되는 문제가 있는데 그것은 브라우저 뒤로가기 문제입니다. 실제로 이 문제 때문에 무한 스크롤에 대한 부정적인 의견을 보인 개발자들도 있고, 이들에 의해 무한스크롤에 대한 나름 의미 있는 비판도 있었습니다. 하지만 시간이 지나고, <code>www.discourse.org</code>와 같이 이 뒤로가기 문제를 해결한 서비스가 하나둘씩 나타나게 되고, 모바일 환경에서 사용자 들이 느끼는 직관성 때문에 무한스크롤은 가장 보편적인 페이징 기법으로 자리매김 하고 있는 것 같습니다. </p>
<p>Meteor를 본격적으로 사용해볼 생각을 하면서 저 역시 이 문제를 해결해야만 했습니다.<br>하지만 국내 문서를 이리저리 뒤져봤지만 이 문제를 깔끔하게 해결한 답은 아직 찾지 못했습니다. 그래도 Meteor 커뮤니티나, 혹은 Stack Overflow 등에 올라온 여러 내용들을 조합하고, 응용해서 나름 이 문제를 해결한 결과물을 만들게 되었습니다. 이 강좌는 이 무한스크롤에 대한 저의 삽질기가 되겠습니다. 1~4번까지는 무한스크롤을 만드는 방법에 관한 내용입니다. 그리고 마지막 5번은 무한스크롤의 문제점과 이 해결방법에 관한 내용입니다. 이미 무한스크롤을 사용하시는 분은 5번만 보셔도 상관 없을 것 같습니다.  </p>
<hr>
<h3 id="1-환결-설정"><a href="#1-환결-설정" class="headerlink" title="1. 환결 설정"></a>1. 환결 설정</h3><h4 id="1-1-폴더-구조"><a href="#1-1-폴더-구조" class="headerlink" title="1.1 폴더 구조"></a>1.1 폴더 구조</h4><p>자 그럼 본격적으로 강좌를 시작해 보겠습니다. </p>
<p>일단 Meteor에 대한 기본 설치는 다음 강좌를 참고해 주시기 바랍니다. 아래 강좌에서 설치에 대한 부분만 참고 하시면 되겠습니다.<br><a href="https://freeseamew.github.io/2017/07/02/meteor-account-tutorial-1/">https://freeseamew.github.io/2017/07/02/meteor-account-tutorial-1/</a></p>
<p>설치후에 다음과 같은 구조로 파일들을 만들어 주세요.</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div></pre></td><td class="code"><pre><div class="line">meteorAccount</div><div class="line">├── .meteor</div><div class="line">├── client</div><div class="line">│   ├── styles  </div><div class="line">│   │    └── main.css </div><div class="line">│   ├── contents</div><div class="line">│   │    ├── post-lists.html</div><div class="line">│   │    ├── post-lists.js</div><div class="line">│   │    ├── post-view.html</div><div class="line">│   │    └── post-view.js</div><div class="line">│   ├── autoscroll.js</div><div class="line">│   ├── main-layout.html</div><div class="line">│   └── main-layout.js </div><div class="line">├── lib</div><div class="line">│   ├── methods</div><div class="line">│   │    └── postMethods.js</div><div class="line">│   ├── collections.js</div><div class="line">│   └── routes.js </div><div class="line">├── node_module</div><div class="line">├── public</div><div class="line">└── server</div><div class="line">    ├── fixture.js </div><div class="line">    └── pubs.js</div></pre></td></tr></table></figure>
<h4 id="1-2-설치-페키지"><a href="#1-2-설치-페키지" class="headerlink" title="1.2 설치 페키지"></a>1.2 설치 페키지</h4><p>이번 예제에 사용할 페키지들은 다음과 같습니다.<br>우선 라우터 관련 페키지를 설치해 주세요.</p>
<blockquote>
<p>설치 패키지 : 라우터 관련</p>
<ul>
<li>meteor add kadira:flow-router</li>
<li>meteor add arillo:flow-router-helpers</li>
<li>meteor add kadira:blaze-layout</li>
</ul>
</blockquote>
<p>다음은 Subscription 캐쉬 입니다. 이부분에 대해서는 강좌중에 설명드리도록 하겠습니다. </p>
<blockquote>
<p>설치 패키지 : Subscription 캐쉬</p>
<ul>
<li>meteor add meteorhacks:subs-manager</li>
<li>meteor add msavin:mongol</li>
</ul>
</blockquote>
<p>마지막으로 템플릿에 사용할 bootstrap 관련 패키지를 설치하면 기본 설정은 끝입니다. </p>
<blockquote>
<p>설치 패키지 : 기타</p>
<ul>
<li>meteor add twbs:bootstrap@=3.3.6</li>
</ul>
</blockquote>
<hr>
<h3 id="2-기본-서버-작업"><a href="#2-기본-서버-작업" class="headerlink" title="2. 기본 서버 작업"></a>2. 기본 서버 작업</h3><h4 id="2-1-collection-작성"><a href="#2-1-collection-작성" class="headerlink" title="2.1 collection 작성"></a>2.1 collection 작성</h4><p>이번 예제에 사용할 콜랙션은 posts라는 단일 콜랙션을 사용할 것입니다. 다음을 참고로 해당 콜랙션을 만들어 주세요. 참고로 Meteor에서의 콜랙션은 일종의 데이터베이스에서의 테이블에 해당하는 부분입니다. Meteor에서는 collection설정을 통해 서버의 몽고디비와 클라이언트의 미니몽고를 연동해줍니다. 이부분은 다른 강좌에서 좀더 깊이있게 다루도록 하겠습니다. 간단하게는 일종의 데이터베이스 설정? 정도로 이해해 주시면 되겠습니다. </p>
<p><code>lib/collections.js</code><br><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">Posts = new Mongo.Collection(&apos;posts&apos;);</div></pre></td></tr></table></figure></p>
<h4 id="2-2-pubs-작성"><a href="#2-2-pubs-작성" class="headerlink" title="2.2 pubs 작성"></a>2.2 pubs 작성</h4><p>pubs는 Meteor에서 데이터 베이스의 내용을 가져오는 방법중에 하나입니다. pub(발행)/sub(구독)이라는 메커니즘을 통해서 필요한 데이터를 몽고디비에서 미니몽고로 받아오는 구조입니다. 이부분도 나중에 다른 강좌를 통해서 조금더 자세히 다루도록 하겠습니다. </p>
<p>우선 <code>posts</code>는 리스트를 뿌려주는 일종의 쿼리부분이 되겠습니다. 일반 데이터베이스 였다면 <code>select 컬럼들 from 테이블 limit 보여줄 개수</code> 정도의 쿼리를 호출한다고 생각하시면 되겠습니다. </p>
<p>다음으로 <code>postDetail</code>은 리스트에서 선택된 post의 내용을 보여주는 부분입니다.<br><code>select 컬럼들 from 테이블명 where id=id</code> 이런 식의 쿼리에 해당하는 내용입니다. </p>
<p>이제 아래 코드를 입력해 주세요.</p>
<p><code>server/pubs.js</code></p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div></pre></td><td class="code"><pre><div class="line">Meteor.publish(&apos;posts&apos;, function (postCnt) &#123;</div><div class="line">  return Posts.find(&#123;&#125;, &#123;limit: postCnt, sort: &#123;postDate: -1&#125;&#125;);</div><div class="line">&#125;);</div><div class="line"></div><div class="line">Meteor.publish(&apos;postDetail&apos;, function (id) &#123;</div><div class="line">  return Posts.find(&#123;_id: id&#125;); // 여기서 findOne를 사용하면 두번 리턴되는 문제 발생</div><div class="line">&#125;);</div></pre></td></tr></table></figure>
<h4 id="2-3-methods-작성"><a href="#2-3-methods-작성" class="headerlink" title="2.3 methods 작성"></a>2.3 methods 작성</h4><p>method는 pub/sub과 함께 데이터베이스를 다루는 방법입니다. pub/sub이 리스트 형식의 데이터를 가져오는데 주로 사용된다면, method는 쓰기, 수정, 삭제에 주로 사용됩니다.<br>여기서는 <code>select count(id) from 테이블</code>에 해당하는 쿼리를 처리하기 위해 사용했습니다. </p>
<p><code>lib/methods/postMethods.js</code></p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div></pre></td><td class="code"><pre><div class="line">Meteor.methods(&#123;</div><div class="line"></div><div class="line">  getPostCountAll: function () &#123;</div><div class="line">    return Posts.find().count();</div><div class="line">  &#125;</div><div class="line">&#125;);</div></pre></td></tr></table></figure>
<hr>
<h3 id="3-라우팅-세팅"><a href="#3-라우팅-세팅" class="headerlink" title="3. 라우팅 세팅"></a>3. 라우팅 세팅</h3><p>라우팅에 대해 간단히 설명드리면 <code>http://localhost:3000/postList</code> 주소로 url을 입력하면 <code>postList</code>라는 template이 <code>mainLayout</code>이라는 곳에 보여 진다는 의미를 가집니다. 다시 설명 하자면, url주소에 따라 postList, postView 등의 페이지로 이동하게 하는 기능이 되겠습니다.  </p>
<p>라우팅될 페이지는 총 2개의 페이지가 되겠습니다. <code>/postList</code>는 무한스크롤 페이지가 되겠고, <code>/postView</code>는 리스트에서 선택된 목록의 내용을 보는 페이지가 되겠습니다. 그리고 <code>/</code> 의 경우는 아이피 주소로 처음 접근한 사용자를 리스트 페이지로 보내주도록 하는 기능입니다. </p>
<p>postView의 경우 <code>:id</code>로 표시되는 부분이 있는데요. 이부분은 상세보기 페이지의 id 값이 되겠습니다. 리스트에서 <code>a href</code>로 링크를 걸어줄때 <code>http://localhost:3000/postView/iFcDNXidApCtyCFRt</code> 이런 형태의 주소가 될텐데요. 여기서 <code>postView/</code> 뒤에 있는 값이 ID값이라고 인식시켜 주는 방법입니다. 그리고 이 키 값을 <code>var id = FlowRouter.getParam(&#39;id&#39;);</code> 이런 식으로 변수에 담아 사용 할 수 있습니다. </p>
<p>이제 routes.js를 열고 다음을 입력해 주세요. </p>
<p><code>lib/routes.js</code></p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div><div class="line">25</div><div class="line">26</div><div class="line">27</div><div class="line">28</div><div class="line">29</div></pre></td><td class="code"><pre><div class="line">FlowRouter.route(&apos;/&apos;, &#123;</div><div class="line">  name: &apos;main&apos;,</div><div class="line">  action: function() &#123;</div><div class="line"></div><div class="line">    FlowRouter.go(&apos;/postList&apos;);</div><div class="line">  &#125;</div><div class="line">&#125;);</div><div class="line"></div><div class="line">FlowRouter.route(&apos;/postList&apos;, &#123;</div><div class="line">  name: &apos;main&apos;,</div><div class="line">  action: function() &#123;</div><div class="line"></div><div class="line">    BlazeLayout.render(&apos;mainLayout&apos;, &#123;</div><div class="line">      content:&apos;postList&apos;</div><div class="line">    &#125;);</div><div class="line">  &#125;</div><div class="line">&#125;);</div><div class="line"></div><div class="line">FlowRouter.route(&apos;/postView/:id&apos;, &#123;</div><div class="line">  name: &apos;postView&apos;,</div><div class="line">  action: function () &#123;</div><div class="line"></div><div class="line">    var id = FlowRouter.getParam(&apos;id&apos;);</div><div class="line"></div><div class="line">    BlazeLayout.render(&apos;mainLayout&apos;, &#123;</div><div class="line">      content: &apos;postView&apos;</div><div class="line">    &#125;);</div><div class="line">  &#125;</div><div class="line">&#125;);</div></pre></td></tr></table></figure>
<p>다음은 위에 잠시 설명한 주소에 따라 템플릿을 뿌려줄 일종의 부모 템플릿을 설정하는 파일이 되겠습니다. client/main-layout.js 에 파일을 만들고 내용을 입력해 주세요.</p>
<p><code>client/main-layout.html</code></p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div></pre></td><td class="code"><pre><div class="line">&lt;template name=&quot;mainLayout&quot;&gt;</div><div class="line">  &lt;header class=&quot;navbar navbar-default navbar-fixed-top table-header-bg&quot; &gt;</div><div class="line">    &lt;div class=&quot;container &quot;&gt;</div><div class="line"></div><div class="line">      &lt;div class=&quot;navbar-header&quot;&gt;</div><div class="line">        &lt;a href=&quot;/&quot; class=&quot;navbar-brand&quot; name=&quot;btn-home&quot;&gt;Infinite Scroll&lt;/a&gt;</div><div class="line">      &lt;/div&gt;</div><div class="line"></div><div class="line">      &lt;div class=&quot;collapse navbar-collapse navbar-right navbar-ex1-collapse&quot;&gt;</div><div class="line">        &lt;div class=&quot;navbar-form navbar-right&quot; ng-controller=&quot;authCtrl as auth &quot;&gt;</div><div class="line"></div><div class="line">        &lt;/div&gt;</div><div class="line">      &lt;/div&gt;</div><div class="line">    &lt;/div&gt;</div><div class="line"></div><div class="line">  &lt;/header&gt;</div><div class="line">  &lt;div class=&quot;container&quot;&gt;</div><div class="line">    &#123;&#123;&gt; Template.dynamic template=content &#125;&#125;</div><div class="line">  &lt;/div&gt;</div><div class="line">&lt;/template&gt;</div></pre></td></tr></table></figure>
<hr>
<h3 id="4-리스트-및-내용보기-페이지-작성"><a href="#4-리스트-및-내용보기-페이지-작성" class="headerlink" title="4. 리스트 및 내용보기 페이지 작성"></a>4. 리스트 및 내용보기 페이지 작성</h3><h4 id="4-1-포스트-리스트"><a href="#4-1-포스트-리스트" class="headerlink" title="4.1 포스트 리스트"></a>4.1 포스트 리스트</h4><p>이제 리스트 페이지를 작성해 보도록 하겠습니다.<br>우선 이번프로젝트에 사용할 css 파일을 작성하도록 하겠습니다. 다음 링크의 css파일의 내용을 복사해 주세요.</p>
<p><code>client/styles/main.css</code></p>
<blockquote>
<p><a href="https://github.com/freeseamew/meteor-infinit-scroll/blob/master/client/styles/main.css" target="_blank" rel="noopener">https://github.com/freeseamew/meteor-infinit-scroll/blob/master/client/styles/main.css</a></p>
</blockquote>
<p>다음으로 아래를 참고로 <code>post-list.html</code> 파일을 만들겠습니다. 이 파일에는 postList, postListItem, postLoadingItem 의 3가지 template을 사용할 예정입니다. 참고로 Meteor는 기본적으로 blaze라는 프론트엔드 엔진을 사용하는데, <code>post-list.html, post-list.js</code> 이런 식으로 동일 템플릿에 해당하는 html과 이 템플릿에 대응하는 js 파일로 이루어 지는 구조입니다. </p>
<p>코드를 설명드리면 <code>#each list</code> 에 해당하는 부분은 list라는 데이터를 each문을 사용해서 <code>&gt;postListItem</code> 이 템플릿을 반복시켜 주는 기능을 합니다. 그리고 <code>#if endOfData</code> 에서는 만약 뿌려줄 리스트가 더이상 없을 경우  마지막 페이지라는 것을 표시해줍니다. 또 <code>#if postLoadingEffect</code> 와 <code>#unless Template.subscriptionsReady</code>는 데이터가 로딩중이거나, 템플릿이 준비가 완료되지 않을 경우 로딩 효과를 불러오는 역할을 합니다. </p>
<p><code>client/contents/post-lists.html</code></p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div><div class="line">25</div><div class="line">26</div><div class="line">27</div><div class="line">28</div><div class="line">29</div><div class="line">30</div><div class="line">31</div><div class="line">32</div><div class="line">33</div><div class="line">34</div><div class="line">35</div><div class="line">36</div><div class="line">37</div><div class="line">38</div></pre></td><td class="code"><pre><div class="line">&lt;template name=&quot;postList&quot;&gt;</div><div class="line"></div><div class="line">  &lt;div class=&quot;row margin-top-20&quot;&gt;</div><div class="line">    &lt;div class=&quot;col-xs-12 col-md-12 table-border tableHeight padding-0 &quot; &gt;</div><div class="line"></div><div class="line">      &lt;table class=&quot;table&quot; &gt;</div><div class="line">        &lt;thead class=&quot; table-header-bg&quot;&gt;</div><div class="line">          &lt;tr&gt;</div><div class="line">            &lt;th class=&quot;tb-title&quot;&gt;제목&lt;/th&gt;</div><div class="line">            &lt;th class=&quot;align-center tb-user&quot;&gt;사용자&lt;/th&gt;</div><div class="line">            &lt;th class=&quot;align-center tb-view&quot;&gt;조회&lt;/th&gt;</div><div class="line">            &lt;th class=&quot;align-center tb-comment&quot;&gt;댓글&lt;/th&gt;</div><div class="line">            &lt;th class=&quot;align-centr tb-recommend&quot;&gt;추천&lt;/th&gt;</div><div class="line">            &lt;th class=&quot;align-right tb-date&quot;&gt;날짜&lt;/th&gt;</div><div class="line">          &lt;/tr&gt;</div><div class="line">        &lt;/thead&gt;</div><div class="line">        &lt;tbody id=&quot;tableBoardList&quot; ss&gt;</div><div class="line">        &#123;&#123;#each list&#125;&#125;</div><div class="line">          &#123;&#123;&gt;postListItem&#125;&#125;</div><div class="line">        &#123;&#123;/each&#125;&#125;</div><div class="line"></div><div class="line">        &#123;&#123;#if endOfData&#125;&#125;</div><div class="line">          &lt;p&gt;더이상 데이터가 없습니다.&lt;/p&gt;</div><div class="line">        &#123;&#123;/if&#125;&#125;</div><div class="line"></div><div class="line">        &lt;/tbody&gt;</div><div class="line">      &lt;/table&gt;</div><div class="line">      &#123;&#123;#if postLoadingEffect&#125;&#125;</div><div class="line">        &#123;&#123;&gt;postLoadingItem&#125;&#125;</div><div class="line">      &#123;&#123;/if&#125;&#125;</div><div class="line"></div><div class="line">      &#123;&#123;#unless Template.subscriptionsReady&#125;&#125;</div><div class="line">        &#123;&#123;&gt;postLoadingItem&#125;&#125;</div><div class="line">      &#123;&#123;/unless&#125;&#125;</div><div class="line">    &lt;/div&gt;</div><div class="line"></div><div class="line">  &lt;/div&gt;</div><div class="line">&lt;/template&gt;</div></pre></td></tr></table></figure>
<p>다음은 같은 파일에 리스트 내용에 해당하는 템플릿을 만들어 보겠습니다. 위에서 설명드린 each를 통해 반복되면서 표시되는 리스트의 내용이라고 보시면 되겠습니다. </p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div></pre></td><td class="code"><pre><div class="line">.</div><div class="line">.</div><div class="line">.</div><div class="line">[위 상략]</div><div class="line"></div><div class="line">&lt;template name=&quot;postListItem&quot;&gt;</div><div class="line">  &lt;tr id=&quot;my-infinite-scrolling-list&quot; pageCnt=&quot;&#123;&#123;pageCnt&#125;&#125;&quot; &gt;</div><div class="line">    &lt;td class=&quot;tb-title&quot;&gt;&lt;p&gt;&lt;a href=&quot;&#123;&#123;pathFor &apos;/postView/:id&apos; id=_id&#125;&#125;&quot; name=&quot;#&#123;&#123;_id&#125;&#125;&quot; class=&quot;goView&quot; &gt;&#123;&#123;postTitle&#125;&#125;&lt;/a&gt;&lt;/p&gt;&lt;/td&gt;</div><div class="line">    &lt;td class=&quot;align-center tb-user&quot;&gt;&lt;p&gt;&lt;a href=&quot;&#123;&#123;pathFor &apos;/postView/:id&apos; id=_id&#125;&#125;&quot; class=&quot;goView&quot;&gt;&#123;&#123;postUserName&#125;&#125;&lt;/a&gt;&lt;/p&gt;&lt;/td&gt;</div><div class="line">    &lt;td class=&quot;align-center tb-view&quot;&gt;&lt;p&gt;&lt;a href=&quot;&#123;&#123;pathFor &apos;/postView/:id&apos; id=_id&#125;&#125;&quot; class=&quot;goView&quot;&gt;&#123;&#123;postViewCount&#125;&#125;&lt;/a&gt;&lt;/p&gt;&lt;/td&gt;</div><div class="line">    &lt;td class=&quot;align-center tb-comment&quot;&gt;&lt;p&gt;&lt;a href=&quot;&#123;&#123;pathFor &apos;/postView/:id&apos; id=_id&#125;&#125;&quot; class=&quot;goView&quot;&gt;&#123;&#123;postCommentCount&#125;&#125;&lt;/a&gt;&lt;/p&gt;&lt;/td&gt;</div><div class="line">    &lt;td class=&quot;align-center tb-recommend&quot;&gt;&lt;p&gt;&lt;a href=&quot;&#123;&#123;pathFor &apos;/postView/:id&apos; id=_id&#125;&#125;&quot; class=&quot;goView&quot;&gt;&#123;&#123;postLikeCount&#125;&#125;&lt;/a&gt;&lt;/p&gt;&lt;/td&gt;</div><div class="line">    &lt;td class=&quot;align-right tb-date&quot;&gt;&lt;p&gt;&lt;a href=&quot;&#123;&#123;pathFor &apos;/countTest&apos;&#125;&#125;&quot; class=&quot;goView&quot;&gt;&#123;&#123;postDate&#125;&#125;&lt;/a&gt;&lt;/p&gt;&lt;/td&gt;</div><div class="line">  &lt;/tr&gt;</div><div class="line">&lt;/template&gt;</div></pre></td></tr></table></figure>
<p>마지막 템플릿은 로딩효과를 표시해줄 템플릿 입니다. </p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div></pre></td><td class="code"><pre><div class="line">.</div><div class="line">.</div><div class="line">.</div><div class="line">[위 상략]</div><div class="line"></div><div class="line">&lt;template name=&quot;postLoadingItem&quot;&gt;</div><div class="line">  &lt;div class=&quot;loading-bar&quot;&gt;</div><div class="line">    &lt;div class=&quot;loader&quot;&gt;&lt;/div&gt;</div><div class="line">  &lt;/div&gt;</div><div class="line">&lt;/template&gt;</div><div class="line"></div><div class="line"></div><div class="line">`client/contents/post-lists.html`</div></pre></td></tr></table></figure>
<p>이제 템플릿을 제어할 js 파일을 만들어 보도록 하겠습니다. 우선 <code>Template.postList.onCreated(function () {</code> 안의 내용을 작성하겠습니다. 각 내용에 필요한 부분들은 주석을 통해 설명해 두었습니다. 사실 ReactiveVar나 pub/sub에 관한 자세한 내용은 나중에 따로 강좌를 만들어 설명해 드리도록 하겠습니다. 하지만 작동 원리에 대한 시나리오는 간단히 설명드리겠습니다. </p>
<p> <code>self.autorun(function () {}</code>안에 정의된 <code>self.subscribe(&#39;posts&#39;, postCnt.get());</code>가 이 시스템의 가장 핵심적인 부분입니다. Meteor는 절차적인 방식과 함께 선언적인 방식을 함께 지원하는 플랫폼 입니다. 여기서의 pub/sub 을 사용하는 방법은 선언적인 방식을 이용해 페이징을 구현한 부분입니다. 만약 일반적인 절차적인 방식으로 게시글의 리스트를 불러온다면 페이지를 추가로 불러올 부분에서 데이터베이스를 호출할 function을 호출하는 방법으로 작동이 될 것입니다. 하지만, 여기서는  <code>self.subscribe(&#39;posts&#39;, postCnt.get());</code> 이렇게 선언을 해주고 페이지를 늘려야 하는 경우 <code>postCnt.set(postCnt.get() + 10);</code> 이런식으로 postCnt만 조정해주면 서버에서 필요한 부분만 추가되는 식으로 작동합니다. 즉 subscribe를 선언해두고 Reactivar로 정의된 부분만 변경해 주면 위치에 상관없이 리스트의 데이터가 변화된다고 생각하시면 되겠습니다. 일단 이부분에 대한 제 강좌가 없으므로 다음 링크를 통해 간단하게 나마 원리를 보실 수 있을 것입니다. </p>
<blockquote>
<p>링크 : <a href="http://kr.discovermeteor.com/chapters/publications-and-subscriptions/" target="_blank" rel="noopener">pub/sub 설명</a></p>
</blockquote>
<p><code>client/contents/post-lists.js</code></p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div><div class="line">25</div><div class="line">26</div><div class="line">27</div><div class="line">28</div><div class="line">29</div><div class="line">30</div><div class="line">31</div><div class="line">32</div><div class="line">33</div><div class="line">34</div><div class="line">35</div><div class="line">36</div><div class="line">37</div><div class="line">38</div><div class="line">39</div><div class="line">40</div><div class="line">41</div><div class="line">42</div></pre></td><td class="code"><pre><div class="line">Template.postList.onCreated(function () &#123;</div><div class="line"></div><div class="line">  window.postCountAll = new ReactiveVar(0);  // post의 총 개수를 저장할 저장소</div><div class="line">  window.postLoadingEffect = new ReactiveVar(false); // 로딩 효과를 나타낼지 말지를 결정할 저장소</div><div class="line">  window.scrollRock = new ReactiveVar(false); // 스크롤바가 로딩중에는 더이상 추가로딩을 하지 않도록 할 저장소</div><div class="line">  window.postCnt = new ReactiveVar(20); // 불러올 포스트 개수 세팅</div><div class="line"></div><div class="line">  var self = this;</div><div class="line"></div><div class="line">  Meteor.call(&apos;getPostCountAll&apos;, function (err, result) &#123;</div><div class="line">    if(err) &#123;</div><div class="line">      console.log(err.message);</div><div class="line">    &#125;</div><div class="line">    else &#123;</div><div class="line">      return postCountAll.set(result); // 포스트 개수를 method에서 불러와 postCountAll에 저장.</div><div class="line">    &#125;</div><div class="line">  &#125;);</div><div class="line"></div><div class="line">  self.autorun(function () &#123;</div><div class="line">    self.subscribe(&apos;posts&apos;, postCnt.get()); // posts 리스트를 불로올 posts pub를 호출</div><div class="line">  &#125;);</div><div class="line"></div><div class="line">  window.onscroll = function (ev) &#123;</div><div class="line">    if ((window.innerHeight + window.scrollY) &gt;= document.body.offsetHeight) &#123; // 스크롤이 바닥에 닿으면 다음 페이지 진행</div><div class="line"></div><div class="line">      if(!(postCountAll.get() &lt; postCnt.get()) &amp;&amp; scrollRock.get() === false ) &#123; // 페이지가 끝나지 않았거나 로딩중이 아닐때에만 페이지수를 증가하는 이벤트 발생</div><div class="line"></div><div class="line">        scrollRock.set(true); // 페이지 증가 전에 scrollRock을 true로 해서 잠금.</div><div class="line"></div><div class="line">        postLoadingEffect.set(true);</div><div class="line">        Meteor.setTimeout(function () &#123;</div><div class="line">          postLoadingEffect.set(false);</div><div class="line">          scrollRock.set(false);</div><div class="line">        &#125;, 1000);</div><div class="line"></div><div class="line">        postCnt.set(postCnt.get() + 10); // 패아자룰 10개 증가 시켜 줌.</div><div class="line">        console.log(&apos;postCnt: &apos; + postCnt.get()); // 페이지에 대한 로그</div><div class="line">      &#125;</div><div class="line">    &#125;</div><div class="line">  &#125;</div><div class="line"></div><div class="line">&#125;);</div></pre></td></tr></table></figure>
<p>다음은 <code>Template.postList.helpers({})</code> 로 템플릿에 데이터를 전달하는 부분입니다. </p>
<p><code>list</code>는 리스트에 뿌려질 포스트 목록 데이터 입니다. <code>endOfData</code>는 현재 불러온 포스트 개수가 전체 포스트 개수보다 크거나 같으면 false를 리턴해 더이상 페이지 증가 이벤트가 작동하지 않도록 하는 역할을 합니다. <code>postLoadingEffect</code>는 true일 경우 로딩을 보여줄지 말지에 대한 true, false를 나타내는 역할을 합니다. </p>
<p><code>client/contents/post-lists.js</code></p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div></pre></td><td class="code"><pre><div class="line">Template.postList.helpers(&#123;</div><div class="line">  list: function () &#123;</div><div class="line">    return Posts.find(&#123;&#125;, &#123;sort: &#123;postDate: -1&#125;&#125;);</div><div class="line">  &#125;,</div><div class="line">  endOfData : function () &#123;</div><div class="line">    return postCountAll.get() &lt; postCnt.get() ? true : false;</div><div class="line">  &#125;,</div><div class="line">  postLoadingEffect: function () &#123;</div><div class="line">    return postLoadingEffect.get();</div><div class="line">  &#125;</div><div class="line"></div><div class="line">&#125;);</div></pre></td></tr></table></figure>
<h4 id="4-2-포스트-내용보기"><a href="#4-2-포스트-내용보기" class="headerlink" title="4.2 포스트 내용보기"></a>4.2 포스트 내용보기</h4><p>다음은 내용보기 입니다. 리스트의 링크를 클릭하면 선택된 리스트의 내용을 보여주는 페이지가 되겠습니다.<br>우선 템플릿부터 작성하도록 하겠습니다. </p>
<p><code>client/contents/post-view.html</code></p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div></pre></td><td class="code"><pre><div class="line">&lt;template name=&quot;postView&quot;&gt;</div><div class="line">  &#123;&#123;#with contentView &#125;&#125;</div><div class="line">    &lt;div class=&quot;row margin-top-20&quot;&gt;</div><div class="line">      &lt;div class=&quot;col-xs-12 col-md-12 &quot; &gt;</div><div class="line"></div><div class="line">        &lt;div class=&quot;content-wrap&quot;&gt;</div><div class="line">          &lt;div class=&quot;post-content-top&quot;&gt;</div><div class="line">            &lt;h1&gt;&#123;&#123;postTitle&#125;&#125;&lt;/h1&gt;</div><div class="line">          &lt;/div&gt;</div><div class="line">          &lt;div class=&quot;post-content-top&quot;&gt;</div><div class="line">            &lt;p&gt;&#123;&#123;postUserName&#125;&#125;&lt;/p&gt;</div><div class="line">            &lt;p class=&quot;post-date&quot;&gt;&#123;&#123;postDate&#125;&#125;&lt;/p&gt;</div><div class="line">          &lt;/div&gt;</div><div class="line">          &lt;div class=&quot;post-content-middle&quot;&gt;</div><div class="line">            &#123;&#123;&#123;postContent&#125;&#125;&#125;</div><div class="line">          &lt;/div&gt;</div><div class="line"></div><div class="line">        &lt;/div&gt;</div><div class="line">      &lt;/div&gt;</div><div class="line">    &lt;/div&gt;</div><div class="line"></div><div class="line">  &#123;&#123;/with&#125;&#125;</div><div class="line">&lt;/template&gt;</div></pre></td></tr></table></figure>
<p>그리고 대응하는 js 파일을 작성합니다. post-list보다는 단순하지만 구조는 비슷합니다.   <code>self.subscribe(&#39;postDetail&#39;, postIdSet.get());</code>를 선언하고 postIdSet을 받아 내용을 전달하는 것이 전부입니다. 참고로 postIdSet은 route에서 전달받고 있습니다. (위에 라우팅 부분 참고)</p>
<p><code>client/contents/post-view.js</code></p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div></pre></td><td class="code"><pre><div class="line"></div><div class="line">Template.postView.onCreated(function () &#123;</div><div class="line"></div><div class="line">  var self = this;</div><div class="line"></div><div class="line">  self.autorun(function ()</div><div class="line">  &#123;</div><div class="line">    self.subscribe(&apos;postDetail&apos;, postIdSet.get());</div><div class="line">  &#125;);</div><div class="line"></div><div class="line">&#125;);</div><div class="line"></div><div class="line">Template.postView.helpers(&#123;</div><div class="line"></div><div class="line">  contentView: function()</div><div class="line">  &#123;</div><div class="line">    var postOne = Posts.findOne(&#123;_id: postIdSet.get()&#125;);</div><div class="line">    return postOne;</div><div class="line">  &#125;</div><div class="line"></div><div class="line">&#125;);</div></pre></td></tr></table></figure>
<h4 id="4-3-데이터-주입"><a href="#4-3-데이터-주입" class="headerlink" title="4.3 데이터 주입"></a>4.3 데이터 주입</h4><p>이제 기본적인 페이지들은 모두 만들었습니다. 다음으로 해야할 일은 리스트로 사용할 데이터를 주입하는 일입니다.<br>코드를 설명드리면 Meteor가 시작될 때 디비에 데이터가 없으면 fixture를 for 문으로 돌면서 데이터베이스에 주입하는 소스입니다. 다음 링크에서 소스를 복사해 사용하시면 되겠습니다. </p>
<blockquote>
<p>링크 : <a href="https://github.com/freeseamew/meteor-infinit-scroll/blob/master/server/fixture.js" target="_blank" rel="noopener">fixture.js</a></p>
</blockquote>
<p><code>server/fixture.js</code></p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div></pre></td><td class="code"><pre><div class="line">var fixture = [</div><div class="line"></div><div class="line">.</div><div class="line">.</div><div class="line">.</div><div class="line">데이터</div><div class="line">.</div><div class="line">.</div><div class="line">.</div><div class="line"></div><div class="line">]</div><div class="line"></div><div class="line">Meteor.startup(() =&gt; &#123;</div><div class="line">  if(Posts.find().count() === 0) &#123;</div><div class="line">    console.log(&apos;데이터가 존재하지 않습니다 fixture 데이터를 입력합니다.&apos;);</div><div class="line"></div><div class="line">    for(var i=0, len=250; i&lt;len; i++) &#123;</div><div class="line">      Posts.insert((fixture[i]));</div><div class="line">    &#125;</div><div class="line">  &#125;</div><div class="line"></div><div class="line">&#125;);</div></pre></td></tr></table></figure>
<p>이제 터미널 창에서 다음 명령을 실행해 서버를 실행해 보겠습니다. 정상적으로 작동한다면, <code>http://localhost:3000</code> 로 페이지에 접속할 수 있을 것입니다. </p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">meteor run</div></pre></td></tr></table></figure>
<p>여기까지는 무한스크롤을 구성하는 강좌였습니다. 이어서 바로 다음 강좌에서는 무한스크롤의 문제점과 그 해결방안에 대해서 다루어 보도록 하겠습니다. </p>
<blockquote>
<p>소스코드 링크<br><a href="https://github.com/freeseamew/meteor-infinit-scroll" target="_blank" rel="noopener">https://github.com/freeseamew/meteor-infinit-scroll</a></p>
</blockquote>
]]></content>
    
    <summary type="html">
    
      &lt;h3 id=&quot;0-강좌-소개&quot;&gt;&lt;a href=&quot;#0-강좌-소개&quot; class=&quot;headerlink&quot; title=&quot;0. 강좌 소개&quot;&gt;&lt;/a&gt;0. 강좌 소개&lt;/h3&gt;&lt;p&gt;무한 스크롤을 구현하다 보면 자연스럽게 만나게 되는 문제가 있는데 그것은 브라우저 뒤로
    
    </summary>
    
    
      <category term="meteor, inifinit scroll, history back" scheme="http://freeseamew.github.io/tags/meteor-inifinit-scroll-history-back/"/>
    
  </entry>
  
  <entry>
    <title>무한 스크롤 뒤로가기 문제 해결 2</title>
    <link href="http://freeseamew.github.io/2017/12/02/meteor-Infinite-scroll-2/"/>
    <id>http://freeseamew.github.io/2017/12/02/meteor-Infinite-scroll-2/</id>
    <published>2017-12-01T15:40:32.000Z</published>
    <updated>2017-12-03T05:38:39.000Z</updated>
    
    <content type="html"><![CDATA[<h3 id="5-무한스크롤의-문제점-및-해결방법"><a href="#5-무한스크롤의-문제점-및-해결방법" class="headerlink" title="5. 무한스크롤의 문제점 및 해결방법"></a>5. 무한스크롤의 문제점 및 해결방법</h3><h4 id="5-1-무한스크롤-문제점"><a href="#5-1-무한스크롤-문제점" class="headerlink" title="5.1 무한스크롤 문제점"></a>5.1 무한스크롤 문제점</h4><p>자 이제 본격적으로 이렇게 만들어진 무한 스크롤의 문제점을 살펴보도록 하겠습니다. 일단 서버를 실행시키로 실행할 주소로 접속해 보면 다음과 같은 결과물을 볼 수 있을 것입니다.<br>화면을 보시면 스크롤은 이상없이 잘 작동하는 것을 볼 수 있습니다. 하지만 목록 중에서 하나를 클릭해 내용보기로 갔다가 브라우저의 뒤로가기를 클릭해 다시 리스트로 돌아오면 모든 리스트가 초기화 되어 처음 페이지가 보여지는 문제가 발생합니다. 이 말은 리스트를 이용해 수많은 페이지를 넘기다가 볼만한 내용이 있어 해당 부분을 클릭하고 다시 돌아오며 그 위치까지 또 다시 내려가야 다음 내용을 볼 수 있는 치명적인 문제가 발생하고 있는 것입니다. </p>
<p><img src="https://lh3.googleusercontent.com/8Cs9Tt60K7RjcQKYZHlb_p0oYJC6Sb_HEKhzomBjf1WEyKfl1RCwnIumWSRDzBwUc7BiM3ZSeqTwX9pz81GMmcQKG6Vjk3K6o7AuUaiEC8DUJUZMHA0ePa1AGsqOPB77BDd4GYM0d9hUyRsL6ZsGiPlPGvcfl1sbEjugA_dyCBhsdANd8uVUFBKdnO2GR0DpzHsysFtCYF7qp2dmmjhG3vAgnGB-TMr1Pw03qTGwgY8NF4rv8UT4Zpu-DQMQZcq8i2Sa_jPtROWKG4GCVLVLSQfqmq8TH_JKJogoatuDbdd2DZBFpsED9szX2BxvSx-AYDf3MhnrgWPFqOijFJq7FpCuVc2zjNQScgjqO04ZRgSUmxhQs3lKd7xDn2q-k6KkFUhb4xrsXVvSX6zEx9IMJIXUsXfCWBrWFjmJH-cMpO9bkvHjOm_QLVs6-DebG_z0LxLbFlknvpOwZe8y_TAvFawzwi9SUIeS1SS39vN67uQXoNzRluWYt4rRo3Y4j4Lb9cVqd3TWCNiBR0xYT7eI4k2B_dFAwcDjubmgkNjTe0KKZdWA7m2Nl8Jj56qmOLq3QBaAE5gcnqZJcZx1chgeEv2Wfb277L8OgKFI_EjXj6I=w1338-h874-no"></p>
<p></p><p>[뒤로가기 문제 화면]</p><p></p>
<h4 id="5-2-해결방법"><a href="#5-2-해결방법" class="headerlink" title="5.2 해결방법"></a>5.2 해결방법</h4><p>자 그럼 이 문제를 한단계씩 해결해 보도록 하겠습니다. 우선 <code>pub/sub</code>을 이용해 리스트로 뿌려진 결과가 초기화 되지 않게 하는 부분부터 처리해보겠습니다. 위에서 설치 패키지 중에 <code>meteorhacks:subs-manager</code> 라는 패키지를 설치했는데요. 이녀석이 바로 일종의  subscriptions(구독)에 대한 캐쉬기능을 제공하는 페키지가 되겠습니다. </p>
<p>사용법은 아주 간단합니다. 다음파일을 열고 주석으로 처리된 부분을 추가 또는 수정하시면 됩니다. </p>
<p><code>client/contents/post-lists.js</code></p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div><div class="line">25</div><div class="line">26</div><div class="line">27</div></pre></td><td class="code"><pre><div class="line">Template.postList.onCreated(function () &#123;</div><div class="line"></div><div class="line">.</div><div class="line">.</div><div class="line">.</div><div class="line">[중략]</div><div class="line">.</div><div class="line">.</div><div class="line">.</div><div class="line"></div><div class="line">  window.postCnt = new ReactiveVar(20);</div><div class="line"></div><div class="line">  var self = this;</div><div class="line">  var subs = new SubsManager(); // 추가 내용</div><div class="line"></div><div class="line">.</div><div class="line">.</div><div class="line">.</div><div class="line">[중략]</div><div class="line">.</div><div class="line">.</div><div class="line">.</div><div class="line"></div><div class="line"></div><div class="line">  self.autorun(function () &#123;</div><div class="line">    subs.subscribe(&apos;posts&apos;, postCnt.get()); // self를 subs로 변경</div><div class="line">  &#125;);</div></pre></td></tr></table></figure>
<p>자 이제 결과를 볼텐데요. 현재 subscriptions(구독) 되고 있는 내용을 보기 위해서 패키에 <code>msavin:mongol</code> 를 설치해서 구독 내용을 살펴보도록 하겠습니다. 참고로 <code>msavin:mongol</code> 패키지는 meteor디버그 툴로서 현재 화면에서 pub/sub 이 정상적으로 일어나고 있는지 collection을 모니터링 할 수 있는 툴입니다. 검색해보시면 이 툴에 대한 자세한 내용들을 쉽게 알 수 있을 것 입니다. 사용법은 브라우저에서 윈도우는 <code>ctrl + m</code> 맥은 <code>control + m</code> 를 입력하면 됩니다. </p>
<p>자 이제 다시 실행해 보겠습니다. 보시는 바와 같이 내용을 본 후 뒤로 가기를 해도 기존의 구독된 subscriptions이 초기화 되지 않는 것을 볼 수 있습니다 .</p>
<p><img src="https://lh3.googleusercontent.com/19Yt1pkvdJnFloj1IflNbYIut1krn0oNPTPJZflvyG_7GmaN-vqHf9eJk0ApAEoQMTUmLc6NV5saQwoUjbLjifx2QADAJPRC0XCZ-6Ed00RbRwBQ6AJjqXnxpgBKBMl7u2iWEBxgPvKUpTPXI3tA0kLVcoW9fNpv_-ZEYN-AxbkfSVquDcaPDn7dajHJj5wdhhu_SXw1uR7XV9aE-5WU9xqdE_r45qVQqA1GbQzirHpRWq7ZU3N--rr-nL5ieu8NNA5elqmWZdp-fLCuV-sydlSU5via7IAAODC6YQM33OlaY4MM4PzmSyCC5KpOy_TeJ8YSyVtiz-QNUKXdStOwGI2dUcUf1kcewTFBGpvvTanrzDrA-cAWDPhaomkQ8EfszmRzGg1Z3LmTAiB6ylhw8Jk966gXhr9tlpyqDdE7ItIRNRfEkeCsyZC7DppHo3OykQZQL7_3panX8loT6OmFvH2JCHvE6zszvIrHqKjdXEfTPwMesx6i22k8WyJjIC6rbj6Cz3dFb23kP2tZ4psJ2MJaE7AqPCU4iWsyvn_bg50qZFFKxRO3B1Syx5D7UXTW-bl45kQl1gTSnsX_QVjiWLFgFE3yw2fK1-cK9E73Zw0=w1143-h747-no"></p>
<p></p><p>[subs-manager 적용 화면]</p><p></p>
<p>다음으로 해결해야할 문제는 스크롤의 위치를 기억하는 것입니다. 이 문제 역시도 해결해줄 패키지가 있는데 <code>tomwasd:flow-router-autoscroll</code> 라는 패키지가 되겠습니다. 다음을 참고로 패키지만 설치하면 작동합니다. </p>
<blockquote>
<p>meteor add tomwasd:flow-router-autoscroll</p>
</blockquote>
<p>설치 후 실행을 시켜보면 다음과 같이 뒤로가기로 돌아와도 이전의 위치로 스크롤이 돌아온 것을 볼 수 있습니다. </p>
<p><img src="https://lh3.googleusercontent.com/lsTs5dk6_tNnSvEKNsLCCFCFn2eM32WhNpXG3peMvodTebRMPWqRFWtxB6OATnhjzYjGgaJaHZ0uVZJ0oJytHFlmODtLiDwx9BDf0xEWIsqvoRngGvQus31r-5esHYjNorjhnKwaViJyGRaSgh6ZL69TQiH24QJBTWUzL8Sy7c_k5zAbVF-IVhavpuqbZy626c3E12Mmbk3HIIJ8VmAa3nF_0Elh7vIFFCmn84rpK7fZkUTgQFNNKbilyGUz7p413x_UHzq2odAviCVeq2PJHnxukYSkb5Hc1EJeBkH0W_XzM8nPZndBE6HYaW_57VOdP16EPHcb2saxPzIJKGTV841PzXoy8c-txdEXeWcpc8oaam8tn540ppqx1xzpaOsRynwtkCMrWTVFq_2BIi1osDj6a7E7I1OnwqwXA5hpJDtxJ3WX3b79MmOzj5mVe4IE07ldZMxZjuEueHkCDCx7nkrR0adqEZELaueWUT4B1BrkYDycZE35PI_yb7C8o3__mKdPZ5N8Y_eN2jDYrtsWFx9zmsfhdzGwbNYjkZuE429zbVXwUQ4CGbnb1bwONGs8CyL07u3Kc3lqbq6ir7KSc49LdzdTujwfphA-tb-dhpA=w1143-h748-no"></p>
<p></p><p>[subs-manager 적용 화면]</p><p></p>
<p>하지만 여기서 끝은 아닙니다. 아직 문제가 완전히 해결되지 않았는데요. 바로 <code>postCnt</code>문제 입니다. 현재 캐쉬를 이용해 subscriptions(구독) 된 내용은 캐시되고 있지만, 문제는 이 상태에서 다시 다음페이지를 불러보면 <code>postCnt</code> 가 초기화 되어 있어 postCnt가 처음 로딩되는 20부터 ~ 다음페이지 까지 순차적으로 다시 로딩을 하는 심각한 문제가 있습니다.</p>
<p>이부분을 해결하기 위채 처음 생각한 방법은 페이지가 변경되면 url에 현재 post개수를 넣어준 다음 그것을 받아서 사용하면 되지 않을까 하고 생각했습니다. 하지만 이렇게 되면 페이지가 넘어갈 때마다 url이 변경되어 authscroll에 의해 계속해서 맨 위 페이지로 가버리는 현상이 발생했습니다. 그래서 이 방법은 아니란 결론이 들어 고민하다 발견한 해결방법은 autoscroll 패키지를 수정해서 사용하는 방법이 좋겠다는 결론을 내렸습니다. 실제로 autoscroll 패키지의 구조는 매우 단순한 형태입니다.<br>그럼 이제부터 어떻게 autoscroll을 수정할 지 알아보도록 하겠습니다. 우선 autoscroll을 이패키지를 삭제해 주세요. </p>
<blockquote>
<p>meteor remove tomwasd:flow-router-autoscroll</p>
</blockquote>
<p>그후에 다음 소스를 autoscroll.js 에 입력해주세요. 아래 소스는 조금 전 삭제한 low-router-autoscroll 내용이 되겠습니다. 이 소스의 핵심적인 기능은 <code>saveScrollPosition</code>, <code>scrollToTop</code> 두가지 함수가 되겠습니다. <code>saveScrollPosition</code>은 스크롤의 위치 (<code>$(window).scrollTop();</code>)를 저장하는 함수이고 <code>scrollToTop</code>는 리스트 페이지로 돌아왔을 때 저당된 스크롤의 위치로 보내주는 역할을 하는 함수입니다. 그리고 이 둘은 Flowrouter에서 제공되는 기능을 통해 필요한 때에 작동을 합니다.  <code>FlowRouter.triggers.exit</code>는 페이지를 나갈 때 그리고 <code>FlowRouter.triggers.enter</code> 는 페이지로 들어올 때 각각 함수들을 실행시켜 주는 역할을 한다고 생각하시면 되겠습니다. </p>
<p><code>client/autoscroll.js</code></p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div><div class="line">25</div><div class="line">26</div><div class="line">27</div><div class="line">28</div><div class="line">29</div><div class="line">30</div><div class="line">31</div><div class="line">32</div><div class="line">33</div><div class="line">34</div><div class="line">35</div><div class="line">36</div><div class="line">37</div><div class="line">38</div><div class="line">39</div><div class="line">40</div><div class="line">41</div><div class="line">42</div><div class="line">43</div><div class="line">44</div><div class="line">45</div><div class="line">46</div><div class="line">47</div></pre></td><td class="code"><pre><div class="line">(function () &#123;</div><div class="line"></div><div class="line">  FlowRouterAutoscroll = &#123;</div><div class="line">    animationDuration: 200,</div><div class="line">  &#125;;</div><div class="line">  </div><div class="line">  var scrollPositions = &#123;&#125;;</div><div class="line">  var backToPosition;</div><div class="line">  </div><div class="line">  // Keep track of the last position for every page in case we return to it</div><div class="line">  // via the back button or history.</div><div class="line">  var saveScrollPosition = function () &#123;</div><div class="line">    scrollPositions[window.location] = $(window).scrollTop();</div><div class="line">  &#125;;</div><div class="line">  </div><div class="line">  window.onpopstate = function(event) &#123;</div><div class="line">    // We used the back button, find the position we were at on that page</div><div class="line">    // last time</div><div class="line">    backToPosition = scrollPositions[window.location];</div><div class="line">  &#125;;</div><div class="line">  </div><div class="line">  // Scroll to the right place after changing routes. &quot;The right place&quot; is:</div><div class="line">  // 1. The previous position if we&apos;re returning via the back button</div><div class="line">  // 2. The top of page otherwise</div><div class="line">  var scrollToTop = function () &#123;</div><div class="line">    // defer until after the DOM update so that the position can be correct</div><div class="line">    Tracker.afterFlush(function () &#123;</div><div class="line">      var position;</div><div class="line">  </div><div class="line">      if (backToPosition) &#123;</div><div class="line">        position = backToPosition;</div><div class="line">        backToPosition = null;</div><div class="line">      &#125;</div><div class="line">      else &#123;</div><div class="line">        position = 0;</div><div class="line">      &#125;</div><div class="line">  </div><div class="line">      $(&apos;body,html&apos;).animate(&#123;</div><div class="line">        scrollTop: position</div><div class="line">      &#125;, FlowRouterAutoscroll.animationDuration);</div><div class="line">    &#125;);</div><div class="line">  &#125;;</div><div class="line">  </div><div class="line">  FlowRouter.triggers.exit([saveScrollPosition]);</div><div class="line">  FlowRouter.triggers.enter([scrollToTop]);</div><div class="line">  </div><div class="line">&#125;).call(this);</div></pre></td></tr></table></figure>
<p>이제 위의 소스를 다음과 같이 변경해 보겠습니다. 우선 postCnt에 대한 ReactiveVar  선언을 autoscroll.js에서 해줍니다. 그리고 post-lists.js 에 있는 <code>window.postCnt = new ReactiveVar(20);</code> 이부분은 삭제해 주겠습니다. 페이지를 나갈 때 <code>FlowRouter.triggers.exit([saveScrollPosition]);</code> 에 기존에는 스크롤의 위치만 저장하는 형태이지만 이제 postCnt도 함께 저장하도록 소스를 변경했습니다. 이제 <code>saveScrollPosition</code> 함수를 호출하면 scrollPosion과 postCnt(로드될 포스트 수) 두가지가 저장되게 됩니다. 마찬가지로  <code>scrollToTop</code> 함수가 실행될 때는 스크롤 위치를 불러 이동시켜 주는 것과 동시에 <code>postCnt(로드될 포스트 수)</code> 도 그대로 세팅되게 됩니다. 아래를 참고로 이전 소스를 수정해 주세요.</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div><div class="line">25</div><div class="line">26</div><div class="line">27</div><div class="line">28</div><div class="line">29</div><div class="line">30</div><div class="line">31</div><div class="line">32</div><div class="line">33</div><div class="line">34</div><div class="line">35</div><div class="line">36</div><div class="line">37</div><div class="line">38</div><div class="line">39</div><div class="line">40</div><div class="line">41</div><div class="line">42</div><div class="line">43</div><div class="line">44</div><div class="line">45</div><div class="line">46</div><div class="line">47</div><div class="line">48</div><div class="line">49</div><div class="line">50</div><div class="line">51</div><div class="line">52</div><div class="line">53</div></pre></td><td class="code"><pre><div class="line"></div><div class="line">(function () &#123;</div><div class="line"></div><div class="line">  window.postCnt = new ReactiveVar();  </div><div class="line"></div><div class="line">  var scrollPositions;</div><div class="line">  var backToPosition; </div><div class="line"></div><div class="line">  var postCntGet;  </div><div class="line">  var backToPage; </div><div class="line"></div><div class="line">  var saveScrollPosition = function () &#123;</div><div class="line"></div><div class="line">    scrollPositions = $(window).scrollTop(); </div><div class="line">    postCntGet = postCnt.get(); </div><div class="line">  &#125;;</div><div class="line"></div><div class="line">  window.onpopstate = function(event) &#123;</div><div class="line">    backToPosition = scrollPositions;</div><div class="line">    backToPage = postCntGet;  </div><div class="line">  &#125;;</div><div class="line"></div><div class="line">  var scrollToTop = function () &#123;</div><div class="line"></div><div class="line">    Tracker.afterFlush(function () &#123;</div><div class="line">      var position;</div><div class="line"></div><div class="line">      if (backToPosition) &#123;</div><div class="line">        position = backToPosition;</div><div class="line">        backToPosition = null;</div><div class="line">      &#125;</div><div class="line">      else &#123;</div><div class="line">        position = 0;</div><div class="line">      &#125;</div><div class="line"></div><div class="line">      if(postCntGet)</div><div class="line">      &#123;</div><div class="line">        postCnt.set(postCntGet);</div><div class="line">      &#125;</div><div class="line">      else &#123;</div><div class="line">        postCnt.set(20);</div><div class="line">      &#125;</div><div class="line"></div><div class="line">      $(&apos;body,html&apos;).animate(&#123;</div><div class="line">        scrollTop: position</div><div class="line">      &#125;, 1);</div><div class="line">    &#125;);</div><div class="line">  &#125;;</div><div class="line"></div><div class="line">  FlowRouter.triggers.exit([saveScrollPosition]);</div><div class="line">  FlowRouter.triggers.enter([scrollToTop]);</div><div class="line"></div><div class="line">&#125;).call(this);</div></pre></td></tr></table></figure>
<p>자 이제 결과를 실행해 보겠습니다. 그러면 다음과 같이 스크롤을 이용해 페이지를 내리다, 내용을 보고 다시 돌아와도 이전까지의 데이터는 물론 스크롤 위치도 기억해 이동시켜 준 것을 볼 수 있을 것입니다. </p>
<p><img src="https://lh3.googleusercontent.com/uJ7ivOgvakCJ8dCXQaKRIZ9PGsp7r71-Dl7JUV-DFAyt9KN9We3Bf4Yd8WPIlFKNJumNa6vOqU4CHTIvA4mvRYFplOdMUcBX6EeEa6R0L6LeRn3cntDJrJ85wPAXOhlKPstykYr-XVahCXliqNQxq9h9olCHeuUI6WIlS2t4dBvJivnfTNYhXxsvxuqWkqSuOgAHKBheQjETJ-wMwG0vkVnzVRC990XR8J_LqKGHZkRy4wkHUYMkiSQdNE_wi8ROXUSOkN7L071M22W43k54-XUfku7XdiELLGAFwCsufG-mXCvipWl4nBUomXGyjIFkNEZCVlofjeed8itzBhPzyVNI5e_VnsWpAcavgqv6x8_GpQJ67aP6UliYfsiu9LxDiu8vgUBKjfie7z1z9gcj6RGc8bEvFDErEmQ85geamnBqy4zaNgjTUt9SZ50HkaKDrM9HzbsEZAPiQPgQwcUCiER2Hjdb6jUcganxW2OToyW5FC4MTuseWcFAbA8HWCfQEQqwEPR-tugeNSzLg4AUgwf3rHHBaA01R6Yc-b81UC0ODVSyswT_soyw89H9IM4Vp7-zQI9XRdmIG4ovPtHMbM7bFDAxw_bAP9jRrFO4Uho=w1230-h803-no"></p>
<p>[최종 결과물]</p>
<p>참 별거 아닌것 같은 기능이지만, 이 기능에 대한 구현 정보가 많지 않은 것도 사실일 것입니다. (혹은 제가 검색을 지지리도 못하거나 ㅠㅠ) 혹시 이부분에 대해서 고민하는 분이 있으시다면 조금이나마 도움이 되시면 좋겠네요.</p>
<p>다음 강좌는 언제라고 말씀드리긴 그렇지만, 그때는 조금더 기본부터 실용예제까지 차근차근 작성해볼까 생각중에 있습니다. 아마도 blaze가 아닌 vue를 사용힐 할 것 같기도 합니다. </p>
<p>그럼 다음에 또 만나요 ^^</p>
<blockquote>
<p>소스코드 링크<br><a href="https://github.com/freeseamew/meteor-infinit-scroll" target="_blank" rel="noopener">https://github.com/freeseamew/meteor-infinit-scroll</a></p>
</blockquote>
]]></content>
    
    <summary type="html">
    
      &lt;h3 id=&quot;5-무한스크롤의-문제점-및-해결방법&quot;&gt;&lt;a href=&quot;#5-무한스크롤의-문제점-및-해결방법&quot; class=&quot;headerlink&quot; title=&quot;5. 무한스크롤의 문제점 및 해결방법&quot;&gt;&lt;/a&gt;5. 무한스크롤의 문제점 및 해결방법&lt;/h3&gt;&lt;h4
    
    </summary>
    
    
      <category term="meteor, inifinit scroll, history back" scheme="http://freeseamew.github.io/tags/meteor-inifinit-scroll-history-back/"/>
    
  </entry>
  
  <entry>
    <title>Meteor custom account 강좌 5</title>
    <link href="http://freeseamew.github.io/2017/07/04/meteor-account-tutorial-5/"/>
    <id>http://freeseamew.github.io/2017/07/04/meteor-account-tutorial-5/</id>
    <published>2017-07-03T15:45:03.000Z</published>
    <updated>2017-07-05T02:47:37.000Z</updated>
    
    <content type="html"><![CDATA[<h3 id="8-다른-서비스-api를-통한-로그인-facebook-google-twitter-kakao"><a href="#8-다른-서비스-api를-통한-로그인-facebook-google-twitter-kakao" class="headerlink" title="8. 다른 서비스 api를 통한 로그인(facebook, google, twitter, kakao)"></a>8. 다른 서비스 api를 통한 로그인(facebook, google, twitter, kakao)</h3><p>이제 meteor 사용자 정의 계정(coustom account) 강좌의 마지막 챕터에 대해서 설명드리도록 하겠습니다. 이챕터에서는 각종 SNS 및 외부 서비스를 통한 로그인 연동을  구현해보도록 하겠습니다. 저번 강좌에도 조금 말씀드렸지만 이 강좌를 한번 써볼까 라고 생각한 것이 이 외부 서비스 연동을 테스트 해보면서 였습니다. 처음에 조금 헤매이기는 했지만, 몇몇 세팅만 익히면 이런 외부 소셜 로그인이 척척 붙어서 작동하는 모습은 정말 Meteor라는 플랫폼이 주는 생산성이 무엇인지를 잘 보여준다고 생각됩니다. 일단 facebook부터 연동을 해볼 텐데요. 나머지 기능들은 이 facebook API 인증과 거의 같은 구조라고 보시면 되겠습니다.<br>그럼 이제 시작해 보겠습니다. ^^</p>
<h4 id="8-1-facebook-API-인증"><a href="#8-1-facebook-API-인증" class="headerlink" title="8.1. facebook API 인증"></a>8.1. facebook API 인증</h4><p>처음으로 연동해볼 API는 facebook이 되겠습니다. 우선 페이스북 개발자센터(developers.facebook.com/apps) 에 앱을 등록해 주셔야 합니다. 그리고 여기서 여기서 <code>앱ID, 앱 시크릿 코드</code>를 사용해 진행되니 따로 기록해 두시면 좋습니다.</p>
<p><img src="https://lh3.googleusercontent.com/UM9PMs8UzOhmmvIKMLRIPu5mbF6NKUcvAwCy8KiimdTTfBjs_bUVM-_6yeNYIrb6HwmYpfDdjuxjwRjQomDUO9tRjy_fAYU-CiWIYrhKLLbIGKyCFQSjBXVFw1IyUOC0M0bKTDGHNr0gxstCkV6WrYiNGPJtCbvtOTowEFQwDFXVXCQf2HugCJCxdR5YjiwKIYh0dI26lrXbjguaNy6aJ-MSBAyBHujH0C1ZX4kb3sU4M5y9jop4zkobD1ytvGxcgBItHkUsSHA3LS-MC6_ThEnE-UQh5zLPEG3-QvRaC_vimsoeYEmBDxIETfY-LxgnMRU2TF39_wBGnA_4KV3gtlNCmQlYdwxWeBL6AY1Myo1nLbHnjzdYBseXx1D7Ng_99mP1MxJWmEu4uKJ26_3eYLqr79AoHELbuqHqD8Jtfg-vvWPPSkMwFWhdhT3LQjM4N0I6xgqVeLXD1SFI9JdZRv0HMFbFXv927EieesB5lKfqh6AMVD5VV2x-i1JSUxEGNupGO6RixjxbxXCUqlbJ3814xwIIJOX8uSpzcKso2UmEfpxySs8TQyuK_lzi1SfMsH1-b-Cwgd97s4EH4Ku6kJUysrciCjTr_ZQe1eW9OhojLgNx9vtcMJ-byhEH7FN4qbjrQjpNO1Hq8IsfgrnTk3lg3-sY21RH7mHjK4Do1nM=w1177-h554-no"></p>
<p>다음으로 다음 패키지를 설치해야 합니다. <code>service-configuration</code>는 위에서 말씀드린 앱ID나 시크릿키 등을 등록하는 것을 조금 편하게 해주는 config가 되겠습니다. 다음으로 <code>accounts-facebook</code>는 facebook api를 사용할 수 있게 해주는 패키지가 되겠습니다. </p>
<blockquote>
<p>설치 패키지 </p>
<ul>
<li>meteor add service-configuration</li>
<li>meteor add accounts-facebook</li>
</ul>
</blockquote>
<p>처음으로 할일은 다음을 참고하여 사용할 서비스의 키를 등록하는 것입니다. <code>Meteor.startup(function() {}</code> 부분의 <code>페이스북 옵션</code>을 작성해주시면 되겠습니다. 여기서 <code>appId</code>는 개발자 페이지의 <code>앱 ID</code>를 <code>secret</code>은 <code>앱 시크릿 코드</code> 를 입력해 주시면 되겠습니다. </p>
<p><code>server/main.js</code></p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div></pre></td><td class="code"><pre><div class="line"></div><div class="line">// Set up login services</div><div class="line">Meteor.startup(function() &#123;</div><div class="line"></div><div class="line">  // 페이스북 옵션 </div><div class="line">  ServiceConfiguration.configurations.remove(&#123;</div><div class="line">    service: &quot;facebook&quot;</div><div class="line">  &#125;);</div><div class="line">  ServiceConfiguration.configurations.insert(&#123;</div><div class="line">    service: &quot;facebook&quot;,</div><div class="line">    appId: &apos;발급받은 앱 ID&apos;,</div><div class="line">    secret: &apos;발급받은 앱 시크릿 코드&apos;</div><div class="line">  &#125;);</div><div class="line"></div><div class="line"></div><div class="line">  Accounts.config(&#123;</div><div class="line">    loginExpirationInDays: 1,</div><div class="line"></div><div class="line">[아래 생략]</div><div class="line">.</div><div class="line">.</div><div class="line">.</div><div class="line"></div><div class="line">&#125;);</div></pre></td></tr></table></figure>
<p>이제 실제 액션을 통해서 페이스북 로그인이 일어나도록 만들어 보겠습니다. <code>login.js</code>에 아래 소스를 참고로 <code>&#39;click button[name=facebook]&#39; (evt, tmpl){}</code> 부분에 대한 부분을 입력해 주세요. 클릭을 하면 <code>Meteor.loginWithFacebook(function(err)</code> 을 호출하게 됩니다. 간단하죠 ^^</p>
<p><code>client/login.js</code></p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div><div class="line">25</div><div class="line">26</div><div class="line">27</div><div class="line">28</div><div class="line">29</div><div class="line">30</div><div class="line">31</div></pre></td><td class="code"><pre><div class="line"></div><div class="line">Template.login.events(&#123;</div><div class="line">  &apos;click button[name=btn-singIn]&apos; (evt, tmpl)</div><div class="line">  &#123;</div><div class="line">.</div><div class="line">.</div><div class="line">.</div><div class="line">[중략]</div><div class="line">.</div><div class="line">.</div><div class="line">.</div><div class="line">    return false;</div><div class="line"></div><div class="line">  &#125;,</div><div class="line">  &apos;click button[name=facebook]&apos; (evt, tmpl)</div><div class="line">  &#123;</div><div class="line">    evt.preventDefault();</div><div class="line">    Meteor.loginWithFacebook(function(err)</div><div class="line">    &#123;</div><div class="line">      if(!err)</div><div class="line">      &#123;</div><div class="line">        FlowRouter.go(&apos;/&apos;);</div><div class="line">        console.log(currentUser);</div><div class="line">      &#125;</div><div class="line">      else</div><div class="line">      &#123;</div><div class="line">        console.log(err);</div><div class="line">        Bert.alert( err , &apos;danger&apos;, &apos;growl-top-right&apos; );</div><div class="line">      &#125;</div><div class="line">    &#125;);</div><div class="line">  &#125;</div></pre></td></tr></table></figure>
<p>마지막은 페이스북에서 가입 정보를 받아와 넣어주는 것입니다. 실제로 가입아이디(email) 등은 기본 user 객체에 저장되지만 그 외의 정보(성, 이름, 성별 등등)과 같은 정보의 경우 user.profile 객체 아래에 정리해 두면 됩니다. 참고로 각 서비스 별로 넘겨주는 가입자 정보는 다릅니다. 그래서 사이트에 맞게 정리해 주셔야만 합니다. facebook의 경우 <code>first_name</code>으로 넘어오는 값이 google은 <code>given_name</code> 으로 넘어 오는 것을 볼 수 있습니다. 각각의 서비스에서 제공하는 API가 어떤 형태로 개발자 문서 등을 통해서 꼭 확인하시고 필요한 값들을 정의해 사용하시면 되겠습니다. </p>
<p><code>server/accounts.js</code></p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div><div class="line">25</div><div class="line">26</div><div class="line">27</div><div class="line">28</div><div class="line">29</div></pre></td><td class="code"><pre><div class="line"></div><div class="line">//기타서비스(facebook 등) 으로 로그인시 profile정보를 따로 입력해줘야 함.</div><div class="line">Accounts.onCreateUser(function (options, user) &#123;</div><div class="line"></div><div class="line"></div><div class="line">  user.profile = options.profile;// 이렇게 안해주면 profile이 없는 상태로 가입됨...</div><div class="line"></div><div class="line">  // facebook profile 설정</div><div class="line">  if(user.services.facebook)</div><div class="line">  &#123;</div><div class="line">    user.username = user.services.facebook.email;</div><div class="line">    user.emails = [</div><div class="line">      &#123;</div><div class="line">        address: user.services.facebook.email,</div><div class="line">        verified: true</div><div class="line">      &#125;</div><div class="line">    ];</div><div class="line">    user.profile.serviceType = &apos;facebook&apos;;</div><div class="line">    user.profile.firstName = user.services.facebook.first_name;</div><div class="line">    user.profile.lastName = user.services.facebook.last_name;</div><div class="line">    user.profile.gender = user.services.facebook.gender;</div><div class="line">  &#125;</div><div class="line"></div><div class="line">    </div><div class="line">  [아래 생략]</div><div class="line">  Meteor.setTimeout(function() &#123; </div><div class="line">  .</div><div class="line">  .</div><div class="line">  .</div></pre></td></tr></table></figure>
<blockquote>
<p>참고로 로그인 성공시 기본으로 제공되는 값들은 각 로그인 콜랙션의 services 아래에서 확인이 가능합니다. 이 부분을 가공해서 profile에 정형화 해서 저장하는 작업이 아래 코드 입니다. </p>
</blockquote>
<p><img src="https://lh3.googleusercontent.com/Ki2vXLqBrnp1ON6KkcSMQ5FZqwBDg9k3Ugq7JAh-UH-AckKI8VV6_bty6zlTSuUGyHF7sTApS5GX3-Tt8ZAu45OmRVpsdpPAVGiWPvKXyzwIOXlbXc6MuyXxR_ngfi__ZVnU3oO9sNMiLvz0f4SYVtIjMywr9-i8EgTD23222Mr_f5dfPv9R5Vk9pnQ_QKSx7rMco0e0omdT0tVUiDlylBv0BY36oLCFmX5cejLtbY_9mUUVmlukWK7w-29hynEbp45wYJVij85bdzCchCrxExnT_zM8n-gEE6w71h4s--9x2Nh3pbnKRpmP-BECDjmYutGUcLJQUQXNC7HvF0-U8puney9W3B5UQ0se_Cyb9GMg9C_ANGhNe6lEZ9NzG5djM3XhknduhpzxsTdqSvYF6_-KqIEl_9R-RhINQXfExyYBbCrlhxSy6vMmpxvqtq3pn1oTvt28gUBBJPmqNVhK_NGDjAS9hHrkt-z2jTbDuBdA-nDpLWRUyZ4KQIOm4S-0AxvA9MQgT-9YlLS5c_ytNUv1KPilcy5O1gc5P428wGJQf536xwRw1Uq2ugbfXyYM1ppXZxnr55S7lzP0_0HgPM3I8YSDvggIW7FGv1MQ-TiwO6A8190XtCPukxC7sK540_4yWSqznNdbgMJRzeQqsUIqFidWKSwyqFsKEWqDuvY=w1154-h721-no"></p>
<p>이제 페이스북버튼을 클릭해 보겠습니다. 정상적으로  <code>Meteor.loginWithFacebook</code>가 작동하여 팝업창이 뜨고 정확한 정보로 로그인을 하면 정상적으로 로그인 되는 것을 볼 수 있습니다. </p>
<p>이 과정을 요약하면 아래와 같습니다. </p>
<blockquote>
<p>1단계. 연동할 서비스의 개발자 센터에서 서비스 등록 후 키값 받기<br>2단계. ServiceConfiguration.configurations에 키 등록<br>3단계. 소셜 버튼 클릭시 Meteor.loginWithFacebook() 호출<br>4단계. Accounts.onCreateUser()시 user.profile 에 사용자 정보 입력</p>
</blockquote>
<p>나머지도 위의 4가지 과정을 똑같이 반복하면 됩니다. 그럼 나머지 서비스도 연동해보도록 하겠습니다. </p>
<hr>
<h4 id="8-2-google-API-인증"><a href="#8-2-google-API-인증" class="headerlink" title="8.2. google API 인증"></a>8.2. google API 인증</h4><p>구글도 개발자 센터(<a href="https://console.cloud.google.com/)에" target="_blank" rel="noopener">https://console.cloud.google.com/)에</a> 가입하고 프로젝트를 만든 다음 키 값을 받아오면 됩니다. <code>클라이언트 ID</code>와 <code>클라이언트 보안 비밀</code>이 사용됩니다. google의 경우 <code>google cloud platform</code> 에서 <code>API 관리자</code>로 들어가 발급을 할 수 있는데요. 먼가 좀 경로가 복잡하긴 하니 아래 이미지를 참고로 위치를 찾아가시면 도움이 되실 것 같습니다. </p>
<p><img src="https://lh3.googleusercontent.com/23qwTQPXXLJChBYUiSiU61d6IYCwGz7GQy44IdHkusqsg79aCgmuIC0brIZAJQq2qCdJx8Q_0pfAVrcxjDT8I--ziNFiV6neFHqyNBKJ8HGSXajDYrUdQy_tsUvOVUJ2kLmGJ39fzoBvO6iCcbC9szhhs5VI7GSvKGzk1XuOYgpEA40yI6z-IjISy8CEvpVRBFXGsZV7TNtjijzhR4wfGK_v472qQSr2SMTccoe2RHLZyJcuiqK-BhHtv_3VghRwbx604ucj4RM9Nxo2dLcG-kAwDzmUOaxi_YHRrDLhyojZxzlc7MZ9woxtfeToYYEq6cnM9o6P0HempaE4cwAkyj1DLBIda67dJnvfGgWnsrPtADdXsMano39CyrNk88ZkT4U4ul7c-A7GQL-90qv5TsfK9PkCkrVHn1oTh-CxyJ5eV_TvsqcRDXfWVnVEcPbgQDKTl2FFkxTEssSR2g32PnQqlFQ1itIfy0q5ddJ2ZymxFhYlseIqzb-sQ7fUNDedGHMQB5A62QG2cJKNWRmf7_wdcX79-IHrcVpEND9rHwmAIp3HoNoo2p3QPVXTiIHZXhbWlgcSkeAjNjKmgXcjRnCMbNgapogxhiu9Ic4C0cayze2jJonz8Gx4f2R4sAlPldqTVpMUdlwTJudXRmTtHGuDQqBOj4080ptf8Mh-vyM=w1191-h766-no"></p>
<p>다음 패키지를 설치해주세요.</p>
<blockquote>
<p>설치 패키지<br>meteor add accounts-google</p>
</blockquote>
<p>다음은 <code>main.js</code> configuration에 개발자 센터에서 받은 키 값을 등록 합니다. </p>
<p><code>server/main.js</code></p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div><div class="line">25</div><div class="line">26</div><div class="line">27</div><div class="line">28</div><div class="line">29</div><div class="line">30</div></pre></td><td class="code"><pre><div class="line">// Set up login services</div><div class="line">Meteor.startup(function() &#123;</div><div class="line"></div><div class="line">  ServiceConfiguration.configurations.remove(&#123;</div><div class="line">    service: &quot;facebook&quot;</div><div class="line">.</div><div class="line">.</div><div class="line">.</div><div class="line">[위 생략]</div><div class="line"></div><div class="line">  // google 인증 API 설정</div><div class="line">  ServiceConfiguration.configurations.remove(&#123;</div><div class="line">    service: &quot;google&quot;</div><div class="line">  &#125;);</div><div class="line">  ServiceConfiguration.configurations.insert(&#123;</div><div class="line">    service: &quot;google&quot;,</div><div class="line">    clientId: &quot;발급받은 클라이언트 ID&quot;,</div><div class="line">    secret: &apos;발급받은 클라이언트 보안 비밀&apos;,</div><div class="line">    loginStyle: &quot;popup&quot;</div><div class="line">  &#125;);</div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line">  Accounts.config(&#123;</div><div class="line">    loginExpirationInDays: 1,</div><div class="line"></div><div class="line">[아래 생략]</div><div class="line">.</div><div class="line">.</div><div class="line">.</div></pre></td></tr></table></figure>
<p>로그인 페이지에서 <code>google</code>버튼을 클릭하면 로그인이 진행되도록 아래 코드를 입력합니다. </p>
<p><code>clinet/login.js</code></p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div><div class="line">25</div><div class="line">26</div><div class="line">27</div><div class="line">28</div><div class="line">29</div><div class="line">30</div><div class="line">31</div><div class="line">32</div><div class="line">33</div><div class="line">34</div><div class="line">35</div></pre></td><td class="code"><pre><div class="line"></div><div class="line">Template.login.events(&#123;</div><div class="line">  &apos;click button[name=btn-singIn]&apos; (evt, tmpl)</div><div class="line">  &#123;</div><div class="line">.</div><div class="line">.</div><div class="line">.</div><div class="line">[중략]</div><div class="line">.</div><div class="line">.</div><div class="line">.</div><div class="line">    return false;</div><div class="line"></div><div class="line">  &#125;,</div><div class="line">  &apos;click button[name=facebook]&apos; (evt, tmpl)</div><div class="line">  &#123;</div><div class="line">  ...[중략]</div><div class="line">  &#125;,</div><div class="line">  // google 로그인 클릭 추가 </div><div class="line">  &apos;click button[name=google]&apos; (evt, tmpl)</div><div class="line">  &#123;</div><div class="line">    evt.preventDefault();</div><div class="line">    Meteor.loginWithGoogle(function(err)</div><div class="line">    &#123;</div><div class="line">      if(!err)</div><div class="line">      &#123;</div><div class="line">        FlowRouter.go(&apos;/&apos;);</div><div class="line">      &#125;</div><div class="line">      else</div><div class="line">      &#123;</div><div class="line">        console.log(err);</div><div class="line">        Bert.alert( err , &apos;danger&apos;, &apos;growl-top-right&apos; );</div><div class="line">      &#125;</div><div class="line">    &#125;);</div><div class="line">  &#125;</div></pre></td></tr></table></figure>
<p>google로 부터 받아온 값을 profile에 등록하는 설정을 해줍니다. </p>
<p><code>server/accounts.js</code></p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div><div class="line">25</div><div class="line">26</div><div class="line">27</div><div class="line">28</div><div class="line">29</div><div class="line">30</div><div class="line">31</div><div class="line">32</div><div class="line">33</div><div class="line">34</div><div class="line">35</div></pre></td><td class="code"><pre><div class="line"></div><div class="line">//기타서비스(facebook) 으로 로긴시 profile정보를 따로 입력해줘야 한다.</div><div class="line">Accounts.onCreateUser(function (options, user) &#123;</div><div class="line"></div><div class="line"></div><div class="line">  user.profile = options.profile;// 이렇게 안해주면 profile이 없는 상태로 가입됨...</div><div class="line"></div><div class="line">  // facebook profile 설정</div><div class="line">  if(user.services.facebook)</div><div class="line">  &#123;</div><div class="line">  ...[중략]</div><div class="line">  &#125;</div><div class="line"></div><div class="line">  // google profile 설정</div><div class="line">  if(user.services.google)</div><div class="line">  &#123;</div><div class="line">    user.emails = [</div><div class="line">      &#123;</div><div class="line">        address: user.services.google.email,</div><div class="line">        verified: true</div><div class="line">      &#125;</div><div class="line">    ];</div><div class="line">    user.profile.serviceType = &apos;google&apos;;</div><div class="line">    user.username = user.services.google.name;</div><div class="line">    user.profile.firstName = user.services.google.given_name;</div><div class="line">    user.profile.lastName = user.services.google.family_name;</div><div class="line">    user.profile.gender = user.services.google.gender;</div><div class="line">  &#125;</div><div class="line"></div><div class="line">  </div><div class="line">  [아래 생략]</div><div class="line">  Meteor.setTimeout(function() &#123; </div><div class="line">  .</div><div class="line">  .</div><div class="line">  .</div></pre></td></tr></table></figure>
<p>자이제 google로도 로그인 해보세요. 문제가 없다면 정상적으로 로그인 로그인 되는 것을 볼 수 있을 것입니다. </p>
<hr>
<h4 id="8-3-twitter-API-인증"><a href="#8-3-twitter-API-인증" class="headerlink" title="8.3. twitter API 인증"></a>8.3. twitter API 인증</h4><p>다음은 twitter 입니다. 과정은 역시 비슷합니다. </p>
<p>처음으로 할일은 개발자 사이트에서 키 값을 받는것 입니다. 트위터에서 사용하는 값들은 <code>Consumer Key(API Key)</code>와 <code>Consumer Secret(API Secret)</code>가 되겠습니다. </p>
<p><img src="https://lh3.googleusercontent.com/6XwhCbtcCFEA3Uy0eYJBD9wt7cdxpnEmZSDZ4fGrrJa1mhD9SDGpNk1Hkxjxh1Qo0N0-3_EdR5g39Ib4fIwJCwEWIr_cpHOidoKYayXiC_5Mv-xBy_sqMSinmoQcHs2VNOHlYUytuDbO_naeMnKBFPLGyXBLAmGRD-2lRQhbmw4TiQ_ukBf3MXOERLVYj0KQ6ohDEwQ5_OCJ3DYOWKxbJ-5zILkeAy4FMdixm7ZStAqdg8Q6IODFznd_UJx2QnyLxp408P6KOdzLB4P3wcdVWNsqXW__A8yRu7kdLzQXupiIwDsisk_YbcXv4CpbGWjeYiW093-olxptPDX8TvxU0vY9Orm-reRaLZgeCHqAISI7txNoYqg4v-7FuwQS_20PqrCtu0CLs-wj_t4qchBSL8gDDUr9ANHDqFJGgu6dfiy3j12KlARwYHl0_4e4qCENbjZmlY5tNzwEf-vpZaiSljaN9wGD7ZYz-Gu_qCKIoVhPuB09hpwFbfxtsTdkxdZliOOQDLZulRn3LPyjW6Qh6AhWo28q7AGZC6XNwQCs-sDJVUIeeLDRJzSvcmTIs2jkTy9OfA_fPnwaqZa2pmMxnlsf90CQ-lsAdaS1K1byHeRXjkOAi9kVzxy6T3XoO5N3JOdp9lcopdUYvpECu2wp-Immz6dnNM1sxbVFORWPSqk=w621-h677-no"></p>
<p>다음 패키지를 설치해주세요.</p>
<blockquote>
<p>설치 패키지<br>meteor add accounts-twitter</p>
</blockquote>
<p>다음은 <code>main.js</code> configuration에 개발자 센터에서 받은 키 값을 등록 합니다. </p>
<p><code>server/main.js</code></p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div><div class="line">25</div><div class="line">26</div><div class="line">27</div><div class="line">28</div></pre></td><td class="code"><pre><div class="line">// Set up login services</div><div class="line">Meteor.startup(function() &#123;</div><div class="line"></div><div class="line">  ServiceConfiguration.configurations.remove(&#123;</div><div class="line">    service: &quot;facebook&quot;</div><div class="line">.</div><div class="line">.</div><div class="line">.</div><div class="line">[위 생략]</div><div class="line"></div><div class="line">  // twitter 인증 API 설정</div><div class="line">  ServiceConfiguration.configurations.remove(&#123;</div><div class="line">    service: &quot;twitter&quot;</div><div class="line">  &#125;);</div><div class="line">  ServiceConfiguration.configurations.insert(&#123;</div><div class="line">    service: &quot;twitter&quot;,</div><div class="line">    consumerKey: &quot;발급받은 consumer Key,</div><div class="line">    loginStyle: &quot;popup&quot;,</div><div class="line">    secret: &quot;발급받은 consumer secret&quot;</div><div class="line">  &#125;);</div><div class="line"></div><div class="line"></div><div class="line">[아래 생략]</div><div class="line">.</div><div class="line">.</div><div class="line">.</div><div class="line">  Accounts.config(&#123;</div><div class="line">    loginExpirationInDays: 1,</div></pre></td></tr></table></figure>
<p>로그인 페이지에서 <code>twitter</code>버튼을 클릭하면 로그인이 진행되도록 아래 코드를 입력합니다. </p>
<p><code>clinet/login.js</code></p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div><div class="line">25</div><div class="line">26</div><div class="line">27</div><div class="line">28</div><div class="line">29</div><div class="line">30</div><div class="line">31</div><div class="line">32</div><div class="line">33</div><div class="line">34</div><div class="line">35</div></pre></td><td class="code"><pre><div class="line"></div><div class="line">Template.login.events(&#123;</div><div class="line">  &apos;click button[name=btn-singIn]&apos; (evt, tmpl)</div><div class="line">  &#123;</div><div class="line">.</div><div class="line">.</div><div class="line">.</div><div class="line">[중략]</div><div class="line">.</div><div class="line">.</div><div class="line">.</div><div class="line">    return false;</div><div class="line"></div><div class="line">  &#125;,</div><div class="line">  &apos;click button[name=facebook]&apos; (evt, tmpl)</div><div class="line">  &#123;</div><div class="line">  ...[중략]</div><div class="line">  &#125;,</div><div class="line">  // twitter 로그인 클릭 추가 </div><div class="line">  &apos;click button[name=twitter]&apos; (evt, tmpl)</div><div class="line">  &#123;</div><div class="line">    evt.preventDefault();</div><div class="line">    Meteor.loginWithTwitter(function(err)</div><div class="line">    &#123;</div><div class="line">      if(!err)</div><div class="line">      &#123;</div><div class="line">        FlowRouter.go(&apos;/&apos;);</div><div class="line">      &#125;</div><div class="line">      else</div><div class="line">      &#123;</div><div class="line">        console.log(err);</div><div class="line">        Bert.alert( err , &apos;danger&apos;, &apos;growl-top-right&apos; );</div><div class="line">      &#125;</div><div class="line">    &#125;);</div><div class="line">  &#125;</div></pre></td></tr></table></figure>
<p>twitter 부터 받아온 값을 profile에 등록하는 설정을 해줍니다. </p>
<p><code>server/accounts.js</code></p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div><div class="line">25</div><div class="line">26</div><div class="line">27</div><div class="line">28</div><div class="line">29</div><div class="line">30</div><div class="line">31</div><div class="line">32</div><div class="line">33</div><div class="line">34</div><div class="line">35</div><div class="line">36</div></pre></td><td class="code"><pre><div class="line"></div><div class="line">//기타서비스(facebook) 으로 로긴시 profile정보를 따로 입력해줘야 한다.</div><div class="line">Accounts.onCreateUser(function (options, user) &#123;</div><div class="line"></div><div class="line"></div><div class="line">  user.profile = options.profile;// 이렇게 안해주면 profile이 없는 상태로 가입됨...</div><div class="line"></div><div class="line">  // facebook profile 설정</div><div class="line">  if(user.services.facebook)</div><div class="line">  &#123;</div><div class="line">  ...[중략]</div><div class="line">  &#125;</div><div class="line"></div><div class="line">  // google profile 설정</div><div class="line">  // twitter profile 설정</div><div class="line">  if(user.services.twitter)</div><div class="line">  &#123;</div><div class="line">    user.emails = [</div><div class="line">      &#123;</div><div class="line">        address: &apos;none&apos;,</div><div class="line">        verified: true</div><div class="line">      &#125;</div><div class="line">    ];</div><div class="line">    user.profile.serviceType = &apos;twitter&apos;;</div><div class="line">    user.username = user.services.twitter.screenName;</div><div class="line">    user.profile.firstName = user.services.twitter.screenName;</div><div class="line">    user.profile.lastName = &apos;none&apos;;</div><div class="line">    user.profile.gender = &apos;&apos;;</div><div class="line">  &#125;</div><div class="line"></div><div class="line"></div><div class="line">  [아래 생략]</div><div class="line">  Meteor.setTimeout(function() &#123; </div><div class="line">  .</div><div class="line">  .</div><div class="line">  .</div></pre></td></tr></table></figure>
<p>자이제 twitter로도 로그인 해보세요. 문제가 없다면 정상적으로 로그인 로그인 되는 것을 볼 수 있을 것입니다. </p>
<hr>
<h4 id="8-4-kakao-API-인증"><a href="#8-4-kakao-API-인증" class="headerlink" title="8.4. kakao API 인증"></a>8.4. kakao API 인증</h4><p>이제 마지막으로 kakao API연동을 해보겠습니다. 한국에서 많이 사용하는 kakao의 경우 한국 개발자 분이 패키지를 만들어 둔 상태입니다. 덕분에 kakao도 쉽게 연동할 수 있습니다. ^^</p>
<p>처음으로 할일은 개발자 사이트에서 키 값을 받는것 입니다. kakao에서 사용하는 값들은 <code>REST API키</code>가 되겠습니다. 한가지 아쉬운 점은 현재 패키지의 경우 Client Secret설정을 활성화 하면 작동을 안한다는 점입니다. 그래서 다른 서비스와 다르게 secret을 아직까지 사용할 수 없습니다. </p>
<p><img src="https://lh3.googleusercontent.com/z-kvzGozLx5iekATs1eIHFocQAftXp4rIOelJGQqQSUlw_iz3w_wGq9Gdvfyb6koGIqvgO707d-akKyCZOc39-thoK-LPXmZPVDHy47w1oowsyEiv1N62C9aDWeHVaswmjXTz1jueNRebVgmsry0Dg_yPSZZw5Lk0JGjCMA6NHDiuSXi2NP5aFf57tm35zbjm_twhGA41k6wN0Ow68xaDoA6Vi7TnNp_ilpXatP2tcqqMB13k1nRBQT4HUk5MwJVPgRH4BNExejE9tx727G_j9YUX41jDnEIJmUjawJK7jTf7gkuF571ZlXYd8L53boLWr0gcSt6-9ivFPjwnEBgu81ViAbC0Ocprud63tGIe804VPFMO136_pjR5A3NEQL-9RVXIuYVl24x8V-jD4dgGYUCm0WoQ6tg44Ei-UJzfu7JmsxG0156mgtBMp0UhTrgkKr2TdLebUEboZWYivHiWJ82pi0f_2ob2nubDloyp2SvXAFPEBiIvBIG2QXt6xIKJ0JX32H2sIv-W5GuzX8FZY1bWUK42jaCQ34EG5z9yndxbP9a0dlY8CYWnNTr_VkbNQBTuv9e1jcS8q3DaEGoGBXnCkw3X5fPwKFHsCsg8SS6QZBJMDnp5Cj6Mwe5MaUAKBfwle0yszt9MeH7rEWJV8zCX-P5IQv1PurNkqV3WgM=w873-h721-no"></p>
<p>다음 패키지를 설치해주세요.</p>
<blockquote>
<p>설치 패키지<br>meteor add spectrum:accounts-kakao</p>
</blockquote>
<p>다음은 <code>main.js</code> configuration에 개발자 센터에서 받은 키 값을 등록 합니다. </p>
<p><code>server/main.js</code></p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div><div class="line">25</div><div class="line">26</div><div class="line">27</div></pre></td><td class="code"><pre><div class="line">// Set up login services</div><div class="line">Meteor.startup(function() &#123;</div><div class="line"></div><div class="line">  ServiceConfiguration.configurations.remove(&#123;</div><div class="line">    service: &quot;facebook&quot;</div><div class="line">.</div><div class="line">.</div><div class="line">.</div><div class="line">[위 생략]</div><div class="line"></div><div class="line">  // kakao 인증 API 설정</div><div class="line">  ServiceConfiguration.configurations.remove(&#123;</div><div class="line">    service: &quot;kakao&quot;</div><div class="line">  &#125;);</div><div class="line">  ServiceConfiguration.configurations.insert(&#123;</div><div class="line">    service: &quot;kakao&quot;,</div><div class="line">    clientId: &quot;발급받은 REST API 키&quot;,</div><div class="line">    loginStyle: &quot;popup&quot;</div><div class="line">  &#125;);</div><div class="line"></div><div class="line"></div><div class="line">[아래 생략]</div><div class="line">.</div><div class="line">.</div><div class="line">.</div><div class="line">  Accounts.config(&#123;</div><div class="line">    loginExpirationInDays: 1,</div></pre></td></tr></table></figure>
<p>로그인 페이지에서 <code>kakao</code>버튼을 클릭하면 로그인이 진행되도록 아래 코드를 입력합니다. </p>
<p><code>clinet/login.js</code></p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div><div class="line">25</div><div class="line">26</div><div class="line">27</div><div class="line">28</div><div class="line">29</div><div class="line">30</div><div class="line">31</div><div class="line">32</div><div class="line">33</div><div class="line">34</div><div class="line">35</div></pre></td><td class="code"><pre><div class="line"></div><div class="line">Template.login.events(&#123;</div><div class="line">  &apos;click button[name=btn-singIn]&apos; (evt, tmpl)</div><div class="line">  &#123;</div><div class="line">.</div><div class="line">.</div><div class="line">.</div><div class="line">[중략]</div><div class="line">.</div><div class="line">.</div><div class="line">.</div><div class="line">    return false;</div><div class="line"></div><div class="line">  &#125;,</div><div class="line">  &apos;click button[name=facebook]&apos; (evt, tmpl)</div><div class="line">  &#123;</div><div class="line">  ...[중략]</div><div class="line">  &#125;,</div><div class="line">  // kakao 로그인 클릭 추가 </div><div class="line">  &apos;click button[name=kakao]&apos; (evt, tmpl)</div><div class="line">  &#123;</div><div class="line">    evt.preventDefault();</div><div class="line">    Meteor.loginWithKakao(function(err)</div><div class="line">    &#123;</div><div class="line">      if(!err)</div><div class="line">      &#123;</div><div class="line">        FlowRouter.go(&apos;/&apos;);</div><div class="line">      &#125;</div><div class="line">      else</div><div class="line">      &#123;</div><div class="line">        console.log(err);</div><div class="line">        Bert.alert( err , &apos;danger&apos;, &apos;growl-top-right&apos; );</div><div class="line">      &#125;</div><div class="line">    &#125;);</div><div class="line">  &#125;</div></pre></td></tr></table></figure>
<p>kakao로부터 받아온 값을 profile에 등록하는 설정을 해줍니다. </p>
<p><code>server/accounts.js</code></p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div><div class="line">25</div><div class="line">26</div><div class="line">27</div><div class="line">28</div><div class="line">29</div><div class="line">30</div><div class="line">31</div><div class="line">32</div><div class="line">33</div></pre></td><td class="code"><pre><div class="line"></div><div class="line">//기타서비스(facebook) 으로 로긴시 profile정보를 따로 입력해줘야 한다.</div><div class="line">Accounts.onCreateUser(function (options, user) &#123;</div><div class="line"></div><div class="line"></div><div class="line">  user.profile = options.profile;// 이렇게 안해주면 profile이 없는 상태로 가입됨...</div><div class="line"></div><div class="line">  // facebook profile 설정</div><div class="line">  if(user.services.facebook)</div><div class="line">  &#123;</div><div class="line">  ...[중략]</div><div class="line">  &#125;</div><div class="line"></div><div class="line">  // kakap profile 설정</div><div class="line">  if(user.services.kakao)</div><div class="line">  &#123;</div><div class="line">    user.emails = [</div><div class="line">      &#123;</div><div class="line">        address: &apos;none&apos;,</div><div class="line">        verified: true</div><div class="line">      &#125;</div><div class="line">    ];</div><div class="line">    user.profile.serviceType = &apos;kakao&apos;;</div><div class="line">    user.username = user.profile.name;</div><div class="line">    user.profile.gender = &apos;&apos;;</div><div class="line">  &#125;</div><div class="line"></div><div class="line"></div><div class="line">  [아래 생략]</div><div class="line">  Meteor.setTimeout(function() &#123; </div><div class="line">  .</div><div class="line">  .</div><div class="line">  .</div></pre></td></tr></table></figure>
<p>이제 kakao로도 로그인 해보세요. 문제가 없다면 정상적으로 로그인 로그인 되는 것을 볼 수 있을 것입니다. kakao의 경우 api로 받을 수 있는 부분이 매우 제한적인 것을 볼 수 있습니다. 이부분은 개발자 페이지에서 따로 사용자가 정의 하여 항목을 늘릴 수 있으니 이부분은 kakao 개발자 페이지를 참고하여 개발하시면 될 것 같습니다. </p>
<hr>
<h3 id="9-기타-사항"><a href="#9-기타-사항" class="headerlink" title="9. 기타 사항"></a>9. 기타 사항</h3><p>사실 Meteor를 이용해 개발을 할 경우 강좌에서와 같이 버튼 하나하나를 만들어 사용하지 않아도 됩니다. 기본적으로 제공하는 account를 이용하면 다음 패키지를 추가 하는 것으로 회원가입 로그인 등의 많은 기능을 바로 사용할 수도 있습니다. 패키지 추가 후 템플릿에 아래와 같이 <code>loginButtons</code> 만 추가하면 됩니다.</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">&#123;&#123;&gt; loginButtons&#125;&#125;</div></pre></td></tr></table></figure>
<blockquote>
<p>설치 패키지</p>
<ul>
<li>meteor add accounts-ui</li>
</ul>
</blockquote>
<p>이부분에 대한 문서는 아래 링크 페이지에 나와있으니 참고 하시면 되겠습니다. </p>
<p><a href="https://guide.meteor.com/accounts.html" target="_blank" rel="noopener">https://guide.meteor.com/accounts.html</a></p>
<hr>
<p>이상으로 Meteor custom account 관련 강좌를 마치겠습니다. Meteor 초보 개발자 분들에게 조금이나마 도움이 되었으면 좋겠네요. 개인적으로 느낀 meteor의 가장 큰 매력은 아마도 생산성이 아닐까 생각합니다. 이미 다양한 패키지(강좌에서는 facebook, google 등 다양한 서비스의 인증 연동)를 바로 사용할 수 있고, 백앤드와 프론트앤드를 동시에 개발 할 수 있으며, 심지어 프론트엔드의 빌드머신? 으로 사용하시는 분들도 있는 것으로 알고 있습니다. 하지만 아직 국내에는 meteor를 사용하는 사람이 그리 많지 않아 참 많이 아쉽다는 생각이 듭니다. 여튼 제 부족한 강좌가 조금이나마 meteor에 대한 호기심을 자극한다면 개인적으로 만족할 것 같습니다. 조만간 다른 강좌를 통해서 또 뵙겠습니다. ^^ </p>
<blockquote>
<p>소스코드 링크<br><a href="https://github.com/freeseamew/meteorAccount-study" target="_blank" rel="noopener">https://github.com/freeseamew/meteorAccount-study</a></p>
</blockquote>
]]></content>
    
    <summary type="html">
    
      &lt;h3 id=&quot;8-다른-서비스-api를-통한-로그인-facebook-google-twitter-kakao&quot;&gt;&lt;a href=&quot;#8-다른-서비스-api를-통한-로그인-facebook-google-twitter-kakao&quot; class=&quot;headerlink&quot;
    
    </summary>
    
    
      <category term="meteor, custom account, 미티어" scheme="http://freeseamew.github.io/tags/meteor-custom-account-%EB%AF%B8%ED%8B%B0%EC%96%B4/"/>
    
  </entry>
  
  <entry>
    <title>Meteor custom account 강좌 4</title>
    <link href="http://freeseamew.github.io/2017/07/04/meteor-account-tutorial-4/"/>
    <id>http://freeseamew.github.io/2017/07/04/meteor-account-tutorial-4/</id>
    <published>2017-07-03T15:44:53.000Z</published>
    <updated>2017-07-04T02:49:28.000Z</updated>
    
    <content type="html"><![CDATA[<h3 id="7-화면전환-효과"><a href="#7-화면전환-효과" class="headerlink" title="7. 화면전환 효과"></a>7. 화면전환 효과</h3><p>Meteor 인증(account) 관련 강좌를 더 진행하기 전에 현재만들어진 기능을 조금 보완해 보도록 하겠습니다.<br>router로 원하는 페이지로 이동이 되고 있지만, 좀 더 있어보이게(?) 화면전환 효과를 넣어보겠고, 또 메일발송 때 화면이 정지한것 처럼 몇초간 아무런 액션이 없는 부분에 로딩효과를 넣어보도록 하겠습니다. 사실 이런 부분들은 꼭 있어야 하는 부분은 아니지만, 먼가 앱의 완성도를 높이기위해서는 적용해두는 것이 좋은 것도 사실일 것입니다.<br>강좌 중간에 이런 효과적인 부분을 넣는 이유는 앞으로 남은 부분에도 위의 효과 관련 기능은 계속해서 들어갈 것이기 때문에 여기서 미리 작성하는 것이 소스 코드를 2번 고치지 않게 될 것 같아서 입니다. </p>
<hr>
<h4 id="7-1-애니메이션-효과"><a href="#7-1-애니메이션-효과" class="headerlink" title="7.1 애니메이션 효과"></a>7.1 애니메이션 효과</h4><p>일단 다음 패키지를 설치해주세요. 이 패키지는 Meteor에서 다양한 애니메이션 효과를 낼 수 있도록 해주는 패키지 입니다.</p>
<blockquote>
<p>설치패키지</p>
<ul>
<li>meteor add webtempest:animate</li>
</ul>
</blockquote>
<p>사실 이 패키지에서 사용된 코드는 아래의 애니메이션 프레임워크를 Meteor에서 쉽게 사용할 수 있도록 만든 패키지가 되겠습니다. 아래 링크페이지로 가시면 사용할 수 있는 효과들을 볼 수 있습니다. </p>
<ul>
<li><a href="https://daneden.github.io/animate.css/" target="_blank" rel="noopener">https://daneden.github.io/animate.css/</a></li>
</ul>
<p>사용법은 아래와 같습니다. 효과를 나타내고자 할 요소를 <code>#transition</code> 로 감싸주기만 하면 됩니다.  참 쉽죠? ^^</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div></pre></td><td class="code"><pre><div class="line">&#123;&#123;#transition in=&quot;나타날때효과:효과시간&quot; out=&quot;사라질때효과:효과시간&quot;&#125;&#125;</div><div class="line">  &#123;&#123;&gt; yield&#125;&#125;</div><div class="line">&#123;&#123;/transition&#125;&#125;</div></pre></td></tr></table></figure>
<p>그리고 지금 만들고 있는 account예제의 경우 사실 페이지가 몇개 되지 않지만, 지금보다 훨씬 많은 페이지로 이루어진 서비스의 경우 각 페이지마다 효과를 준다면 약간 귀찮을 것입니다. 그래서 우리의 화면전환 효과는 <code>mainLayout</code> 템플릿만에만 줄 것입니다. 이곳에만 주면, 특별한 상황이 아닌이상, 모든 페이지가 나타날때 효과가 적용되는 것을 볼 수 있을 것입니다. <code>main-layout.html</code> 페이지를 아래와 같이 변경해주세요.</p>
<p><code>client/main-layout.html</code></p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div></pre></td><td class="code"><pre><div class="line">&lt;template name=&quot;mainLayout&quot;&gt;</div><div class="line">  &lt;div class=&quot;container&quot;&gt;</div><div class="line">    &#123;&#123;#transition in=&quot;fadeIn:500&quot; out=&quot;fadeOut:500&quot;&#125;&#125;</div><div class="line">      &#123;&#123;&gt; Template.dynamic template=content &#125;&#125;</div><div class="line">    &#123;&#123;/transition&#125;&#125;</div><div class="line">  &lt;/div&gt;</div><div class="line">&lt;/template&gt;</div></pre></td></tr></table></figure>
<p>이제 실행을 시켜보면 화면이 부드럽게 전환되는 것을 볼 수 있습니다. </p>
<h4 id="7-2-로딩-효과"><a href="#7-2-로딩-효과" class="headerlink" title="7.2 로딩 효과"></a>7.2 로딩 효과</h4><p>다음은 로딩효과에 대해서 설명드릴 텐데요. 현재 우리가 만들고 있는 페이지에서 로딩 효과가 실제로 필요한 부분은 가입메일 보내기 부분 정도가 될 것입니다. 이중에서도 가입메일 다시보내기 부분의 경우가 2~3초 정도의 딜레이가 생길 수 있어 이때 로딩효과를 주는 것으로 페이지를 좀 더 완성도 있게 보일 수 있을 것으로 생각됩니다. </p>
<p>로딩효과에 사용된 Meteor의 api는 <code>reactive-var</code> 라는 것입니다. 이녀석에 대해서만으로 한챕터 정도 강좌가 필요하겠지만 일단은 간단하게만 설명드리도록 하겠습니다. </p>
<blockquote>
<p><code>reactive-var</code>는 일종의 센서 함수? 라고 보면 될 것 같은데요. 다시말에 어떤 값의 변화를 감지하는 역할을 하는 API라고 보시면 되겠습니다.  <code>reactive-var</code>에 특정 상태를 정의해 두고, 이 상태가 변경될 경우 <code>reactive-var</code>가 작동하게 되는데요. 실제 화재감지 센서에서 열이 감지되면 센서가 스프링 쿨러를 작동시켜 주는 머 그런 기능을 하듯(다른 분께서 이렇게 설명 하신 것을 기억합니다.) <code>reactive-var</code>도 거의 비슷한 역할을 한다고 이해하면 될 것 같습니다. </p>
</blockquote>
<p><code>public/images/</code> 폴더를 만들고, 로딩이미지를 git 페이지에서 다운받아 복사해주세요.</p>
<p>그리고 main-layout.js에 다음과 같이 <code>mainLoading</code> 템플릿을 입력해주세요. 또 mainLayout 템플릿도 아래 소스를 참고로 <code>#if showLoadingEffectLoad</code> 라는 조건문을 하나 추가하겠습니다. </p>
<p><code>client/main-layout.html</code></p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div></pre></td><td class="code"><pre><div class="line">&lt;template name=&quot;mainLayout&quot;&gt; </div><div class="line">  &#123;&#123;#if showLoadingEffectLoad&#125;&#125; &lt;!-- 추가된 조건문 --&gt;</div><div class="line">    &#123;&#123;#transition in=&quot;fadeIn:500&quot; out=&quot;fadeOut:500&quot;&#125;&#125;</div><div class="line">      &#123;&#123;&gt; mainLoading&#125;&#125;</div><div class="line">    &#123;&#123;/transition&#125;&#125;</div><div class="line">  &#123;&#123;/if&#125;&#125;</div><div class="line">  &lt;div class=&quot;container&quot;&gt;</div><div class="line">    &#123;&#123;#transition in=&quot;fadeIn:500&quot; out=&quot;fadeOut:500&quot;&#125;&#125;</div><div class="line">      &#123;&#123;&gt; Template.dynamic template=content &#125;&#125;</div><div class="line">    &#123;&#123;/transition&#125;&#125;</div><div class="line">  &lt;/div&gt;</div><div class="line">&lt;/template&gt;</div><div class="line"></div><div class="line">&lt;template name=&quot;mainLoading&quot;&gt; &lt;!-- 추가된 템플릿 --&gt;</div><div class="line">  &lt;div class=&quot;table y100 text_center bg-main&quot;&gt;</div><div class="line">    &lt;div class=&quot;table-cell py4&quot;&gt;</div><div class="line">      &lt;img src=&quot;images/loading-spinning-bubbles.svg&quot; width=&quot;64&quot; height=&quot;64&quot; /&gt;</div><div class="line">      &lt;h1 class=&quot;h1 mt2 mb0&quot;&gt;Now loading...&lt;/h1&gt;</div><div class="line">    &lt;/div&gt;</div><div class="line">  &lt;/div&gt;</div><div class="line">&lt;/template&gt;</div></pre></td></tr></table></figure>
<p>이제 이 <code>mainLoading</code> 템플릿이 잘 작동하도록 만들어 보도록 하겠습니다.<br>우선은 <code>showLoadingEffect</code> 이라는 값을 정의를 해야 하는데, 이것은 mainLayout 템플릿이 생성될 때 하도록 해주면 되겠습니다. 참고로 이 객체를 <code>window.showLoadingEffect</code>게 만들어 사용하는 이유는 전역으로 해야만 다른 템플릿에서도 이 객체를 사용할 수 있기 때문입니다. 기본값은 false로 정의 하겠습니다.<br>그리고 이 객체를 템플릿 즉 html에서 사용하기 위해서는 helpers에서 불러 줘야 사용이 가능하니 아래 처럼 <code>Template.mainLayout.helpers</code> 에 리턴을 해주면 되겠습니다.<br>이렇게 해두면 최상위 페이지인 main-layout 아래의 모든 페이지는 첫 화면이 뜰 때 기본적으로 <code>showLoadingEffect</code> 가 true가 되고, 따라서 <code>mainLoading</code> 템플릿이 활성화 되는 구조를 가지게 됩니다. </p>
<p><code>client/main-layout.js</code></p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div></pre></td><td class="code"><pre><div class="line">Template.mainLayout.onCreated(function()&#123;</div><div class="line"></div><div class="line">  // ReactiveVar의 경우 다른 탬플릿에서 사용하기 위해서는 window를 써 전역으로 만들어 줘야만 한다.</div><div class="line">  window.showLoadingEffect = new ReactiveVar(false);</div><div class="line">&#125;);</div><div class="line"></div><div class="line">Template.mainLayout.helpers(&#123;</div><div class="line"></div><div class="line">  showLoadingEffectLoad: function ()</div><div class="line">  &#123;</div><div class="line">    return showLoadingEffect.get();</div><div class="line">  &#125;</div><div class="line">&#125;);</div></pre></td></tr></table></figure>
<p>reactive-var 는 일종의 센서? 같은 역할을 한다고 설명드렸습니다. 그럼 이 센서(?)가 어떻게 작동하는지 이제부터 알아보도록 하겠습니다. </p>
<p>이제 모든 클라이언트 페이지에서 ‘showLoadingEffect.set(true);’ 이 set된 값을 true로 하면 <code>&lt;template name=&quot;mainLoading&quot;&gt;&lt;/template&gt;</code>이 보여지고, false로 해주면 이 템플릿이 사라지는 원리입니다.</p>
<p>우선 우리가 만든 페이지 login.html, register.html 페이지에 적용해 페이지가 뜰 때 로딩효과가 나타나도록 해보겠습니다.<br>다음 소스는 현재 사용하고 있는 <code>login.js</code> 페이지에  conCreated와 onRendered 라는 라이프 사이클 함수를 추가한 내용입니다. onCreated 될 때 <code>showLoadingEffect.set(true);</code> 를 작동시키면 기본적으로 로딩 페이지가 보여지게 됩니다. 그리고 onRendered 일때 <code>showLoadingEffect.set(false);</code> 를 해주면 로딩 화면이 사라지게 사라지게 됩니다. 사라질 때는 바로 false를 해버리면 로딩 효과가 너무 빨리 사라지므로 Meteor.setTimeout을 이용해 약간의 딜레이를 주는 것이 좋을 것 같아 아래와 같이 적용했습니다. </p>
<p><code>client/login.js</code></p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div></pre></td><td class="code"><pre><div class="line"></div><div class="line">Template.login.onCreated(function () &#123;</div><div class="line">  showLoadingEffect.set(true);</div><div class="line">&#125;);</div><div class="line"></div><div class="line">Template.login.onRendered(function () &#123;</div><div class="line"></div><div class="line">  Meteor.setTimeout(function() &#123;</div><div class="line">    showLoadingEffect.set(false);</div><div class="line">  &#125;, 2 * 200);</div><div class="line"></div><div class="line">&#125;);</div><div class="line"></div><div class="line">[아래 생략]</div><div class="line">.</div><div class="line">.</div><div class="line">.</div></pre></td></tr></table></figure>
<p>같은 원리로 로딩 효과를 주고 싶은 다른 페이지에도 conCreated와 onRendered 일 때 위의 소스를 넣어주면 로딩 화면 후에 페이지가 보여지게 됩니다. </p>
<p><img src="https://lh3.googleusercontent.com/K89HeEI5NwNcDQmf0lIV9XViNutCV3Fg6pzdR-LAYA_0YeiKKEFqxB_ay4ULaaynSIptxrHfd4_RY5VsJMuTb-HJc8vRQrL2TA4xCFErqjNQPPcYylzqMwbY3jOdRUFI2XnH5xUhNHFZs12BxgNqXXnL7_2yL3ggbAEpiBd0SPuVKs5V3RRbtx4z_hCkvT7eyL-7GVLQApjjH02GS4nGnhx7qmrqQrVaVhjq579hqa69hDBgkhGjFL0KMbhis8ZK2Ykd-5t6qc7e0f6XFafTnJyxrkcq_sS2V9-qYZ61pB0naeHnEeSquerwY-SClQFSPH-EzU18ZCx_R8G_YxYiXNxzzc2M7al7wVFHwH5DY5-CkgMQrIlIszEUDE3WmNzXrJQgkyjkXBnCB13yHBWAbLmH_r5mzVTvHDKuC2zeNhAtg8g9mwW4mDLoRf61FjhFVaTKYldhkk89AoGoUSd15-64f_d8FLIwu5SjbykeL26YkaCobXHXop5qIuH1fG40IminMSQ4JNEuLXXdywVoT0BBZN5TZXctVc5uZXLbR-jXE3RHN2UFTX2UsVzW6H4GcYzo8xI5CmVznjVzLVl3HJ-gbnDfmVuYt_fJr1g0o5oM3OeisoRDdFc-93_SznFKfNBRDPwZDlwSu_KGfyNJ6mwJnTDaCcweLRcYr-U48z8=w518-h336-no"></p><p style="text-align: center;">[로딩화면]</p><p></p>
<p>다음으로 이 효과를 단순히 화면이 변경될 때 주는 것이 아닌 위에서도 말했지만, 인증메일 재발송 같이 정지 화면으로 2~3초 이상 있어야 하는 페이지에 주는 방법을 설명드리도록 하겠습니다. 사실 적용 방법은 위의 내용과 거의 같습니다. </p>
<p><code>client/home.js</code><br><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div><div class="line">25</div><div class="line">26</div><div class="line">27</div><div class="line">28</div></pre></td><td class="code"><pre><div class="line">Template.home.events(&#123;</div><div class="line">  &apos;click button[name=btn-logout]&apos; (vet, tmpl)</div><div class="line">  &#123;</div><div class="line">    event.preventDefault();</div><div class="line">    Meteor.logout();</div><div class="line">  &#125;,</div><div class="line">  &apos;click button[name=resend-verification-link]&apos; ( event, template ) &#123;</div><div class="line"></div><div class="line">    showLoadingEffect.set(true); // 로딩효과 추가</div><div class="line"></div><div class="line">    let user = Meteor.userId();</div><div class="line"></div><div class="line">    Meteor.call( &apos;sendVerificationLink&apos;, user, ( error, response ) =&gt; &#123;</div><div class="line">      if ( error ) &#123;</div><div class="line">        showLoadingEffect.set(false); // 로딩효과 추가</div><div class="line">        Bert.alert( error.reason, &apos;danger&apos; );</div><div class="line">      &#125;</div><div class="line">      else</div><div class="line">      &#123;</div><div class="line"></div><div class="line"></div><div class="line">        showLoadingEffect.set(false);</div><div class="line">        let email = Meteor.user().emails[ 0 ].address;</div><div class="line">        Bert.alert( `Verification sent to $&#123; email &#125;!`, &apos;success&apos; );</div><div class="line">      &#125;</div><div class="line">    &#125;);</div><div class="line">  &#125;</div><div class="line">&#125;);</div></pre></td></tr></table></figure></p>
<p>메일 재발송 버튼이<code>&#39;click button[name=resend-verification-link]&#39;</code> 클릭되면 <code>showLoadingEffect.set(true);</code> 를 줘서 로딩 화면이 나타나게 해줍니다. 그리고  <code>sendVerificationLink</code> 메소드가 실행되고, 완료되는 타이밍(정상실행이던 오류가 났던)에 <code>showLoadingEffect.set(false);</code> 이 세팅을 해주면 끝입니다. 이제 메일 발송후 몇초간의 타이밍에 이용자가 기다려야 한다는 것을 직관적으로 인지할 수 있는 구조가 되었습니다. </p>
<p><img src="https://lh3.googleusercontent.com/ikmevgfSRK3ENk_Q6Aqjt1By-2ZSi1kkPpfcAr6Zajew3Yqg988lqseg4Rx5kUdyahLCo4OcQrohCmwg5-l6nIya_nxfL9AmLx4th6XqwXWIJOId8CEzcU6OyNB_KgriN_iIyaZQEvWtpMVR1T2qvfQwf3BLpw76N0Qa5VByPnYR-EiFlacsU-9RAd_ISDu-uwIAfHuEaLNBGpIJPPfi0Bpbuwf3yRAFEWT24qHMGad2c81EHC-sRY7HVYm_GpNqFx9pf312tI6tvZIJ51ZAeCZynGtRo7YyQwa4hl5AE6gApVpw7_McpF_i-ZD7BI3m-8GGJ32iqs2U_6QMhLyg-S033WrL_ZP3y1DyPrHgG4OuVu9B2FXJSH_PQNEucVmz42Ro_MdETC9ncVwIEqdwrNvharb0R3ROWVeuiAc1KLoNAnFOOllrIShRzV-D8d7LvwwRkalLO1_CB2ykqgClMeTmJxNRj1O5qWRL7m_uAytfUHYT_5Rzbi-MrsEtvR1eZfSYh_U0_oS4KnLkTgo5YZVtsGJTRwU2ccyOVOcdz7-7GUVLZwXvUvLEYN6rnCp69q4oRYKVrNygY8vaOt6I_9MxtfK57yzClzJC_MgX3H-K9lGeXf7yBqxp3uqmqdnfWZWQsK22dz6iNbRJxgfS2U2I2q6lZcUi2b-ix86uxYw=w806-h528-no"></p>
<p>이상으로 <code>ReactiveVar</code>를 이용한 Meteor로딩에 대해서 알아봤습니다. <code>ReactiveVar</code>는 이를 응용하면 다양한 부분에 활용이 가능한 신기한 Meteor의 기능입니다. 다양한 부분에서 편리하게 이용해 보셔도 좋을 것 같습니다.<br>그럼 다음 시간에 account 강좌를 마무리 해보도록 하겠습니다.  </p>
]]></content>
    
    <summary type="html">
    
      &lt;h3 id=&quot;7-화면전환-효과&quot;&gt;&lt;a href=&quot;#7-화면전환-효과&quot; class=&quot;headerlink&quot; title=&quot;7. 화면전환 효과&quot;&gt;&lt;/a&gt;7. 화면전환 효과&lt;/h3&gt;&lt;p&gt;Meteor 인증(account) 관련 강좌를 더 진행하기 전에 현재만들
    
    </summary>
    
    
      <category term="meteor, custom account, 미티어" scheme="http://freeseamew.github.io/tags/meteor-custom-account-%EB%AF%B8%ED%8B%B0%EC%96%B4/"/>
    
  </entry>
  
  <entry>
    <title>Meteor custom account 강좌 3</title>
    <link href="http://freeseamew.github.io/2017/07/04/meteor-account-tutorial-3/"/>
    <id>http://freeseamew.github.io/2017/07/04/meteor-account-tutorial-3/</id>
    <published>2017-07-03T15:41:36.000Z</published>
    <updated>2017-07-03T15:42:28.000Z</updated>
    
    <content type="html"><![CDATA[<h3 id="6-비밀번호-변경-및-재발급"><a href="#6-비밀번호-변경-및-재발급" class="headerlink" title="6. 비밀번호 변경 및 재발급"></a>6. 비밀번호 변경 및 재발급</h3><h4 id="6-1-비밀번호-변경"><a href="#6-1-비밀번호-변경" class="headerlink" title="6.1 비밀번호 변경"></a>6.1 비밀번호 변경</h4><p>이제 기본적으로 회원가입, 로그인, 로그아웃에 대한 기능들은 모두 만들었습니다. 다음은 비밀번호 찾기 및 재발급에 대한 기능을 추가해 보겠습니다.<br>아래는 비밀번호 변경 html 파일소스입니다. 기존비번, 새비번, 새비번 확인의 3가지  텍스트 박스로 구성된 폼 입니다. </p>
<p><code>client/change-password.html</code></p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div><div class="line">25</div></pre></td><td class="code"><pre><div class="line">&lt;template name=&quot;changePassword&quot;&gt;</div><div class="line">  &lt;div class=&quot;panel panel-default col-md-6 col-md-offset-3  panel-custom&quot;&gt;</div><div class="line">    &lt;div class=&quot;panel-heading text_center&quot;&gt;</div><div class="line">      &lt;a href=&quot;&#123;&#123;pathFor &apos;/&apos;&#125;&#125;&quot;&gt;&lt;h2&gt;METEOR ACCOUNTS&lt;/h2&gt;&lt;/a&gt;</div><div class="line">      &lt;p&gt;비밀번호 변경&lt;/p&gt;</div><div class="line">    &lt;/div&gt;</div><div class="line">    &lt;div class=&quot;panel-body panel-body-set&quot;&gt;</div><div class="line"></div><div class="line">      &lt;form class=&quot;col-md-12 panel-body-inner&quot;&gt;</div><div class="line">        &lt;div class=&quot;form-group&quot;&gt;</div><div class="line">          &lt;input type=&quot;text&quot; id=&quot;old-password&quot;  class=&quot;form-control account-text-form-1&quot; placeholder=&quot;기존 비밀번호&quot;&gt;</div><div class="line">        &lt;/div&gt;</div><div class="line">        &lt;div class=&quot;form-group&quot;&gt;</div><div class="line">          &lt;input type=&quot;text&quot; id=&quot;new-password&quot;  class=&quot;form-control account-text-form-1&quot; placeholder=&quot;새 비밀번호&quot;&gt;</div><div class="line">        &lt;/div&gt;</div><div class="line">        &lt;div class=&quot;form-group&quot;&gt;</div><div class="line">          &lt;input type=&quot;text&quot; id=&quot;new-password-confirm&quot; class=&quot;form-control account-text-form-1&quot; placeholder=&quot;새 비밀번호 확인&quot;&gt;</div><div class="line">        &lt;/div&gt;</div><div class="line">      &lt;/form&gt;</div><div class="line">      &lt;div class=&quot;form-group panel-body-inner bottom-padding&quot;&gt;</div><div class="line">        &lt;button name=&quot;change-password&quot; class=&quot;btn btn-danger btn-lg btn-block button&quot;&gt;비밀번호 변경&lt;/button&gt;</div><div class="line">      &lt;/div&gt;</div><div class="line">    &lt;/div&gt;</div><div class="line">  &lt;/div&gt;</div><div class="line">&lt;/template&gt;</div></pre></td></tr></table></figure>
<p>다음은 이 폼이 실제로 실행될 자바스크립트 파일입니다. 지금까지와의 소스와 조금 다른 점이 있다면 패스워드 변경 api인 <code>Accounts.changePassword</code>이 클라이언트 측에서 실행된다는 점입니다. 그래서 폼검증을 서버가 아닌 클라이언트에서 실행시켜 주는 것을 볼 수 있습니다. 이전 강좌에서도 말했듯 <code>lib</code> 폴더의 있는 소스는 클라이언트와 서버 모두에서 사용 가능하다는 것을 다시한번 확인 할 수 있습니다. </p>
<p><code>client/change-password.js</code></p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div><div class="line">25</div><div class="line">26</div><div class="line">27</div><div class="line">28</div><div class="line">29</div><div class="line">30</div><div class="line">31</div><div class="line">32</div><div class="line">33</div><div class="line">34</div><div class="line">35</div><div class="line">36</div><div class="line">37</div><div class="line">38</div><div class="line">39</div><div class="line">40</div><div class="line">41</div><div class="line">42</div><div class="line">43</div><div class="line">44</div><div class="line">45</div><div class="line">46</div><div class="line">47</div><div class="line">48</div><div class="line">49</div><div class="line">50</div><div class="line">51</div><div class="line">52</div><div class="line">53</div><div class="line">54</div></pre></td><td class="code"><pre><div class="line"></div><div class="line">Template.changePassword.events(&#123;</div><div class="line">  &apos;click button[name=change-password]&apos; (evt, tmpl)</div><div class="line">  &#123;</div><div class="line"></div><div class="line">    evt.preventDefault(); //새로 고침 방지</div><div class="line"></div><div class="line">    var oldPassword = tmpl.find(&apos;#old-password&apos;).value;</div><div class="line">    var newPassword = tmpl.find(&apos;#new-password&apos;).value;</div><div class="line">    var newPasswordConfirm = tmpl.find(&apos;#new-password-confirm&apos;).value;</div><div class="line"></div><div class="line"></div><div class="line">    try</div><div class="line">    &#123;</div><div class="line">      NotEmptyString(oldPassword);</div><div class="line">      NotEmptyString(newPassword);</div><div class="line">      NotEmptyString(newPasswordConfirm);</div><div class="line">      isValidPassword(newPassword);</div><div class="line">      isMatchPassword(newPassword, newPasswordConfirm);</div><div class="line">    &#125;</div><div class="line">    catch(err)</div><div class="line">    &#123;</div><div class="line">      Bert.alert( err.message , &apos;danger&apos;, &apos;growl-top-right&apos; );</div><div class="line"></div><div class="line">      return;</div><div class="line">    &#125;</div><div class="line"></div><div class="line">    Accounts.changePassword(oldPassword, newPassword, function(err)</div><div class="line">    &#123;</div><div class="line">      if(!err)</div><div class="line">      &#123;</div><div class="line">        Bert.alert(&apos;패스워드를 변경했습니다.&apos; , &apos;success&apos;, &apos;growl-top-right&apos;);</div><div class="line">      &#125;</div><div class="line">      else</div><div class="line">      &#123;</div><div class="line">        console.log(err);</div><div class="line"></div><div class="line">        var errMessage = &apos;&apos;;</div><div class="line"></div><div class="line">        if(err.message === &apos;Incorrect password [403]&apos;)</div><div class="line">        &#123;</div><div class="line">          errMessage = &quot;기존 비밀번호가 다릅니다.&quot;</div><div class="line">        &#125;</div><div class="line">        else</div><div class="line">        &#123;</div><div class="line">          errMessage = err.message;</div><div class="line">        &#125;</div><div class="line"></div><div class="line">        Bert.alert( errMessage , &apos;danger&apos;, &apos;growl-top-right&apos; );</div><div class="line">      &#125;</div><div class="line">    &#125;);</div><div class="line"></div><div class="line">  &#125;</div><div class="line">&#125;);</div></pre></td></tr></table></figure>
<p>Meteor API는 그 성격에 따라 클라이언트, 서버 모두에서 실행되기도 하고, 각각에서만 실행되는 경우도 있습니다. 아래 링크에는 각 API가 어떤 곳에서 실행되는지 잘 정리되어 있습니다. 가끔 왜 이곳에서 실행이 안되지 할 때 확인해 보시면 도움을 받을 수 있습니다. </p>
<blockquote>
<p><a href="http://frozeman.de/blog/2015/01/meteor-cheatsheet/" target="_blank" rel="noopener">http://frozeman.de/blog/2015/01/meteor-cheatsheet/</a></p>
</blockquote>
<hr>
<h4 id="6-2-비밀번호-재발급-잊어버렸을-때"><a href="#6-2-비밀번호-재발급-잊어버렸을-때" class="headerlink" title="6.2 비밀번호 재발급(잊어버렸을 때)"></a>6.2 비밀번호 재발급(잊어버렸을 때)</h4><p>비밀번호 변경과 함께 자주 쓰게 될 기능은 비밀번호 재발급이 될 것입니다. 비슷한 기능 같지만, 재발급의 경우 비밀번호를 잊어버렸을 경우에 사용되는 기능입니다.<br>재발급 과정을 설명드리겠습니다. </p>
<blockquote>
<p>재발급 과정 : 재발급 페이지(가입 이메일 입력) -&gt; 가입 이메일 페이지에서 링크 확인 -&gt; 재발급 페이지에서 비밀번호 변경</p>
</blockquote>
<ol>
<li>재발급 페이지</li>
</ol>
<p><img src="https://lh3.googleusercontent.com/b502yJY5IKW-c0hzmFGfO6iQG4yxzX4b-6otBlL3OE0kq4mLgIGFQoaj6t0-x4rHN24V57P5-XcguT3tzaJStYj9-Ii-u_Vy-zKiFrD1KEmJ-Hd5D3_QD8VZwpyQWNqfwbVvbG9A696RR5hjWa4vAfKiXwLLX_DbSLnmrM7DcoHYaBVPAaAQNWa_62HlNLv_4X8T5kKg_k3WwJ5qP0vAksP1MJtfOKfGp0JCqWoZBvCuHlAtC_LWVxjR-2RaBHVzaWatE_Jow0E8EzIFIZS3oQeGzmAgZTs4mDaMQQg8EZtMK_OxnhEJcMxTmt_0dvPGdAVLg20T9nDEuwdG4c0ort-p5fN5a3_5qDoOqjR13rFQtjrxpQVg39JnXXEDP8pPjQMpzEblOAdeGxfs87mtU7HxnGtoCbi212Jb9cQCzhy5vtSvu6fAiTBfS1_Vu7VOyXrlhHk9beCc-ykTPtA7g1lin_OtMJuMab4I9h1ficD5CXISIrqAq5z0hIwHiBYWNYzdP_HrTriFtD-Z1gX00N5vScS7suow1lYy0AL3MmPnXzTsSCgU59mffNwl-QWciLi1OPf8tOVSAM0DNhIlqQnBFHhVM_6eVvmrpPnkrnyrcHI8RxsqA92MSVT0zQqfvRHqh83alr_UEtH-13gUitLT4fQ1mzolIqE5CDnq8kQ=w599-h318-no"></p>
<ol>
<li>가입 메일에서 재발급 페이지 링크 확인</li>
</ol>
<p><img src="https://lh3.googleusercontent.com/U9-7PCzQ3fRaXc8BBWbj2MrD7dAdkhP3ntIkBmbbpbvp_ElCAunqcsswX613QFtxqbV1K6jY3i-wCsm-PopMEIy_PQETqjUdXdaIHx_PT56xWNKa4IO4u9UiJT93CJOGb4hfyiNxkFtrgGWXXq8SZaznlmuIHOvybw796KzfFOof0LQUFhipM9Q9gA31vGT9Vngbryp3RYFRnvdeyGnp1ithq2rsBMQxcAdYjb6RgXOTndxdIevtO3cNrKe-EIYxXoRYNGUpqjwHEKXrc_pxPy0kMIeE0shanzXGTAEhu70bRrjytckLXbVDlpGl4RuovZXz9oBg36fwaZOwTxym3Ip0bWUKJx6leCQMnJPihi_90_IoC5P_VjA2J3RLPt_CmNG0TffBmPJWKexZah80R4v28dup8n3nnEtAWOzxwlwCEGexsysW_XNVeblpQT8c3jVD_LZKnxHQoAkhDvdSDubr5320Aa0ohs0yVnAScGuu_-DnbDej0pFgCEoA-Qe4wBZgYs6K0RDPORscOn-WNv4cs-aO5FylWFVM3L-OsHyD8zTEYvO5dctnsySHVcjqX1Gn1BNeB4JkhVY-b1H-z69z2p5u2aMlhXcFDvAS4ZqP0ZvZX5bCF-Ej8iBHjID8ADODx0YzNEwkTNwakjGcnxWQvMzYJJJ47CSdEYtkPvw=w659-h116-no"></p>
<ol>
<li>재발급 페이지에서 비밀번호 변경</li>
</ol>
<p><img src="https://lh3.googleusercontent.com/JUTn6Anry7zeWb2CxT8DgB3WuwHFi3x3bNbkr2nrcDRmTLXTMpHVFQZ2MhLP0CoZ0Quf8OfCaX1u1WqrOputshtKYhOcHS-mD4B0aQ7-Exvej343tD0l5FrV6gWLuOrD1pyVxvAoJPwP-OoqZklCiyA7kl45q7iJt72HXee8jAUTULT-YEIcijc8AwJJOuH8AO8z9i8_zwmNF7Z_8IqUQU96ZyY4LHAzghoYZlVqHqz2STr5hdpXC_kM5RgqYKGN2NbrVjVMMSzrJYwQWlfFXlyzBZu_xUqwVobxo0by8R0TNlmIy-DMo6A0SHYUEXrdfeZU_y810I74UkUpyT_VJnR9kGKeDOZXZh_y-NUMgFRr_BZXWUKe_BQ-gPPJOpBF2YhH9iepZMTHnZqKbmJMK4ARgDyVgZ5w9yun7dYHc7mp8-1WVnNtijKBuyGw6SL15YT2S9BpEL1FkIMWhnTWWIpCtAfJiGNgVU4V52BLSO67JOBkwnmL-zofwRJYgu6J7EW9Gj6KQJXutMwDlTeVxIJc1siv0PM0koKp7JliGUP4Pm48zbQoG0Bc-eqfmVKDAcEyuxvPGzsNyP9JUvTqze1boGjRMmYd7LxAXdSeMV15_2cHvXbSXtOnyI20smJkQMg3ZWveoaQ2Aweq3aBsqMWgVmyqCErDpNxlUq3yVl8=w599-h389-no"></p>
<p>자 먼저 라우터를 추가해 보도록 하겠습니다. <code>recover</code>는 기본적인 재발급 페이지에 대한 주소가 되고, <code>reset-password</code>는 메일로 보내진 키 값을 확인하는 페이지가 되겠습니다. 키가 맞으면 <code>window.resetPasswordVar</code>라는 reactiveVar를 만들고 여기에 키값을 넣어 주는 식의 구조가 되겠습니다.  </p>
<p><code>lib/routes.js</code></p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div><div class="line">25</div><div class="line">26</div></pre></td><td class="code"><pre><div class="line"></div><div class="line">.</div><div class="line">.</div><div class="line">.</div><div class="line">[위 생략]</div><div class="line"></div><div class="line"></div><div class="line">// 비밀번호 변경 관련</div><div class="line">FlowRouter.route(&apos;/ recover&apos;, &#123;</div><div class="line">  name:&apos;recoverPassword&apos;,</div><div class="line">  action: function()</div><div class="line">  &#123;</div><div class="line">    BlazeLayout.render(&apos;mainLayout&apos;, &#123;</div><div class="line">      content: &apos;recoverPassword&apos;</div><div class="line">    &#125;);</div><div class="line">  &#125;</div><div class="line">&#125;);</div><div class="line"></div><div class="line">FlowRouter.route( &apos;/reset-password/:token&apos;, &#123;</div><div class="line">  name: &apos;reset-password/&apos;,</div><div class="line">  action( params )</div><div class="line">  &#123;</div><div class="line">    window.resetPasswordVar = new ReactiveVar(params.token);</div><div class="line">    FlowRouter.go( &apos;/recover&apos; );</div><div class="line">  &#125;</div><div class="line">&#125;);</div></pre></td></tr></table></figure>
<p>두번째로 패스워드 재발급의 경우도 메일을 통해서 이루어지므로 가입확인 메일과 다른  재발급 키 값에 대한 메일을 보내는 부분을 세팅하도록 하겠습니다. </p>
<p><code>server/accountsMails.js</code></p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div><div class="line">25</div><div class="line">26</div><div class="line">27</div><div class="line">28</div><div class="line">29</div><div class="line">30</div><div class="line">31</div><div class="line">32</div></pre></td><td class="code"><pre><div class="line"></div><div class="line"></div><div class="line">// 가입확인 메일</div><div class="line">Accounts.emailTemplates.verifyEmail = &#123;</div><div class="line">.</div><div class="line">.</div><div class="line">.</div><div class="line">[중략]</div><div class="line">.</div><div class="line">.</div><div class="line">.</div><div class="line"></div><div class="line">&#125;;</div><div class="line"></div><div class="line">// 비밀번호 변경 메일</div><div class="line">Accounts.emailTemplates.resetPassword = &#123;</div><div class="line">  subject() &#123;</div><div class="line">    return &quot;Meteor accounts 비밀번호 변경 메일&quot;;</div><div class="line">  &#125;,</div><div class="line">  text( user, url ) &#123;</div><div class="line">    //let emailAddress   = user.emails[0].address,</div><div class="line">    let emailAddress   = user.username,</div><div class="line">      urlWithoutHash = url.replace( &apos;#/&apos;, &apos;&apos; ),</div><div class="line">      supportEmail   = &quot;이메일 주소&quot;,</div><div class="line">      emailBody      = `비밀번호 변경 을 원하시면 다음 링크를 클릭해주세요. \n\n link: $&#123;urlWithoutHash&#125; \n\n 만약 확인을 요청하지 않은 경우, 이 이메일을 무시하십시오. 문제가 있다고 생각되면 다음 서비스 지원팀에 문의하십시오. \n\n 문의 주소 : $&#123;supportEmail&#125;.`;</div><div class="line"></div><div class="line">    console.log(&apos;mailUser&apos;);</div><div class="line">    console.log(user);</div><div class="line"></div><div class="line">    return emailBody;</div><div class="line">  &#125;</div><div class="line">&#125;;</div></pre></td></tr></table></figure>
<p>다음으로 <code>recover-password.html</code> 를 작성해 보도록 하겠습니다 소스에서 특별한 점은 <code>#if resetPassword ...else</code> 이 부분이 되겠는데요. 이메일로 보내진 키값을 확인해 reactiveVar로 넘겨진 <code>resetPasswordVar</code> 를 체크하여 값이 없으면 메일보내기 페이지를 키값이 있으면 새로운 비밀번호 입력 페이지를 보여주는 조건문이라고 보시면 되겠습니다. (reactiveVar의 경우 앞의 강좌에서 조금 설명드렸으니 그부분을 참고 하시면 도움이 될 것 같습니다. 기회가 되면 좀 더 자세히 다룰 만한 주제긴 하네요. 알아두면 참 편리한 기능이라고 생가하는 기능입니다.ㅎ)</p>
<p><code>client/recover-password.html</code></p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div><div class="line">25</div><div class="line">26</div><div class="line">27</div><div class="line">28</div><div class="line">29</div><div class="line">30</div><div class="line">31</div><div class="line">32</div><div class="line">33</div><div class="line">34</div><div class="line">35</div><div class="line">36</div><div class="line">37</div><div class="line">38</div><div class="line">39</div><div class="line">40</div><div class="line">41</div><div class="line">42</div></pre></td><td class="code"><pre><div class="line">&lt;template name=&quot;recoverPassword&quot;&gt;</div><div class="line">  &#123;&#123;#if resetPassword&#125;&#125;</div><div class="line">    &lt;div class=&quot;panel panel-default col-md-6 col-md-offset-3  panel-custom&quot;&gt;</div><div class="line">      &lt;div class=&quot;panel-heading text_center&quot;&gt;</div><div class="line">        &lt;a href=&quot;&#123;&#123;pathFor &apos;/&apos;&#125;&#125;&quot;&gt;&lt;h2&gt;METEOR ACCOUNTS&lt;/h2&gt;&lt;/a&gt;</div><div class="line">        &lt;p&gt;비밀번호 변경&lt;/p&gt;</div><div class="line">      &lt;/div&gt;</div><div class="line">      &lt;div class=&quot;panel-body panel-body-set&quot;&gt;</div><div class="line"></div><div class="line">        &lt;form class=&quot;col-md-12 panel-body-inner&quot;&gt;</div><div class="line">          &lt;div class=&quot;form-group&quot;&gt;</div><div class="line">            &lt;input type=&quot;text&quot; id=&quot;reset-password&quot;  class=&quot;form-control account-text-form-1&quot; placeholder=&quot;비밀번호&quot;&gt;</div><div class="line">          &lt;/div&gt;</div><div class="line">          &lt;div class=&quot;form-group&quot;&gt;</div><div class="line">            &lt;input type=&quot;text&quot; id=&quot;reset-password-confirm&quot; class=&quot;form-control account-text-form-1&quot; placeholder=&quot;비밀번호 확인&quot;&gt;</div><div class="line">          &lt;/div&gt;</div><div class="line">        &lt;/form&gt;</div><div class="line">        &lt;div class=&quot;form-group panel-body-inner bottom-padding&quot;&gt;</div><div class="line">          &lt;button name=&quot;reset-password&quot; class=&quot;btn btn-danger btn-lg btn-block button&quot;&gt;비밀번호 변경&lt;/button&gt;</div><div class="line">        &lt;/div&gt;</div><div class="line">      &lt;/div&gt;</div><div class="line">    &lt;/div&gt;</div><div class="line">  &#123;&#123;else&#125;&#125;</div><div class="line">    &lt;div class=&quot;panel panel-default col-md-6 col-md-offset-3  panel-custom&quot;&gt;</div><div class="line">      &lt;div class=&quot;panel-heading text_center&quot;&gt;</div><div class="line">        &lt;a href=&quot;&#123;&#123;pathFor &apos;/&apos;&#125;&#125;&quot;&gt;&lt;h2&gt;METEOR ACCOUNTS&lt;/h2&gt;&lt;/a&gt;</div><div class="line">        &lt;p&gt;비밀번호 변경&lt;/p&gt;</div><div class="line">      &lt;/div&gt;</div><div class="line">      &lt;div class=&quot;panel-body panel-body-set&quot;&gt;</div><div class="line"></div><div class="line">        &lt;form class=&quot;col-md-12 panel-body-inner&quot;&gt;</div><div class="line">          &lt;div class=&quot;form-group&quot;&gt;</div><div class="line">            &lt;input type=&quot;text&quot; id=&quot;user-email&quot; class=&quot;form-control account-text-form-1&quot; placeholder=&quot;메일주소&quot;&gt;</div><div class="line">          &lt;/div&gt;</div><div class="line">        &lt;/form&gt;</div><div class="line">        &lt;div class=&quot;form-group panel-body-inner bottom-padding&quot;&gt;</div><div class="line">          &lt;button name=&quot;send-email&quot; class=&quot;btn btn-danger btn-lg btn-block button&quot;&gt;메일보내기&lt;/button&gt;</div><div class="line">        &lt;/div&gt;</div><div class="line">      &lt;/div&gt;</div><div class="line">    &lt;/div&gt;</div><div class="line">  &#123;&#123;/if&#125;&#125;</div><div class="line">&lt;/template&gt;</div></pre></td></tr></table></figure>
<p>위의 html페이지에 대한 js 파일을 작성해 보도록 하겠습니다. 우선 <code>Template.recoverPassword.helpers({})</code> 에 resetPassword라는 함수를 만들고 라우터에서 세팅된 <code>resetPasswordVar</code>를 get() 하는 소스를 작성해주세요. 이 부분 때문에 html페이지의 <code>#if resetPassword</code>이 작동하게 됩니다. </p>
<p><code>Accounts.resetPassword(resetPasswordVar.get(), password, function(err){})</code> 부분은 실제 패스워드를 재발급 하는 소스 입니다. 처음 <code>resetPasswordVar.get()</code> 는 메일로 발송된 키 값에 대한 검증하는 부분이 되겠습니다. 이 발급된 키가 맞다면 새로 입력하는 패스워드로 변경이 이루어 집니다. 보시면 알겠지만, 사용되는 API들이 상당히 꼼꼼하게 만들어 졌다는 것을 볼 수 있습니다. </p>
<p><code>client/recover-password.js</code></p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div><div class="line">25</div><div class="line">26</div><div class="line">27</div><div class="line">28</div><div class="line">29</div><div class="line">30</div><div class="line">31</div><div class="line">32</div><div class="line">33</div><div class="line">34</div><div class="line">35</div><div class="line">36</div><div class="line">37</div><div class="line">38</div><div class="line">39</div><div class="line">40</div><div class="line">41</div><div class="line">42</div><div class="line">43</div><div class="line">44</div><div class="line">45</div><div class="line">46</div><div class="line">47</div><div class="line">48</div><div class="line">49</div><div class="line">50</div><div class="line">51</div><div class="line">52</div><div class="line">53</div><div class="line">54</div><div class="line">55</div><div class="line">56</div><div class="line">57</div><div class="line">58</div><div class="line">59</div><div class="line">60</div><div class="line">61</div><div class="line">62</div><div class="line">63</div><div class="line">64</div><div class="line">65</div><div class="line">66</div><div class="line">67</div><div class="line">68</div><div class="line">69</div><div class="line">70</div><div class="line">71</div><div class="line">72</div><div class="line">73</div><div class="line">74</div><div class="line">75</div><div class="line">76</div><div class="line">77</div><div class="line">78</div></pre></td><td class="code"><pre><div class="line">Template.recoverPassword.onRendered(function () &#123;</div><div class="line">  showLoadingEffect.set(false);</div><div class="line">&#125;);</div><div class="line"></div><div class="line">Template.recoverPassword.helpers(&#123;</div><div class="line">  resetPassword: function()</div><div class="line">  &#123;</div><div class="line">    //return Session.get(&apos;resetPassword&apos;);</div><div class="line">    return resetPasswordVar.get();</div><div class="line">    Bert.alert( resetPasswordVar.get(), &apos;success&apos; );</div><div class="line">  &#125;</div><div class="line">&#125;);</div><div class="line"></div><div class="line">Template.recoverPassword.events(&#123;</div><div class="line"></div><div class="line">  &apos;click button[name=reset-password]&apos; (evt, tmpl)</div><div class="line">  &#123;</div><div class="line">    evt.preventDefault();</div><div class="line"></div><div class="line">    var password = tmpl.find(&apos;#reset-password&apos;).value;</div><div class="line">    var passwordAgain = tmpl.find(&apos;#reset-password-confirm&apos;).value;</div><div class="line">    </div><div class="line">    // 입력 검증</div><div class="line">    try</div><div class="line">    &#123;</div><div class="line">      NotEmptyString(password);</div><div class="line">      NotEmptyString(passwordAgain);</div><div class="line">      isMatchPassword(password, passwordAgain);</div><div class="line">    &#125;</div><div class="line">    catch (err)</div><div class="line">    &#123;</div><div class="line">      Bert.alert( err.message , &apos;danger&apos;, &apos;growl-top-right&apos; );</div><div class="line">    &#125;</div><div class="line">    </div><div class="line">    // 비밀번호 재발급</div><div class="line">    Accounts.resetPassword(resetPasswordVar.get(), password, function(err)</div><div class="line">    &#123;</div><div class="line">      if(err)</div><div class="line">      &#123;</div><div class="line">        Bert.alert( &apos;패스워드 변경중 오류가 발생했습니다.&apos;  , &apos;danger&apos;, &apos;growl-top-right&apos; );</div><div class="line">      &#125;</div><div class="line">      else</div><div class="line">      &#123;</div><div class="line">        Bert.alert(&apos;패스워드를 변경했습니다 &apos;, &apos;success&apos;, &apos;growl-top-right&apos;);</div><div class="line">      &#125;</div><div class="line">    &#125;);</div><div class="line">  &#125;,</div><div class="line">  &apos;click button[name=send-email]&apos; (evt, tmpl)</div><div class="line">  &#123;</div><div class="line">    evt.preventDefault();</div><div class="line">    showLoadingEffect.set(true);</div><div class="line"></div><div class="line">    var email = tmpl.find(&apos;#user-email&apos;).value; // trim 대기</div><div class="line">    Accounts.forgotPassword(&#123;email: email&#125;, function(err)</div><div class="line">    &#123;</div><div class="line">      if(err)</div><div class="line">      &#123;</div><div class="line">        if(err.message == &apos;User not found [403]&apos;)</div><div class="line">        &#123;</div><div class="line">          console.log(err.message);</div><div class="line">          showLoadingEffect.set(false);</div><div class="line">          Bert.alert( &apos;해당메일로 가입자가 없습니다.&apos; , &apos;danger&apos;, &apos;growl-top-right&apos; );</div><div class="line">        &#125;</div><div class="line">        else</div><div class="line">        &#123;</div><div class="line">          showLoadingEffect.set(false);</div><div class="line">          Bert.alert( &apos;오류로 메일 발송에 실패했습니다. 잠시후 다시 시도해주세요.&apos; , &apos;danger&apos;, &apos;growl-top-right&apos; );</div><div class="line">        &#125;</div><div class="line">      &#125;</div><div class="line">      else</div><div class="line">      &#123;</div><div class="line">        showLoadingEffect.set(false);</div><div class="line">        Bert.alert( &apos;비밀번호 변경에 관한 메일을 발송했습니다.&apos; , &apos;success&apos;, &apos;growl-top-right&apos; );</div><div class="line">      &#125;</div><div class="line">    &#125;);</div><div class="line"></div><div class="line">  &#125;</div><div class="line">&#125;);</div></pre></td></tr></table></figure>
<p>이상으로 패스워드 재발급 까지 만들어 봤습니다. 이제 제법 그럴듯한 회원가입 기능이 구현된 것 같은데요. 다음 강좌에서는 마지막으로 각종 소셜 서비스를 통한 가입에 대한 기능을 구현해보도록 하겠습니다. 이제와서 말씀 드리지만 사실상 이 소스는 소셜 로그인 기능을 만들다가 정리된 소스라고 보셔도 됩니다.  매력적이고 많이 쓰이는 기능들이 meteor에서는 참 쉽게 사용할 수 있었던 것 같습니다. 그럼 다음강좌에서 소셜 로그인을 구현해 보는 것으로 Meteor custom account 강좌를 마무리 해보도록 하겠습니다 ^^</p>
]]></content>
    
    <summary type="html">
    
      &lt;h3 id=&quot;6-비밀번호-변경-및-재발급&quot;&gt;&lt;a href=&quot;#6-비밀번호-변경-및-재발급&quot; class=&quot;headerlink&quot; title=&quot;6. 비밀번호 변경 및 재발급&quot;&gt;&lt;/a&gt;6. 비밀번호 변경 및 재발급&lt;/h3&gt;&lt;h4 id=&quot;6-1-비밀번호-변경
    
    </summary>
    
    
      <category term="meteor, custom account, 미티어" scheme="http://freeseamew.github.io/tags/meteor-custom-account-%EB%AF%B8%ED%8B%B0%EC%96%B4/"/>
    
  </entry>
  
  <entry>
    <title>Meteor custom account 강좌 2</title>
    <link href="http://freeseamew.github.io/2017/07/03/meteor-account-tutorial-2/"/>
    <id>http://freeseamew.github.io/2017/07/03/meteor-account-tutorial-2/</id>
    <published>2017-07-03T13:55:18.000Z</published>
    <updated>2017-07-03T14:07:25.000Z</updated>
    
    <content type="html"><![CDATA[<h3 id="4-회원가입-기본"><a href="#4-회원가입-기본" class="headerlink" title="4. 회원가입 기본"></a>4. 회원가입 기본</h3><p>저번 강좌를 통해 기본적인 페이지 디자인과 페이지 이동(routing) 관련 기능은 완성했습니다. 그럼 이제 본격적으로 meteor와 관련된 기능들을 작성해 보도록 하겠습니다. 일단 Account에서 가장 기본이 되는 회원 가입부터 만들어 보도록 하겠습니다. </p>
<p>회원가입은 다음과 같이 몇가지 시나리오를 두고 진행하도록 하겠습니다. </p>
<blockquote>
<p>1단계: 가장 기본적인 과정입니다.  client페이지에서 가입정보를 폼으로 받고, 서버로 부터 회원가입 요청 후 가입완료 되는 형태의 진행이 되겠습니다.<br>2단계: 유효성검사(validate) 추가<br>3단계: 이메일 인증 </p>
</blockquote>
<hr>
<h4 id="4-1-기본-회원-가입"><a href="#4-1-기본-회원-가입" class="headerlink" title="4.1 기본 회원 가입"></a>4.1 기본 회원 가입</h4><p>우선 register.js 를 열고 아래 소스를 입력해 줍니다. </p>
<p><code>client/register.js</code><br><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div><div class="line">25</div><div class="line">26</div><div class="line">27</div><div class="line">28</div><div class="line">29</div><div class="line">30</div><div class="line">31</div><div class="line">32</div><div class="line">33</div><div class="line">34</div><div class="line">35</div><div class="line">36</div><div class="line">37</div><div class="line">38</div><div class="line">39</div><div class="line">40</div><div class="line">41</div><div class="line">42</div><div class="line">43</div></pre></td><td class="code"><pre><div class="line"></div><div class="line">Template.register.events(&#123;</div><div class="line">  &apos;click button[name=btn-register]&apos; (evt, tmpl)</div><div class="line">  &#123;</div><div class="line">    evt.preventDefault(); //새로 고침 방지</div><div class="line"></div><div class="line">    var inputUsername = tmpl.find(&apos;input[name=user-email]&apos;).value;</div><div class="line">    var inputEmail= tmpl.find(&apos;input[name=user-email]&apos;).value;</div><div class="line">    var inputPassword = tmpl.find(&apos;input[name=user-password]&apos;).value;</div><div class="line">    var inputPasswordAgain =  tmpl.find(&apos;input[name=user-passwordAgain]&apos;).value;</div><div class="line">    var inputFirstName = tmpl.find(&apos;input[name=user-firstName]&apos;).value;</div><div class="line">    var inputLastName = tmpl.find(&apos;input[name=user-lastName]&apos;).value;</div><div class="line"></div><div class="line"></div><div class="line">    var inputUser = &#123;</div><div class="line">      username: inputUsername,</div><div class="line">      email: inputEmail,</div><div class="line">      password: inputPassword,</div><div class="line">      passwordAgain: inputPasswordAgain,</div><div class="line">      profile: &#123;</div><div class="line">        firstName: inputFirstName,</div><div class="line">        lastName: inputLastName</div><div class="line">      &#125;</div><div class="line">    &#125;</div><div class="line"></div><div class="line"></div><div class="line">    //서버로의 로그인 호출</div><div class="line">    Meteor.call(&apos;register&apos;, inputUser, function (err)</div><div class="line">    &#123;</div><div class="line">      if(!err)</div><div class="line">      &#123;</div><div class="line">        Bert.alert( &apos;가입에 성공했습니다. 가입한 메일로 인증을 받아주세요&apos; , &apos;danger&apos;, &apos;growl-top-right&apos; );</div><div class="line">        FlowRouter.go(&apos;/login&apos;);</div><div class="line">      &#125;</div><div class="line">      else</div><div class="line">      &#123;</div><div class="line">        Bert.alert( err.message , &apos;danger&apos;, &apos;growl-top-right&apos; );</div><div class="line">      &#125;</div><div class="line">    &#125;);</div><div class="line"></div><div class="line">  &#125;</div><div class="line"></div><div class="line">&#125;);</div></pre></td></tr></table></figure></p>
<p>기본적으로 템플릿의 요소를 가지고 이벤트(마우스 click, over 등)를 일으키는 방법은 <code>Template.템플릿이름.event({})</code> 이 같은 문법을 사용합니다. 그리고  <code>click button[name=btn-register]&#39; (evt, tmpl)</code> 이 부분은 name=btn-register라는 선택자에 click 이벤트가 발생 했을 때 어떤 처리를 할 것인가에 대한 스크립트가 되겠습니다. 여기서 evt, tmpl 이라는 2가지 파라미터를 갖게 되는데요. evt는 위의 소스로 예를 들자면 실제 클릭이 일어난 버튼의 액션 되고, tmpl은 해당 이벤트가 일어나는 템플릿 정보로 tmpl을 이용하여 사용한 템플릿의 정보(ex: input 값)를 받아올 수 있습니다.  </p>
<p>이를 바탕으로 아래와 같이 input 정보를 변수에 담을 수 있습니다. </p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">var inputUsername = tmpl.find(&apos;input[name=user-email]&apos;).value;</div></pre></td></tr></table></figure>
<p><code>var inputUser</code>의 경우 내용은 아래와 같은 의미를 갖는데, 여기서 중요한 점은 username, email, password 는 meteor account의 기본 저장 형태이므로 꼭 이런 식으로 이름을 정하면 되고 기타 정보들은 profile아래에 사용자가 커스텀하게 원하는 정보를 입력해 둘 수 있습니다. </p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div></pre></td><td class="code"><pre><div class="line">var inputUser = &#123;</div><div class="line">  username: inputUsername,  // 유저이름</div><div class="line">  email: inputEmail,  // 유저 이메일</div><div class="line">  password: inputPassword, // 비밀번호(db에 저장될 대 암호화 됨)</div><div class="line">  passwordAgain: inputPasswordAgain, // 비밀번호 확인</div><div class="line">  profile: &#123; // 위의 정보 이외의 정보는 profile에 저장하면 된다. </div><div class="line">    firstName: inputFirstName,</div><div class="line">    lastName: inputLastName</div><div class="line">  &#125;</div><div class="line">&#125;</div></pre></td></tr></table></figure>
<p>마지막으로 <code>Meteor.call(&#39;register&#39;, inputUser, function (err) {})</code> 는 register라는 메소드를 호출해 실제 회원정보를 데이터베이스에 넣는 작업을 하게 됩니다. </p>
<p>참고로 meteors는 아래와 같이 method를 만들고, 이를 <code>Meteor.call(&#39;메소드 이름&#39;)</code> 이와 같은 방법으로 호출해서 사용할 수 있습니다. </p>
<ul>
<li><code>method 생성</code></li>
</ul>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div></pre></td><td class="code"><pre><div class="line">Meteor.methods(&#123;</div><div class="line"></div><div class="line">  method이름: function(data) </div><div class="line">  &#123;</div><div class="line"></div><div class="line">  &#125;</div><div class="line">&#125;);</div></pre></td></tr></table></figure>
<p>만들어진 method는 아래와 같은 방법으로 불러와 사용할 수 있습니다. </p>
<ul>
<li><code>method 호출</code></li>
</ul>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div></pre></td><td class="code"><pre><div class="line">Meteor.call(&apos;method이름&apos;, 넘겨줄객체묶음, function (err) &#123;</div><div class="line">  if(!err)</div><div class="line">  &#123;</div><div class="line">    // 성공  </div><div class="line">  &#125;</div><div class="line">  else</div><div class="line">  &#123;</div><div class="line">    // 실패</div><div class="line">  &#125;</div><div class="line">&#125;);</div></pre></td></tr></table></figure>
<p>이제 위에 register.js 에서 호출하는 메서드 <code>register</code>를 아래와 같이 만들어 작성해 주세요. 참고로 해당 메소드는 server폴더 아래의 accounts.js에서 작성이 되며, 실제로도 서버에서 실행이 되는 코드가 되겠습니다. </p>
<p><code>server/accounts.js</code></p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div><div class="line">25</div><div class="line">26</div><div class="line">27</div><div class="line">28</div><div class="line">29</div><div class="line">30</div><div class="line">31</div><div class="line">32</div></pre></td><td class="code"><pre><div class="line">Meteor.methods(&#123;</div><div class="line"></div><div class="line">  register: function(inputUser) // 서버측에서 회원가입 실행시 사용됨.</div><div class="line">  &#123;</div><div class="line">    var userEmail = inputUser.email;</div><div class="line">    var userPassword = inputUser.password;</div><div class="line">    var userPasswordAgain = inputUser.passwordAgain;</div><div class="line">    var userFirstName = inputUser.profile.firstName;</div><div class="line">    var userLastName = inputUser.profile.lastName;</div><div class="line">    </div><div class="line">    </div><div class="line">    // 회원가입 시작</div><div class="line">    try</div><div class="line">    &#123;</div><div class="line">      Accounts.createUser(&#123;</div><div class="line">        username: userEmail,</div><div class="line">        email: userEmail,</div><div class="line">        password: userPassword,</div><div class="line">        profile: &#123;</div><div class="line">          serviceType: &apos;site&apos;,</div><div class="line">          firstName: userFirstName,</div><div class="line">          lastName: userLastName,</div><div class="line">          gender: &apos;&apos;</div><div class="line">        &#125;</div><div class="line">      &#125;);</div><div class="line">    &#125;</div><div class="line">    catch (err)</div><div class="line">    &#123;</div><div class="line">      throw err;</div><div class="line">    &#125;</div><div class="line">    </div><div class="line">&#125;);</div></pre></td></tr></table></figure>
<p>그리고 이제 회원가입을 위해 아래의 패키지를 설치해 주시면 되겠습니다. </p>
<blockquote>
<p>설치 패키지</p>
<ul>
<li>meteor add accounts-password</li>
</ul>
</blockquote>
<p>이제 <code>http://localhost:3000/register</code> 페이지로 가서 오류 없이 회원 가입이 완료되면, <code>FlowRouter.go(&#39;/&#39;);</code> 이 명령어를 타고, 처음 페이지로 이동하게 됩니다. </p>
<p>여기서 일반 웹개발자라면 당황스러운 부분이 발생할 수 있는데요. 현재까지 우리는 딱히 데이터베이스에 스키마 정의도 하지 않았고, 입력을할 프로시저를 만들거나, 아니면 직접 쿼리를 수동으로 입력하지도 않았지만, 가입이 완료되고 심지어 로그인이 되었다는 것에 믿기 힘들 수도 있습니다. meteor가 생산성 생산성 하는데는 바로 이런 부분에서 알 수 있습니다. ^^</p>
<p>몽고 디비에 접속해 실제 테이블이 생성되었고, 객체가 들어가 있는 것을 보는 방법을 간단히 설명드리겠습니다. meteor를 실행시킨 상태에서 Robomongo라는 몽고디비 클라이언트 툴을 이용해 <code>localhost:3001</code>  로 접속하면 아래와 같이 meteor라는 데이터베이스에 user라는 collection(RDBMS의 테이블에 해당)이 있는 것을 볼 수 있습니다. </p>
<p><img src="https://lh3.googleusercontent.com/7i-lbX36odDbL-6dVILHCSMXfGEgckkkGwCRsV9fkYQ4D1oVXoW3II4R63MPZbV1taQEugdmHwFRkEAMTtvQH55Fl4q_CVA-_NQ0E51IoeDPukJiLebh3JqkRhNVYm3JEwrxM2e5OxoKPAxgD1OCaqg6JIDByJfHvU9mmurkrI1rJSsS8vBIm-j1mDrlb4ShsgoEQzKwkQeS8lJtzG-uJMHcVbat6963P1jd9l8aycSMkEGgtK4kbEpNYjLEF4rUm5p-OYOAl9VbR08OxQR7r23N2J9p5UCRvSUau3QOE-uWkQaPaWTb4lPVIP5hZCFp4h8KG9_k5K6ExFDi4cos5eJ1ib8fOvbjb-ZAeIM927WIorDDnnhOSw7ADPrKuouJgr6Xu6wjGCpwq5YRNYBz2rfo8mO1Nhwa9j7IHlHRqoOXMUloIoB_AL6gqybOZWHPMF0pZgkUpL1DPgwNbEqwYxdLexycqycprD-sGMfZsDsf5MLlWzoLY2RotsMJniaP2Ymkep4VW-j1G71SwtAbjIULpOn1342MNy1xwPocnMzgGdW2eh_Vso2YtsFCPkp5xdzl7_g-XCtpxURGKFJt3pcOm3Xf3MWQaq-fUVRYk_spoQedXuIFvpAsuTfr_pBCz5Y_2q14mpyfSjC7jSZd8BdtY8yBzP2vBtfyQnV-BpQ=w718-h448-no"></p><p style="text-align: center;">[몽고 디비 로그인 부분 증명]</p><p></p>
<p>미티어는 기본적으로 몽고 디비를 사용하고 있는데 이 몽고디비는 nosql 데이터 베이스로 일종의 텍스트 기반의 데이터 베이스가 되겠습니다. 몽고디비는 딱히 스키마 정의를 하지 않고, json형태의 구조를 읽고, 쓰고, 수정하는 방법으로 사용하는 데이터베이스 입니다. 여기서 이부분까지 자세히 설명은 좀 힘들겠지만, <code>Accounts.createUser</code> Meteor에서 이 api를 호출하는 것으로 유저가 저장된다고 일단 이해하시면 되겠습니다. ^^</p>
<hr>
<h4 id="4-2-로그인"><a href="#4-2-로그인" class="headerlink" title="4.2 로그인"></a>4.2 로그인</h4><p>회원가입을 구현했으니 이어서 로그인 및 로그인 정보를 출력하는 부분을 만들어 보도록 하겠습니다.</p>
<p><code>client/login.js</code><br><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div><div class="line">25</div></pre></td><td class="code"><pre><div class="line">Template.login.events(&#123;</div><div class="line">  &apos;click button[name=btn-singIn]&apos; (evt, tmpl)</div><div class="line">  &#123;</div><div class="line">    evt.preventDefault();</div><div class="line"></div><div class="line">    var inputEmail = tmpl.find(&apos;input[name=user-email]&apos;).value;</div><div class="line">    var inputPwd = tmpl.find(&apos;input[name=user-pwasword]&apos;).value;</div><div class="line"></div><div class="line">    Meteor.loginWithPassword(inputEmail, inputPwd, function(err) </div><div class="line">    &#123;</div><div class="line">      if(!err)</div><div class="line">      &#123;</div><div class="line">        FlowRouter.go(&apos;/&apos;);</div><div class="line">      &#125;</div><div class="line">      else</div><div class="line">      &#123;</div><div class="line">        console.log(err);</div><div class="line">      &#125;</div><div class="line">    &#125;);</div><div class="line"></div><div class="line">    return false;</div><div class="line"></div><div class="line">  &#125;</div><div class="line"></div><div class="line">&#125;);</div></pre></td></tr></table></figure></p>
<p>소스에서 사용된 <code>Meteor.loginWithPassword()</code>는 meteor에서 제공하는 기본 로그인 api 입니다. </p>
<p>다음으로 로그인이 되면 홈화면에서 로그인 정보가 나오도록 첫화면을 바꿔보도록 하겠습니다. </p>
<p><code>client/home.html</code></p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div><div class="line">25</div><div class="line">26</div><div class="line">27</div><div class="line">28</div><div class="line">29</div><div class="line">30</div><div class="line">31</div><div class="line">32</div><div class="line">33</div><div class="line">34</div><div class="line">35</div><div class="line">36</div><div class="line">37</div><div class="line">38</div><div class="line">39</div><div class="line">40</div><div class="line">41</div><div class="line">42</div><div class="line">43</div><div class="line">44</div><div class="line">45</div><div class="line">46</div><div class="line">47</div><div class="line">48</div><div class="line">49</div><div class="line">50</div><div class="line">51</div><div class="line">52</div></pre></td><td class="code"><pre><div class="line">&lt;template name=&quot;home&quot;&gt;</div><div class="line">  &#123;&#123;#unless loggingIn&#125;&#125;</div><div class="line">    &#123;&#123;#if currentUser&#125;&#125;</div><div class="line">      &#123;&#123;&gt; userInfo&#125;&#125;</div><div class="line">    &#123;&#123;else&#125;&#125;</div><div class="line">      &#123;&#123;&gt; defaultHome&#125;&#125;</div><div class="line">    &#123;&#123;/if&#125;&#125;</div><div class="line">  &#123;&#123;/unless&#125;&#125;</div><div class="line">&lt;/template&gt;</div><div class="line"></div><div class="line">&lt;template name=&quot;defaultHome&quot;&gt;</div><div class="line">  &lt;div class=&quot;col-md-8 col-md-offset-2&quot;&gt;</div><div class="line">    &lt;div class=&quot;col-md-12&quot;&gt;</div><div class="line">      &lt;div class=&quot;col-md-12&quot;&gt;</div><div class="line">        &lt;h2&gt;환영합니다.&lt;/h2&gt;</div><div class="line">        &lt;hr/&gt;</div><div class="line">      &lt;/div&gt;</div><div class="line">      &lt;div class=&quot;col-md-6&quot;&gt;</div><div class="line">        &lt;a href=&quot;&#123;&#123;pathFor &apos;login&apos;&#125;&#125;&quot; class=&quot;btn btn-primary btn-lg btn-block&quot;&gt;Go Login&lt;/a&gt;</div><div class="line">      &lt;/div&gt;</div><div class="line">      &lt;div class=&quot;col-md-6&quot;&gt;</div><div class="line">        &lt;a href=&quot;&#123;&#123;pathFor &apos;register&apos;&#125;&#125;&quot; class=&quot;btn btn-success btn-lg btn-block&quot;&gt;Go Register&lt;/a&gt;</div><div class="line">      &lt;/div&gt;</div><div class="line">    &lt;/div&gt;</div><div class="line">  &lt;/div&gt;</div><div class="line">&lt;/template&gt;</div><div class="line"></div><div class="line">&lt;template name=&quot;userInfo&quot;&gt;</div><div class="line">    &lt;div class=&quot;panel panel-default col-md-6 col-md-offset-3  panel-custom&quot;&gt;</div><div class="line">      &lt;div class=&quot;panel-heading text_center&quot;&gt;</div><div class="line">        &lt;h2&gt;METEOR ACCOUNTS&lt;/h2&gt;</div><div class="line">        &lt;p&gt;가입유저 정보&lt;/p&gt;</div><div class="line">      &lt;/div&gt;</div><div class="line">      &lt;div class=&quot;panel-body panel-body-set&quot;&gt;</div><div class="line"></div><div class="line">        &lt;div class=&quot;col-xs-12 panel-body-inner-box-3&quot;&gt;</div><div class="line">          &lt;p&gt;Email: &#123;&#123;currentUser.username&#125;&#125; &lt;/p&gt;</div><div class="line">          &lt;hr/&gt;</div><div class="line">          &lt;p&gt;First Name: &#123;&#123;currentUser.profile.firstName&#125;&#125; &lt;/p&gt;</div><div class="line">          &lt;hr/&gt;</div><div class="line">          &lt;p&gt;Last Name: &#123;&#123;currentUser.profile.lastName&#125;&#125; &lt;/p&gt;</div><div class="line">          &lt;hr/&gt;</div><div class="line">        &lt;/div&gt;</div><div class="line"></div><div class="line">        &lt;div class=&quot;form-group panel-body-inner bottom-padding&quot;&gt;</div><div class="line">          &lt;button name=&quot;btn-logout&quot; class=&quot;btn btn-danger btn-lg btn-block button&quot;&gt;로그아웃&lt;/button&gt;</div><div class="line">          &lt;a href=&quot;&#123;&#123;pathFor &apos;changePassword&apos;&#125;&#125;&quot; class=&quot;a-right&quot; &gt;비밀번호 변경&lt;/a&gt;</div><div class="line">        &lt;/div&gt;</div><div class="line"></div><div class="line">      &lt;/div&gt;</div><div class="line">    &lt;/div&gt;</div><div class="line">&lt;/template&gt;</div></pre></td></tr></table></figure>
<p>변경된 home.html 소스를 설명드리도록 하겠습니다.<br>일단 단일 템플릿을 home, defalutHome, userInfo 의 세가지 템플릿으로 분리했습니다.<br><code>#if currentUser</code> 이 부분은 meteor에서 로그인 상태를 확인할 때 사용하는 API입니다. 로그인이 되어있으면 이 조건절을 타고 <code>&gt; userInfo</code> 템플릿을 호출하여 보여주고, 로그 아웃 상태 일 때는 else 조건절을 따라 &gt; defaultHome 을 보여주도록 설정한 소스입니다. </p>
<p>그리고 userInfo 템플릿을 보면 아시겠지만, 로그인 정보는 currentUser객체로 각종 정보를 받아서 표시 할 수 있습니다. </p>
<p>정상적으로 로그인이 되면 첫화면이 다음과 같이 나오게 됩니다. </p>
<p><img src="https://lh3.googleusercontent.com/7YOzghuxYM9s60j7i3nvuP0-iJ646ZQOM3pcaZv3tRtVlajh0Puikz7iR3SK3hP_XN5ZO-LE0vrdYCsLG3hOM2R1SQ_Ed-_DUVMBwsgDpVl05UVfEgUuG6XbtsyMDhjlm3d-HvV3MIrhlAUHq3EsnZlvSDrCmF-MuPX2x7BIsAhuxDvnx5E0tGxOgkX203cyByk4t9JuGWf2R0EXnvD09nhOIyhhQleeB5Q0flv8sTyQC45w-S1IF9AfKjXfMRm6D1SMVNiZ0LXu0o0QfS7UZDtbqoeI1-Rl6q4EVFYvYy-q4f1N9MRZQfCKhfb_GviNkpXppULngziE-6n9rdYQb0me5YKsPx57WUgmnEV8IPPwfnMjkJm6oK6qnMvMUtLg63oyqOiVaWv72fBRrKjCOYulM8Mz7REGGW5MPgS2ILU3RlUQj0_HtEsJFA6LYlx6YR8RX5zOjp1F1OWZ4KW_NjDFGBmP2ogQKKz38XRD1sPZuiJtZEWtcas2nr3quLEGElmBwyJfDqyKbJvvQ3Mgmg-bKTU4K_WUIddaXQ0Lp2-keIuja9kQ4n6SgJldQcMkylmpEDZDiLXPS3Iso2VqqG-9iTrMEY5WyB_GhutJQze-jVUcpgRG0VvfqKMHmw5XcLQwZsG67KaoVgjTW4cAH5epD81UsYtF0e9x341F_8s=w627-h477-no"></p><p style="text-align: center;">[로그인 후 첫화면]</p><p></p>
<p>참고로 여기서 <code>#if currentUser</code> 만 사용해도 되지만 이 소스 앞에   <code>#unless loggingIn</code> 로 감싸준 이유는 페이지가 새로 시작될 때 1초 정도 currentUser가 작동하지 않는 문제가 발생하기 때문입니다. 이 현상 때문에 defaultHome 탬플릿이 아주 잠깐 보이고 userInfo로 가는 잔성 현상이 발생하게 됩니다. 이 잔상 현상을 방지 하기위한 일종의 핵? 이 <code>#unless loggingIn</code> 로 감싸주는 방법입니다. </p>
<hr>
<h4 id="4-3-유효성검사-validate-추가"><a href="#4-3-유효성검사-validate-추가" class="headerlink" title="4.3 유효성검사(validate) 추가"></a>4.3 유효성검사(validate) 추가</h4><p>회원 가입이 되었지만, 아직 부족한 부분이 많습니다. 이제 하나씩 기능을 더해보도록 하겠습니다. 우선은 유효성 검사를 추가해 보도록 하겠습니다. </p>
<p>일단 아래 패키지를 설치해주세요. 해당 패키지는 유효성검사와 직접적인 관계는 없지만, 경고문의 단순히 자바스크립티 alert 문을 쓰면 좀 허접해(?) 보이는 것을 개선하기 위해 사용한 고급진? alert 효과 패키지 라고 보시면 되겠습니다. </p>
<blockquote>
<p>설치 패키지</p>
<ul>
<li>meteor add themeteorchef:bert</li>
</ul>
</blockquote>
<p>bert 패키지의 사용법은 아래와 같이 사용하시면 됩니다. 보시면 상당히 심플한 구조를 가지고 있는 것을 알 수 있는데요. 타입과 출력형태만 메지지의 성격이나 디자인에 맞게 설정해서 바로 사용하시면 됩니다. </p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">Bert.alert( &apos;메시지&apos;, &apos;타입(ex: success)&apos;, &apos;출력형태(ex: growl-top-right)&apos; );</div></pre></td></tr></table></figure>
<blockquote>
<p>Bert에 대해 좀 더 자세히 알고 싶은 분은 아래 링크를 참고하세요.<br><a href="https://themeteorchef.com/tutorials/client-side-alerts-with-bert" target="_blank" rel="noopener">https://themeteorchef.com/tutorials/client-side-alerts-with-bert</a></p>
</blockquote>
<p>다음으로 <code>checkPattern.js</code>파일을 만들고, 아래 소스를 입력하세요.<br>checkPattern.js의 경우 클라이 언트나 서버 모두에서 사용할 경우가 있으므로 lib 폴더에 작성하도록 하겠습니다. 한가지 주의 할 점은 여기의 소스는 꼭 함수명 앞에 var를 써서는 안됩니다. 이부분과 정규식 부분은 잘 비교해서 사용하시면 되겠습니다. </p>
<p><code>lib/checkPattern.js</code><br><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div><div class="line">25</div><div class="line">26</div><div class="line">27</div><div class="line">28</div><div class="line">29</div><div class="line">30</div><div class="line">31</div><div class="line">32</div><div class="line">33</div><div class="line">34</div><div class="line">35</div><div class="line">36</div><div class="line">37</div><div class="line">38</div><div class="line">39</div><div class="line">40</div><div class="line">41</div><div class="line">42</div><div class="line">43</div><div class="line">44</div><div class="line">45</div><div class="line">46</div><div class="line">47</div><div class="line">48</div><div class="line">49</div><div class="line">50</div><div class="line">51</div><div class="line">52</div><div class="line">53</div><div class="line">54</div><div class="line">55</div><div class="line">56</div><div class="line">57</div><div class="line">58</div><div class="line">59</div><div class="line">60</div><div class="line">61</div><div class="line">62</div><div class="line">63</div><div class="line">64</div></pre></td><td class="code"><pre><div class="line">// 필수 입력사항 체크</div><div class="line">NotEmptyString = function (value)</div><div class="line">&#123;</div><div class="line">  if(value.length &gt; 0)</div><div class="line">  &#123;</div><div class="line">    return true</div><div class="line">  &#125;</div><div class="line">  throw new Meteor.Error(403, &apos;필수 사항을 입력해주세요.&apos;);</div><div class="line">&#125;</div><div class="line"></div><div class="line">// 이메일 형식 체크 </div><div class="line">isEmail = function (value)</div><div class="line">&#123;</div><div class="line">  var filter = /^([0-9a-zA-Z_\.-]+)@([0-9a-zA-Z_-]+)(\.[0-9a-zA-Z_-]+)&#123;1,2&#125;$/;</div><div class="line">  if(filter.test(value))</div><div class="line">  &#123;</div><div class="line">    return true;</div><div class="line">  &#125;</div><div class="line">  throw new Meteor.Error(403, &apos;이메일 형식이 바르지 않습니다 &apos;);</div><div class="line">&#125;</div><div class="line"></div><div class="line">// 패스워드 6자리 이상 체크</div><div class="line">isValidPassword = function (password)</div><div class="line">&#123;</div><div class="line">  if(password.length &gt;= 6)</div><div class="line">  &#123;</div><div class="line">      return true;</div><div class="line">  &#125;</div><div class="line">  throw new Meteor.Error(403, &apos;비밀번호는 6자리 이상이여야 합니다.&apos;);</div><div class="line"></div><div class="line">&#125;</div><div class="line"></div><div class="line">// 패스워드, 패스워드 확인 일치 체크</div><div class="line">isMatchPassword = function (password, passwordAgain)</div><div class="line">&#123;</div><div class="line">  if(password === passwordAgain)</div><div class="line">  &#123;</div><div class="line">    return true;</div><div class="line">  &#125;</div><div class="line">  throw new Meteor.Error(403, &apos;비밀번호와 비밀번호 확인이 다릅니다.&apos;);</div><div class="line"></div><div class="line">&#125;</div><div class="line"></div><div class="line">// 전화번호 : &quot;000-0000-0000&quot;</div><div class="line">isPhone = function(value)</div><div class="line">&#123;</div><div class="line">  var filter = /^\d&#123;3&#125;-\d&#123;3,4&#125;-\d&#123;4&#125;$/;</div><div class="line">  if(filter.test(value))</div><div class="line">  &#123;</div><div class="line">    return true;</div><div class="line">  &#125;</div><div class="line">  throw new Meteor.Error(403, &apos;전화번호 형식이 바르지 않습니다 &apos;);</div><div class="line">&#125;</div><div class="line"></div><div class="line">// 특정 날짜 형식 : &quot;yyyy/mm/dd&quot;</div><div class="line">isBirthDay = function (value)</div><div class="line">&#123;</div><div class="line">  var filter = /^(19[0-9][0-9]|20\d&#123;2&#125;)\/(0[0-9]|1[0-2])\/(0[1-9]|[1-2][0-9]|3[0-1])$/;</div><div class="line">  if(filter.test(value))</div><div class="line">  &#123;</div><div class="line">    return true;</div><div class="line">  &#125;</div><div class="line">  throw new Meteor.Error(403, &apos;날짜 형식이 바르지 않습니다 &apos;);</div><div class="line">&#125;</div></pre></td></tr></table></figure></p>
<p>위 소스들의 형식은 각각 비슷하다는 것을 금방 알 수 있을 것입니다.  연산자로 넘어온 값을 정규식으로 비교하고 이 값에 오류가 있으면 throw를 통해 오류를 던져주는 구조입니다. </p>
<p>그리고 accounts.js에서 아래 소스를 참고로 추가해주시면 되겠습니다. (회원가입 입력값 검증 부분만 넣어주세요)</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div><div class="line">25</div><div class="line">26</div><div class="line">27</div><div class="line">28</div><div class="line">29</div><div class="line">30</div><div class="line">31</div><div class="line">32</div><div class="line">33</div><div class="line">34</div><div class="line">35</div><div class="line">36</div><div class="line">37</div><div class="line">38</div></pre></td><td class="code"><pre><div class="line">[위 생략]</div><div class="line">.</div><div class="line">.</div><div class="line">.</div><div class="line">    var userFirstName = inputUser.profile.firstName;</div><div class="line">    var userLastName = inputUser.profile.lastName;</div><div class="line">    </div><div class="line">    </div><div class="line">    </div><div class="line">    // 회원가입 입력값 검증 시작</div><div class="line">    try</div><div class="line">    &#123;</div><div class="line">      NotEmptyString(userEmail);</div><div class="line">      NotEmptyString(userPassword);</div><div class="line">      NotEmptyString(userPasswordAgain);</div><div class="line">      NotEmptyString(userFirstName);</div><div class="line">      NotEmptyString(userLastName);</div><div class="line">      isEmail(userEmail);</div><div class="line">      isValidPassword(userPassword);</div><div class="line">      isMatchPassword(userPassword, userPasswordAgain);</div><div class="line">    &#125;</div><div class="line">    catch (err)</div><div class="line">    &#123;</div><div class="line">      throw err;</div><div class="line">    &#125;</div><div class="line">    // 회원가입 입력값 검증 종료</div><div class="line">  </div><div class="line">  </div><div class="line">    // 회원가입 시작</div><div class="line">    try</div><div class="line">    &#123;</div><div class="line">      Accounts.createUser(&#123;</div><div class="line">        username: userEmail,</div><div class="line">        email: userEmail,</div><div class="line">.</div><div class="line">.</div><div class="line">.</div><div class="line">[아래 생략]</div></pre></td></tr></table></figure>
<p>소스에 대해 설명을 조금 하면, 기본적으로 try,catch문을 만들고 try 안에 미리 작성해둔 검증문과 이 검증문을 어떤 input값에 대응하게 할지를 정하는 과정입니다. </p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div></pre></td><td class="code"><pre><div class="line">try</div><div class="line">&#123;</div><div class="line">  검증구문</div><div class="line">&#125;</div><div class="line">catch(err)</div><div class="line">&#123;</div><div class="line">  오류 발생시 메시지 발생</div><div class="line">&#125;</div></pre></td></tr></table></figure>
<p>이제 위의 값들을 다 메칭해 주셨으면, 테스트를 해보도록 하겠습니다.<br>일단 모든 값은 무조건 입력해야 하므로, NotEmptyString를 사용해고, 이메일은 이메일 형식이 있으면, <code>isEamil</code>을 사용해고, 패워드는 기본 길이와, 패스워드&amp;패스워드확인이 같은지를 체크하는 부분을 추가해습니다. </p>
<p>이제 localhost:3000/register 를 실행시켜 보고, 검증이 잘 진행되는 확인해 보도록 하겠습니다. 만약 검증부분이 정상적으로 입력되었다면, 아무것도 입력하지 않거나,이메일 형식이 틀리는 문제 등이 발생시, 아래와 같이 경고창이 뜨고 더이상 진행이 안되는 상태가 됩니다. </p>
<p><img src="https://lh3.googleusercontent.com/HjMmkYqb3WroN_ImSg6Qu9icIhmO8JyPNm7-v71VG0L-Fz2g9F6Ew0BeBNEed3HdXHWlpeD4TmpVJs-9nDKRaNs3lwVvY3TKg87JphA1OvtaP_XCOg-W7s1pVbyOqaZjGGAvQIpA0-4h9xVyj1PGLM-7eUCREyGhSUDfEFLp2dVTAZO5vOFZfZMWXVVw8xNt4FBupFTeV2ugdukwCtzmQrN_8OqqdtdsTcp2VmBYni_eO_O8Eftl6a2_CcO_lvwCj2aNWEfgwUyW3ULmSrwg4qHYQYWmpt4IHbgPNF7lecVx00tmvCq2-JqLpr6KxP-c_EmIMULJH7lWF881G53quswBgUUSeTT72P71rEIQQJqcFF8fHLAFOMcmn55ZvQz2et1pzMKh9-xpsH3aDZoLyYRTlKKW9rybFikEBbUBdqbFh3ahb-6jtn3BrJkPY1jO-SyA7kmXxakFHgE1qV5Hdu__OEMimq5fg3015iaP3S9_5o8aGuCxd-E60bEp5txXUBjZpD9CoLHXKNByOqUk2FqhhPg7us1HuTpGVaH5LlqDSxQPJgUCHZaWKlzJ3ay-90kHB96M5bNQEpehAro40dUyFfUxYGh3yeIM3nsHR9nuXcPDh_qcWfzhAk0O-yw9UG5tQwJM_1vQba0bTffmF9yWcqJ-r-zPVYTWZUcD_Nw=w1087-h746-no"></p>
<p>이 내용을 바탕으로 기존 로그인 화면도 검증 및 경고창을 추가해 보도록 하겠습니다. 아래 소스를 바탕으로 <code>검증추가</code> 부분을 추가해주세요.</p>
<p><code>client/login.js</code></p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div><div class="line">25</div><div class="line">26</div><div class="line">27</div><div class="line">28</div><div class="line">29</div><div class="line">30</div><div class="line">31</div><div class="line">32</div></pre></td><td class="code"><pre><div class="line">[위 생략]</div><div class="line">.</div><div class="line">.</div><div class="line">.</div><div class="line">    var inputEmail = tmpl.find(&apos;input[name=user-email]&apos;).value;</div><div class="line">    var inputPwd = tmpl.find(&apos;input[name=user-pwasword]&apos;).value;</div><div class="line">    </div><div class="line">    // 검증추가 시작</div><div class="line">    try</div><div class="line">    &#123;</div><div class="line">      NotEmptyString(inputEmail);</div><div class="line">      NotEmptyString(inputPwd);</div><div class="line">    &#125;</div><div class="line">    catch(err)</div><div class="line">    &#123;</div><div class="line">      console.log(err);</div><div class="line">      //Bert.alert( err.message , &apos;danger&apos;, &apos;growl-top-right&apos; );</div><div class="line"></div><div class="line">      return;</div><div class="line">    &#125;</div><div class="line">    // 검증추가 종료 </div><div class="line">    </div><div class="line">    Meteor.loginWithPassword(inputEmail, inputPwd, function(err) </div><div class="line">    &#123;</div><div class="line">      if(!err)</div><div class="line">      &#123;</div><div class="line">        FlowRouter.go(&apos;/&apos;);</div><div class="line">      &#125;</div><div class="line">  .</div><div class="line">  .</div><div class="line">  .</div><div class="line">  [아래 생략]</div></pre></td></tr></table></figure>
<p>회원가입과 로그인에서의 <code>유효성검사</code>에서 다른 점이 있습니다. 바로 회원가입은 서버쪽에서 검사을 했고, 로그인 페이지는 클라이언트에서 실행되도록 한것입니다. 즉 <code>유효성검사</code>는 서버나 클라이언트 어디서든 사용할 수 있다는 얘기가 됩니다. 상황에 따라 사용할 수 있고, 아주 중요한 내용이라면, 서버&amp;클라이언트 모두에서 유효성검사를 할 수 있습니다. 그리고 이 두 경우 모두 <code>lib/checkPattren.js</code> 를 참조해서 이용할 수 있다는 점이 Meteor의 매력중 하나가 아닐까 생각합니다. ^^ </p>
<hr>
<h4 id="4-4-이메일-인증"><a href="#4-4-이메일-인증" class="headerlink" title="4.4 이메일 인증"></a>4.4 이메일 인증</h4><p>가입시 자동가입 등을 막는 방법으로 많이 사용되는 방법으로 이메일 인증이 있을 것입니다. Meteor는 이에 필요한 API를 나름 잘 제공하고 있습니다.</p>
<p>우선 첫번째로 할 일은 인증시에 보낼 메일에 대한 설정부터 해보겠습니다. 다음 소스를 해당경로에 파일을 만들고 입력해주세요.</p>
<p><code>server/main.js</code></p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div></pre></td><td class="code"><pre><div class="line">// Set up login services</div><div class="line">Meteor.startup(function() &#123;</div><div class="line"></div><div class="line">  Accounts.config(&#123;</div><div class="line">    sendVerificationEmail: true</div><div class="line">  &#125;);</div><div class="line"></div><div class="line">  process.env.MAIL_URL=&quot;smtps://이메일주소:패스워드@smtp.gmail.com:465/&quot;;</div><div class="line">&#125;);</div></pre></td></tr></table></figure>
<p>위 소스에서<br><code>Meteor.startup</code> 의 경우 meteor가 실행될 때 초기에 필요한 세팅등을 실행시키는 부분이 되겠습니다. 여기서는 보내는 메일에 대한 정보(smtp 에 대한 정보)를 입력해 주시면 되는데 smtp의 경우 메일 서비스 마다 조금 다른 부분이 이을 수 있으니 꼭 엽력하기 전에 해당 smtp 서비스의 입력방법을 확인해주세요.<br>참고로 현재 버전(1.5)에서 gmail의 경우 <code>smtp</code>가 아닌 위와 같이 <code>smtps</code>로 해야 메일이 정상적으로 발송됩니다.<br>Accounts.config 부분의 <code>sendVerificationEmail: true</code> 만 주면 메일로 확인을 해야만 가입승인이 떨어지는 구조가 되고, 자동으로 메일을 발송합니다. 하지만 메일의 경우 영어로 된 기본 메일이 발송되므로 아래 소스를 참고로 친절한 한글 메일을 만들 수 있습니다. ^^</p>
<p><code>server/accountsMails.js</code></p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div></pre></td><td class="code"><pre><div class="line">// 공통사항</div><div class="line">Accounts.emailTemplates.siteName = &quot;account sample&quot;;</div><div class="line">Accounts.emailTemplates.from     = &quot;admin &lt;admin@gmail.com&gt;&quot;; // 보내는 주소 정보</div><div class="line"></div><div class="line">// 가입확인 메일</div><div class="line">Accounts.emailTemplates.verifyEmail = &#123;</div><div class="line">  subject() &#123;</div><div class="line">    return &quot;Meteor accounts 가입확인 메일&quot;;</div><div class="line">  &#125;,</div><div class="line">  text( user, url ) &#123;</div><div class="line"></div><div class="line">    let emailAddress   = user.username,</div><div class="line">      urlWithoutHash = url.replace( &apos;#/&apos;, &apos;&apos; ),</div><div class="line">      supportEmail   = &quot;메일아이디@gmail.com&quot;,</div><div class="line">      emailBody      = `이메일 주소를 확인하려면 ($&#123;emailAddress&#125;) 다음 링크를 방문하십시오. \n\n link: $&#123;urlWithoutHash&#125; \n\n 만약 확인을 요청하지 않은 경우, 이 이메일을 무시하십시오. 문제가 있다고 생각되면 다음 서비스 지원팀에 문의하십시오. \n\n 문의주소 : $&#123;supportEmail&#125;.`;</div><div class="line"></div><div class="line">    console.log(&apos;mailUser&apos;);</div><div class="line">    console.log(user);</div><div class="line"></div><div class="line">    return emailBody;</div><div class="line">  &#125;</div><div class="line">&#125;;</div></pre></td></tr></table></figure>
<p>위 소스에서 공통부분은 가입인증 말고도 메일 보내는 다른 메일 서비스에서 계속해서 사용하게 될 부분으로, 사이트명과 보내는 사람의 이메일 주소를 설정하는 부분입니다. </p>
<p>다음으로 실제 가입확인 메일에 관한 부분을 조금 설명드리겠습니다.<br><code>supportEmail=user.username</code>으로 세팅된 이유는 기본적으로 username을 email로 세팅하기 때문이다<br>emailBody는 메일 내용에 관한 부분입니다. 제일 중요한 부분은 <code>${urlWithoutHash}</code> 입니다. 이 링크는 일종의 일회성 키값으로 해당 링크로 방문을 해야 가입승인이 활성화 됩니다.</p>
<p>다음은 이런 실제 메일을 보내는 method를 추가해보겠습니다.<br>아래 소스를 참고로 <code>sendVerificationLink</code>(가입 확인 메일 발송) 메소드를 추가해주세요.</p>
<p><code>server/accounts.js</code><br><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div><div class="line">25</div><div class="line">26</div><div class="line">27</div><div class="line">28</div><div class="line">29</div><div class="line">30</div><div class="line">31</div><div class="line">32</div><div class="line">33</div><div class="line">34</div><div class="line">35</div><div class="line">36</div></pre></td><td class="code"><pre><div class="line"></div><div class="line">Meteor.methods(&#123;</div><div class="line"></div><div class="line"></div><div class="line">  register: function(data) // 서버측에서 회원가입 실행시 사용됨.</div><div class="line">  &#123;</div><div class="line"></div><div class="line">    // 서버에서 한번 더 입력값 검증을 해도 된다. 아니면 모든 입력값 검증을 서버로 옮겨 와도 상관은 없다.</div><div class="line">    try</div><div class="line">    &#123;</div><div class="line">      NotEmptyString(data.username);</div><div class="line">      NotEmptyString(data.password);</div><div class="line">      isEmail(data.username);</div><div class="line">.</div><div class="line">.</div><div class="line">.</div><div class="line">[중략]</div><div class="line">.</div><div class="line">.</div><div class="line">.</div><div class="line">    &#125;</div><div class="line">    catch (err)</div><div class="line">    &#123;</div><div class="line">      throw err;</div><div class="line">    &#125;</div><div class="line"></div><div class="line">  &#125;,</div><div class="line">  // 가입 확인 메일 발송</div><div class="line">  sendVerificationLink(user)</div><div class="line">  &#123;</div><div class="line">    var userId = user;</div><div class="line">    if ( userId ) &#123;</div><div class="line">      return Accounts.sendVerificationEmail( userId );</div><div class="line">    &#125;</div><div class="line">  &#125;</div><div class="line">&#125;);</div></pre></td></tr></table></figure></p>
<p>이제 가입이 이루어질 타이밍에 <code>sendVerificationLink</code> 메소드를 호출하는 작업을 해보겠습니다. 같은  <code>server/accounts.js</code>에 <code>Accounts.onCreateUser()</code>라는 일종의 라이프 사이클 API를 이용하면 되겠는데요. 즉 createUser api로 유저가 생성될 때 어떤 일들을 함께 처리할지를 정하는 함수라고 보면 되겠습니다.<br><code>onCreateUser</code>로 해야하는 일은 user.profile에 넣어줄 값 싱크, 메일 발송, 그리고 이후에 할 외부 api(facebook, google 등)를 이용한 로그인 시 profile 싱크 맞추는 작업 등이 있겠습니다. 아래 소스를 참고로 accounts.js 파일을 작성해주세요. 다시 한번 말씀드리자면 회원의 다양한 정보(성별, 주소 등등)를 user.profile에 넣어두고 사용할 수 있습니다. </p>
<p><code>server/accounts.js</code><br><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div><div class="line">25</div><div class="line">26</div><div class="line">27</div><div class="line">28</div><div class="line">29</div><div class="line">30</div><div class="line">31</div><div class="line">32</div><div class="line">33</div><div class="line">34</div><div class="line">35</div></pre></td><td class="code"><pre><div class="line"></div><div class="line">Meteor.methods(&#123;</div><div class="line"></div><div class="line"></div><div class="line">  register: function(data) // 서버측에서 회원가입 실행시 사용됨.</div><div class="line">  &#123;</div><div class="line">.</div><div class="line">.</div><div class="line">.</div><div class="line">[중략]</div><div class="line">.</div><div class="line">.</div><div class="line">.</div><div class="line">&#125;);</div><div class="line"></div><div class="line">// 가입시 메일 발송</div><div class="line">Accounts.onCreateUser(function (options, user) &#123;</div><div class="line"></div><div class="line">  user.profile = options.profile; // 이렇게 안해주면 profile이 없는 상태로 가입됨...</div><div class="line"></div><div class="line">  Meteor.setTimeout(function() &#123; // setTimeout을 걸어주지 않으면 메일 발송이 안됨</div><div class="line"></div><div class="line">    Meteor.call(&apos;sendVerificationLink&apos;, user._id, function (err)</div><div class="line">    &#123;</div><div class="line">      if (err)</div><div class="line">      &#123;</div><div class="line">        throw error.reason;</div><div class="line">      &#125;</div><div class="line">    &#125;);</div><div class="line">    </div><div class="line">  &#125;, 2 * 1000);</div><div class="line"></div><div class="line">  return user;  // 꼭 새 사용자 객체를 반환해야 함.(가이드에 나와있는 내용임)</div><div class="line"></div><div class="line">&#125;);</div></pre></td></tr></table></figure></p>
<p>다음으로 라우터에 해당 이메일로 보냈던 확인 주소로 접근할 경우 키 값이 맞는지 확인 하는 부분을 추가해야 한다. 메일로 보낸 링크가 정상적이라면, 링크를 클릭한 주소로 접속하는 순간 회원가입이 완료되는 방식이 되겠습니다. 참고로 위의 소스에서 <code>sendVerificationLink</code> 호출시 <code>Meteor.setTime()</code>로 감싸주지 않으면 오류가 발생합니다. </p>
<p><code>lib/routes.js</code></p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div><div class="line">25</div><div class="line">26</div><div class="line">27</div><div class="line">28</div><div class="line">29</div><div class="line">30</div><div class="line">31</div><div class="line">32</div><div class="line">33</div></pre></td><td class="code"><pre><div class="line">[위 중략]</div><div class="line">.</div><div class="line">.</div><div class="line">.</div><div class="line"></div><div class="line">        content: &apos;changePassword&apos;</div><div class="line">      &#125;);</div><div class="line">    &#125;</div><div class="line">    else</div><div class="line">    &#123;</div><div class="line">      FlowRouter.go(&apos;/&apos;);</div><div class="line">    &#125;</div><div class="line">  &#125;</div><div class="line">&#125;);</div><div class="line"></div><div class="line">//이메일 인증 관련</div><div class="line">FlowRouter.route( &apos;/verify-email/:token&apos;, &#123;</div><div class="line">  name: &apos;verify-email&apos;,</div><div class="line">  action( params )</div><div class="line">  &#123;</div><div class="line">    Accounts.verifyEmail( params.token, ( error ) =&gt; &#123;</div><div class="line">      if ( error )</div><div class="line">      &#123;</div><div class="line">        Bert.alert( error.reason, &apos;danger&apos; );</div><div class="line">      &#125;</div><div class="line">      else</div><div class="line">      &#123;</div><div class="line">        FlowRouter.go( &apos;/&apos; );</div><div class="line">        Bert.alert( &apos;이메일 인증에 성공했습니다.&apos;, &apos;success&apos; );</div><div class="line">      &#125;</div><div class="line">    &#125;);</div><div class="line">  &#125;</div><div class="line">&#125;);</div></pre></td></tr></table></figure>
<p><code>Accounts.verifyEmail</code> API를 이용해서 메일을 통한 링크 접근 값이 정상적일 경우 회원가입이 정상적으로 처리되도록 합니다.</p>
<p>다음으로 로그인 후 첫 화면에서 회원 가입이 진행중일 경우(이메일 인증을 아직 받지 않은 상태)에는 유저 정보를 보여주는 것이 아닌 아직 메일에서 가입승인을 하지 않았다는 메시지를 보여주는 부분을 추가하도록 하겠습니다. </p>
<p><code>client/home.html</code></p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div><div class="line">25</div><div class="line">26</div><div class="line">27</div><div class="line">28</div><div class="line">29</div><div class="line">30</div><div class="line">31</div><div class="line">32</div><div class="line">33</div><div class="line">34</div><div class="line">35</div><div class="line">36</div><div class="line">37</div><div class="line">38</div><div class="line">39</div><div class="line">40</div><div class="line">41</div><div class="line">42</div><div class="line">43</div><div class="line">44</div><div class="line">45</div><div class="line">46</div><div class="line">47</div><div class="line">48</div><div class="line">49</div><div class="line">50</div><div class="line">51</div><div class="line">52</div></pre></td><td class="code"><pre><div class="line">&lt;template name=&quot;userInfo&quot;&gt;</div><div class="line">  </div><div class="line">  &#123;&#123;#unless currentUser.emails.[0].verified&#125;&#125;</div><div class="line">    &lt;div class=&quot;panel panel-default col-md-6 col-md-offset-3  panel-custom&quot;&gt;</div><div class="line">      &lt;div class=&quot;panel-heading text_center&quot;&gt;</div><div class="line">        &lt;h2&gt;METEOR ACCOUNTS&lt;/h2&gt;</div><div class="line">      &lt;/div&gt;</div><div class="line">      &lt;div class=&quot;panel-body panel-body-set&quot;&gt;</div><div class="line"></div><div class="line">        &lt;div class=&quot;col-xs-12 panel-body-inner-box-4&quot;&gt;</div><div class="line">          &lt;h3&gt;확인 메시지&lt;/h3&gt;</div><div class="line">          &lt;p&gt;가입하신 이메일로 가입승인을 해주셔야 사용이 가능합니다.&lt;/p&gt;</div><div class="line">          &lt;p&gt;메일이 오지 않으셨다면 메일을 재발송 해주세요.&lt;/p&gt;</div><div class="line">        &lt;/div&gt;</div><div class="line">        &lt;form class=&quot;col-md-12 panel-body-inner-1&quot;&gt;</div><div class="line">          &lt;div class=&quot;form-group&quot;&gt;</div><div class="line">            &lt;input type=&quot;text&quot; class=&quot;form-control account-text-form-1&quot; placeholder=&quot;가입 이메일&quot;&gt;</div><div class="line">          &lt;/div&gt;</div><div class="line">        &lt;/form&gt;</div><div class="line">        &lt;div class=&quot;form-group panel-body-inner bottom-padding&quot;&gt;</div><div class="line">          &lt;button name=&quot;resend-verification-link&quot; class=&quot;btn btn-danger btn-lg btn-block button&quot;&gt;메일 재발송&lt;/button&gt;</div><div class="line">        &lt;/div&gt;</div><div class="line"></div><div class="line">      &lt;/div&gt;</div><div class="line">    &lt;/div&gt;</div><div class="line">  &#123;&#123;else&#125;&#125;</div><div class="line">    &lt;div class=&quot;panel panel-default col-md-6 col-md-offset-3  panel-custom&quot;&gt;</div><div class="line">      &lt;div class=&quot;panel-heading text_center&quot;&gt;</div><div class="line">        &lt;h2&gt;METEOR ACCOUNTS&lt;/h2&gt;</div><div class="line">        &lt;p&gt;가입유저 정보&lt;/p&gt;</div><div class="line">      &lt;/div&gt;</div><div class="line">      &lt;div class=&quot;panel-body panel-body-set&quot;&gt;</div><div class="line"></div><div class="line">        &lt;div class=&quot;col-xs-12 panel-body-inner-box-3&quot;&gt;</div><div class="line">          &lt;p&gt;Email: &#123;&#123;currentUser.username&#125;&#125; &lt;/p&gt;</div><div class="line">          &lt;hr/&gt;</div><div class="line">          &lt;p&gt;First Name: &#123;&#123;currentUser.profile.firstName&#125;&#125; &lt;/p&gt;</div><div class="line">          &lt;hr/&gt;</div><div class="line">          &lt;p&gt;Last Name: &#123;&#123;currentUser.profile.lastName&#125;&#125; &lt;/p&gt;</div><div class="line">          &lt;hr/&gt;</div><div class="line">        &lt;/div&gt;</div><div class="line"></div><div class="line">        &lt;div class=&quot;form-group panel-body-inner bottom-padding&quot;&gt;</div><div class="line"></div><div class="line">          &lt;button name=&quot;btn-logout&quot; class=&quot;btn btn-danger btn-lg btn-block button&quot;&gt;로그아웃&lt;/button&gt;</div><div class="line">          &lt;a href=&quot;&#123;&#123;pathFor &apos;changePassword&apos;&#125;&#125;&quot; class=&quot;a-right&quot; &gt;비밀번호 변경&lt;/a&gt;</div><div class="line">        &lt;/div&gt;</div><div class="line"></div><div class="line">      &lt;/div&gt;</div><div class="line">    &lt;/div&gt;</div><div class="line">  &#123;&#123;/unless&#125;&#125;</div><div class="line">&lt;/template&gt;</div></pre></td></tr></table></figure>
<p>위의 내용중에 <code>확인 메시지</code> 페이지의 경우 회원가입만 되어 있고, 메일로 확인을 하지 않았을 때 보여지는 화면인데요. 이 경우 메일 발송이 잘 못 이루어 졌을 수도 있어, 이럴 경우 다시한번 메일을 발송하는 input 박스를 만들어 두는 두는 장치를 추가한 부분이 되겠습니다. </p>
<p><img src="https://lh3.googleusercontent.com/SiPWE2nGbL86uW4pthuNxwFlgdp1xIbMTSw7Ec4DyXgz5tWVa4ZJ5GdkzLTP4AVSlZFAsyxMM4jkxm0xEi-ql9n5xV4tZAihv05Orn245_OYs1QhKVAWjGUaT55qLYn7M8YnBn5bvo6BjM9TRHN6ooeIixne8JPWVadudca7MQ2G2W2bhi6RyuejwWKesV9aOKicKoAnkoJIJMBvX4jemBVASRbA3kMhx5yP0i-DXYs9H6DYRnWhd5Ns2Vf0p-NIcYoN3ZZ7G4cJKKqfpI7mmJDenZLrNYETfbn0aK52Fzy6ScNlOET_EdffjaP10tI_L20Qku4xdOrTtX33M7I9FRLWolDDO-q5BzK9NIt2W5LIsi9k0D-KC_bN8Q861bPcK6fUp4MeTj81AF3-kOpuY3nBQsF3T5VLOLcMxDRsYJiyLEFlvtO2vhWBgo63AMIoUQrtecmdOGAWgJQqf-oZQaQaXNKVtF5wkEQTD4Jfyeqji8xJUgtg_x0DaIRifcdlz9XQ_ATsleR1yFC7W37uFkPWADFlyH8tXfiN2TXqJUJqEt30qbH5Prsy9-1ARvYi2WCGgKwmKPoOXoGJZr_YdXuFoXs9Je3E8ncvBBADzTo4YxqGgjnBJAIGDM69sisHsm_Pcrh_NtQ2ncVn4QYy7LvgjXe8gbhxS_U5zLdzBLk=w619-h441-no"></p><p style="text-align: center;">[home.html 페이지 - 회원가입 확인 페이지]</p><p></p>
<p><code>home.html</code> 은 총 3가지의 상황에 따른 화면을 나타냅니다. 위의 회원가입 확인 페이지와 함께 다음 2페이지가 상황에 따라서 나타나가 됩니다. </p>
<p><img src="https://lh3.googleusercontent.com/1W9MK5V3JUqstBrDbh-xqxpQ4SamNR8dPpfmZTcgdRk3z-fwYA4ix-yTzwrPv0TdMR4Aaisl6s3pCsHZONin7bb6Dctb0ra0D6pm-Qky20Uc_FFLLVQtaegdazpy_gJEaUcw7OxRpClgLBsgbfYK55TwGmHDWd7O6GScNXSVqldin90a38Ls0NseKKKDIVtcMGpm1nZT6o8X4nGhFiOYpSeeqUccJ4E2xxBVOoi4cIrZxHRWobhMhszC78wqHvltLRp9lWUYGCaFlH2qTrTba6UZAWYeovWHW8zfOcpoXal3iuwDV6i0iLDhBZ701G_Da2wfQagOofEjKvgLqtrfm2P5vxgAa06w9kaAQRbY92teH0J6rnOO7GncGMU6h8jONS1BnBxGJqiYIllKFG_-Vng7ra2SZ4vb1OuXEgjuuosJNpvgHJu16-hekbQs73srGgzqrpbmfYERFfk4SxwmmLMwfF9e41ThBgujhZiW-CcgY2AUCKgt6314W1xFprRs9mr_RDV1ahTk1vdlZhgbyDPyfkiAtNN86O39m7-ylNB3Kztzk0pNbU31Y1SH-3Z43J8C0ilcF4blhJjVnGAJU9tl3sXJa0NbQfm_4rcEXx2JY8flpPZcUIty3iz5BPSAE1sP_g6ahYTAAdQD1kJrS0uDF_vbSySZw_y7DCS4MdA=w727-h364-no"></p><p style="text-align: center;">[home.html 페이지 - 로그 아웃 상태일 때의 페이지]</p><p></p>
<p><img src="https://lh3.googleusercontent.com/TNqGkV0ZOW2480t4GBUaEOEA056ZaYC8tuKAvOWrR5hM6hE3mJeVAX8N9OXkrctqWtDVZPhw70lCGG_0P8ZpZ8fAzA9_cJRaPwW9YUsA8I5CYNlkMRjKBZH6diankWsOCn8rERZGeSYKmoiqgwIZ0LJlS2TraZeGrnDn_cavvnDXTsUoh8UBACUahRHQVQbe4tLsNFs6Kzhe8KN4psRKxzfJGoibVC1nME47rj7ZmtwIQXl5kRlwnBwK7Bw1oSzNkgbsfmumrRc8mfH3JokNQlriiYXXVAN7QBSy3XaNF3sdpiyNFGQtS5iR38OaNL8fnIIRMFz8hvXdKISPtYXO2odMq0usWHmDP1aXUGrfA2QcP79IzOxDkmAq-cFXa6yK9GJNcTEnIaDiJhPfPEKroMrmlfqQBY8kdUf256YFReOHnO49rNdm9h7lqhe9T9o17Ld1wKQlqmkf3-9Y8lvfS63yJXlG0Dx0xKM7o1mOs-Bw8dPUnNPgQWfVCFVc379QoNYzHldSGRfOtL_gH0cDnUVGCaOPf1NrU4UXI5N5guf-NQ24XKGiF7AyoU1g-En6HuO_ZMLTcetsqG041GMtDE_Vw1o7PKtbtGlxlsrkq89kx3_G3fnQ0_rghqJbwfFachWVwEktpQbtJxlFkbN-kj0QXrzDFDBT_RB7PVvp22g=w627-h477-no"></p><p style="text-align: center;">[home.html 페이지 - 회원가입 확인 후 로그인 페이지]</p><p></p>
<p>여기서 잠깐 meteor에서의 회원가입 과정을 조금 설명드리겠습니다. meteor로 <code>Accounts.createUser()</code>로 회원가입이 진행되면, 데이터베이스 user collection(meteor는 기본적으로 mongodb를 사용합니다.)에 다음과 같은 json 필드가 추가됩니다. 각 컬럼은 다음과 같은 성격을 가집니다. 기본정보 이외의 사이트마다 등록이 필요한 값들은 profile 필드 아래에 넣어두고 사용할 수 있습니다.</p>
<ul>
<li>_id : 고유값</li>
<li>createdAt : 생성날짜</li>
<li>services/password : 비밀번호(자동으로 암호화)</li>
<li>username: 가입아이디(기본적으로 가입 이메일을 사용)</li>
<li>emails/address : 가입한 이메일 주소</li>
<li>emails/verified : 가입확인 유무(기본 false로 이메일 가입확인에 사용)</li>
<li>profile: 기타 가입 정보(사용자가 임의로 추가하는 필드의 경우 이 아래에 두고 사용하면 됨.)</li>
</ul>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div></pre></td><td class="code"><pre><div class="line">&#123;</div><div class="line">    &quot;_id&quot; : &quot;gKdDPzkLRjcbAwnG5&quot;,</div><div class="line">    &quot;createdAt&quot; : ISODate(&quot;2017-05-27T15:13:55.357Z&quot;),</div><div class="line">    &quot;services&quot; : &#123;</div><div class="line">        &quot;password&quot; : &#123;</div><div class="line">            &quot;bcrypt&quot; : &quot;$2a$10$og01yOey9To/ugGr8uxBbe1nCqKZ30qCzikh88OJi4KY9Vj3Qm7xO&quot;</div><div class="line">        &#125;</div><div class="line">    &#125;,</div><div class="line">    &quot;username&quot; : &quot;freeseamew@gmail.com&quot;,</div><div class="line">    &quot;emails&quot; : [ </div><div class="line">        &#123;</div><div class="line">            &quot;address&quot; : &quot;freeseamew@gmail.com&quot;,</div><div class="line">            &quot;verified&quot; : false // 이 부분을 통해 이메일 인증 확인 가능</div><div class="line">        &#125;</div><div class="line">    ],</div><div class="line">    &quot;profile&quot; : &#123;</div><div class="line">        &quot;serviceType&quot; : &quot;site&quot;,</div><div class="line">        &quot;firstName&quot; : &quot;가입자 이름&quot;,</div><div class="line">        &quot;lastName&quot; : &quot;가입자 성&quot;,</div><div class="line">        &quot;gender&quot; : &quot;&quot;</div><div class="line">    &#125;</div><div class="line">&#125;</div></pre></td></tr></table></figure>
<p>이를 참고로 위의 <code>home.html</code> 페이지가 상황에 따라서 화면을 보여주는 원리는 다음과 같습니다. </p>
<p><code>#unless loggingIn</code> 로 먼저 로그인 상태를 확인 한 다음에 로그인 되어 있으면, <code>#unless currentUser.emails.[0].verified</code>를 참고하여 <code>verified</code>가 true이면 로그인 이용자의 정보를 보여주고, false일 경우에는 <code>회원가입 확인 페이지</code>를 보여주는 구성을 가지게 됩니다. </p>
<hr>
<h3 id="5-회원가입시-사용자-정의-가입정보-추가-방법"><a href="#5-회원가입시-사용자-정의-가입정보-추가-방법" class="headerlink" title="5. 회원가입시 사용자 정의 가입정보 추가 방법"></a>5. 회원가입시 사용자 정의 가입정보 추가 방법</h3><p>위에서 설명 했지만 기본적인 가입 시스템을 만들면, _id, createAt, username, emails와 같은 최소한의 정보는 기본적으로 저장합니다. 하지만 그외의 정보(성별, 사용자이름, 레벨, 주소 등)는 profile이라는 필드 아래에 넣어서 사용 할 수 있습니다. 사실 위에서도 이미 그 부분에 대해서 조금 설명을 드렸지만, 조금 더 이 부분에 대해서만 다시한번 설명 드리도록 하겠습니다. </p>
<p>register.html에서 폼 값 등으로 정의된 값은 register.js의 registerInfo라는 객체에 저장된 후 register 메소드로 전달됩니다. 이 때 필요한 값들을 profile아래에 정의해서 넘기면 됩니다. </p>
<p><code>client/register.js</code></p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div><div class="line">25</div><div class="line">26</div></pre></td><td class="code"><pre><div class="line"> var registerInfo = &#123;</div><div class="line">    username: inputUsername,</div><div class="line">    email: inputEmail,</div><div class="line">    password: inputPassword,</div><div class="line">    profile: &#123; // 사용자 정의 가입정보</div><div class="line">      firstName: inputFirstName,</div><div class="line">      lastName: inputLastName</div><div class="line">    &#125;</div><div class="line">  &#125;</div><div class="line"></div><div class="line"></div><div class="line">  //서버로의 로그인 호출</div><div class="line">  Meteor.call(&apos;register&apos;, registerInfo, function (err)</div><div class="line">  &#123;</div><div class="line">    if(!err)</div><div class="line">    &#123;</div><div class="line">      Bert.alert( &apos;가입에 성공했습니다. 가입한 메일로 인증을 받아주세요&apos; , &apos;danger&apos;, &apos;growl-top-right&apos; );</div><div class="line">      FlowRouter.go(&apos;/login&apos;);</div><div class="line">    &#125;</div><div class="line">    else</div><div class="line">    &#123;</div><div class="line">      Bert.alert( err.message , &apos;danger&apos;, &apos;growl-top-right&apos; );</div><div class="line">    &#125;</div><div class="line">  &#125;);</div><div class="line"></div><div class="line">&#125;</div></pre></td></tr></table></figure>
<p>이를 <code>server/accounts.js&#39;의</code>register` 메소드에서 다시 받게 됩니다.  그리고 ‘Accounts.createUser()’에 받은 값들을 넘깁니다. </p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div><div class="line">25</div><div class="line">26</div><div class="line">27</div><div class="line">28</div><div class="line">29</div><div class="line">30</div><div class="line">31</div><div class="line">32</div><div class="line">33</div><div class="line">34</div><div class="line">35</div><div class="line">36</div><div class="line">37</div><div class="line">38</div><div class="line">39</div></pre></td><td class="code"><pre><div class="line"></div><div class="line">Meteor.methods(&#123;</div><div class="line"></div><div class="line">  register: function(data) // 서버측에서 회원가입 실행시 사용됨.</div><div class="line">  &#123;</div><div class="line"></div><div class="line">&apos;</div><div class="line">&apos;</div><div class="line">&apos;</div><div class="line">[중략]</div><div class="line">&apos;</div><div class="line">&apos;</div><div class="line">&apos;</div><div class="line">    // 회원가입 시작</div><div class="line">    try</div><div class="line">    &#123;</div><div class="line">      user = Accounts.createUser(&#123;</div><div class="line">        username: data.username,</div><div class="line">        email: data.email,</div><div class="line">        password: data.password,</div><div class="line">        profile:&#123;</div><div class="line">          serviceType: &apos;site&apos;,</div><div class="line">          firstName: data.profile.firstName,</div><div class="line">          lastName: data.profile.lastName,</div><div class="line">          gender: &apos;&apos;</div><div class="line">        &#125;</div><div class="line">      &#125;);</div><div class="line"></div><div class="line">      return &#123;</div><div class="line">        &quot;userId&quot;: user</div><div class="line">      &#125;;</div><div class="line"></div><div class="line">    &#125;</div><div class="line">    catch (err)</div><div class="line">    &#123;</div><div class="line">      throw err;</div><div class="line">    &#125;</div><div class="line"></div><div class="line">  &#125;,</div></pre></td></tr></table></figure>
<p>마지막으로 <code>Accounts.onCreate()</code> api를 사용하여 위의 값이 저장될 때 다시한번, 사용자 정의 값이 어디에 저장될 지 지정해 주면 됩니다. 참고로, profile값들은 options.profile에 들어가 있고, 아래와 같이 설정하면 정상적으로 몽고디비의 user collection의 가입자의 profile에 저장됩니다. </p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div></pre></td><td class="code"><pre><div class="line"></div><div class="line">Accounts.onCreateUser(function (options, user) </div><div class="line">&#123;</div><div class="line"></div><div class="line">  user.profile = options.profile;// 이렇게 안해주면 profile이 없는 상태로 가입됨...</div><div class="line"></div><div class="line"></div><div class="line">[아래 생략]</div><div class="line">.</div><div class="line">.</div><div class="line">.</div></pre></td></tr></table></figure>
<p>머 회원가입 과정은 대략 이렇습니다. 제 설명으로 조금이나마 이 과정이 이해가 되었으면 좋겠지만, 그렇지 않다면, 그냥 이렇게 가입이 되고 로그인이 된다로 이해하고 넘어가 주셔도 될 것 같습니다. 제가 강좌를 처음 쓰는 것이라, 여러 설명이 조금 매끄럽지 못한점은 양해 부탁드립니다. ㅡㅜ</p>
<p>그럼 다음 강좌도 계속 봐주세요 ^^</p>
]]></content>
    
    <summary type="html">
    
      &lt;h3 id=&quot;4-회원가입-기본&quot;&gt;&lt;a href=&quot;#4-회원가입-기본&quot; class=&quot;headerlink&quot; title=&quot;4. 회원가입 기본&quot;&gt;&lt;/a&gt;4. 회원가입 기본&lt;/h3&gt;&lt;p&gt;저번 강좌를 통해 기본적인 페이지 디자인과 페이지 이동(routing) 
    
    </summary>
    
    
      <category term="meteor, custom account, 미티어" scheme="http://freeseamew.github.io/tags/meteor-custom-account-%EB%AF%B8%ED%8B%B0%EC%96%B4/"/>
    
  </entry>
  
  <entry>
    <title>Meteor custom account 강좌 1</title>
    <link href="http://freeseamew.github.io/2017/07/02/meteor-account-tutorial-1/"/>
    <id>http://freeseamew.github.io/2017/07/02/meteor-account-tutorial-1/</id>
    <published>2017-07-01T15:40:32.000Z</published>
    <updated>2017-07-03T15:53:21.000Z</updated>
    
    <content type="html"><![CDATA[<h3 id="0-강좌-소개"><a href="#0-강좌-소개" class="headerlink" title="0. 강좌 소개"></a>0. 강좌 소개</h3><p>풀스택 플랫폼인 meteor는 기본적으로 account(로그인, 회원가입 등)에 대해서도 간단한 태그 하나로 구현할 수 있도록 기능을 제공하고 있습니다. 하지만 실제 프로젝트에서는 이 기본 기능 이외에 사이트에 맞게 account를 수정해야 할 경우가 종종 발생할 것입니다. 이 강좌는 이런 account에 대한 사용자 정의 작성에 대한 강좌가 되겠습니다.<br>이 강좌에서 meteor에 대한 기본 설명을 모두 하기는 어렵겠지만 필요한 부분에 대해서는 간단하게 추가 설명을 해보도록 하겠습니다.</p>
<p>이 강좌에서 다룰 Meteor의 account 기능으로는 <code>회원가입</code>, <code>로그인</code>, <code>이메일 인증</code>, <code>비밀번호 분실 변경메일 보내기</code>, <code>소셜 로그인</code> 이 되겠습니다. 사실 이메일을 통한 회원 인증만 하더라고 구현하기 위해서는 꽤 노력이 필요하고, 소셜 로그인(facebook, twiter, google, kakao)의 경우는 지금은 많은 사이트에서 기본으로 사용하는 기능이지만 막상 구현해 보려고 하면 이것도 꽤 삽질?이 필요한 기능인 것을 많은 분들이 공감하실 겁니다. Meteor에서는 이 모든 기능들이 기본 API로 제공되기도 하고, 설치 패키지를 통해 쉽게 구현할 수 있도록 해주고 있습니다. 사실 소셜 로그인 기능만으로도 Meteor를 한번쯤 사용해볼 가치가 있다고 개인적으로는 생각합니다. 자 그럼 본격적으로 강좌를 시작해 보겠습니다. </p>
<blockquote>
<h4 id="강좌에서-다를-내용들"><a href="#강좌에서-다를-내용들" class="headerlink" title="# 강좌에서 다를 내용들"></a># 강좌에서 다를 내용들</h4><ul>
<li>회원가입폼</li>
<li>라우터</li>
<li>validate + method</li>
<li>로그인</li>
<li>비밀번호 찾기</li>
<li>비밀번호 변경</li>
<li>화면전환 + 로딩효과</li>
<li>소셜 로그인 </li>
</ul>
</blockquote>
<hr>
<h3 id="1-설치"><a href="#1-설치" class="headerlink" title="1. 설치"></a>1. 설치</h3><h4 id="1-1-설치-공통"><a href="#1-1-설치-공통" class="headerlink" title="1.1 설치 공통"></a>1.1 설치 공통</h4><blockquote>
<p>meteor.com 에서 os에 맞는 버전의 프로그램을 다운 받습니다.</p>
</blockquote>
<h4 id="1-2-리눅스-amp-맥-os"><a href="#1-2-리눅스-amp-맥-os" class="headerlink" title="1.2 리눅스 &amp; 맥 os"></a>1.2 리눅스 &amp; 맥 os</h4><ul>
<li>mkdir 로 폴더 만든다,</li>
<li>meteor create 프로젝트명</li>
<li>meteor npm install –save bcrypt</li>
<li>meteor npm install</li>
</ul>
<h4 id="1-3-윈도우-대기"><a href="#1-3-윈도우-대기" class="headerlink" title="1.3 윈도우 (대기)"></a>1.3 윈도우 (대기)</h4><p>탐색기에서 폴더 만들고 cmd 창을 열어 해당 폴더로 이동합니다. </p>
<p>: 참고 사이트<br><a href="http://kr.discovermeteor.com/chapters/getting-started/" target="_blank" rel="noopener">http://kr.discovermeteor.com/chapters/getting-started/</a><br><a href="http://webframeworks.kr/getstarted/meteorjs/" target="_blank" rel="noopener">http://webframeworks.kr/getstarted/meteorjs/</a></p>
<h4 id="1-4-기본-폴더"><a href="#1-4-기본-폴더" class="headerlink" title="1.4 기본 폴더"></a>1.4 기본 폴더</h4><p>위의 설치가 끝나면, client, server 폴더 내의 설치시 기본적으로 제공되는 파일들은 삭제해 줍니다. </p>
<p>폴더구조에 대해서 간단히 설명해 드리자면, client와 server는 각각 해당 폴더에 들어있는 파일들은 클라이언트측과 서버측에서 호출이 가능한 파일들입니다. 폴더에 넣어 두는 것으로 파일들의 실행위치가 결정됩니다. 그리고 lib 폴더의 경우 이 두곳에서 모두 사용할 필요가 있는 공통 파일들을 넣어두는 곳입니다. </p>
<p>사실 이 방법은 현재 meteor 가이드에서 기본적으로 추천하는 방식은 아닙니다. 현재는 es6 의 기본 문법인 import, export 를 통한 필요한 파일들을 불러오고 내보내는 방식을 추천하고 있습니다. 하지만 예전 방식(폴더별로 넣어두면 자동으로 실행위치에 따라 실행되는)이 갖는 편리함이 있어 개인적으로는 아직까지 예전방식을 주로 사용하고 있습니다. 나중에 es6방식으로도 강좌를 정리해 보도록 하겠습니다. (솔직히 말하면 import, export를 사용하는 방식이 아직 서툽니다. ㅡㅜ )</p>
<p><code># 기본 폴더 구조</code><br><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div></pre></td><td class="code"><pre><div class="line">meteorAccount</div><div class="line">├── .meteor</div><div class="line">├── client</div><div class="line">├── lib</div><div class="line">├── node_module</div><div class="line">└── server</div></pre></td></tr></table></figure></p>
<hr>
<h3 id="2-라우터-설계-url-주소에-따른-화면-전환"><a href="#2-라우터-설계-url-주소에-따른-화면-전환" class="headerlink" title="2. 라우터 설계(url 주소에 따른 화면 전환)"></a>2. 라우터 설계(url 주소에 따른 화면 전환)</h3><p>제일 처음 할 일은, 일단 처음 시작페이를 만들고, 거기서 로그인 또는 회원가입 페이지로의 화면전환 페이지를 만드는 것부터 시작해 보겠습니다. 쉽게 말해 흔히 하는 간단한 라우팅 작업을 해보는 것입니다. </p>
<p>미티어는 기본적으로 router를 제공하고 있지 않지만, 설치 페키지를 통해서 사용자가 router를 선택해 설치할 수 있습니다. 이번 강좌에서는 현재 제일 많이 사용된다고 판단되는 flow-router를 설치 후 사용하도록 하겠습니다. </p>
<p>프로젝트 폴더에서 터미널 또는 cmd창을 열고 아래 <code>설치패키지</code> 관련 명령어를 입력해서 필요한 패키지를 설치하도로록 하겠습니다. </p>
<p>meteor의 경우 다양한 front-end 프레임워크를 지원하는데, 이번 강좌에서는 meteor의 기본 프론트엔드 프레임워크인 blaze를 사용할 것임으로 필요한 blaze-layout도 함께 설치하겠습니다. </p>
<p>참고로 meteor는 <code>meteor add 패키지이름</code> 이런식으로 필요한 패키지를 사용할수 있습니다. 위의 명령어를 프로젝트가 있는 폴더경로의 터미널창에서 입력하시면 됩니다. <code>참고사이트</code>는 meteor에서 사용할 수 있는 컴포넌트를 모아놓은 사이트 입니다. 이 사이트에서 필요한 기능들을 검색해 보시면 많은 기능들이 기본적으로 지원되고 있는 것을 확인 할 수 있을 것입니다. </p>
<blockquote>
<p>설치 패키지</p>
<ul>
<li>meteor add kadira:flow-router</li>
<li>meteor add kadira:blaze-layout</li>
</ul>
<p>: 참고 사이트<br><a href="https://atmospherejs.com/" target="_blank" rel="noopener">https://atmospherejs.com/</a></p>
</blockquote>
<p>아래 폴더 구조를 참고하여 새로 폴더 및 파일들을 만들어 줍니다.<br>참고로 meteor의 blaze의 경우 template방식으로, 같은 이름의 html, js, css 가 함께 작동하는 구조입니다. login.html에 html구조의 템플릿을 만들고, 여기서 사용할 js 파일의 경우 login.js를 만들어 사용하면 되는 구조가 됩니다. </p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div><div class="line">25</div></pre></td><td class="code"><pre><div class="line">meteorAccount</div><div class="line">├── .meteor</div><div class="line">├── client</div><div class="line">│   ├── styles  </div><div class="line">│   │    └── main.css </div><div class="line">│   ├── change-password.html </div><div class="line">│   ├── change-password.js</div><div class="line">│   ├── main-layout.html</div><div class="line">│   ├── main-layout.js </div><div class="line">│   ├── home.html</div><div class="line">│   ├── home.js</div><div class="line">│   ├── login.html </div><div class="line">│   ├── login.js</div><div class="line">│   ├── recover-password.html </div><div class="line">│   ├── recover-password.js</div><div class="line">│   ├── register.html </div><div class="line">│   └── register.js </div><div class="line">├── lib</div><div class="line">│   ├── checkPattern.js </div><div class="line">│   └── routes.js </div><div class="line">├── node_module</div><div class="line">├── public</div><div class="line">└── server</div><div class="line">    ├── accounts.js </div><div class="line">    └── accountsMails.js</div></pre></td></tr></table></figure>
<p>사용할 css 요소를 client/styles/main.css 에 파일을 만들고, 아래 style파일을 복사에 붙여넣기를 사용하여 적용합니다. bootstrap을 기본으로 하고, 조금 수정하여 사용할 예정입니다. bootstrap 역시도 아래를 참고로 패키지를 설치하여 사용 할 수 있습니다. </p>
<blockquote>
<p>설치 패키지</p>
<ul>
<li>meteor add twbs:bootstrap@=3.3.6</li>
</ul>
<p>main.css 소스 링크<br><a href="https://gist.github.com/freeseamew/bf3ce3e1fcc13fa33d26a6a1aaf06379" target="_blank" rel="noopener">https://gist.github.com/freeseamew/bf3ce3e1fcc13fa33d26a6a1aaf06379</a></p>
</blockquote>
<p>이제 라우터 설정을 해보겠습니다.<br>기본적인 라우터 설정은 아래와 같습니다. 아래 내용을 참고로 해당 위치에 파일을 만들고 소스를 입력해 주시면 됩니다. </p>
<p><code>lib/routes.js</code></p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div><div class="line">25</div><div class="line">26</div></pre></td><td class="code"><pre><div class="line">FlowRouter.route(&apos;/&apos;, &#123;</div><div class="line">  name: &apos;home&apos;,</div><div class="line">  action: function() &#123;</div><div class="line">    BlazeLayout.render(&apos;mainLayout&apos;, &#123;</div><div class="line">      content:&apos;home&apos;</div><div class="line">    &#125;);</div><div class="line">  &#125;</div><div class="line">&#125;);</div><div class="line"></div><div class="line">FlowRouter.route(&apos;/login&apos;, &#123;</div><div class="line">  name: &apos;login&apos;,</div><div class="line">  action() &#123;</div><div class="line">    BlazeLayout.render(&apos;mainLayout&apos;, &#123;</div><div class="line">      content: &apos;login&apos;</div><div class="line">    &#125;);</div><div class="line">  &#125;</div><div class="line">&#125;);</div><div class="line"></div><div class="line">FlowRouter.route(&apos;/register&apos;, &#123;</div><div class="line">  name:&apos;register&apos;,</div><div class="line">  action: function() &#123;</div><div class="line">    BlazeLayout.render(&apos;mainLayout&apos;, &#123;</div><div class="line">      content: &apos;register&apos;</div><div class="line">    &#125;);</div><div class="line">  &#125;</div><div class="line">&#125;);</div></pre></td></tr></table></figure>
<p>라우터에 대해서 조금 설명 드리면,<br>아래의 내용을 예로 <code>http://localhost:3000/register</code> 주소로 url을 입력하면 <code>regiger</code>라는 template이 <code>mainLayout</code>이라는 곳에 보여 진다는 의미를 가집니다. 다시 설명 하자면, url주소에 따라 home, login, register 등의 페이지로 이동하게 하는 기능을 합니다. </p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div></pre></td><td class="code"><pre><div class="line">FlowRouter.route(&apos;/register&apos;, &#123; // url 경로</div><div class="line">  name:&apos;register&apos;, // 해당 라이팅 이름</div><div class="line">  action: function() &#123;</div><div class="line">    BlazeLayout.render(&apos;mainLayout&apos;, &#123; // template이 뿌려질 위치 </div><div class="line">      content: &apos;register&apos; // template 이름 </div><div class="line">    &#125;);</div><div class="line">  &#125;</div><div class="line">&#125;);</div></pre></td></tr></table></figure>
<p>다음은 위에 잠시 설명한 주소에 따라 템플릿을 뿌려줄 일종의 부모 템플릿을 설정하는 파일이 되겠습니다. client/main-layout.js 에 파일을 만들고 내용을 입력해 주세요.</p>
<p><code>main-layout.html</code></p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div></pre></td><td class="code"><pre><div class="line">&lt;template name=&quot;mainLayout&quot;&gt;</div><div class="line">  &lt;div class=&quot;container&quot;&gt;</div><div class="line">    &#123;&#123;&gt; Template.dynamic template=content &#125;&#125;</div><div class="line">  &lt;/div&gt;</div><div class="line">&lt;/template&gt;</div></pre></td></tr></table></figure>
<p>다음으로 아래 소스들은 각각 login.html, register.html 그리고 home.html로 이루어진 기본 페이지가 되겠습니다. </p>
<p>참고로 아래와 같이 <code>pathFor &#39;login&#39;</code> 이렇게 a 태그에 입력해 주면 <a href="http://localhost:3000/login" target="_blank" rel="noopener">http://localhost:3000/login</a> 처럼 주소에 + 이동할url 형태의 링크 주소를 만들어 주게 되는 문법입니다.  </p>
<p>이 기능을 사용하기 위해서는 아래 패키지가 필요합니다. </p>
<blockquote>
<p>설치 패키지</p>
<ul>
<li>meteor add arillo:flow-router-helpers</li>
</ul>
</blockquote>
<p><code>client/home.html</code></p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div></pre></td><td class="code"><pre><div class="line">&lt;template name=&quot;home&quot;&gt;</div><div class="line">  &lt;div class=&quot;col-md-8 col-md-offset-2&quot;&gt;</div><div class="line">    &lt;div class=&quot;col-md-12&quot;&gt;</div><div class="line">      &lt;div class=&quot;col-md-12&quot;&gt;</div><div class="line">        &lt;h2&gt;환영합니다.&lt;/h2&gt;</div><div class="line">        &lt;hr/&gt;</div><div class="line">      &lt;/div&gt;</div><div class="line">      &lt;div class=&quot;col-md-6&quot;&gt;</div><div class="line">        &lt;a href=&quot;&#123;&#123;pathFor &apos;login&apos;&#125;&#125;&quot; class=&quot;btn btn-primary btn-lg btn-block&quot;&gt;Go Login&lt;/a&gt;</div><div class="line">      &lt;/div&gt;</div><div class="line">      &lt;div class=&quot;col-md-6&quot;&gt;</div><div class="line">        &lt;a href=&quot;&#123;&#123;pathFor &apos;register&apos;&#125;&#125;&quot; class=&quot;btn btn-success btn-lg btn-block&quot;&gt;Go Register&lt;/a&gt;</div><div class="line">      &lt;/div&gt;</div><div class="line">    &lt;/div&gt;</div><div class="line">  &lt;/div&gt;</div><div class="line">&lt;/template&gt;</div></pre></td></tr></table></figure>
<p><code>client/register.html</code></p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div></pre></td><td class="code"><pre><div class="line">&lt;template name=&quot;register&quot;&gt;</div><div class="line">  &lt;h1&gt;Register Page&lt;/h1&gt;</div><div class="line">&lt;/template&gt;</div></pre></td></tr></table></figure>
<p><code>client/login.html</code></p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div></pre></td><td class="code"><pre><div class="line">&lt;template name=&quot;login&quot;&gt;</div><div class="line">  &lt;h1&gt;Login page&lt;/h1&gt;</div><div class="line">&lt;/template&gt;</div></pre></td></tr></table></figure>
<p>이제 설정이 완료 되었습니다. 기본 주소인 localhost:3000/ 을 브라우저에 입력하고 화면이 나오는지 확인해 보세요. 그리고 localhost:3000/login , localhost:3000/register 로 주소를 변경해 해당페이지로 잘 이동하는지 확인 보시면 됩니다. </p>
<p><img src="https://lh3.googleusercontent.com/0yllbkf5fFZcn0bBoht3mxG4zkZpQlE_cIfNVKvW7GE2Mi0_x5RKnxqoJbQtSEYjCm5Bp1yLNPPnvCeeRRA4jOugmSVIaEizhe0TH1vSTIUGBwToXJIIRAoZAr8ekmxmnYSTiMLYBbRRwGSreU5hMdYQefcC8oIiY1hO2RynG6sZFD8xuxd1u3An1Y8kJTEyQk3Mli7YxZBoNW648P5LrJxhsgZPxP5bFQSOUDXL_tXBaXuYpJqBCb2rVO27p89VOgfO8VgBrXF8vRKigGvGBmO5oyGcHfe3ELWcdESFQgSj3U_V7wRzFx4QZ00FgOs3W-URZxInesRvF63ZMTwWdVBW49W8_glHFTKikp-nOTxMhJBnImshQKUcTbBuiJduzs3sPqhG6vLhEBn3e_6-ZOmXWPX1qFRFDq95TgBjozhBvNFPJpU_ZWYR8AyE43EnlbT4acjix2XWbaWy3gViExLGspiMTOzi7N3R--SjnHRHwptzym1dQ1O-d3DjdHUooGItgWqgKcQvW08qDkuGmGtVCI18LhzuUdF279bV63lv6P0pLDwAKu0i66uyZx2XSsR48OazYoYX4gAHGira61qfHgtkTsPuECYWApx-TtorWvfPwTr4gQ=w890-h638-no"></p><p style="text-align: center;">[라우팅 화면]</p><p></p>
<hr>
<h3 id="3-회원가입"><a href="#3-회원가입" class="headerlink" title="3. 회원가입"></a>3. 회원가입</h3><p>이제 회원 가입 폼과 로그인 폼을 작성하겠습니다.<br>우선 아래 소스는 로그인 파일입니다. </p>
<p><code>client/login.html</code></p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div><div class="line">25</div><div class="line">26</div><div class="line">27</div><div class="line">28</div><div class="line">29</div><div class="line">30</div><div class="line">31</div><div class="line">32</div><div class="line">33</div><div class="line">34</div><div class="line">35</div><div class="line">36</div><div class="line">37</div><div class="line">38</div><div class="line">39</div><div class="line">40</div><div class="line">41</div><div class="line">42</div><div class="line">43</div><div class="line">44</div></pre></td><td class="code"><pre><div class="line">&lt;template name=&quot;login&quot;&gt;</div><div class="line"></div><div class="line">  &lt;div class=&quot;container&quot;&gt;</div><div class="line">    &lt;div class=&quot;panel panel-default col-md-6 col-md-offset-3  panel-custom&quot;&gt;</div><div class="line">      &lt;div class=&quot;panel-heading text_center&quot;&gt;</div><div class="line">        &lt;h2&gt;METEOR ACCOUNTS&lt;/h2&gt;</div><div class="line">      &lt;/div&gt;</div><div class="line">      &lt;div class=&quot;panel-body panel-body-set&quot;&gt;</div><div class="line">        &lt;span class=&quot;span-or&quot;&gt;or&lt;/span&gt;</div><div class="line">        &lt;div class=&quot;col-xs-12 button-box-1&quot;&gt;</div><div class="line">          &lt;a href=&quot;&#123;&#123;pathFor &apos;register&apos;&#125;&#125;&quot; class=&quot;top-button &quot;&gt;회원가입&lt;/a&gt;</div><div class="line">          &lt;a href=&quot;#null&quot; class=&quot;top-button top-button-selected&quot;&gt;로그인&lt;/a&gt;</div><div class="line">        &lt;/div&gt;</div><div class="line">        &lt;div class=&quot;col-xs-12 button-box-2&quot;&gt;</div><div class="line">          &lt;div class=&quot;col-xs-6 button-box-2-inner button-box-left&quot;&gt;</div><div class="line">            &lt;button name=&quot;facebook&quot; class=&quot;btn btn-primary button-full button-facebook&quot;&gt;facebook&lt;/button&gt;</div><div class="line">          &lt;/div&gt;</div><div class="line">          &lt;div class=&quot;col-xs-6 button-box-2-inner button-box-right&quot;&gt;</div><div class="line">            &lt;button name=&quot;google&quot; class=&quot;btn btn-primary button-full button-google&quot;&gt;google&lt;/button&gt;</div><div class="line">          &lt;/div&gt;</div><div class="line">          &lt;div class=&quot;col-xs-6 button-box-2-inner button-box-left&quot;&gt;</div><div class="line">            &lt;button name=&quot;twitter&quot; class=&quot;btn btn-primary button-full button-twitter&quot;&gt;twitter&lt;/button&gt;</div><div class="line">          &lt;/div&gt;</div><div class="line">          &lt;div class=&quot;col-xs-6 button-box-2-inner button-box-right&quot;&gt;</div><div class="line">            &lt;button name=&quot;kakao&quot; class=&quot;btn btn-primary button-full button-kakao&quot;&gt;kakao&lt;/button&gt;</div><div class="line">          &lt;/div&gt;</div><div class="line">        &lt;/div&gt;</div><div class="line">        &lt;form class=&quot;col-md-12 panel-body-inner&quot;&gt;</div><div class="line">          &lt;div class=&quot;form-group&quot;&gt;</div><div class="line">            &lt;input type=&quot;text&quot; name=&quot;user-email&quot; class=&quot;form-control account-text-form-1&quot; placeholder=&quot;가입 이메일&quot;&gt;</div><div class="line">          &lt;/div&gt;</div><div class="line">          &lt;div class=&quot;form-group&quot;&gt;</div><div class="line">            &lt;input type=&quot;text&quot; name=&quot;user-pwasword&quot; class=&quot;form-control account-text-form-1&quot; placeholder=&quot;비밀번호&quot;&gt;</div><div class="line">          &lt;/div&gt;</div><div class="line">        &lt;/form&gt;</div><div class="line">        &lt;div class=&quot;form-group panel-body-inner bottom-padding&quot;&gt;</div><div class="line">          &lt;button name=&quot;btn-singIn&quot; class=&quot;btn btn-success btn-lg btn-block button&quot;&gt;로그인&lt;/button&gt;</div><div class="line">          &lt;a href=&quot;&#123;&#123;pathFor &apos;recover&apos;&#125;&#125;&quot; class=&quot;a-right&quot; &gt;비밀번호 찾기&lt;/a&gt;</div><div class="line">        &lt;/div&gt;</div><div class="line">      &lt;/div&gt;</div><div class="line">    &lt;/div&gt;</div><div class="line">  &lt;/div&gt;</div><div class="line">  </div><div class="line">&lt;/template&gt;</div></pre></td></tr></table></figure>
<p>로그인 페이지를 입력하고 ‘localhost:3000/login’ 에 접속하면 아래와 같은 화면을 보여줍니다. </p>
<p><img src="https://lh3.googleusercontent.com/OEydsReV1cWjwbaYsdBsSYvB1o6hnHEnHEvR5IxeNuiZiQbURGN3uf8cnRONQalyGtGjqi6-R9cA7al-bhp6A8caALjO9BB-qW-AQ74g079k2rF7uTHYbCec6oUAf1L12MyCWEfCccJ01rZQsuUnL2PK9zE1oNXZiQxCsxLS4xqV_0bmepn4RoK-KpuEDCExMtEj6jDdGup8WPvi9ghEYCeRtI2A65RuRNyk_ZX67kvmkky4DRaLR0AdQdjEwf98lC6Klr1E5druaA2OBvle7MQtCz0iJDMtRGytNi5MTxzdomsghq7CBRjTz_Ny1gGHqff9uufEk_K39c3cOPnUU7W4t_udN9SG4RJ39CKX6n50VgtJjH3kmmND3Czbux_m32KRbZPbh9ipDhMdIsFa8hdaKVPZn6LTyRefU00DvFTg1I48wcwbDJgaOJRvWdcxHP88o_9hTocQJB9HPtGuYw4BuPanYkpXua1LVt7c7kdFtIlsQlnhtQV5MmugJT5zhgtBHjt4XO0XmP0D1deMJ4uhhv5iVFmJQs6o0Vw7x8xMf4gu2IK1ET314GgVa95n-YVHO32Gsv9vhQBYT57qxvswq04mB8JzXEyqbmqjeWHSoG8p7KZ7JgrT1O6NQ25a3YWL_reGXqhgIQyi1Nb7BKjvQdf2gQLIisfUab76sF0=w639-h602-no"></p><p style="text-align: center;">[로그인폼 화면]</p><p></p>
<p>다음은 회원가입폼 관련 소스입니다. </p>
<p><code>client/register.html</code></p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div><div class="line">25</div><div class="line">26</div><div class="line">27</div><div class="line">28</div><div class="line">29</div><div class="line">30</div><div class="line">31</div><div class="line">32</div><div class="line">33</div><div class="line">34</div><div class="line">35</div><div class="line">36</div><div class="line">37</div><div class="line">38</div><div class="line">39</div><div class="line">40</div><div class="line">41</div><div class="line">42</div><div class="line">43</div><div class="line">44</div><div class="line">45</div><div class="line">46</div><div class="line">47</div><div class="line">48</div></pre></td><td class="code"><pre><div class="line">&lt;template name=&quot;register&quot;&gt;</div><div class="line">  &lt;div class=&quot;panel panel-default col-md-6 col-md-offset-3  panel-custom&quot;&gt;</div><div class="line">    &lt;div class=&quot;panel-heading text_center&quot;&gt;</div><div class="line">      &lt;h2&gt;METEOR ACCOUNTS&lt;/h2&gt;</div><div class="line">    &lt;/div&gt;</div><div class="line">    &lt;div class=&quot;panel-body panel-body-set&quot;&gt;</div><div class="line">      &lt;span class=&quot;span-or&quot;&gt;or&lt;/span&gt;</div><div class="line">      &lt;div class=&quot;col-xs-12 button-box-1&quot;&gt;</div><div class="line">        &lt;a href=&quot;#null&quot; class=&quot;top-button top-button-selected&quot;&gt;회원가입&lt;/a&gt;</div><div class="line">        &lt;a href=&quot;&#123;&#123;pathFor &apos;login&apos;&#125;&#125;&quot; class=&quot;top-button&quot;&gt;로그인&lt;/a&gt;</div><div class="line">      &lt;/div&gt;</div><div class="line">      &lt;div class=&quot;col-xs-12 button-box-2&quot;&gt;</div><div class="line">        &lt;div class=&quot;col-xs-6 button-box-2-inner button-box-left&quot;&gt;</div><div class="line">          &lt;button name=&quot;facebook&quot; class=&quot;btn btn-primary button-full button-facebook&quot;&gt;facebook&lt;/button&gt;</div><div class="line">        &lt;/div&gt;</div><div class="line">        &lt;div class=&quot;col-xs-6 button-box-2-inner button-box-right&quot;&gt;</div><div class="line">          &lt;button class=&quot;btn btn-primary button-full button-google&quot;&gt;google&lt;/button&gt;</div><div class="line">        &lt;/div&gt;</div><div class="line">        &lt;div class=&quot;col-xs-6 button-box-2-inner button-box-left&quot;&gt;</div><div class="line">          &lt;button class=&quot;btn btn-primary button-full button-twitter&quot;&gt;twitter&lt;/button&gt;</div><div class="line">        &lt;/div&gt;</div><div class="line">        &lt;div class=&quot;col-xs-6 button-box-2-inner button-box-right&quot;&gt;</div><div class="line">          &lt;button name=&quot;kakao&quot; class=&quot;btn btn-primary button-full button-kakao&quot;&gt;kakao&lt;/button&gt;</div><div class="line">        &lt;/div&gt;</div><div class="line">      &lt;/div&gt;</div><div class="line">      &lt;form class=&quot;col-xs-12 panel-body-inner&quot;&gt;</div><div class="line">        &lt;div class=&quot;form-group&quot;&gt;</div><div class="line">          &lt;input type=&quot;text&quot; name=&quot;user-email&quot; class=&quot;form-control account-text-form-1&quot; placeholder=&quot;가입 이메일&quot;&gt;</div><div class="line">        &lt;/div&gt;</div><div class="line">        &lt;div class=&quot;form-group&quot;&gt;</div><div class="line">          &lt;input type=&quot;text&quot; name=&quot;user-password&quot; class=&quot;form-control account-text-form-1&quot; placeholder=&quot;비밀번호&quot;&gt;</div><div class="line">        &lt;/div&gt;</div><div class="line">        &lt;div class=&quot;form-group&quot;&gt;</div><div class="line">          &lt;input type=&quot;text&quot; name=&quot;user-passwordAgain&quot; class=&quot;form-control account-text-form-1&quot; placeholder=&quot;비밀번호 확인&quot;&gt;</div><div class="line">        &lt;/div&gt;</div><div class="line">        &lt;div class=&quot;form-group col-xs-6 panel-body-inner-box-1&quot;&gt;</div><div class="line">          &lt;input type=&quot;text&quot; name=&quot;user-lastName&quot; class=&quot;form-control account-text-form-2&quot; placeholder=&quot;성&quot;&gt;</div><div class="line">        &lt;/div&gt;</div><div class="line">        &lt;div class=&quot;form-group col-xs-6 panel-body-inner-box-2&quot;&gt;</div><div class="line">          &lt;input type=&quot;text&quot; name=&quot;user-firstName&quot; class=&quot;form-control account-text-form-2&quot; placeholder=&quot;이름&quot;&gt;</div><div class="line">        &lt;/div&gt;</div><div class="line">      &lt;/form&gt;</div><div class="line">      &lt;div class=&quot;form-group panel-body-inner bottom-padding&quot;&gt;</div><div class="line">        &lt;button name=&quot;btn-register&quot; class=&quot;btn btn-success btn-lg btn-block button&quot;&gt;가입하기&lt;/button&gt;</div><div class="line">      &lt;/div&gt;</div><div class="line">    &lt;/div&gt;</div><div class="line">  &lt;/div&gt;</div><div class="line">&lt;/template&gt;</div></pre></td></tr></table></figure>
<p>회원가입폼 역시 ‘localhost:3000/register’ 에 접속하면 다음과 같은 모습을 보여줍니다. </p>
<p><img src="https://lh3.googleusercontent.com/G3rObdtW8OeRcoJF1hwBjFslttmYxU_ErLXIrU5qtHULOSgaHaMpn-n_rzrwTfUhMs0pzJgLWogUmNOp2fKTpXERta9InsWydVyjq2SYFrY9DVWXMxbAmkcdi_AV6OGij7nB1CtGsMox4L01licd_D3bcJAeNREGViggIaaWcfeElA_Q0uT2Ean-b9GtjU6ffBLzCtsbYVT1tX1NWKbgVDIdaDeEMmhpOtflpgx3x00yxN7DRpxqye4jV9VV4QnDskT0irDUuzUn26-HpnYeg0oUfHU9rNGKSkPT-WCUx2oWNFngklAsZBuBad9bxKY24tS-fN3geI4LbdHU19wCtgFyM71RavARBtr4U5i-Gr2J9C5P2efM6Mk8xFSwy41NbC7gqfRaIKVWV9ZHveRNpoBsXxhvSwDr_PubQTPxR9XMdf6A7tsHZhSAVu3lO44yLg9y5TtIecC2NVprYwWxqitjUygLIzvS_94bdfrrsG4A0LummWDZbpAjaMA28xQr6B5--_dhLrd11NXKOeZk0DmS6-0IgnWtnVySD1cDjyKrraC7QOmVEqf8_gXBMR0JJsLhC4WrXzSVg27P0xTTrDgD6AzzvDalLxY1rs5uc2LRXfyVkRjcHqCtxFx5i3zpyRU23UlZRauwpVRxyMoYsUiip60r8if5vxC4fyKViNM=w631-h714-no"></p><p style="text-align: center;">[회원가입폼 화면]</p><p></p>
<p>자 이렇게 기본적인 account 외형을 다 만들어 봤는데요. 이제 다음 강좌에서는 본격적으로 회원가입, 로그인 등이 실제 작동하도록 만들어 보도록 하겠습니다. </p>
<p>그럼 다음 강좌도 기대해주세요 ^^</p>
]]></content>
    
    <summary type="html">
    
      &lt;h3 id=&quot;0-강좌-소개&quot;&gt;&lt;a href=&quot;#0-강좌-소개&quot; class=&quot;headerlink&quot; title=&quot;0. 강좌 소개&quot;&gt;&lt;/a&gt;0. 강좌 소개&lt;/h3&gt;&lt;p&gt;풀스택 플랫폼인 meteor는 기본적으로 account(로그인, 회원가입 등)에 대해서
    
    </summary>
    
    
      <category term="meteor, custom account, 미티어" scheme="http://freeseamew.github.io/tags/meteor-custom-account-%EB%AF%B8%ED%8B%B0%EC%96%B4/"/>
    
  </entry>
  
</feed>