Logo

240 posts

curl 커맨드: 터미널에서 HTTP 호출하기

이번 포스팅에서는 터미널 상에서 간편하게 사용할 수 있는 HTTP 클라이언트인 curl 커맨드에 대해서 알아보겠습니다. curl 커맨드 1998년에 만들어진 curl 커맨드는 Postman이나 Insomnia와 같이 다양한 기능과 화려한 UI를 제공하는 GUI 기반 HTTP 클라이언트가 계속해서 출시되는 와중에도 아직까지 꾸준히 사랑받고 있는 CLI 도구입니다. curl 커맨드는 리눅스나 MacOS에 대부분의 경우 기본 탑제되어 있고 몇가지 주요 옵션만 숙지하면 사용하기 매우 쉽기 때문입니다. 기본 HTTP 호출 웹 브라우저에서 …

텍스트 스타일을 위한 10가지 CSS 속성

아무리 웹에서 이미지나 비디오의 비중이 커지더라도 텍스트는 웹에서 빠질 수 없는 핵심적인 요소일 것입니다. 이번 포스팅에서는 웹에서 텍스트를 스타일하기 위해서 사용할 수 있는 CSS 속성에 대해서 알아보겠습니다. 텍스트 색상: color CSS에서 정말 자주 사용되는 color 속성은 텍스트 색상을 지정하는데 사용됩니다. color 속성에는 여러가지 타입의 값을 설정해줄 수 있는데요. 예를 들어, blue와 같은 명명된(named) 색상, #ff0000와 같은 색상 코드, 그리고 rgb(), hsl()과 같은 색상 함수도 사용할 …

[CSS] width 속성과 너비 결정 매커니즘

이번 포스팅에서는 CSS의 width 속성과 너비 결정 매커니즘에 대해서 알아보도록 하겠습니다. width 속성 width 속성은 엘리먼트의 너비를 제어하기 위해서 사용되는데요. 크게 절대값, 상대값, 키워드로 설정이 가능한데 이에 따른 너비가 어떻게 결정되는지 이해하는 것이 중요합니다. 절대값 px와 같은 절대 단위를 사용하여 width 속성값을 지정해주면 해당 엘리먼트는 항상 고정된 너비를 갖게 됩니다. 즉, 절대값으로 width 속성을 설정하면 가용 너비이나 컨텐트의 크기와 무방하게 특정값으로 엘리먼트의 너비를 고정시킬 수 …

Fontsource로 웹폰트 직접 호스팅하기

이번 포스팅에서는 fontsource를 사용하여 웹폰트를 직접 호스팅하는 방법에 대해서 알아보겠습니다. fontsource fontsource는 오픈 소스(open source) 웹폰트를 npm 패키지의 형태로 손쉽게 설치하고 직접 호스팅이 가능하게 해주는 라이브러리입니다. 웹폰트를 사용할 때 Google Fonts와 같은 외부 서비스를 통해서 웹폰트를 호스팅하는 경우가 많은데요. 하지만 다양한 웹폰트를 사용하거나 속도가 민감한 서비스의 경우에는 웹폰트를 직접 호스팅하면, 웹폰트 다운로드로 인한 지연을 최소화하여 사용자 경험을 개…

구글 웹폰트 사용하기 (Google Fonts)

웹폰트(web font)를 사용하면 사용자의 컴퓨터에 설치된 폰트뿐만 아니라 웹에서 다양한 폰트를 불러와서 웹사이트에 적용할 수 있습니다. 뿐만 아니라, 사용자가 어느 플랫폼에서 웹사이트를 이용하든 항상 동일한 글꼴로 텍스트 컨텐츠를 보여줄 수는 있다는 장점도 있습니다. 이번 포스팅에서는 Google Fonts를 통해서 웹폰트를 웹사이트에 적용하는 방법에 대해서 알아보겠습니다. 웹폰트 선택하기 웹사이트에 웹폰트를 적용하려면 우선 사용하고 싶은 웹폰트를 골라야겠죠? 유료로 웹폰트를 구매할 수도 있겠지만 본 포스팅에서는 무료 웹폰트를…

CSS 변수 (CSS 사용자 속성)

CSS 변수는 예전에는 Sass나, LESS, Stylus와 같은 CSS 전처리기(CSS preprocessor)를 통해서 접할 수 있었던 기능이었습니다. 하지만 최근에는 CSS 스펙 자체에 CSS 변수 개념이 추가되어 이제 CSS 전처리기 없이도 부담없이 CSS 변수를 사용할 수 있게 되었습니다. 이번 포스팅에서는 CSS 사용자 속성(CSS custom properties)라고도 알려진 CSS 변수(CSS variables)에 대해서 알아보겠습니다. CSS 변수 정의 CSS 변수가 CSS 사용자 속성이라고 불리는 이유는 CSS …

[CSS] 스티키 헤더 (sticky header)

