게시 됨 업데이트 됨Tech / Javascript17분안에 읽기 (약 2612 단어)

주간 자바스크립트 #447

Mithril 2 와 몇가지 자바스크립트를 잘 작성할 수 있는 실용적인 방법들

JavaScript Weekly Issue 447: July 26, 2019
본문: https://javascriptweekly.com/issues/447

Creating JavaScript

▶ 자바스크립트 탄생: 자바스크립트 탄생의 이야기

27분 동안 자바스크립트의 역사를 파헤치는 굉장히 고도로 제작된 팟캐스트 에피소드. 당신이 통근할 때 들을만한 팟캐스트.
COMMAND LINE HEROES PODCAST

Mithril.js 2: 굉장한 어플리케이션을 만들기 위한 자바스크립트 프레임워크

Mithril은 Vue, React 또는 Angular와 같은 것들에 대한 정말 깔끔한 대안이다. 매우 작고 빠르며(모바일에 맞는) 대안보다 Vanilla JS에 조금 더 가깝게 동작하고, 자체 대안이 필요하지 않고 Vanilla JS 라이브러리를 묶는 데에도 좋다. 2.0는 큰 릴리스로 축하한다.
MITHRIL

Cloudinary

개발자들을 위한 이미지 & 비디오 관리

모든 장치에서 모든 대역폭에서 이미지 및 비디오를 업로드, 조작, 최적화 및 전송하는 프로세스를 단순화하고 자동화하십시오. Cloudinary를 사용해 보십시오. 미디어 관리가 얼마나 쉬운지 알아보십시오. 오늘 무료 계정을 만드십시오.
CLOUDINARY SPONSOR

자바스크립트를 작성하는 실용적인 방법

당신이 모든 것에 반드시 동의하는 것은 아니겠지만(예: “타입스크립트 사용하자!”), 전반적으로 생각해 볼 수 있는 상당히 견고한 배치의 글.
RYLAND GOLDSTEIN

Stage 3에 들어간 옵셔널 체이닝(Optional Chaining)과 Nullish Coalescing

새로운 자바스크립트 기능들은 공식화되기 전에 다양한 단계를 거치고 있으며, 이 ‘?.’ 연산자는 당신이 체인된 속성이나 함수 호출을 선택적으로 할 수 있도록 하는 것으로 이제 표준으로 만들어지기 직전에 있다. 3단계도? Nullish Coalescing!
ECMA TC39

타입스크립트 3.6 베타 공지

기능 완료, 몇 주 후에 최종 출시 예정.
DANIEL ROSENWASSER (MICROSOFT)

💻 채용 공고

시니어 프론트엔드 엔지니어 - 뉴욕

우리의 임무는 재정을 고치는 것. 엔지니어링 팀에 참여하여 강력하고 강력한 금융 애플리케이션을 위한 플랫폼을 구축하십시오.
ADDEPAR

풀스택 시니어 소프트웨어 & 마케팅 엔지니어

전 세계 운동선수와 코치가 훈련을 분석하고 계획하는 데 도움이 되는 브랜드에 여러분의 엔지니어링 능력을 접목시키십시오.
TRAININGPEAKS

Vettery를 통한 취업

Vettery는 최고의 기술 인재를 성장하는 회사와 연결한다. 시작하려면 프로파일을 작성하십시오.
VETTERY

📘 튜토리얼, 오피니언, 영상

Mini Black Hole

139 바이트의 자바스크립트로 구현된 Mini Black Hole 해부

이것은 아주 작은 (인정하건대 엄청나게 작은) 자바스크립트 코드를 아주 깔끔하게 탐구한 것이다.
FRANK FORCE

React의 기본

React에서 알아야 할 모든 기본 개념을 다루는 항상 최신의 한방(원스톱 숍) 소개 가이드. P.S. 우리는 또한 React 모든 것에 초점을 맞춘 React 뉴스레터를 가지고 있다!
SAMER BUNA

IDE As-You-Type의 즉각적인 자바스크립트/타입스크립트 테스트 피드백

Wallaby.js는 입력하는 즉시 테스트를 실행하는 개발자 생산성 도구로서 코드 옆에 있는 편집기에서 결과를 강조한다.
WALLABY.JS SPONSOR

▶ Vue.js 3.0에서 제공되는 새로운 굉장함

