Outsider's Dev Story

Stay Hungry. Stay Foolish. Don't Be Satisfied.

기술 뉴스 #125 : 19-05-01

웹개발 관련

  • Faster input events with Facebook’s first browser API contribution : 웹페이지에서 다운받은 JavaScript 파일을 실행할 때는 싱글 스레드라 다른 작업을 못 하게 되는데 큰 파일을 한 번에 처리하면 로딩속도는 빠르지만, 사용자가 인터렉션을 하기까지 시간이 걸리고 여러 파일로 쪼개면 인터렉션은 빠르지만, 로딩 속도가 느린 문제가 있다. 이를 해결하기 위해 Facebook에서 isInputPending이란 API를 만들어서 W3C에 제안하고 크롬과 협업해서 크롬 74에 포함되었다. isInputPending를 사용하면 큐에 들어간 이벤트가 있는지 빨리 확인할 수 있어서 로딩속도와 인터렉션 시작이 느린 문제를 둘 다 해결할 수 있다.(영어)
  • Introducing the Open Source and Full-Featured Seed Dashboard Plans : 브라우저 테스트 플랫폼인 cypress에서 대시보드 기능까지 완전히 사용할 수 있는 오픈소스 플랜을 발표해서 오픈소스 프로젝트에서는 무료로 사용할 수 있게 되었다.(영어)
  • Instant-loading AMP pages from your own domain : google.com/amp로 제공되던 AMP 페이지를 Signed Exchanges를 통해서 서비스 프로바이더의 도메인에서 직접 제공할 수 있게 되었다.(영어)
  • JavaScript's new #private class fields : 문법과 기능 모두를 좋아하진 않지만, private 클래스 필드가 최신 크롬과 Node.js v12에 들어왔는데 이 사용법을 설명하는 글이다. 현재 이 기능은 stage 2단계이다.(영어)

그 밖의 프로그래밍 관련

  • Open Distro for Elasticsearch Review : Elasticsearch의 상용라이센스를 문제 삼으면서 Amazon이 직접 오픈소스로 배포한 Open Distro for Elasticsearch를 Elasticsearch와 기능 비교를 하고 docker-compose를 이용해서 실행하는 방법 및 Elasticsearch Apache 2.0 라이센스 버전에서 제공하지 않는 기능 위주로 설정하는 방법을 설명하는 글이다.(영어)
  • Editor 01. Google Docs 같은 실시간 협업 에디터를 만드는 방법 : 실시간 협업 에디터를 만들 때 각 사용자의 변경 사항을 충돌 없이 합치는 접근 방법을 설명하는 글이다. Git처럼 로컬에서 만들어서 머지하는 방식이 아닌 실시간으로 변경하면서도 각 사용자의 변경내용이 문제없이 합쳐질 때 어떤 문제가 있는지 부터 이를 해결하기 위한 데이터 타입으로 LinkedList, Logical Clock, RGA, RGATreeSplit의 방식을 설명하고 있다.(한국어)
  • Kubernetes 03 – Kubernetes Cluster on AWS with kops : kops로 AWS에 Kubernetes 클러스터를 구성하는 방법을 설명하는 글로 기존 VPC 위에 설정하는 방법부터 예제 코드까지 함께 제공하고 있다.(한국어)
  • Announcing a new — experimental-modules : Node.js 8.9.0부터 --experimental-modules 플래그를 통해 ES modules를 사용할 수 있었는데 Node.js v12에서는 그동안의 피드백을 통해 완전히 새로 만든 구현체가 포함되었고 기존 코드에서 ES modules를 어떻게 사용할 수 있는지를 설명하는 글이다. 기존처럼 .mjs 확장자나 프로젝트 package.json"type": "module"를 지정해서 ES modules로 인식할 수 있으며 CJS가 섞여 있는 경우 .cjs 확장자를 사용하거나 하위 디렉토리 package.json"type": "commonjs"를 지정할 수 있다고 한다. v12가 LTS가 되는 10월 전에 --experimental-modules 플래그를 제거하는 것이 목표라고 한다.(영어)
  • Announcing WAPM: The WebAssembly Package Manager : wasmer에서 WebAssembly를 이용해서 어디서나 실행할 수 있는 유니버설 바이너리를 배포하고 사용할 수 있도록 패키지 매니저인 wapm을 공개했다.(영어)
  • Run your GitHub Actions workflow on a schedule : GitHub Actions에 새로 추가된 스케쥴 기능의 사용방법을 설명하는 글이다. 이 기능을 이용하면 크론탭을 쓰듯이 GitHub Actions를 주기적으로 실행할 수 있다.(영어)

볼만한 링크

IT 업계 뉴스

프로젝트

  • Accessibility Insights : 웹사이트의 접근성 지원 여부를 검사해주는 크롬 확장으로 Microsoft에서 만들었다.
  • Repo Remover : 다수의 GitHub 저장소를 지우거나 아카이빙 할 수 있는 웹 서비스.

버전 업데이트

2019/05/01 19:31 2019/05/01 19:31

Netlify Dev 기능으로 개발 중인 사이트 Netlify에 배포하기

전에 Netlify를 소개했었는데 며칠 전에 Netlfify Dev라는 기능이 공개되었다.

