담백한 웹 개발 이야기

LCH LCH (Lightness, Chroma, Hue)는 색상 공간의 일종입니다. LCH 공간에서는 밝기(Lightness)는 큐브의 수직축으로 표현되며, 채도(Chroma)와 휘색(Hue)는 큐브의 수평축으로 표현됩니다. LCH 공간은 채도(Chroma)를 직접적으로 나타내기 때문에 RGB, CMYK 등과 같은 색상 공간에서의 채도 값의 정의와 다릅니다. 채도(Chroma) 값은 휘색(Hue)와 밝기(Lightness) 값에 의존하지 않습니다. 따라서, LCH 공간에서 색상의 이질성을 더 잘 나타낼 수 있습니다. 출력 장치에서의 색상 표현을 위해서는 LCH 공간에서 RGB나 CMYK 등의 색상 공간으로 변환이 필요합니다. Lightness (L) Lightness는 색상의 밝기를 나타낸다. 0에 가..

HSL 휘색(Hue) 휘색은 색상의 종류를 나타내는 각도로 표현되며, 휘색은 빨강, 노랑, 초록, 파랑, 남색, 보라 등의 기본적인 색상을 나타냅니다. 0도부터 360도까지의 값을 가질 수 있습니다. 예를 들어, 빨간색은 0도, 노란색은 60도, 초록색은 120도, 파란색은 240도 등으로 표현됩니다. 채도(Saturation) 채도는 색상의 순수도를 나타냅니다. 채도 값은 0%에서 100% 사이의 값을 가집니다. 100%일 때 색상은 최대 순수도를 가지게 되고, 0%일 때 색상은 회색으로 표현됩니다. 밝기(Lightness) 밝기는 색상의 밝기를 나타냅니다. 밝기 값은 0%에서 100% 사이의 값을 가집니다. 0%일 때 색상은 완전한 검은색으로 표현되고, 100%일 때 색상은 완전한 흰색으로 표현됩니다..

먼셀의 색체계(Munsell color theory) 미국의 화가이자 색채 교육자 앨버트 헨리 먼셀(Albert Henry Munsell)은 색의 세 가지 속성인 색상(Hue), 명도(Value), 채도(Chroma)에 따라서 색상을 배치했다. 1927년 'The Munsell Book of color'을 발간하여 색체계를 확립하였고, 1940년 먼셀의 색체계는 감각적인 척도의 불규칙성으로 인해 미국 광학회(OAS)에 의해 'Munsell renotation'으로 수정되었다. 먼셀의 색체계 특징 지각적인 통보에 따른 감각적 색체계를 구성 빨강, 노랑, 초록, 파랑, 보라로 각각 다른 명도를 부여하여 인간의 시감 밝기에 따라 가장 높은 채도의 색을 각각 다른 명도로 부여함 먼셀의 색체계 세가지 속성 색상(..

인증은 영어로 Authentication이고, 인가는 영어로 Authorization이다. 로그인이나 권한 관리 쪽을 개발자가 아니면 자주 사용되지 않은 용어이고, 한글과 영어로 표기와 의미도 비슷하기 때문에 간혹 혼동하기도 한다. 동료들과 협업을 할 때 커뮤니케이션 미스가 발생되지 않도록 단어 풀이를 통해 명확히 의미를 이해해 보자. 인증 인증은 한자로 認(알 인) + 證(증거 증)을 조합으로 만들어졌다. 풀이로는 "어떤 행위가 정당한 절차로 이루어졌는 것을 기관을 통해서 증명했다"라는 의미이다. 인증은 영어로 Authentication이다. Authentication은 "인증된"이라는 의미의 Authentic의 명사인데, Authentic를 풀어쓰면 Auto(스스로) + hen(무언가를 해서) + t..

카카오 i 오픈 빌더 서비스의 프런트 엔드 개발자로 있을 때, 디자인 설계팀에서 서비스 사용 후 사용성 개선사항을 피드백해 주신 내용을 정리했습니다. 기능에 대한 가이드 부족 1) 초기 접근 시 무엇/어떻게 하면 챗봇을 만들 수 있는지 제공이 필요 2) 기본 기능의 역할/활용 방법을 파악하기 쉽게 해야 함 3) 계층 관계가 있는 데이터의 하위 데이터를 표시할 때 상위 데이터 표기 필요 4) 해당 위치에 맞는 툴팁이 필요함 기능 파악이 어려움 1) 기능이 활성화되기 전에 가이드 영역이 활성화되므로 기본으로 노출 필요 2) 동일한 기능이 워딩이 같게 해야 함 3) 다른 동작의 기능은 각자 다른 아이콘을 사용해야 함 사용자 액션에 대한 피드백이 부족 1) 버튼을 클릭하더라도 피드백이 없을 때 오류라고 느낄 수..

우선 테스트가 필요한 이유는 결함이 해결되지 않은 상태에서 서비스가 Production 단계로 배포된다면 장애가 발생하여 사용자들이 손실을 입고 나아가 회사 전체 비즈니스에 영향을 줄 수 있기 때문이다. 테스트가 필요한 부분 테스트의 경제성을 설명하는 격언 중 "테스트를 적게 하는 것은 죄지만 그렇다고 무조건 테스트를 많이 하는 것이 반드시 미덕은 아니다"라는 말이 있다. 테스트를 수행할 자원은 유한하므로 완벽한 테스트는 현실적으로 불가능하다. 그렇다면 위험이 높은 기능 및 비기능 요구사항을 집중적으로 테스트해야 한다. 테스트 케이스에 작성해야 하는 것 가장 중요한 것 실패 가능성이 있는 것 위험 요소가 있는 것 결함 발생 시 파급효과가 심각하고 이로 인한 막대한 손실이 발생하는 기능 위험 요소 장애 발..