Vue의 다음 주요 버전에 대해 Vue.js의 핵심 팀원인 Chris Fritz와 한 시간 동안 이야기를 나누었다.
DEVMODE.FM PODCAST

재 작성이 아닌 경우: 데스크탑 슬랙 다시 만들기

채팅 서비스 슬랙이 어떻게 Electron 기반 클라이언트에서 아키텍처를 크게 개선했는지에 대해 간략히 살펴보았다.
MARK CHRISTIAN AND JOHNNY RODGERS (SLACK)

CSS-in-JS를 사용하는 방법을 왜 꼭 배워야 할까

BRENT JACKSON

🔧 코드와 도구들

Tabulator

Tabulator: 대화형 테이블 및 데이터 그리드 라이브러리

모든 주요 브라우저를 지원하며 원하는 경우 Angular, Vue 및 React와 함께 사용할 수 있다.
OLI FOLKERD

CesiumJS: A Geospatial 3D Mapping and Virtual Globe Library

몇 년이 지났지만 (2016년에 처음으로 연결했습니다!) 요즘에는 많은 릴리스와 WebGL에 대한 보편적인 지원이 제공되므로 지구나 지도를 렌더링해야하는지 다시 확인해 볼 가치가 있습니다. GitHub 저장소. 데모들은 모두 매우 인상적입니다.
CESIUM CONSORTIUM

안정적이고 덜 벗겨진 브라우저 자동화 경험

Taiko는 무료/오픈 소스 브라우저 자동화 도구로서 마지막 단계에서 안정적인 테스트를 수행한다.
THOUGHTWORKS - TAIKO SPONSOR

json-complete: 참조를 유지하고 순환 종속성 등을 처리하는 JSON 대안

상태를 인코딩하고 저장하는 흥미로운 방법을 제공하고 자바스크립트에서 사용 가능한 ‘거의 모든 데이터 유형’을 지원합니다.
CIERELABS

Vuetify 2.0 릴리스: Vue.js 머터리얼 컴포넌트 프레임워크

Google Material Design 원칙을 준수하는 Vue 앱에 깨끗하고 재사용 가능한 구성 요소를 제공하는 프레임워크. 시작하는 방법은 다음과 같다.
VUETIFY.JS

Moveable: 요소를 보다 쉽게 조작 할 수 있는 라이브러리

이것으로 요소에 이동, 드래그, 크기 조정 및 회전 기능을 추가하십시오.
DAYBRUSH (YOUNKUE CHOI)

Jay: ‘더 강력한’ 자바스크립트 REPL

npm 레지스트리에서 직접 모듈로드, 열성적인 평가, 색상 입력, 브래킷 완성, 자동 완성 기능 등과 같은 기능을 추가하는 Node의 내장 REPL에 대한 흥미로운 대안입니다.
MACIEJ ŁASZCZ

Git 워크플로우에서 직접 JavaScript에 대한 자동화 된 코드 리뷰

CODACY SPONSOR

자바스크립트의 고전적인 컴퓨터 과학 패러다임과 알고리즘 모음

7가지의 데이터 구조와 5가지의 정렬 방식 포함
NICHOLAS C. ZAKAS

Treat: 주제별, 정적으로 추출된 CSS-in-JS

SEEK

⚡️ 릴리스 요약

  • ESLint 6.1 — 자바스크립트를 무료로 개선하는 도구.
  • Node 12.7.0 — 여전히 우리가 좋아하는 서버 JS 플랫폼.
  • Anime 3.1 — 경량 애니메이션 라이브러리.
  • Lighthouse 5.2 — 당신의 페이지에 대한 강력한 성능 통찰력.

추신. 우리가 트위터에 있는 것 알고 있었습니까? @JavaScriptDaily 팔로우해주세요.

 게시 됨 업데이트 됨Tech / Javascript17분안에 읽기 (약 2509 단어)

주간 자바스크립트 #446

Googlebot의 자바스크립트 실행 방법, HTTP 서비스를 위한 새로운 자바스크립트 플랫폼, 자바스크립트 팟캐스트

JavaScript Weekly Issue 446: July 19, 2019
본문: https://javascriptweekly.com/issues/446

Smashtest: 테스트 케이스들을 설명하는 언어

