Outsider's Dev Story: Publishing 카테고리 글 목록https://blog.outsider.ne.kr/Stay Hungry. Stay Foolish. Don't Be Satisfied.2024-03-15T09:37:56+09:00Textcube 1.10.7 : Tempo primoGitHub에서 사용자 테마에 따라 다른 이미지 보여주기Outsiderhttps://blog.outsider.ne.kr/16202022-09-09T20:02:24+09:002022-09-09T20:02:24+09:00<p>요즘은 OS에서 라이트 테마와 다크 테마를 잘 지원해야 하므로 <a href="https://github.blog/changelog/2021-04-14-dark-and-dimmed-themes-are-now-generally-available/">GitHub도 작년부터 다크 테마를 지원</a>하기 시작했다. 그래서 GitHub의 테마는 이제 다양하게 잘 지원되고 있지만 README, 이슈, Pull Request, Wiki 등에서 이미지는 테마에 따라 잘 안 보이는 경우가 생긴다. 이슈나 Pull Request는 그 성격상 어쩔 수 없다고 하더라도 README나 Wiki는 문서의 역할이 더 중요하므로 테마에 따라 적절하게 이미지를 보여주고 싶을 수 있다.(특히 배경이 투명한 경우)</p>
<p>GitHub은 2021년 11월부터 Markdown에서 URL fragment를 이용해서 테마에 따른 이미지를 지원하고 있었다. Markdown에서 이미지를 사용할 때 이미지 URL 뒤에 <code>#gh-dark-mode-only</code>나 <code>#gh-light-mode-only</code>를 붙이면 이에 따라 이미지를 테마에 맞게 보여주는 방식이다.</p>
<pre class="line-numbers"><code class="language-markdown">![Light-Image](http://DARK_IMAGE_URL.png#gh-dark-mode-only)
![Dark-Image](http://LIGHT_IMAGE_URL.png#gh-light-mode-only)
</code></pre>
<p>GitHub의 CSS에서 다음과 같은 코드가 있어서 2개의 이미지를 시스템 테마에 맞게 보여줬다 안보여줬다 하게 된다.</p>
<pre class="line-numbers"><code class="language-clike">@media (prefers-color-scheme: dark)
:root[data-color-mode=auto] .entry-content [href$="#gh-light-mode-only"],
:root[data-color-mode=auto] .comment-body [href$="#gh-light-mode-only"],
:root[data-color-mode=auto] .readme [href$="#gh-light-mode-only"] {
display: none;
}
</code></pre>
<p>여기서 <code>[attr$=value]</code>는 <code>attr</code>라는 속성에 <code>value</code>라는 접미사가 있으면 선택된다. 위 CSS 셀렉터에서 보듯이 정확히는 이미지 URL이라기 보다는 이미지의 링크인 <code>href</code>에 <code>#gh-dark-mode-only</code>나 <code>#gh-light-mode-only</code>가 있어야 제대로 처리된다.</p>
<p>하지만 지난 5월 HTML <code><picture></code> 요소와 <a href="https://developer.mozilla.org/ko/docs/Web/CSS/@media/prefers-color-scheme"><code>prefers-color-scheme</code></a>를 직접 이용하는 방식이 <a href="https://github.blog/changelog/2022-05-19-specify-theme-context-for-images-in-markdown-beta/">발표</a>되었다. <a href="https://docs.github.com/en/get-started/writing-on-github/getting-started-with-writing-and-formatting-on-github/basic-writing-and-formatting-syntax#specifying-the-theme-an-image-is-shown-to">문서에 따르면</a> 기존 URL fragment 방식은 폐기 예정이 되고 앞으로 제거될 수 있다고 한다.</p>
<pre class="line-numbers"><code class="language-html"><picture>
<source media="(prefers-color-scheme: dark)" srcset="http://DARK_IMAGE_URL.png">
<source media="(prefers-color-scheme: light)" srcset="http://LIGHT_IMAGE_URL.png">
<img alt="IMAGE" src="http://LIGHT_IMAGE_URL.png">
</picture>
</code></pre>
<p>위처럼 HTML을 직접 사용한다. 작성하기에는 URL fragment가 더 편한수 있지만 GitHub에서만 지원되는 방식이고 다른 곳에서는 지원이 안 되기 때문에 표준을 따르는 방식으로 바꾼 게 아닐까 싶다.</p>
<p>HTML 표준이니까 당연히도 README 등의 GitHub에서 시스템 테마에 따라 이미지가 잘 바뀐다.</p>
<p style="text-align: center;"><img src="//blog.outsider.ne.kr/attach/1/5597227059.gif" width="750" height="189" alt="사용자 삽입 이미지" title="" /></p>
<p><strong><a href="https://blog.outsider.ne.kr/1620?commentInput=true#entry1620WriteComment">댓글 쓰기</a></strong></p>Netlify Dev 기능으로 개발 중인 사이트 Netlify에 배포하기Outsiderhttps://blog.outsider.ne.kr/14382019-04-24T20:32:30+09:002019-04-24T20:24:33+09:00<p>전에 <a href="https://blog.outsider.ne.kr/1417">Netlify를 소개</a>했었는데 며칠 전에 <a href="https://www.netlify.com/blog/2019/04/09/netlify-dev--our-entire-platform-right-on-your-laptop/">Netlfify Dev</a>라는 기능이 공개되었다.</p>
<p>Netlify에 배포한다는 것은 기본적으로 사이트를 정적 웹사이트로 빌드해서 배포한다는 것이므로 빌드된 배포 파일을 웹서버로 확인해 보는 것은 간단한 일이다. 서버 웹 애플리케이션보다는 훨씬 간단하므로 빌드가 제대로 된다면 로컬에서 확인해야 할 필요가 적은 편이지만 실제로 서버리스 Functions나 Forms 등 정적 웹사이트만으로는 구현하기 어려운 추가 기능이 있으므로 배포하기 전에 로컬에서 Netlify의 동작을 확인할 수 있다면 좋은 일이다.<br />
<br></p>
<h1>Netlify Dev</h1>
<p>쉽게 웹사이트를 Netlify에 배포할 수 있게 <a href="https://www.netlify.com/docs/cli/">netlify-cli</a>가 제공되고 있는데 이번에 나온 Netlify Dev는 <code>netlify-cli</code>에 추가된 서브 명령어다. 나는 보통 GitHub 저장소에 Netlify를 연결해서 자동 배포를 했기 때문에 <code>netlify-cli</code> 자체를 사용하고 있지는 않았는데 여기서는 Netlify Dev만 살펴보려고 한다.</p>
<p>다음은 예시 정적 사이트로 <a href="https://www.gatsbyjs.org/starters/gatsbyjs/gatsby-starter-blog/">gatsby-starter-blog</a>라는 Gatsby 스터타킷으로 만든 사이트를 <code>netlify dev</code>로 실행한 모습이다. 실제로는 <code>npx netlify-cli dev</code>로 실행했는데 <code>netlify-cli</code>를 글로벌로 설치(<code>npm install -g netlify-cli</code>)하기 싫어서 <a href="https://www.npmjs.com/package/npx">npx</a>를 이용한 것이다.</p>
<pre class="line-numbers"><code class="language-bash">$ npx netlify-cli dev
◈ Netlify Dev ◈
◈ Starting Netlify Dev with gatsby
Waiting for localhost:8000.
> gatsby-starter-blog@0.1.0 start /Users/outsider/temp/netlify-dev/gatsby-blog
> npm run develop
> gatsby-starter-blog@0.1.0 develop /Users/outsider/temp/netlify-dev/gatsby-blog
> gatsby develop
success onPostBootstrap — 0.093 s
info bootstrap finished - 2.766 s
.
Connected!
┌─────────────────────────────────────────────────┐
│ │
│ ◈ Server now ready on http://localhost:8888 │
│ │
└─────────────────────────────────────────────────┘
You can now view gatsby-starter-blog in the browser.
http://localhost:8000/
View GraphiQL, an in-browser IDE, to explore your site's data and schema
http://localhost:8000/___graphql
Note that the development build is not optimized.
To create a production build, use npm run build
DONE Compiled successfully in 36ms 02:22:08
</code></pre>
<p>Netlify Dev와 Gatsby의 출력이 섞여서 내용 파악이 어려울 수 있는데 Netlfify는 현재 프로젝트의 정적 사이트 실행 명령어와 설정을 자동으로 찾아낸다. 그래서 알려진 정적 사이트 도구를 사용하고 있다면 <code>npx netlify-cli dev</code>만으로 바로 서버를 띄워볼 수 있다.(막상 해보니 정적사이트를 개발할 때 내가 개발용으로 쓰는 <code>python -m http.server</code>보다 편한 듯하다)</p>
<p>위에서 <code>Starting Netlify Dev with gatsby</code> 부분을 보면 Gatsby를 사용한 프로젝트라는 것을 찾았고 <code>Waiting for localhost:8000.</code> 부분을 보면 Gatsby 사이트가 <code>8000</code>포트로 뜨리라는 것을 알 수 있다. 이후로는 <code>gatsby develop</code> 명령어로 실행되는 Gastby 빌드결과가 출력된다. 중간에 <code>Server now ready on http://localhost:8888</code>라는 부분이 있는데 Netlify Dev가 Gastby 서버와 연결되어 <code>8888</code>포트로 제공되는 것을 볼 수 있다. Gastby 개발 서버가 실행되었으므로 로컬에서 <a href="http://localhost:8000/">http://localhost:8000/</a>, <a href="http://localhost:8888/">http://localhost:8888/</a> 모두로 접속해서 웹사이트를 볼 수 있다.<br />
<br></p>
<h1>Netlify Dev 공개 주소로 배포하기</h1>
<p>위에서 사용한 것은 로컬에서 확인하는 것이므로 크게 유용하지는 않다. Netlify 플랫폼을 이용해서 외부에서도 접속할 수 있도록 공개 주소로도 배포할 수 있다.</p>
<p>사용하기 전에 먼저 로컬에서 <code>npx netlify-cli init</code>로 환경설정을 해야 한다.</p>
<pre class="line-numbers"><code class="language-bash">$ npx netlify-cli init
Logging into your Netlify account...
Opening https://app.netlify.com/authorize
</code></pre>
<p>초기화를 하면 먼저 Netlify 인증이 필요하므로 아래처럼 인증 화면이 나온다.</p>
<p style="text-align: center;"><img src="//blog.outsider.ne.kr/attach/1/6669727432.gif" width="750" height="549" alt="Netlify 웹사이트의 인증 요구" title="" /></p>
<p>Authorize 버튼을 누르면 터미널에서 로그인이 완료된다.</p>
<p style="text-align: center;"><img src="//blog.outsider.ne.kr/attach/1/3181220277.gif" width="750" height="430" alt="Netlify 웹사이트의 인증 완료" title="" /></p>
<p>인증이 완료되면 터미널에서 추가 설정을 할 수 있다.</p>
<p style="text-align: center;"><img src="//blog.outsider.ne.kr/attach/1/7340157465.gif" width="750" height="284" alt="터미널의 사이트 연결방법 선택 요청" title="" /></p>
<p>여기서 초기화는 Netlify 사이트 배포 설정이므로 GitHub에 저장소도 있어야 하고 Netlify 사이트도 설정해야 한다. 기존에 이미 있는 프로젝트에 연결할 수도 있지만 여기서는 완전히 새로 만들어 보자. CLI에서 직접 GitHub 저장소도 만들 수 있는 것으로 보이지만 이미 GitHub에는 테스트용 저장소를 만들어 놓았다.</p>
<p style="text-align: center;"><img src="//blog.outsider.ne.kr/attach/1/9214427251.gif" width="750" height="461" alt="터미널의 Netlify 사이트 설정" title="" /></p>
<p>Netlify에서 사용한 사이트명과 GitHub과 연결하기 위한 계정 정보를 넣고 빌드 설정을 하면 Netlify 사이트가 생성된다.</p>
<p style="text-align: center;"><img src="//blog.outsider.ne.kr/attach/1/1656912256.gif" width="750" height="541" alt="Netlify에 생성된 사이트" title="" /></p>
<p>프로젝트에 Netlify를 설정했으므로 이제 Netlify Dev를 통해 배포해 보자. 공개로 배포하려면 <code>npx netlify-cli dev --live</code>처럼 <code>--live</code> 옵션을 주면 된다.</p>
<pre class="line-numbers"><code class="language-bash">$ npx netlify-cli dev --live
◈ Netlify Dev ◈
◈ Starting Netlify Dev with gatsby
Waiting for localhost:8000.
◈ Lambda server is listening on 34567
> gatsby-starter-blog@0.1.0 start /Users/outsider/temp/netlify-dev/gatsby-blog
> npm run develop
> gatsby-starter-blog@0.1.0 develop /Users/outsider/temp/netlify-dev/gatsby-blog
> gatsby develop
info bootstrap finished - 2.790 s
Connected!
Waiting for localhost:34567.
Connected!
Waiting for localhost:8000.
Connected!
◈ Creating Live Tunnel for ac5effef-2a67-4d45-929c-da0a4e740b96
┌───────────────────────────────────────────────────────────┐
│ │
│ ◈ Server now ready on │
│ https://outsider-netlify-dev-demo-b3aa5c.netlify.live │
│ │
└───────────────────────────────────────────────────────────┘
</code></pre>
<p>앞에서 로컬에서 띄웠던 것과 거의 같지만 이번에는 Netlify와 터널을 연결해서 <code>https://outsider-netlify-dev-demo-b3aa5c.netlify.live</code> 같은 주소로 접속할 수 있게 해준다. Netlify로 배포하는 사이트는 <code>netlify.com</code>으로 배포되지만 Netlify Dev는 <code>netlify.live</code>를 사용한다. 이는 당연히 Git 저장소에 푸시하지 않은 로컬 변경사항 그대로 배포되고 로컬 개발 환경이 핫 리로딩을 제공한다면 (터널이니까 어쩌면 당연히) 수정하는 변경사항도 위 주소로 접속해서 확인할 수 있다.</p>
<p style="text-align: center;"><img src="//blog.outsider.ne.kr/attach/1/5143092942.gif" width="750" height="571" alt="Netlify 주소로 접속해서 확인한 Gatsby 블로그" title="" /></p>
<p>디자이너나 기획자와 일한다면 이 주소를 제공하고 같이 확인해 볼 수 있을 것이다. 비슷한 용도로는 이전에는 <a href="https://blog.outsider.ne.kr/1159">ngrok</a>을 사용했는데 Netlify를 사용하고 있다면 Netlify Dev를 그대로 쓰는 것도 좋아 보인다.</p>
<p><strong><a href="https://blog.outsider.ne.kr/1438?commentInput=true#entry1438WriteComment">댓글 쓰기</a></strong></p>netlify로 정적 사이트 배포하기Outsiderhttps://blog.outsider.ne.kr/14172018-12-26T16:40:54+09:002018-12-26T16:40:54+09:00<p><a href="https://www.netlify.com">netlify</a>를 알게 된 건 한 1년 정도 된 것 같다. 언제부터 서비스했는지는 모르지만 내가 해외에서 자주 듣기 시작한 건 그 정도 된 것 같다. 기능이 계속 추가되고 있는 것 같지만 React, Vue 등이 나오면서 소위 <a href="https://jamstack.org/">JAMstack</a>이라고 부르는 JavaScirpt, API, Markup으로만 구성된 스택, 다른 말로는 SPA(Single Page Application)가 유행하면서 이러한 정적 사이트을 쉽게 배포할 수 있는 서비스로 같이 인기를 얻고 있다.</p>
<p>정적 사이트같은 경우 AWS 기준이라면 S3에 파일을 올려놓고 CloudFront를 연결해서 배포하면 별로 어렵지 않지만, 막상 회사에서 운영하려면 S3 버킷 만들고 권한 설정하고 CloudFront 설정하고 하려면 은근히 손이 많이 간다. 한번 설정하면 운영에 대한 노력은 들지 않지만, 막상 이런 스택이 많아지면 은근 귀찮은 일이기도 하다. 그전에는 내가 참여하는 오픈소스 프로젝트에서 쓰고 있어서 좀 쓰고 있었는데 요즘은 S3 세팅하는 것도 귀찮아서 가능하면 Netlify를 쓰는 쪽으로 가고 있는데 정말 편하게 잘 만들어진 서비스다.</p>
<p style="text-align: center;"><img src="//blog.outsider.ne.kr/attach/1/3152152658.jpg" width="750" height="323" alt="netlify 웹사이트" title="" /></p>
<p><br></p>
<h1>netlify</h1>
<p>앞에서 설명한 대로 서버 없이(정확히는 서버는 API랑 통신하고) 프론트엔드 스택으로만 구성된 정적 애플리케이션을 배포하는 용도로 최적화된 서비스다. 최근 프론트엔드 기술의 복잡도가 크게 높아지는 동시에 설정이 거의 필요 없는(zero configration) 도구도 등장하고 있다고 느껴지는데 netlify도 그렇게 느껴지는 서비스 중 하나다.</p>
<p>일단 예시로 사용할 SPA 프로젝트가 필요해서 <a href="https://reactjs.org/community/examples.html">React 예제 프로젝트</a> 중에서 <a href="https://github.com/MarkFChavez/bitcoin-price-index">bitcoin-price-index</a>를 포크했다.</p>
<p>netlify 회원 가입을 한 뒤 "New site from Git" 버튼을 누르면 <a href="https://github.com/">GitHub</a>, <a href="https://about.gitlab.com/">GitLab</a>, <a href="https://bitbucket.org/">Bitbucket</a>에 연결할 수 있다.</p>
<p style="text-align: center;"><img src="//blog.outsider.ne.kr/attach/1/8493793399.jpg" width="750" height="533" alt="netlify git 프로바이더 설정" title="" /></p>
<p>여기선 GitHub과 연결했는데 원하는 저장소를 선택하면 된다. 앞에서 포크한 bitcoin-price-index 저장소를 선택했다.</p>
<p style="text-align: center;"><img src="//blog.outsider.ne.kr/attach/1/9017726162.gif" width="750" height="644" alt="GitHub 저장소 선택" title="" /></p>
<p>마지막 단계는 프로젝트를 빌드하는 옵션만 지정하면 된다. 보통 정적 사이트를 프로덕션용으로 빌드하는 명령어가 있으므로 여기에서 지정하면 된다. 예시에서는 <code>npm run build</code> 명령어를 지정했고 빌드된 파일이 만들어지는 <code>build</code> 디렉터리를 지정했다.</p>
<p style="text-align: center;"><img src="//blog.outsider.ne.kr/attach/1/7558064844.gif" width="750" height="910" alt="빌드 및 배포 설정" title="" /></p>
<p>설정은 이게 끝이다. 이제 "Deploy site"를 누르면 배포가 된다.</p>
<p style="text-align: center;"><img src="//blog.outsider.ne.kr/attach/1/9311801509.gif" width="750" height="568" alt="netlify 배포 진행 중 화면" title="" /></p>
<p>따로 런타임 설정이나 의존성 설치를 할 필요도 없이 빌드 명령어 지정만으로 바로 빌드해서 배포할 수 있다. 이후부터도 저장소에 소스만 푸시하면 바로 빌드가 시작되고(자동 배포가 설정되어 있으면) 사이트가 배포된다.</p>
<p style="text-align: center;"><img src="//blog.outsider.ne.kr/attach/1/1655054881.gif" width="750" height="456" alt="netlify 배포가 완료된 화면" title="" /></p>
<p>빌드가 성공적으로 완료되면 상태가 <code>PUBLISHED</code>로 바뀌고 사이트의 주소가 자동으로 생성된다. 물론 Deploy를 클릭하면 빌드 로그도 확인할 수 있다. 사이트에 표시된 <a href="https://elastic-kilby-e08c16.netlify.com/">https://elastic-kilby-e08c16.netlify.com/</a>를 클릭하면 배포된 사이트를 바로 볼 수 있다.(이 사이트를 예시용이라서 언제까지 유지할지는 잘 모르겠다.)</p>
<p style="text-align: center;"><img src="//blog.outsider.ne.kr/attach/1/5397562087.gif" width="750" height="758" alt="netlify로 배포한 bitcoin-price-index 사이트" title="" /></p>
<p>단계를 설명하느라고 길어졌지만, 저장소는 당연히 유지해야 하니 몇 번의 클릭만으로 사이트 배포를 간단하게 할 수 있다. 그리고 저장소에 푸시할 때마다 자동 배포하도록 할 수 있으니 운영에 대한 노력이 거의 안 든다고 할 수 있다. <a href="https://www.netlify.com/pricing/">가격도 개인 사이트 목적으로는 무료</a>로 이용할 수 있어서 편하다.</p>
<p>새로운 사이트를 만들 때 임의의 주소를 자동으로 만들어 주지만 당연히 커스텀 도메인도 설정할 수 있다. 최근에 업무에서 사용하면서 커스텀 도메인을 추가해 보았는데 설정에서 도메인을 추가한 다음에 안내에 나온 대로 DNS에서 해당 도메인을 <code>CNAME</code>을 바꿔주니까 모든 설정이 끝났다. 도메인 추가하고 CNAME 추가 요청만 해놓고 다른 작업을 하고 돌아오니 모든 설정이 완료되어서 운영되고 있었다.</p>
<p style="text-align: center;"><img src="//blog.outsider.ne.kr/attach/1/3595657784.gif" width="750" height="667" alt="자동으로 발급된 Let's encrypt 인증서" title="" /></p>
<p>HTTPS 인증서도 자동으로 <a href="https://letsencrypt.org/">Let's Encrypt</a>에서 만들어서 연결해 주고 자동으로 갱신해 주므로 따로 신경 쓰지 않아도 된다. 이 과정은 AWS에 S3 같은 곳에 배포하는 과정에서 필요한 S3 버킷 생성, 빌드 결과 배포, CDN 연결, HTTPS 인증서 생성 및 연결 등과 비교했을 때 얼마나 간단한지 알 수 있다.</p>
<p><strong><a href="https://blog.outsider.ne.kr/1417?commentInput=true#entry1417WriteComment">댓글 쓰기</a></strong></p>크로스 브라우저 테스트에 편리한 BrowsersyncOutsiderhttps://blog.outsider.ne.kr/12162016-05-29T22:58:04+09:002016-05-29T22:58:00+09:00<p>웹사이트를 만들면 다양한 브라우저에서 제대로 동작하는지 확인을 해야 한다. 요즘은 이런 테스트 환경도 많이 좋아져서 테스트 코드를 작성하고 <a href="https://saucelabs.com/">SauceLabs</a>나 <a href="https://www.browserstack.com/">BrowserStack</a>같은 서비스를 CI와 연동해서 지원 브라우저에서 잘 동작하는지 확인을 할 수 있다. 하지만 라이브러리 등은 이런 테스트 자동화가 쉬운 편이지만 웹사이트나 UI에 대한 부분은 계속 달라지므로 테스트를 작성하기도 쉽지 않고 결국은 사람이 동작 여부를 확인해야 하는 경우가 많고 요즘처럼 모바일 브라우저에 대해 테스트도 해야 하는 상황에서는 같은 동작을 브라우저별로 돌려보고 확인하는 작업은 번거롭고 귀찮은 일이다.<br />
<br></p>
<h1>Browsersync</h1>
<p><a href="https://www.browsersync.io/">Browsersync</a>는 여러 브라우저에서 웹페이지의 테스트를 도와주는 도구로 이름에서 알 수 있듯이 브라우저를 동기화해주는 프로그램이다. Browsersync는 npm 모듈이므로 <code>npm install -g browser-sync</code>로 설치를 해서 사용한다.</p>
<pre class="line-numbers"><code class="language-bash">$ browser-sync --version
2.12.10
</code></pre>
<p>위처럼 버전이 정상적으로 출력되면 제대로 설치된 것이다. 프로젝트 폴더에서 <code>browser-sync start</code> 명령어를 사용하면 시작할 수 있다. 여기서는 예제용 웹사이트를 위해서 <a href="https://html5boilerplate.com/">HTML5 Boilerplate</a>를 사용했다.</p>
<pre class="line-numbers"><code class="language-bash">$ browser-sync start --server --files ["css/*.css", "js/*.js", "*.html"]
[BS] Access URLs:
--------------------------------------
Local: http://localhost:3000
External: http://192.168.1.103:3000
--------------------------------------
UI: http://localhost:3001
UI External: http://192.168.1.103:3001
--------------------------------------
[BS] Serving files from: ./
[BS] Watching files...
</code></pre>
<p><code>--server</code> 옵션은 현 위치에서 로컬 서버를 실행시키고 <code>--files</code>로 감시할 파일을 지정할 수 있다.</p>
<iframe width="640" height="480" src="https://www.youtube.com/embed/DdSkhufYuJ0?rel=0" frameborder="0" allowfullscreen></iframe>
<p>서버를 띄워 놓고 감시하는 파일을 수정하면 자동으로 브라우저를 리로드한다. 사진으로는 설명이 어려워서 간단하게 영상을 찍었다. 위에서 보듯이 CSS 파일을 수정하면 연결된 브라우저가 모두 자동으로 리로드된다.<br />
<br></p>
<h2>관리자 화면</h2>
<p>웹페이지를 자동으로 리로드하는 기능은 <a href="http://livereload.com/">LiveReload</a>도 제공하고 있지만 Browsersync는 기능이 더 많아서 편하다.</p>
<p style="text-align: center;"><img src="//blog.outsider.ne.kr/attach/1/6548417559.jpg" width="750" height="580" alt="Browsersync의 관리자 화면" title="" /></p>
<p>위에서 browsersync를 실행했을 때 UI의 URL이 나온 대로 <a href="http://localhost:3001">http://localhost:3001</a>로 접속하면 위와 같은 관리자 화면을 볼 수 있고 여기서 접속된 모든 브라우저의 제어나 설정을 할 수 있다. (Current Connections 부분에 접속된 브라우저의 목록이 나와야 하는데 <a href="https://github.com/BrowserSync/UI/issues/37">최신 버전의 버그</a>인지 나오지 않고 있다.) 우측 상단의 버튼을 통해서 접속한 모든 브라우저를 리프레시하거나 스크롤을 최상단으로 올릴 수 있다.</p>
<p style="text-align: center;"><img src="//blog.outsider.ne.kr/attach/1/6763246115.jpg" width="750" height="723" alt="Browsersync 관리자의 Sync 옵션 화면" title="" /></p>
<p>Sync Options에서는 브라우저의 클릭, 폼 서밋 등 액션에 대해서 동기화 여부를 선택할 수 있다. Plugins 메뉴에서는 추가 플러그인을 설치해서 사용할 수 있는데 딱히 유용해 보이는 플러그인은 아직 모르겠다.</p>
<p style="text-align: center;"><img src="//blog.outsider.ne.kr/attach/1/6345152694.jpg" width="750" height="467" alt="Browsersync 관리자의 Remote Debug 화면" title="" /></p>
<p>Remote Debug의 경우는 모바일 브라우저 등 디버깅 환경이 좋지 않은 브라우저에서 오류를 찾을 때 유용하다. <a href="http://people.apache.org/~pmuellr/weinre/">Weinre</a>를 이용해서 브라우저를 원격으로 디버깅하거나 CSS를 이용해서 레이아웃의 표시를 할 수 있다.</p>
<p style="text-align: center;"><img src="//blog.outsider.ne.kr/attach/1/6263599806.jpg" width="750" height="577" alt="Browsersync 관리자의 Network Throttle 화면" title="" /></p>
<p>Network Throttle에서는 네트워크 속도를 제어한 서버를 여러 개 구동할 수 있다. 원하는 네트워크를 선택하고 Create Server를 누르면 새로운 포트로 속도별로 서버가 나타나게 된다. 로컬에서 개발하는 경우 대부분 속도가 빠르므로 네트워크가 안 좋은 경우에 대해 테스트를 하기가 어렵고 모바일 브라우저의 경우에는 이 부분이 더 중요한데 Network Throttle을 이용하면 편하게 테스트를 할 수 있다. 안드로이드는 내가 사용하지 않아서 모르지만 아이폰 같은 경우에는 Xcode를 연결해서 개발자 프로파일을 설치해야만 네트워크 제어를 할 수 있으므로 서버 쪽에서 제어할 수 있는 기능은 테스트하기에 편하다.<br />
<br></p>
<h2>프락시 모드</h2>
<p>위에서는 HTML 파일 등을 이용해서 정적 웹서버를 실행했다. 하지만 실제 개발환경에서는 프론트엔드만 단독으로 서버를 사용하는 경우는 없고 백엔드 서버에 통합된 경우가 많으므로 백엔드와 연동이 되어야 한다.</p>
<pre class="line-numbers"><code class="language-bash">$ browser-sync start
[BS] Copy the following snippet into your website, just before the closing </body> tag
<script id="__bs_script__">//<![CDATA[
document.write("<script async src='http://HOST:3000/browser-sync/browser-sync-client.2.12.10.js'><\/script>".replace("HOST", location.hostname));
//]]></script>
</code></pre>
<p>위에서 사용한 것처럼 <code>--server</code> 옵션을 사용하지 않으면 웹페이지에 Browsersync의 클라이언트 JavaScript 파일을 넣도록 안내하고 있다. 개발환경에서만 이런 코드를 사용하게 해서 Browsersync 서버와 동작하게 할 수도 있고 <a href="https://www.browsersync.io/docs/grunt/">Grunt</a>나 <a href="https://www.browsersync.io/docs/gulp/">Gulp</a>와 연동해서 사용할 수도 있지만 프락시 모드를 사용하면 간단하게 기존의 서버와 연동할 수 있다.</p>
<pre class="line-numbers"><code class="language-bash">$ browser-sync start --proxy "localhost:8080" --files ["css/*.css", "js/*.js", "*.html"]
[BS] Proxying: http://localhost:8080
[BS] Access URLs:
--------------------------------------
Local: http://localhost:3000
External: http://192.168.1.103:3000
--------------------------------------
UI: http://localhost:3001
UI External: http://192.168.1.103:3001
--------------------------------------
[BS] Watching files...
</code></pre>
<p><code>8080</code> 포트에 애플리케이션 서버가 떠 있다고 가장할 때 <code>--proxy "localhost:8080"</code> 옵션을 주면 프락시 모드로 실행이 된다. 이렇게 하면 기존의 애플리케이션을 사용하는 환경에서 Browsersync를 연결해서 사용할 수 있다.</p>
<p>버전마다 다를 수도 있지만, 개발환경 기본으로 Browsersync를 사용하면 아무래도 계속 상태를 모니터링하고 동기화하므로 약간 부담이 느껴지거나 갈수록 느려지는 경험을 해서 크로스 브라우징 테스트를 할 때만 주로 사용하고 있다.</p>
<p><strong><a href="https://blog.outsider.ne.kr/1216?commentInput=true#entry1216WriteComment">댓글 쓰기</a></strong></p>HTML 요소에서 마우스 이벤트 받지 않기Outsiderhttps://blog.outsider.ne.kr/12152016-05-28T18:07:16+09:002016-05-28T18:07:16+09:00<p>작년에 <a href="http://summernote.org/">Summernote</a> 웹사이트를 작업할 때 디자인에 따라 Summernote 에디터 위에 플레이스 홀더처럼 보이는 DIV를 위에 올려야 했다. 섬머노트에 플레이스 홀더 기능이 있지만, 이는 텍스트 에디터의 기능적인 것이므로 웹사이트에서는 커다란 글자의 플레이스 홀더를 앞에 보여주고 에디터를 클릭하거나 하면 이를 감추도록 작업을 했다.</p>
<p style="text-align: center;"><img src="//blog.outsider.ne.kr/attach/1/1023066385.jpg" width="750" height="293" alt="Summernote 홈페이지의 화면" title="" /></p>
<p>에디터에 <code>onFocus</code> 이벤트를 등록해서 에디터를 잘 클릭하면 플레이스 홀더를 감추는 게 어렵지 않지만, 에디터 위에 <code><div></code>가 있으므로 이 <code><div></code>를 클릭하면 에디터가 클릭 되지 않아서 이벤트가 발생하지 않았다. <code><div></code>에서 이벤트를 받아서 수동으로 에디터의 <code>onFocus</code> 이벤트를 실행해도 되지만 기능이 필요한 것은 아니므로 아예 이벤트를 안 받게 하고 싶었다.</p>
<p>이는 CSS의 <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events">pointer-events</a>를 이용하면 해결할 수 있다.</p>
<pre class="line-numbers"><code class="language-css">pointer-events: none;
</code></pre>
<p>해당 <code><div></code>에 <code>pointer-events: none;</code>로 설정하면 이 <code><div></code>는 마우스의 타겟이 되지 않는다. 눈에는 보이지만 마우스 타겟이 아니므로 위 화면에서도 플레이스 홀더를 클릭해도 이벤트는 Summernote 에디터가 받게 된다.</p>
<p style="text-align: center;"><img src="//blog.outsider.ne.kr/attach/1/2798161146.jpg" width="750" height="187" alt="Caniuse의 브라우저 지원 표" title="" /></p>
<p>참고로 <a href="http://caniuse.com/#search=pointer-event">이 속성은 IE 10 이하에서는 동작하지 않는다</a>.</p>
<p><strong><a href="https://blog.outsider.ne.kr/1215?commentInput=true#entry1215WriteComment">댓글 쓰기</a></strong></p>