CSS의 sticky position을 이용하여 항상 화면 상단에 항상 달라붙어 있는 헤더(header)를 만들어보겠습니다. sticky position의 특징 sticky position은 CSS에 비교적 최근에 추가된 포지셔닝 메커니즘인데요. 스크롤하지 않을 때는 static position처럼 동작하다가 스크롤할 때는 fixed position과 유사하게 동작합니다. position 속성을 sticky로 설정되어 있는 엘리먼트는 마치 position 속성이 static으로 설정되어 있는 것처럼 부모 엘리먼트 내부에서 공간을 …

[CSS] 반응형 사이드바

웹사이트 레이아웃에서 사이드바(sidebar)는 목차, 광고 배너, 인기/신규 게시물 목록, 연관/추천 상품 목록과 같이 보조적인 컨텐츠를 배치하기 위해서 사용합니다. 이번 포스트에서는 플렉스 박스(Flexbox)와 미디어 쿼리(Media Query)를 이용해서 화면의 너비에 알아서 반응하는 사이드바를 만들어보겠습니다. 웹페이지 마크업 예제로 목차 영역과 기사 영역으로 이루어진 간단한 웹페이지의 구조를 HTML로 작성해보겠습니다. <main> 엘리먼트 아래에 목차 영역을 <aside> 엘리먼트로 기사 영역을 <article> 엘리…

CSS 미디어 쿼리 prefers-color-scheme (다크 모드)

다크 모드(dark mode)는 야간에 눈을 편안하게 하고 작업의 집중도를 높을 수 있도록 시스템 전반에 어두운 색생 체계를 적용해주는 운영 체제의 기능입니다. 2018년에 macOS Mojave에 처음으로 소개된 다크 모드는 현재 Windows 10을 비롯하여 많은 운영 체제에서 지원하는데요. 이에 따라 점점 많은 애플리케이션과 웹사이트가 운영 체제의 다크 모드에서 어울리는 어두운 계열의 스타일을 추가하고 있는 추세입니다. 라이트 모드 스타일링 예전에는 웹사이트를 스타일할 때 전반적으로 밝은 배경색에 어두운 글자색을 사용하는 것…

[파이썬] 복잡한 리스트 보기 좋게 출력하기

파이썬에서 리스트(list)를 콘솔에 출력할 때 보통 print() 함수를 사용하게 되는데요. 예를 들어, 10개의 숫자를 담고 있는 간단한 리스트는 다음과 같이 출력할 수 있습니다. 하지만 리스트가 많은 양의 데이터를 담고 있거나 리스트의 구조가 복잡할 경우에는 이런 식으로 출력하면 상당히 보기가 어려워지죠? 이번 포스팅에서는 복잡한 리스트를 보기 좋게 출력하는 몇 가지 방법에 대해서 알아보겠습니다. for 루프 for 문을 사용하여 루프를 돌면서 리스트의 각 원소를 여러 줄에 나누어서 출력해보겠습니다. 어떤가요? 훨씬 보기게 …

[CSS] 성배 (Holy Grail) 레이아웃 (Flexbox, Grid)