보다 자연스러운 방법으로 엔드 투 엔드 테스트를 작성하는 Cucumber 스타일의 방법이지만 기본적으로 자바스크립트 기반 테스트로 요약할 수 있다. 홈페이지에 있는 예시들이 사견으로는(IMHO) 아이디어를 잘 납득시킬 것이다.
SMASHTEST

Osgood 소개: HTTP 서버를 구축하기 위한 새로운 V8 기반의 플랫폼

Rust와 V8 자바스크립트 엔진을 사용하여 구축된 Osgood는 안전한 HTTP 서비스 구축에 초점을 맞춘 새로운 플랫폼(Node의 스타일)이다. 보안은 모든 것이 개방되기 보다는 I/O 정책을 지정하도록 요구함으로써 이루어진다. GitHub repo.
THOMAS HUNTER II

Circle CI

신뢰할 수 없는 포크에서 신뢰할 수 있는 CI 작업 트리거

이 포스트에서는 Git 자체를 신뢰할 수 있는 코드 표시 수단으로 사용하는 방법에 대해 논의하고, 이러한 개념을 특정 저장소 호스트(GitHub)와 CI 제공자(CircleCI)에 적용할 수 있는 방법에 대한 전체 데모를 살펴본다.
CIRCLECI SPONSOR

▶ 자바스크립트, 자바스크립트…. Rocks You!

웹 오디오 API를 통해 실시간으로 오디오로 재생할 수 있도록 자바스크립트에서 효과 페달의 소리를 재생하는 방법에 대한 재미있고 음악으로 가득한 볼거리이다.
VITALII BOBROV

Quark: Node를 위한 ‘Sketchbook’ 소프트웨어, HTML과 CSS 실험들

Electron으로 만들어졌지만 현재 윈도우즈와 리눅스만 사용할 수 있는 Quark는 HTML, CSS 및 자바스크립트 기반 앱을 신속하게 만들 수 있는 Jupyter Nodebook/Glitch 와 비슷한 개발 환경으로, Node의 API와 Electron의 기본 기능에 대한 접근이 완벽하다.
NISHKAL KASHYAP

구글이 설명하는 자바스크립트 SEO 기본

Googlebot이 웹을 크롤링할 때, 화면 뒤에서 크로미움을 실행하고 실제로 당신의 자바스크립트를 실행한다는 것을 알고 있었는가? 이것은 알아야 할 것들이 있다는 것을 의미한다.
GOOGLE DEVELOPERS

🎧 최신 자바스크립트 팟캐스트 에피소드

자바스크립트 팟캐스트에는 몇 개의 훌륭한 팟캐스트가 있다. 우리가 최근에 즐겼던 몇 가지 에피소드들은 다음과 같다:

▶ 자바스크립트의 기본

Wes Bos (JavaScript 30로 유명한)와 Scott Tolinski는 JS의 기본과 당신이 정말 알아야 할 것에 대해 논한다.
SYNTAX.FM

▶ Christian Heilmann가 어떻게 자바스크립트를 하게 되었나

My JavaScript Story는 자바스크립트 개발자를 인터뷰하는 팟캐스트다. 나는 특히 Chris Heilmann (인기 자바스크립트 스피커) 에피소드를 즐겨 봤지만 즐길 것이 많다.
MY JAVASCRIPT STORY

▶ 서버사이드 렌더링(SSR)의 이점과 과제

Wix의 성능 기술 리더인 Dan Shappir가 출연한 한 시간 동안 진행된 라운드 테이블 토론이다.
JAVASCRIPT JABBER

▶ Jan Lehnardt와 npm 종속성 관리 논의

REAL TALK JAVASCRIPT

💻 채용 공고

Frontend Engineer at Goodreads (Amazon)
Goodreads에 참여하여 8천만 명 이상의 독자의 독서 활동을 지원하는 야심찬 제품의 앞날을 구축해보십시오.
GOODREADS

Front End Engineer / TrackVia (Denver, CO)
TrackVia는 정교한 엔터프라이즈 앱을 드래그 앤 드롭 방식으로 생성할 수 있는 강력한 기능이다. 아름다운 덴버 시내에서 즐겁고 빠른 우리 팀에 합류하십시오.
TRACKVIA

Land a New Dev Job on Vettery
Vettery는 기술 역할을 전문으로 하며 구직자들에게는 완전히 무료다.
VETTERY

📘 튜토리얼, 오피니언, 영상

