@belivvr/aframe-react 라이브러리의 테스트 케이스 200개 돌파
라이브러리 배포도 멋있는데 테스트 케이스 200개 돌파라니
내가 생각해도 "아... 너무 멋지다."
테스트 파일: 86개
테스트 케이스: 220개
선언된 변수, 함수, 분기, 모든 라인 테스트 통과
그리고 codecov 100% 뱃지
이런 짓을 왜 하는거냐?!
그런거 아님
누가 제 라이브러리를 쓰는데
"아, 라이브러리 버그있어서 못쓰겠네. 라이브러리땜에 코드 터지네"
이런 말을 들으면 안되지 않겠습니까?
코드는 언제 터진다고 생각하나?
독버섯이 들어간 수프를 먹었을 때?
"주니어 개발자가 코딩했을 때? 아니야."
"try-catch를 하지 않았을 때? 아니야."
"그건 테스트를 하지 않았을 때다!"
모든 서비스는 출시하기 전에 엄청나게 열심히 QA를 합니다.
하지만 QA는 작동 단계에서의 테스트이지, 코드 단계에서 문제가 있는지를 테스트 하진 않습니다.
테스트 코드는 코드에 문제가 있는지 확인하는 겁니다.
코드에 문제가 있으면 당연히 QA에서도 문제가 생깁니다.
그런데 보통 QA는 하는데 테스트 코드는 쓰지 않습니다.
테스트 코드가 그리 좋다는데 왜 많이들 안쓰는데?
1. 몰라서
2. 테스트 코드를 작성하는게 낭비라 생각하는 문화가 있어서
3. 외주라서
이 세상의 모든 외주개발자를 응원합니다. ㅠㅠ
테스트 코드는 어떻게 쓰는데?
언어별로 대표적인 라이브러리들이 있어요.
- JS/TS: jest, mocha, chai
- Java: JUnit
- Go: Gomega
등등...
검색하면 많이 나오는데, 정작 처음 써보려고 하면 쉽지 않습니다.
깨알 홍보타임 (코드숨)
테스트 코드를 어떻게 쓰는지 배워보고 싶다면 코드숨을 추천합니다.
테스트 코드만 배우는게 아니라 좋은 코드를 어떻게 쓰는지도 배울 수 있습니다.
매일매일 코드리뷰도 해주고요.
코드숨 커뮤니티 내부에는 굉장한 사람들이 많다보니 교육을 듣는데서 그치지 않고 그런 사람들과 인맥도 만들 기회가 생깁니다.
꾸준히 열심히 하는 사람도 보여서 자극받고 같이 열심히 하게 되기도 하구요. 기계인간 이종립 님이라던가
교육이 끝나고 나서도 계속 커뮤니티에 꾸준히 열심히 하는 모습을 보이는 분들이 많아요.
많은 분들이 회사를 다니는 중에 교육을 듣거든요.
저도 그랬구요.
@belivvr/aframe-react 홍보타임
어... 먼저 A-Frame을 홍보해야겠군요
A-Frame은 three.js 를 기반으로 작성된 3D나 VR개발을 쉽게 할 수 있게 도와주는 라이브러리 입니다.
<html>
<head>
<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
</head>
<body>
<a-scene>
<a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9"></a-box>
<a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E"></a-sphere>
<a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder>
<a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane>
<a-sky color="#ECECEC"></a-sky>
</a-scene>
</body>
</html>위 코드를 작성하면
이런 화면이 나옵니다.
https://aframe.io/examples/showcase/helloworld/
드래그 해서 끌 수도 있고 wasd키로 움직일수도 있죠.
하지만, HTML 커스텀 태그로 작성하기에는 React에서 쓰기 좀 그렇기도 하고
property의 자동완성이나 타입 힌트도 없어서 답답한 면이 있습니다.
그래서 만든 것이 @belivvr/aframe-react 입니다.
A-Frame을 React로 쓸 수 있도록 해주며, TypeScript로 작성되어 타입도 검사해줍니다.
위의 샘플을 아래 코드로 작성할 수 있습니다.
import React from 'react';
import ReactDOM from 'react-dom';
import 'aframe';
import {
Scene,
Box,
Sphere,
Cylinder,
Plane,
Sky,
} from '@belivvr/aframe-react';
ReactDOM.render(
(
<Scene>
<Box
position={{ x: -1, y: 0.5, z: -3 }}
rotation={{ x: 0, y: 45, z: 0 }}
color="#4CC3D9"
/>
<Sphere
position={{ x: 0, y: 1.25, z: -5 }}
radius={1.25}
color="#EF2D5E"
/>
<Cylinder
position={{ x: 1, y: 0.75, z: -3 }}
radius={0.5}
height={1.5}
color="#FFC65D"
/>
<Plane
position={{ x: 0, y: 0, z: -4 }}
rotation={{ x: -90, y: 0, z: 0 }}
width={4}
height={4}
color="#7BC8A4"
/>
<Sky color="#ECECEC" />
</Scene>
),
document.getElementById('root'),
);3D 웹이나 VR개발을 하시는 분들은 저희 회사의 라이브러리를 사용해 쉽게 개발하실 수 있습니다.
많은 관심 부탁드립니다.
잘 쓰고 있습니다 ㅎㅎ