테스트 종류 한장에 정리! 유닛 테스트 유닛 테스트는 코드의 특정 모듈이 의도된 대로 정확히 동작하는지 검증하는 방법입니다. 모든 함수와 메서드에 대한 테스트 케이스를 작성하게 됩니다. 이상적으로 각 테스트 케이스는 서로 분리되어야 하며, 이를 통해서 언제라도 코드 변경으로 인해 문제가 발생할 경우, 빠른 시간 내에 문제를 파악하고 해결할 수 있도록 도와줍니다. 이를 위해서 Mock Object를 생성하는 것도 좋은 방법입니다. 유닛 테스트는 개발자뿐만 아니라 테스터에 의해서 수행되기도 하고, 테스터가 유닛 테스트를 작성하면 개발자가 맞춰서 개발하는 사례도 있습니다. 정적 테스트 정적 테스트는 소프트웨어 실행 없이 소프트웨어를 분석하는 것을 의미합니다. eslint, prettier, 오픈 소스 라이센스..

TDD와 BDD 비교 TDD (Test Driven Development) TDD는 개발 방법론 중 하나로 우선 실패하는 테스트 코드 작성 후 개발 코드 작성하고, 테스트를 실행해서 통과 후 리팩터링을 진행하는 과정을 반복한다. 이러한 작업들을 반복해 본질적으로 필요한 코드만 작성하고 코드의 신뢰성을 높이는 데 포커스된 개발 방법론이다. BDD (Behavior Driven Development) 우선 TDD의 단점은 코드 관점으로 테스트를 작성하여 코드 수정 시 불필요한 테스트 코드 수정사항이 발생하는 것이다. 이러한 상황을 해결하기 위해 BDD 방법론이 나왔는 데, BDD에서는 사용자 시나리오 관점으로 suite를 작성한다. 사용자 관점에서 기능 단위로 작성하며 개발 코드 변경시 테스트 코드가 변경되..

소프트웨어 생명주기 간단 정리 소프트웨어를 만들 때는 규모를 불문하고 소프트웨어 생명주기 순서로 업무를 진행하는 것을 지향한다. 생명주기 순서로 진행하게 되면 효율적으로 시간을 활용할 수 있다. 1. 정의 단계 계획 분석: 요구사항이 무엇인지 정의 2. 개발 단계 설계: 요구사항을 어떻게 구현할지 개발: 요구사항을 시스템이 이해할 수 있는 언어로 변환하는 과정 테스트: 요구사항이 제대로 구현되었는지 검증하고 확인하는 과정 3. 지원 단계 운영: 소프트웨어 배포 후 버그 수정 및 기능 추가 모델 폭포수 모델 계획 -> 분석 -> 설계 -> 개발 -> 테스트를 순서대로 진행한다. 제조업 같은 하드웨어와 밀접한 소프트웨어에서 사용되기도 한다. 반복형 모델 계획 -> 분석 -> 설계 -> 개발 -> 테스트를 반..

출처 『자바스크립트로 하는 자료 구조와 알고리즘』 배세민 저/김무항 역 | 에이콘출판사 | 2019년 08월 30일 한 줄 리뷰 자바스크립트로 자료 구조와 알고리즘을 쉽게 학습해 볼 수 있는 도서 9장 집합 가장 근간이 된 자료 구조 중 하나 유한하고 구분되는 객체들의 그룹 정렬되지 않는 유일한 항목들의 그룹 const set = new Set(); set.add(1); set.delete(1); set.add(2); console.log(set.has(1), set.has(2)); // false true 교집합 const intersectSets = (setA, setB) => { const intersection = new Set(); for (const elem of setB) { if (setA..

출처 『코딩을 지탱하는 기술』 니시오 히로카즈 저 / 김완섭 역 | 비제이퍼블릭(BJ퍼블릭) | 2013년 10월 한 줄 리뷰 매일 봤던 코드를 다르게 보이게 하는 도서 문법의 역사 if, while을 만든 이유 사람이 편하게 쓰고 읽을 수 있는 프로그램을 만들기 위해 if, while과 같은 구조화 프로그래밍을 만들었다. if else if의 조건식에 반대가 되는 조건식을 만들기 위해서는 뒤집어서 표현해야 됨으로 혼란 스러울 수 있기 때문에 if else를 만들었다. while 반복되는 if를 읽기 쉽게 표현한 것 조건을 만족하고 있는 동안 블록 안의 내용을 반복하여 실행 for 수치를 증가시키는 while을 읽기 쉽게 표현 한 곳에 '시작 값, 종료 값, 증가 값' 3가지를 모두 정리가 되기 때문에 ..

출처 『읽기 좋은 코드가 좋은 코드다』 더스틴 보즈웰, 트레버 파우커 공저 / 임백준 역 | 한빛미디어 | 2012년 04월 한 줄 리뷰 기능 구현 코딩에 익숙해졌다면 그다음에는 이 도서를 읽고 좋은 코드를 코딩해야 합니다. 1 코드는 이해하기 쉬워야 한다 코드는 다른 사람이 그것을 이해하는 데 들이는 시간을 최소화하는 방식으로 작성되어야 한다. 코드를 완전히 이해한다는 것은 1. 코드를 자유롭게 수정 가능 2. 버그를 짚는 것을 가능 3. 수정된 내용이 작성한 다른 부분의 코드와 어떻게 상호작용하는지 알 수 있어야 함 을 의미한다. 2 이름에 정보 담기 변수, 함수, 혹은 클래스 등의 이름을 결정할 때는 항상 같은 원리가 적용된다. 이름은 일종의 설명문으로 간주해야 한다. 이름에 정보를 담아내는 방법 ..