테트리스가 35살이 되었으니 테트리스 복제를 만들어 보자

멋진 시각적인 트위스트와 함께 자신만의 테트리스 클론을 만드는 과정에 대한 가이드.
JAVASCRIPT TEACHER

postMessage는 느린가?

postMessage와 관련한 성능 문제와 우려에 대한 환상적인 심층 분석, Web Worker에게 메시지를 보내는 데 사용되는 방법.
(역자 주, 참고: https://youtu.be/j1JEZ7snw48?t=305 영상에서 한번 나온 이야기)
SURMA

자바스크립트에서 Async Await 에러 처리하기

async / await 시나리오에서 에러를 처리할 때 발생하는 혼동을 해결하려는 시도
VALERI KARPOV

자바스크립트 SDK를 통한 포괄적인 이미지 및 영상 관리

Cloudinary는 원활하게 통합되는 코드를 사용하여 리치 미디어를 업로드, 조작, 최적화하여 제공한다. Cloudinary를 무료로 사용해보자
CLOUDINARY SPONSOR

제안된 자바스크립트 기능인 Private 클래스 필드의 고찰

몇 주 전 Axel은 public 클래스 필드를 다루었지만 private 필드도 제안서의 일부다(현재 스테이지 3).
DR. AXEL RAUSCHMAYER

JS 16줄로 ‘떨어지는 모래’-스타일 이미지 변화 효과

이것은 내가 예상했던 것보다 훨씬 더 깔끔하다.
SLICKER

역공학(역설계) 또는 자바스크립트에서 테스트 라이브러리를 구축하는 방법

여기서의 목표는 기존의 거대한 더미에 또 다른 테스트 라이브러리를 추가하는 것이 아니라, 여러분이 직접 구축함으로써 테스트 라이브러리가 어떻게 작동하는지 더 자세히 알아보는 것이다.
CHRIS NORING

Finally… Promise의 **finally** 포스트

프로미스를 사용할 때, finally가 언제 동작하는지에 대한 간단한 설명.
SARAH DRASNER

Node.js 12: 서버 사이드 자바스크립트의 미래

Node.js 12는 ES6 모듈 지원, 애플리케이션 보안 향상 및 시작 시간 단축과 같은 몇 가지 흥미로운 개선 사항을 소개했다.
PAIGE NIEDRINGHAUS

Angular 아키텍쳐 패턴과 모범 사례(확장에 도움이 됨)

BARTOSZ PIETRUCHA

Web Unleashed - The Front-End Developer Event in Toronto, Sept 13-14

네트워킹, 세션, 워크샵 등. 코드 JAVASCRIPTWEKLY로 #WEBU19 티켓 20% 할인.
FITC SPONSOR

할일 목록 앱을 만들며 Svelte 3 학습

최근 많은 사랑을 받고 있는 build-time UI 프레임워크인 Svelte에 대한 실용적인 소개.
AYO ISAIAH

웹은 단일 문화에서 살아남을 수 없다

당신은 웹이 크롬(Chrome)이 지배하는 단일 문화가 되는 것을 막을 수 있는 힘을 가지고 있다고 Mike는 말한다.
MIKE PENNISI

🔧 코드와 도구들

Color Thief: 이미지에서 색 팔레트를 가져오기

이미지가 주어지면, 이것은 주요 색상의 목록을 반환하기 위해 canvas를 사용한다.
LOKESH DHAKAR

Polly.js: 기록, 재생 및 Stub HTTP 상호 작용

Node와 브라우저에서 모두 동작하는 Polly는 HTTP API에 탭하고 요청을 기록하고 재생하는 기능과 함께 속도를 줄이거나 속도를 높히는 기능을 추가한다.
NETFLIX, INC.

MongoDB Atlas는 강력하고 안정적인 클라우드 데이터베이스. 사용해보십시오

MONGODB SPONSOR

Airtable.js: Airtable을 위한 자바스크립트 클라이언트

Airtable은 인기 있는 클라우드 기반 스프레드시트-meets-database 서비스다. 우리는 Cooperpress에서 그것을 사용하기 때문에 잘 정비된 공식 라이브러리를 보는 것이 좋다.
AIRTABLE

SurveyJS: 자바스크립트 설문과 양식 라이브러리

라이브 데모
DEVSOFT BALTIC OÜ

jest-puppeteer: Jest와 Puppeteer를 사용하여 당신의 테스트를 실행해보십시오

SMOOTH CODE

⚡️ 릴리스 요약

전체 기록이 필요없는 최신 릴리즈가 있는 인기 라이브러리 및 도구:

추신. 우리가 트위터에 있는 것 알고 있었습니까? @JavaScriptDaily 팔로우해주세요.

 게시 됨 업데이트 됨Tech / Game13분안에 읽기 (약 1917 단어)

OpenGL ES 버전 2.0과 3.0 차이

OpenGL ES(Embeded System)

Cocos2d-x 버전 차이에 대해서 공부하던 중에 그 기반이 되는 OpenGL ES의 버전에도
큰 차이가 있지 않을까하여 공부해봤습니다.

우선 OpenGL ES란, (Wikipedia-ko)

OpenGL ES (임베디드 단말을 위한 OpenGL)는 크로노스 그룹이 정의한 3차원 컴퓨터 그래픽스 API인 OpenGL의 서브셋으로, 휴대전화, PDA 등과 같은 임베디드 단말을 위한 API이다.

한글로 작성된 위키는 짧군요. 영어로 작성된 위키를 더 보겠습니다. (Wikipedia-en)

OpenGL for Embedded Systems (OpenGL ES or GLES) is a subset of the OpenGL computer graphics rendering application programming interface (API) for rendering 2D and 3D computer graphics such as those used by video games, typically hardware-accelerated using a graphics processing unit (GPU). It is designed for embedded systems like smartphones, computer tablets, video game consoles and PDAs. OpenGL ES is the “most widely deployed 3D graphics API in history”. The API is cross-language and multi-platform. The libraries GLUT and GLU are not available for OpenGL ES. OpenGL ES is managed by the non-profit technology consortium Khronos Group. Vulkan, a next-generation API from Khronos, is made for simpler high performance drivers for mobile and desktop devices.

설명에 큰 차이는 없지만, API에 대한 설명에는 크로스 랭귀지, 멀티 플랫폼이 포함되어 있네요.
OpenGL에서 사용할 수 있는 GLUT, GLU는 OpenGL ES에서는 사용할 수 없다는 것 정도를 추가로 알 수 있었습니다.

각 버전별 설명도 잘 나와있는 영문 위키를 보면,

OpenGL ES 2.0 - (EN)

OpenGL ES 2.0 was publicly released in March 2007.[6] It is based roughly on OpenGL 2.0, but it eliminates most of the fixed-function rendering pipeline in favor of a programmable one in a move similar to transition from OpenGL 3.0 to 3.1.[7] Control flow in shaders is generally limited to forward branching and to loops where the maximum number of iterations can easily be determined at compile time.[8] Almost all rendering features of the transform and lighting stage, such as the specification of materials and light parameters formerly specified by the fixed-function API, are replaced by shaders written by the graphics programmer. As a result, OpenGL ES 2.0 is not backward compatible with OpenGL ES 1.1. Some incompatibilities between the desktop version of OpenGL and OpenGL ES 2.0 persisted until OpenGL 4.1, which added the GL_ARB_ES2_compatibility extension.[9]

OpenGL ES 3.0 - (EN)

The OpenGL ES 3.0 specification[10] was publicly released in August 2012.[11] OpenGL ES 3.0 is backwards compatible with OpenGL ES 2.0, enabling applications to incrementally add new visual features to applications. OpenGL 4.3 provides full compatibility with OpenGL ES 3.0. Version 3.0 is also base of WebGL 2.0.[12]

New functionality in the OpenGL ES 3.0 specification includes:

(참고, http://www.informit.com/articles/article.aspx?p=2181697&seqNum=2)

음, 내용이 많아 번역한 내용으로 각각 살펴보고 정리해보겠습니다.

OpenGL ES 2.0

OpenGL ES 2.0는 2007년 3월에 출시되었습니다. OpenGL 2.0을 기반으로 하지만 OpenGL 3.0에서 3.1로 업데이트 될 때와 비슷하게 고정 렌더링 파이프라인을 제거하였습니다. 셰이더의 제어 흐름은 컴파일할 때에 쉽게 결정할 수 있는 순방향 분기, 루프로 제한됩니다.

이전에 고정 함수 API에 의해 지정된 재질 및 조명 매개 변수와 같은 변형 및 조명 스테이지의 거의 모든 렌더링 기능은 그래픽 프로그래머가 작성한 쉐이더로 대체되었습니다. 따라서 OpenGL ES 2.0은 OpenGL ES 1.1과 호환되지 않습니다. OpenGL과 OpenGL ES 2.0 데스크톱 버전 간의 일부 비 호환성은 GL_ARB_ES2_compatibility 확장을 추가한 OpenGL 4.1까지 지속됩니다.

OpenGL ES 3.0

OpenGL ES 3.0 사양은 2012년 8월에 공개되었습니다.
OpenGL ES 3.0은 OpenGL ES 2.0과 하위 호환되므로 응용 프로그램이 응용 프로그램에 점진적으로 새로운 시각적 기능을 추가할 수 있습니다.

OpenGL 4.3은 OpenGL ES 3.0과 완벽한 호환성을 제공합니다.
OpenGL ES 3.0은 WebGL 2.0의 기반이기도합니다.

새로운 기능은 아래와 같습니다.

  • 오클루전 쿼리, 변환 피드백, 인스턴스 렌더링 및 4개 이상의 렌더링 대상에 대한 지원을 비롯하여 고급 시각 효과를 가속화할 수 있도록 렌더링 파이프 라인에 대한 여러 가지 향상된 기능을 제공합니다.
  • 고품질 ETC2/EAC 텍스처 압축을 표준 기능으로 지원하여 각 플랫폼에 다른 텍스처 세트가 필요하지 않습니다.
  • 부동 소수점 텍스처, 3D 텍스처, 깊이 텍스처, 정점 텍스처, NPOT 텍스처, R/RG 텍스처, 불변 텍스처, 2D 배열 텍스처, 스위즐, LOD 및 밉(Mip) 레벨 클램프, 매끄러운 큐브 맵 및 샘플러 객체에 대한 보장된 지원을 포함하여 크게 향상된 텍스처링 기능을 포함합니다.
  • 명시적으로 크기가 필요한 텍스처 및 렌더링 버퍼 형식의 광범위한 세트로, 구현 변동성을 줄이고 모바일 앱을 훨씬 쉽게 개발할 수 있습니다.

구글 번역기의 도움을 받아 해석해보았습니다.
내용 상으로는 전반적으로 기능 추가, 성능 향상이 있어보입니다.
(버전이 올라가면 늘 있는 성능 향상인 것 같지만요)
2.0과 하위 호환이 된다는 것이 큰 것으로 보이며 더 깊게 봐야겠지만 렌더링 대상 지원 추가, 렌더링 파이프 라인 기능 향상 등이 눈에 띄네요.
텍스쳐링 기능도 지원 범위가 넓어진 것도 큰 것 같습니다.

성능 테스트 자료가 있으면 좋겠는데.. 없네요.
주로 OpenGL ES와 Vulkan 성능 분석이 많아서 OpenGL ES 2.0과 3.0은 성능 자료는 찾기 힘드네요.
성능 분석에 큰 의미가 없어서 그런 것일 수도 있겠습니다.
(기기에 따라 성능 차이가 많이 나서)

OpenGL ES 버전 차이가 어떤가에 대해 개괄적인 내용을 살펴보았습니다.
렌더링 방식, 텍스처 처리방식, 버퍼 크기등에 대한 차이가 있었네요.

그래픽 엔지니어는 아니어서 자세한 내용은 더 정리하기 힘들지만
다른 좋은 레퍼런스가 있다면 추가해서 들고 오겠습니다.

 게시 됨 업데이트 됨Tech6분안에 읽기 (약 866 단어)

GitLab CI 해보기 - Cordova

이 글은 2018년 1월 기준으로 작성된 글입니다. 현재 Gitlab 설정, Cordova 환경과는 다를 수 있습니다.

GitLab CI

소개: https://about.gitlab.com/product/continuous-integration/
GitLab에서 CI를 지원한다는 것을 듣고 당시 진행하던 프로젝트를 설정해보고자 했습니다.
CI는 Continuous Integration의 약자로 지속적인 통합으로 부릅니다.

CI는 “지속적으로 퀄리티 컨트롤을 적용하는 프로세스를 실행하는 것이다. (Wiki)으로 설명할 수 있고 이 글에서는 CI에서 자세히 다룰 예정은 아니기에 다른 좋은 문서를 참고해주세요. :)

GitLab 소개문서에는 CD(Continuous Delivery OR Continuous Deployment-지속적인 배포)도
다루고 있으니 참고하시면 좋을 것 같습니다.

저는 CI까지만 설정해보겠습니다. (나중에 CD까지 해볼 수 있겠죠.)

CI 설정 시나리오

  1. 빌드 환경 설정
  2. .gitlab-ci.yml 설정
  3. GitLab Repo에 push!
  4. 빌드!

빌드 환경 설정

여기서 어려울 것으로 예상한 것은 빌드 환경을 설정하는 것이라고 생각했습니다.
freecodecamp 미디엄 글에서는 도커 이미지를 사용하여 어렵지 않게 풀어낸 것 같습니다.

빌드 환경 설정에 필요한 Cordova 환경설정이 무엇인지 살펴보았습니다.
Cordova 7.x 기준의 안드로이드 빌드 환경은 아래와 같습니다. (참고)

  • JDK 8 이상
  • Android SDK, Android SDK Packages
  • Node.js 8.9.4 (NPM)
  • Cordova 7.x
  • (옵션) 환경 변수 설정

iOS 빌드 환경은 macOS 이미지가 없어서 설정해보지 못했습니다. ;(
안드로이드 설정만 해봐야겠네요.

앞서 freecodecamp 미디엄 글에서는 docker 이미지를 사용해서 CI를 설정을 했습니다.
Cordova 관련한 docker 이미지가 있는지 확인해보았고 적당한 것을 찾았습니다.
https://hub.docker.com/r/beevelop/cordova/

이 이미지를 사용하여 만들어본 저장소는 아래와 같습니다. (저장소는 기본적인 프로젝트 생성한 상태입니다.)
https://gitlab.com/pineoc/cordova-ci-demo

.gitlab-ci.yml 설정

1
2
3
4
5
6
7
8
9
10
11
12
image: beevelop/cordova:v7.1.0

before_script:
  - cordova platform add android

stages:
  - build

build:
  stage: build
  script:
    - cordova build android

GitLab Repo에 Push

위에서 설정한 .gitlab-ci.yml 파일을 프로젝트 최상단 경로에 두면 GitLab에서 파일을 인식하여
설정한 내용대로 빌드를 진행합니다. 진행된 내역은 아래 링크에서 확인할 수 있습니다.
https://gitlab.com/pineoc/cordova-ci-demo/pipelines

이제 커밋할 때마다 빌드가 돌아가고 빌드의 실패/성공을 확인할 수 있습니다.
커밋에 [ci skip] 이라고 명시하면 빌드는 스킵됩니다.

(중간에 빌드 환경이 달라져서 실패한 내용이 생겼네요.)

기본 프로젝트는 어렵지 않게 설정해보았지만
추가적인 플러그인 추가나 설정이 들어가면 어려워질 수 있을 것 같습니다.
iOS 빌드 시스템을 사용하려면 다른 것도 필요하겠구요.

기본적인 설정이라도 도움이 되었으면 좋겠습니다. :)

참고 문서

 게시 됨 업데이트 됨Tech7분안에 읽기 (약 982 단어)

fisheye webhook error (with node.js)

Fisheye Webhook 에러 수정

SVN, Git과 같은 버전관리 프로그램에 기록되는 커밋(리비전) 내역을 트래킹해주는
Fisheye를 회사에서 사용 중에 Webhook 기능이 있어 사용하다 에러를 만나게 되어 해결 방법을 남겨봅니다.
저는 Node.js + Express로 웹훅을 받아 처리할 때 문제가 있었습니다.

Fisheye에 대한 자세한 내용은 추후 다른 포스트에서 남겨보겠습니다. :)