웹사이트에서 정말 흔하게 접할 수 있는 성배(Holy Grail) 레이아웃은 한 때 개발자 사이에서 제대로 구현하기 어렵기로 악명이 높았었는데요. Flexbox와 CSS Grid가 보편화되면서 이제는 옛말이 되어 가고 있는 것 같습니다. 이번 포스트에서는 CSS의 최신 기술을 이용하여 어떻게 성배 레이아웃을 구현할 수 있는지 알아보도록 하겠습니다. 기본 구조 성배 레이아웃은 일반적으로 5개의 영역으로 구성이 되는데요. 회면 최상단에 각각 헤더(header)와 풋터(footer) 영역이 위치하고, 그 사이의 영역이 다시 네비게이션(…

React로 버튼 컴포넌트 만들기

버튼은 웹 에서 사용자와 상호 작용에 있어서 핵심이 되는 요소로서 하나의 웹 애플리케이션에서도 여러 종류의 버튼이 필요하기 마련입니다. 이번 포스팅에서는 다앙한 크기와 형태의 버튼을 표현하기 위해 사용할 수 있는 React로 컴포넌트를 함께 개발해보도록 하겠습니다. 컴포넌트 함수 우선 disabled와 children prop을 인자로 받고 아무 스타일링없이 단순히 <button> HTML 엘리먼트를 반환하는 간단한 컴포넌트 함수를 작성합니다. 지금부터 React에서 Styled Components 라이브러리를 사용해서 이 버튼 …

Styled Components 전역 스타일링 (Global Style)

이번 포스팅에서는 Styled Components로 전역 스타일(global style)을 정의하는 방법에 대해서 알아보겠습니다. Styled Components 자체에 대한 자세한 설명은 관련 포스트를 참고 바랍니다. 컴포넌트 레벨 스타일링 React와 Styled Components로 웹 개발을 하다보면 대부분의 경우 컴포넌트 레벨에서 스타일을 하게 됩니다. React가 컴포넌트 기반 자바스크립트 라이브러리라는 것을 감안해보면 너무나 자연스러운 현상일 것입니다. 예를 들어, 다음 <BlogPost/> React 컴포넌트는 St…

[CSS] ::before / ::after

이번 포스팅에서는 추가 컨텐트를 삽입하기 위해서 사용되는 ::before과 ::after에 대해서 알아보겠습니다. Pseudo Element ::before과 ::after는 CSS에서 소위 pseudo element라고 하는데요. 일반적인 CSS 선택자(selector)로는 지정할 수 없는 미세한 영역을 선택하기 위해서 사용됩니다. 본 포스팅에서 다룰 ::before과 ::after뿐만 아니라 ::first-letter, ::first-line, ::selection, ::marker 등 CSS에는 다양한 pseudo eleme…

[CSS] overflow 속성 사용법

웹개발을 하다보면 주어진 공간보다 더 많은 컨텐트를 보여줘야 하는 경우가 생기는데요. CSS에서는 overflow 속성을 통해서 주어진 공간을 넘어가는 컨텐트를 어떻게 보여줄지를 제어합니다. 이번 포스팅에서는 크기가 제한된 영역에서 많은 양의 컨텐트를 보여줄 때 유용한 CSS의 overflow 속성에 대해서 알아보겠습니다. visible 먼저 overflow 속성을 별도로 명시해주지 않았을 때 적용되는 기본 속성값인 visible에 대해서 살펴보겠습니다. 긴 기사의 컨텐트를 고정된 크기의 박스 안에서 보여줘야하는 경우를 예를 들어…

[CSS] Fixed Positioning

이번 포스트에서는 화면에 고정된 UI를 만들 때 사용되는 fixed positioning에 대해서 알아보도록 하겠습니다. Fixed Positioning CSS의 fixed positioning은 브라우저의 전체 화면(viewport)을 기준으로 엘리먼트를 배치할 때 사용합니다. CSS의 position 속성은 엘리먼트가 어떻게 배치되는가를 결정하는데, 이 속성의 값을 fixed로 지정해주면 fixed positioning이 적용됩니다. fixed positioning이 적용된 엘리먼트는 부모 엘리먼트로 부터 완전히 독립되어 다른…

[CSS] 툴팁(tooltip) 구현하기

웹사이트에서 부연적인 정보를 선택적으로 보여주긴 위한 수단으로 툴팁(tooltip)이 많이 사용됩니다. 예를 들어, 아래 웹페이지에서 HTML과 CSS위에 마우스 포인터를 올려놓으면 각 용어가 무엇의 약자인지가 표시됩니다. 이번 포스트에서는 CSS의 absolute position를 응용해서 간단한 툴팁을 구현하는 방법에 대해서 알아보겠습니다. absolute position에 대한 기본적인 특징과 작동 매커니즘은 대해서는 관련 포스트를 참고 바랍니다. HTML 마크업 먼저 툴팁 구현을 위한 HTML 코드를 작성해보도록 하겠습니다…

CSS의 상속(Inheritance)

이번 포스팅에서는 CSS에서 상속의 개념과 기본적으로 CSS 상속을 어떻게 활용하는지 알아보겠습니다. CSS의 상속 CSS에도 다른 프로그래밍 언어들처럼 상속(Inheritance)이라는 개념이 있는데요. 하위 엘리먼트에서 어떤 CSS 속성을 명시하지 않은 경우, 기본적으로 상위 엘리먼트에 적용된 스타일이 하위 엘리먼트에도 적용되는 것을 뜻합니다. 예를 들어, 다음와 같은 간단한 HTML 코드를 예를 들어 생각해보겠습니다. 여기서 section 태그의 color 속성을 설정해주는 스타일 적용하면 어떻게 될까요? 파란 글자색이 <s…

CSS 미디어 쿼리 (Media Query) 사용법

다양한 디바이스들이 웹브라우징을 지원하면서 웹에서 화면의 해상도에 따라 유연하게 컨텐츠를 배치하는 기술이 점점 중요해지고 있습니다. 이번 포스팅에서는 이러한 반응형 웹디자인의 기본이되는 CSS의 미디어 쿼리(Media Query)에 대해서 살펴보겠습니다. 기본 문법 미디어 쿼리는 CSS에서 어떤 스타일을 선택적으로 적용하고 싶을 때 사용합니다. 다른 프로그래밍 언어의 if 조건문과 비슷한 개념이라고 생각하시면 이해가 쉬우실 겁니다. @media 키워드로 시작하는 미디어 쿼리의 문법 구조는 아래와 같습니다. 스타일 부분에는 일반적인…

[Jest] 파라미터화 테스트: test.each(), describe.each()

이번 포스트에서는 Jest를 사용하여 파라미터화(parameterized) 테스트를 작성하는 방법에 대해서 알아보겠습니다. 파라미터화(parameterized) 테스트 테스트를 작성하다보면 다양한 테스트 데이터에 대해서 동일한 테스트 코드를 돌리고 싶을 때가 있습니다. 예를 들어, 2개의 문자열의 인자로 받아 애너그램(anagram) 여부를 반환해주는 함수를 작성해보겠습니다. 그리고 위 함수에 대한 테스트는 작성하고 실행해보았습니다. 위 4개의 테스트 함수를 살펴보면, 테스트 데이터만 빼만 동일한 코드라는 것을 알 수 있습니다. …