Netlify에 배포한다는 것은 기본적으로 사이트를 정적 웹사이트로 빌드해서 배포한다는 것이므로 빌드된 배포 파일을 웹서버로 확인해 보는 것은 간단한 일이다. 서버 웹 애플리케이션보다는 훨씬 간단하므로 빌드가 제대로 된다면 로컬에서 확인해야 할 필요가 적은 편이지만 실제로 서버리스 Functions나 Forms 등 정적 웹사이트만으로는 구현하기 어려운 추가 기능이 있으므로 배포하기 전에 로컬에서 Netlify의 동작을 확인할 수 있다면 좋은 일이다.

Netlify Dev

쉽게 웹사이트를 Netlify에 배포할 수 있게 netlify-cli가 제공되고 있는데 이번에 나온 Netlify Dev는 netlify-cli에 추가된 서브 명령어다. 나는 보통 GitHub 저장소에 Netlify를 연결해서 자동 배포를 했기 때문에 netlify-cli 자체를 사용하고 있지는 않았는데 여기서는 Netlify Dev만 살펴보려고 한다.

다음은 예시 정적 사이트로 gatsby-starter-blog라는 Gatsby 스터타킷으로 만든 사이트를 netlify dev로 실행한 모습이다. 실제로는 npx netlify-cli dev로 실행했는데 netlify-cli를 글로벌로 설치(npm install -g netlify-cli)하기 싫어서 npx를 이용한 것이다.

$ 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

Netlify Dev와 Gatsby의 출력이 섞여서 내용 파악이 어려울 수 있는데 Netlfify는 현재 프로젝트의 정적 사이트 실행 명령어와 설정을 자동으로 찾아낸다. 그래서 알려진 정적 사이트 도구를 사용하고 있다면 npx netlify-cli dev만으로 바로 서버를 띄워볼 수 있다.(막상 해보니 정적사이트를 개발할 때 내가 개발용으로 쓰는 python -m http.server보다 편한 듯하다)

위에서 Starting Netlify Dev with gatsby 부분을 보면 Gatsby를 사용한 프로젝트라는 것을 찾았고 Waiting for localhost:8000. 부분을 보면 Gatsby 사이트가 8000포트로 뜨리라는 것을 알 수 있다. 이후로는 gatsby develop 명령어로 실행되는 Gastby 빌드결과가 출력된다. 중간에 Server now ready on http://localhost:8888라는 부분이 있는데 Netlify Dev가 Gastby 서버와 연결되어 8888포트로 제공되는 것을 볼 수 있다. Gastby 개발 서버가 실행되었으므로 로컬에서 http://localhost:8000/, http://localhost:8888/ 모두로 접속해서 웹사이트를 볼 수 있다.

Netlify Dev 공개 주소로 배포하기

위에서 사용한 것은 로컬에서 확인하는 것이므로 크게 유용하지는 않다. Netlify 플랫폼을 이용해서 외부에서도 접속할 수 있도록 공개 주소로도 배포할 수 있다.

사용하기 전에 먼저 로컬에서 npx netlify-cli init로 환경설정을 해야 한다.

$ npx netlify-cli init
Logging into your Netlify account...
Opening https://app.netlify.com/authorize

초기화를 하면 먼저 Netlify 인증이 필요하므로 아래처럼 인증 화면이 나온다.

Netlify 웹사이트의 인증 요구

Authorize 버튼을 누르면 터미널에서 로그인이 완료된다.

Netlify 웹사이트의 인증 완료

인증이 완료되면 터미널에서 추가 설정을 할 수 있다.

터미널의 사이트 연결방법 선택 요청

여기서 초기화는 Netlify 사이트 배포 설정이므로 GitHub에 저장소도 있어야 하고 Netlify 사이트도 설정해야 한다. 기존에 이미 있는 프로젝트에 연결할 수도 있지만 여기서는 완전히 새로 만들어 보자. CLI에서 직접 GitHub 저장소도 만들 수 있는 것으로 보이지만 이미 GitHub에는 테스트용 저장소를 만들어 놓았다.

터미널의 Netlify 사이트 설정

Netlify에서 사용한 사이트명과 GitHub과 연결하기 위한 계정 정보를 넣고 빌드 설정을 하면 Netlify 사이트가 생성된다.

Netlify에 생성된 사이트

프로젝트에 Netlify를 설정했으므로 이제 Netlify Dev를 통해 배포해 보자. 공개로 배포하려면 npx netlify-cli dev --live처럼 --live 옵션을 주면 된다.

$ 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   │
   │                                                           │
   └───────────────────────────────────────────────────────────┘

앞에서 로컬에서 띄웠던 것과 거의 같지만 이번에는 Netlify와 터널을 연결해서 https://outsider-netlify-dev-demo-b3aa5c.netlify.live 같은 주소로 접속할 수 있게 해준다. Netlify로 배포하는 사이트는 netlify.com으로 배포되지만 Netlify Dev는 netlify.live를 사용한다. 이는 당연히 Git 저장소에 푸시하지 않은 로컬 변경사항 그대로 배포되고 로컬 개발 환경이 핫 리로딩을 제공한다면 (터널이니까 어쩌면 당연히) 수정하는 변경사항도 위 주소로 접속해서 확인할 수 있다.

Netlify 주소로 접속해서 확인한 Gatsby 블로그

디자이너나 기획자와 일한다면 이 주소를 제공하고 같이 확인해 볼 수 있을 것이다. 비슷한 용도로는 이전에는 ngrok을 사용했는데 Netlify를 사용하고 있다면 Netlify Dev를 그대로 쓰는 것도 좋아 보인다.

2019/04/24 20:24 2019/04/24 20:24