김서버의 프론트엔드 일기

단위 테스트 - 생산성과 품질을 위한 단위테스트 원칙과 패턴은 블라디미르 코리코프가 지은 책으로 단위테스트의 정의 부터 출발하여, 어떤 테스트가 좋은테스트이고 또 실무에서는 주로 어떻게 적용이 되는지 통합테스트, 단위테스트, E2E테스트의 차이에 대한 설명을 하고 있습니다. 개인적인 독후감이기 때문에 정말 인상 깊은 부분만 정리해서 적었습니다. 1. 단위 테스트의 목표 단위 테스트의 목표는 소프트웨어 프로젝트의 지속 가능한 성장을 가능하게 하는 것 입니다. 여기서 지속 가능한이라고 하는 이유는 프로젝트가 시작하는 초창기에는 크게 느끼지 못한다는 점은 당연히 있습니다. 왜냐하면 테스트의 부재로 나타나는 불편함은 코드가 거대한 덩어리가 되어 몇 만줄 단위가 되었을 때, 오로지 뇌피셜로만 디버깅하고 코드를 기..

정점쉐이더 -> 래스터라이저 -> 프레그먼트 쉐이더 -> 출력 병합기 -> 출력 gpu 렌더링 파이프라인에서 정점처리를 마무리 되고 나면, 그 다음 래스터라이저 단계를 진행된다. 래스터라이저는 프로그래머가 코딩을 하는 부분이 없고, GPU에서 알아서 처리하기 때문에 프로그래머가 신경을 써줄만한 요소는 잘 없다. 하지만 정점쉐이더(vertex shader) 프로그래밍 이후에 어떻게 처리가 되어, 우리가 코딩해야하는 프레그먼트 쉐이더(fragment shader)까지 도달하는지 알아볼 필요는 있다. 래스터라이저 개요 정점쉐이더가 출력한 정점들은 프리미티브라는 개체로 다시 조립이 된다. 이 프리미티브는 스크린에 그려질 형태로 변환된 후 프래그먼트로 분해되는데 이를 래스터화라고 부른다. 프래그먼트는 컬러 버퍼의..

조영호님이 지은 객체지향의 사실과 오해에서 기존에 알고있던 객체에 대한 개념에 대해서 많이 바뀌었는데, 이에 대해서 하나씩 나열하며 적으려고 합니다. 예시코드가 많이 없어서 설명이 너무 추상적이다라고 생각이 들 수 있지만, 읽다보면 "아 원래 객체지향 프로그래밍은 추상적인 개념일 뿐이구나" 라는 것을 느끼게 됩니다. 객체는 클래스가 아니다 우리는 흔히 객체 지향 프로그래밍으로 코드를 작성하려면 우선 class를 쓰고부터 시작을 하게 됩니다. 이 책에서는 객체지향 프로그래밍에서의 객체는 개념이지 문법이 아닌 점을 계속해서 강조를 하고 있고, 그런 개념에 대한 설명을 쭉하고 마지막에 예시코드 몇개를 보여주는 것으로 마무리가 됩니다. 그래서 이 책을 읽을 때, 반드시 객체는 클래스가 아닌 점을 꼭 인지하고 보..

GPU는 폴리곤메시를 입력 받아, 3차원의 폴리곤 메시를 2차원 형태로 바꾸고, 2차원 폴리곤 내부를 차지하는 픽셀들의 색상을 결정한다. 이 픽셀들은 컬러 버퍼에 기록되고, 주기적으로 스크린으로 복사된다. GPU의 렌더링은 파이프라인으로 구조로 구현되며, 그 순서는 다음과 같다. 정점쉐이더 -> 래스터라이저 -> 프레그먼트 쉐이더 -> 출력 병합기 -> 출력 여기서 쉐이더는 프로그래머가 프로그래밍 할 수 있는 부분이다. GPU를 렌더링 하기 위해서는 정점쉐이더와 프래그먼트 쉐이더 프로그램을 작성하면, 래스터라이저 출력 병합기는 하드웨어 단계에서 정해진 연산을 수행한다. 정점 쉐이더는 정점배열에 저장 된 모든 정점에 대해서 변환을 비롯한 다양한 연산을 수행한다. 래스터라이저는 삼각형들을 조립한 후, 각 삼..

