이번 포스팅에서는 테스트 커버리지(coverage)가 무엇인지 알아보고 Jest를 이용해서 테스트 커버리지를 수집하는 방법에 대해서 알아보겠습니다. 테스트 커버리지(Test Coverage)란? 테스트 커버리지(test coverage)는 코드 커버리지(code coverage)라고도 하는데요. 쉽게 말해 코드가 얼만큼 테스트되고 있는지를 나타내는 소프트웨어의 품질 지표입니다. 테스트 커버리지가 높은 소프트웨어는 버그가 발생할 확률이 적기 때문에 사용자가 좀 더 신뢰하고 사용할 수 있습니다. 당연히 반대로 테스트 커버리지가 낮은 소
웹에서 라디오 버튼은 사용자로부터 여러 가지 옵션 중 하나를 선택받기 위해 사용되며, 양식(form)이나 설문(survey)과 같은 UI를 구현할 때 빠질 수 없는 핵심적인 요소입니다. 이번 포스팅에서는 React를 사용하여 여러 개의 라디오 버튼으로 이루어진 라디오 그룹 UI를 어떻게 구현할 수 있는지 알아보겠습니다. HTML과 CSS만으로 라디오 버튼을 사용하는 방법은 관련 포스팅을 참고 바랍니다. Radio 컴포넌트 작성 먼저 개별 라디오 버튼을 그리기 위한 React 컴포넌트를 작성해보겠습니다. 라디오 버튼은 HTML에서 <
이번 포스팅에서는 Uncontrolled Components 방식을 활용하여 React로 비제어 양식 UI를 만드는 몇가지 방법에 대해서 알아보겠습니다. Uncontrolled Components란? 웹에서 양식 UI를 구현할 때 <input>, <select>, <textarea>와 같은 HTML 요소를 사용하게 되는데요. 이러한 요소들은 value나 checked와 같은 내부 상태를 가지는데 기본적으로는 브라우저의 DOM이 상태를 제어해줍니다. React를 사용해서 양식 관련 HTML 요소들이 포함된 컴포넌트를 작성할 때는 이
지난 포스팅에서는 HTML 문서에 SVG로 다양한 그림을 그리는 방법에 대해서 알아보았습니다. 이번 포스팅에서는 HTML 문서에 삽입된 SVG 요소를 CSS로 스타일하는 방법에 대해서 알아보겠습니다. SVG 요소 우선 스타일할 SVG 요소가 있어야겠죠? 아래 SVG 요소는 로그인이 필요한 웹사이트에서 흔히 볼 수 있는 사용자 아이콘인데요. 이 요소를 상대로 간단한 실습을 해보려고 합니다. 크기 조정 위의 사용자 아이콘이 너무 작은 것 같은데요. 먼저 크기를 좀 키워볼까요? SVG 요소를 크기를 조정할 때는 viewBox 속성을 고려
빠른 선택 알고리즘은 여러 값이 주어졌을 때 k 번째로 작은 값이나 큰 값을 찾을 매우 유용한 검색 알고리즘인데요. 보통 이럴 때 정렬을 생각하지만 빠른 선택 알고리즘을 이용하면 배열을 정렬하지 않고도 빠르게 해당 원소를 찾을 수 있습니다. 알고달레에서 코딩 테스트/인터뷰 준비에 좀 더 특화된 컨텐츠를 만나보세요! 📝 아이디어 일반적으로 빠른 선택 알고리즘을 설명할 때 빠른 정렬 (Quick Sort) 알고리즘이 빠지지 않는데요. 이 두 알고리즘은 공통적으로 피봇(pivot)이라고 하는 임의의 값을 기준으로 배열을 분할하는 로직을
웹에서 SVG가 사용되기 시작한지가 꽤 되어 가는 것 같죠? 개발자로서 주로 이미 만들어진 SVG 코드를 복사해서 붙여넣기만 하지 제대로 SVG에 대해서 깊이 알아볼 기회는 많지 않은 것 같습니다. 이번 포스팅에서는 HTML 문서 안에 SVG로 직접 간단한 그림을 그려보면서 그려보면서 전반적으로 SVG를 어떻게 사용하는지 가볍게 알아보겠습니다. SVG 란? SVG(Scalable Vector Graphics)는 HTML 문서에 백터(vector) 기반 그래픽을 그리기 위해서 사용되는 XML 기반 웹 기술입니다. 백터 기반 그래픽은
이번 포스팅에서는 CSS를 이용하여 라디오 버튼을 스타일하는 요령에 대해서 알아보겠습니다. 차근차근 따라오시다보면 아래와 같은 라디오 버튼을 만드실 수 있으실 거에요. 🍅😄 왜, 라디오 버튼을 스타일할까? 먼저 웹사이트를 만들 때 라디오 버튼(radio button)을 뭐하러 직접 스타일하는지에 대해서 잠깐 짚고 넘어가겠습니다. 일반적으로 웹사이트에서 라디오 버튼은 브라우저나 운영체제, 디바이스에 따라서 미묘하게 다르게 표현이 됩니다. 그래서 플랫폼에 구애받지 않고 일관적인 사용자 경험을 제공하기 위해서 라디오 버튼에 커스텀 스
모바일 우선(mobile-first) 웹디자일 할 때 컨텐츠를 위에서 아래로 배치하는 화면 레이아웃을 제일 먼저 고려하게 되는데요. 이 때 대부분의 경우 컨텐츠 (특히, 텍스트 컨텐츠)를 수평 중간에 위치시켜야 하죠? 이번 포스팅에서는 CSS로 레이아웃 잡을 때 컨텐츠를 수평 중간에 정렬하는 요령에 대해서 알아보려고 합니다. 수평 중간 정렬 컨텐츠를 수평에 정렬하는 작업은 웹페이지의 여러 부분에 걸쳐서 일어나게 되므로 보통 클래스로 스타일하는 경우가 많습니다. 관례적으로 container나 max-width-wrapper와 같은 클
이번 포스팅에서는 화면(viewport) 너비에 따라서 적절히 반응하는 글꼴을 CSS로 어떻게 스타일하는지 알아보겠습니다. Media Queries 반응형 글꼴하면 가장 쉽게 떠올리리 수 있는 방법이 바로 미디어 쿼리(media query)를 사용하는 것입니다. 예를 들어, 화면 너비가 480px 이상과 1024px 이상이 되었을 때 HTML의 여러 요소(element)와 클래스(class)에 적용된 글자 크기가 자동으로 늘어나게 스타일해볼까요? 오래전 부터 쓰이던 이 방법은 보시다시피 동일한 CSS 선택자에 대해서 여러 번 스타일
웹이 지금과 같이 대중적인 플랫폼이 되는데 서로 다른 웹페이지를 무한대로 연결해주는 HTML의 링크(link)가 중요한 역할을 했을텐데요. 이번 포스팅에서는 HTML의 <a> 요소로 마크업이 되는 링크(link)를 CSS로 스타일하는 방법에 대해서 알아보겠습니다. 브라우저 기본 링크 스타일링 우리가 굳이 링크를 스타일해주지 않더라도 대부분의 브라우저에서는 링크를 유관으로 구분하기 쉽도록 기본적으로 스타일을 제공하는데요. 보통 이렇게 브라우저 자체에서 지원하는 기본 스타일을 User Agent Stylesheet이라고 합니다. 크롬
달레줄레 두번째 에피소드에서는 프로그래밍 언어(특징/역사/분류)에 대해서 이야기 나누어 보았습니다. 달레줄레 팟케스트는 다음 플랫폼에서 들으실 수 있습니다. Apple Podcast YouTube 팟빵 오디오클립
React에서는 컴포넌트 스타일링을 위해서 CSS-in-JS 라이브러리가 매우 많이 사용되고 있는데요. 이번 포스팅에서는 Styled Components와 함께 CSS-in-JS 라이브러리의 양대산맥으로 손꼽히는 손꼽히는 이모션(Emotion)을 사용해서 React 컴포넌트를 스타일하는 방법에 대해서 살펴보겠습니다. 외부 라이브러리 없이 React 컴포넌트를 스타일링하는 방법은 React 컴포넌트 CSS 스타일링 기본을 참고 바랍니다. 패키지 설치 자바스크립트 패키지 매니저인 npm을 이용하면 React 프로젝트에 Emotion을
구글 지도(Google Maps)는 구글에서 제공하는 글로벌 지도 서비스입니다. 네이버나 카카오에서 제공하는 지도 서비스와 달리 국내 지도 뿐만 아니라 해외 지도까지 제공하기 때문에 전 세계 사용자를 대상으로 하는 애플리케이션을 개발할 때 특히 유용하게 사용할 수 있는데요. 이번 포스팅에서는 구글 지도를 웹페이지 상에서 띄우고 제어할 때 사용하는 구글 Maps API에 대해서 알아보려고 합니다. 차근차근 따라오시다보면 위와 같은 구글 지도를 웹페이지에 나오게 수 있으실 것입니다. 😁 API 키 발급 받기 구글 Maps API를 사
C, C++, C#, Objective-C, Swift, Java, Kotlin, Scala, Go, Rust, Python, PHP, Ruby, JavaScript, HTML, CSS, SQL... 프로그래밍 언어의 과잉의 시대에서 여러분은 어떤 프로그래밍 언어로 소프트웨어 개발을 하고 계신가요? 이번 포스팅에서는 코딩 입문자를 위해서 이렇게 수많은 프로그래밍 언어를 분류하는 몇 가지 기준에 대해서 얘기해보겠습니다. 레벨(level)에 따른 분류 프로그래밍 언어에 대해서 얘기할 때 흔히 얼마나 레벨 또는 수준(level)이 높으냐
달레줄레 첫 번째 에피소드에서는 프로그래밍 관련 국내외 팟캐스트 현황과 달레와 줄레가 프로그래밍 팟케스트를 시작한 계기에 대해서 이야기 나누어 보았습니다 😄 달레줄레 팟케스트는 다음 플랫폼에서 들으실 수 있습니다. Apple Podcast YouTube 팟빵 오디오클립
새 프로젝트에 합류했는데 개발 환경 설정에만 하루 이상 걸린 적 있으신가요? Node.js 버전이 안 맞고, Python 패키지가 충돌하고, 데이터베이스 설치가 안 되고… 😅 이런 문제는 개발자라면 누구나 한 번쯤 겪어봤을 텐데요. Dev Container는 이런 골치 아픈 개발 환경 설정을 컨테이너 안에 통째로 담아서 해결합니다. 설정 파일 하나만 프로젝트에 넣어두면 팀원 누구나 동일한 환경에서 바로 작업을 시작할 수 있죠. 이번 글에서는 Dev Container가 뭔지, 어떻게 쓰는지 처음부터 차근차근 알아보겠습니다. Dev
React 프로젝트에서 대부분의 외부 스크립트는 npm 패키지로 설치해서 불러올 수 있지만 간혹 npm 패키지가 제공되지 않는 경우도 있습니다. 이럴 경우 어쩔 수 없이 웹에서 전통적으로 외부 스크립트를 불러오는 방법인 HTML 문서의 <script> 태그를 사용할 수 밖에 없는데요. 이번 포스팅에서는 React 컴포넌트에서는 어떻게 <script> 태그로 외부 자바스크립트 불러울 수 있는지에 대해서 알아보도록 하겠습니다. index.html 파일 안에 script 태그 추가하기 일반적으로 React 프로젝트에는 public 폴더나
이번 포스팅에서는 Glob Patterns, 흔히 줄여서 Globs라고 불리는 패턴 매칭에 대해서 알아보도록 하겠습니다. Globs(Glob Patterns)란? Globs은 오래전부터 리눅스 운영체제에서 한 번에 여러 개의 파일을 찾을 때 사용해온 패턴 매칭 기법인데요. 많은 리눅스 명령어가 인자로 Glob 패턴을 받기 때문에 알게 모르게 많이 사용하고 있으실 거에요. 예를 들어, 터미널에서 ls src/*.java와 유사한 커맨드를 날려보신 적이 있으시면 이미 어느 정도 Globs 문법을 자연스럽게 체득하셨다고 볼 수 있을 것
지난 포스팅에서는 커스텀(custom) React Hook을 사용하여 양식(form) UI를 구현해보았는데요. 이번 포스팅에서는 이와 유사한 방식으로 React Hook 기반의 API를 제공하는 React Hook Form 라이브러리에 대해서 알아보려고 합니다. 새로운 라이브러리를 배우는 가장 효과적인 방법은 그 라이브러리를 이용해서 무언가를 만들어보는 것이 겠죠? 본 포스팅을 끝까지 따라오시면 아래와 같은 로그인 폼(form)을 만드실 수 있으실 거 에요 😁 패키지 설치 React Hook Form 라이브러리는 자바스크립트 패키
GitHub Actions을 사용하다 보면 시간이 지남에 따라 워크플로우가 점점 복잡해지고, 그에 따라 중복되는 부분이 생기며 결국 워크플로우의 유지보수가 어려워지게 되는데요. 이번 포스팅에서는 GitHub Actions에서 워크플로우를 재사용하여 이러한 중복 설정 문제를 해결해보도록 하겠습니다. 실습 워크플로우 생성 실습을 위해서 자바스크립트 프로젝트의 전형적인 워크플로우 파일을 하나 작성해보았습니다. main 브랜치로 새로운 커밋(commit)이 유입되면 애플리케이션을 빌드하여 배포하는 작업을 수행되도록 하겠습니다. 6개의 단계