Webhook 기본 설정

Fisheye에서 웹훅을 설정하는 방법은 간단합니다.
아래 링크를 참고하여 웹훅을 설정합니다.
https://confluence.atlassian.com/fisheye/configuring-web-hooks-960155631.html

Webhook을 받기 위한 Node.js + Express 서버 구성

간단한 서버 어플리케이션을 만들어서 웹훅을 받아봅니다.
POST 요청을 받을 수 있도록 만들고 Test 기능으로 웹훅을 보내 보았습니다.

그랬더니 아래와 같은 에러가 생겼습니다.

1
2
3
4
5
6
7
8
9
10
11
12
POST /test/webhook 415 4.796 ms - 1426
UnsupportedMediaTypeError: unsupported content encoding "utf-8"
    at contentstream (C:\Users\pineoc\Desktop\private\pino-bot\node_modules\body-parser\lib\read.js:174:13)
    at read (C:\Users\pineoc\Desktop\private\pino-bot\node_modules\body-parser\lib\read.js:54:14)
    at jsonParser (C:\Users\pineoc\Desktop\private\pino-bot\node_modules\body-parser\lib\types\json.js:134:5)
    at Layer.handle [as handle_request] (C:\Users\pineoc\Desktop\private\pino-bot\node_modules\express\lib\router\layer.js:95:5)
    at trim_prefix (C:\Users\pineoc\Desktop\private\pino-bot\node_modules\express\lib\router\index.js:317:13)
    at C:\Users\pineoc\Desktop\private\pino-bot\node_modules\express\lib\router\index.js:284:7
    at Function.process_params (C:\Users\pineoc\Desktop\private\pino-bot\node_modules\express\lib\router\index.js:335:12)
    at next (C:\Users\pineoc\Desktop\private\pino-bot\node_modules\express\lib\router\index.js:275:10)
    at logger (C:\Users\pineoc\Desktop\private\pino-bot\node_modules\morgan\index.js:144:5)
    at Layer.handle [as handle_request] (C:\Users\pineoc\Desktop\private\pino-bot\node_modules\express\lib\router\layer.js:95:5)