컴퓨터 세상에는 다양한 물체들로 구성되어 있는데, 각 물체는 이동, 회전, 축소확대가 될 수 있으며, 이러한 행위들을 총칭하여 변환이라고 한다. 축소확대 2차원에서는 2 X 2 행렬로 표현된다. Sx 0 0 Sy 여기서 Sx와 Sy는 각각 x축과 y축 방향의 축소확대 인자이다. 이 인자가 1보다 크면 확대를, 작으면 축소를 의미한다. 2차원 벡터 (x,y)는 행렬-벡터 곱셈을 통해 축소 확대 된다. Sx 0 X x = Sx * x 0 Sy y Sy * y 회전 마찬가지로 2차원에서는 2 X 2행렬로 표현되며, 회전을 하기 위한 행렬식은 각도 O를 받았을 때, 다음과 같이 구성된다. Math.cos(O) -(Math.sin(O)) Math.sin(O) Math.cos(O) 위 행렬과 2차원 벡터 (x,y)..

3차원 물체를 표현하는 다양한 기법이 존재하지만, 실시간 그래픽스 영역에서는 폴리곤 메시를 압도적으로 많이 사용한다. 폴리곤 메시가 어떻게 생성되고, 저장이 되고 게임과 같은 런타임 응용프로그램으로 어떻게 전달이 되는지 알아보자 1. 폴리곤 메시 폴리곤 메시는 부드러운 곡면을 근사적으로 표현한 것이다. 따라서 "얼만큼 정점을 많이 사용하여 근사하게 할 것인 가" 라는 고민은 용량과도 연결 되어 있으며, 이는 성능이슈와도 연결이 된다. 정점의 갯수가 많으면 해상도가 높다고 말하며, 적으면 해상도가 낮다고 표현한다. 폴리곤 메시는 정점, 변, 면 으로 구성되며, 각종 3D 툴에서는 이런 면을 조작할 수 있는 기능들이 있다. 폴리곤 메시 표현 폴리곤 메시를 표현하는 가장 단순한 방법은 세 개의 정점을 순서대로..

3D나 컴퓨터 그래픽스 하면 엄청 어려운 수학을 해야한다고 생각이 될 것 인데, 우선 적어도 이번 요점 정리하는 컴퓨터그래픽스 기초 부분에서는 그렇게 어려운 수학이 필요없다. 하나씩 알아보자 행렬과 벡터 숫자들이 행과 열로 구성이 되어있는데, 프로그래밍을 공부한 사람들이라면 이미 배열이라는 이름으로 그 개념을 알게모르게 몸에 익혀있을 것이라고 가정하고 적어본다. a11 a12 a13 a21 a22 a23 a31 a32 a33 이와 같이 행과 열의 크기가 같으면 정사각행렬이라 한다. 행렬의 곱 두 행렬 A 와 B에서 A의 크기가 l x m 이고 B의 크기가 m x n 이면, A와 B의 곱의 크기는 l x n이 된다. a11 a12 b11 b12 b13 a21 a22 x b21 b22 b23 a31 a32 ..

개요 평소에 에디터에 관심이 많아서 이미지 에디터를 fabric.js 로도 만들어 보았었는데, 가장 대중적이고 많이 쓰는 WISIWYG 에디터도 한번 직접 만들고자 해서 만들었었습니다. WYSIWYG란? What You See Is What You Get의 줄임말로 직역하자면 "보는 그대로 얻어 낸다". 라는 뜻을 가지고 있는 에디터입니다. 보통 어떤 게시물을 써야 하는 기능을 넣을 때, 글 뿐만이 아니라 이미지와 동영상도 게시물에 같이 녹여져 있어야 할 때, 사용이 되는 에디터입니다. 유명한 오픈소스로는 Quill.js, frolara editor, summernote가 있겠습니다. 도전과제 사실 WYSIWYG는 document.execCommand 라는 함수를 사용하면 간단하게 구현할 수 있으나, 이..