이런 에러는 또 처음이라 좀 더 확인해보았습니다.
(제 코드 상에 문제라기 보다 웹훅에서 보내주는 데이터 쪽과 맞춰야하는 문제로 보였기 때문입니다.)

UnsupportedMediaTypeError 에러 확인 및 해결 시도

에러 내용은 저에게는 생소해서 구글에서 관련 에러를 검색해보았습니다.
UnsupportedMediaTypeError: unsupported content encoding "utf-8"를 검색해보니
아래와 같은 글들이 나왔습니다.

몇 가지 글을 보았을 때는 Body-parser 쪽에 문제가 있어서 안되는 것으로 예상하여 아래와 같이 해결해보려 했습니다만,
첫 번째 글을 보면 Request Header 값 중 "Content-Encoding: UTF-8"를 빼면 해결되지 않을까? 하는 질문이 있습니다.

바로 아래에는 헤더 값을 제거하는 코드가 답변으로 달렸죠.

1
2
3
4
5
6
7
8
9
//...
app.use(function (req, res, next) {
  // remove invalid header
  delete req.headers['content-encoding'];
  next();
});
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
// ...

이렇게 app.js 코드를 수정하고 웹훅 데이터를 받아보았더니 해결되었습니다.

Content-Encoding: UTF-8?

Content-Encoding: UTF-8 는 뭐길래 에러가 났을까 확인해보았습니다.
우선 Content-Encoding이라는 헤더는 미디어 타입을 압축하기 위해 사용되는 값입니다.
참고: https://developer.mozilla.org/ko/docs/Web/HTTP/Headers/Content-Encoding

Content-Encoding은 주로 아래와 같이 사용되죠.

1
2
3
4
5
Content-Encoding: gzip
Content-Encoding: compress
Content-Encoding: deflate
Content-Encoding: identity
Content-Encoding: br

위 사용 방법에 따르면 UTF-8 값은 유효하지 않은 값입니다. (Invalid)
UTF-8 인코딩 혹은 문자 인코딩을 요청에 표현하고 싶다면 아래와 같이 표현해야합니다.
참고: https://www.w3.org/International/questions/qa-headers-charset.ko

1
Content-Type: text/html; charset=utf-8

문제 해결

해결 방법은 그렇게 어렵지 않았지만 해결하면서 다양한 내용을 알게되어서 좋았습니다.
+문제 없이 웹훅도 사용할 수 있게되어서 더 좋았죠. :)

  • Request Header 유효성 문제
  • Content-Encoding 헤더 값 사용 방법
  • Content-Type 헤더 값 사용 방법

다른 웹훅을 등록하거나, 웹훅 시스템을 만들 때 고려해야하는 내용이었습니다.

카테고리

최근 글

광고

×