이번 포스팅에서는 배경을 스타일할 때 잘 정리해두면 두고두고 요긴하게 쓸 수 있는 CSS 속성에 대해서 알아보겠습니다. background-color 배경 관련 CSS 속성 중 가장 많이 사용되는 것은 아마도 배경색을 지정할 때 사용하는 background-color일 것입니다. 기본값은 transparent, 즉 투명이며 색상명이나 색상 코드를 사용할 수 있습니다. 일반적으로 배경색은 웹 접근성(accessibility)을 준수하기 위해서 글자색과의 명암비를 고려해서 결정을 하는데요. 시력이 안 좋으신 분들도 텍스트를 인식하는데
이번 포스팅에서는 React 프로젝트를 쉽고 빠르게 만들 수 있도록 도와주는 Create React App에 대해서 알아보겠습니다. Create React App React로 개발 프로젝트를 맨땅에서 시작하려면 웹팩(Webpack), 바벨(Babel) 등 정말 미리 배워야하는 기술들이 한 두개가 아닙니다. 초보 개발자들이 이러한 선수 기술들을 일일이 학습하다보면 본래 목표했던 React 애플리케이션 개발이 아득하게 멀어지기 일수인데요... React는 각종 개발 편의 도구가 함께 포함된 프레임워크(framework)라기 보다는 어느
국내 많은 서비스들이 당장 다국어 지원의 요구가 없더라도 향후 해외 진출을 염두해두고 개발 초기부터 애플리케이션을 국제화(internalization, i18n)하는 사례가 늘고 있는데요. 이번 포스팅에서는 React Intl 라이브러리를 이용해서 다국어를 지원하는 방법에 대해서 알아보겠습니다. React가 아닌 일반 자바스크립트에서 국제화하는 방법에 대해서는 관련 게시물을 참고 바랍니다. React Intl 설치 React Intl 라이브러리는 Node.js 패키지 매니저인 npm으로 설치할 수 있습니다. Locale: Langu
React v16.8에서 리액트 훅(React Hook)이 소개된 이후로 많은 프로젝트에서 커스텀(custom) 훅 함수를 사용하고 있는 것 같은데요. 이번 포스팅에는 리액트 훅(React Hook)을 테스트하는 방법에 대해서 알아보겠습니다. 예제 React Hook 먼저 테스트 대상이 될 간단한 React Hook 함수 하나를 작성해보겠습니다. 아래 useToggle() 함수는 true 또는 false가 될 수 있는 상태 state와 그 상태값을 반전할 수 있는 함수 toggle()을 배열에 담아 반환합니다. 초기 상태값을 ini
지난 포스팅에서 가짜 데이터를 만들 때 사용하는 Faker.js에 대해서 간단히 알아보았는데요. 이번 포스팅에서는 실제로 테스트를 작성할 때 Faker.js를 어떻게 활용할 수 있는지에 대해서 다뤄보려고 합니다. 테스트 대상 코드 작성하기 먼저 테스트 대상이 될 임의의 함수를 하나 필요한데요. 사용자 객체를 인자로 받아 회원 가입을 처리해주는 함수를 작성해보겠습니다. 이 함수는 인자로 넘어온 사용자의 이메일과 비밀번호에 대한 입력값 검증이 실패할 경우 error 속성에 오류 메시지를 담아서 반환하며, 회원 가입이 성공한 경우 use
중요: 본 포스팅에서 소개하고 있는 faker라는 라이브러리는 안타깝게도 안타깝게도 2022년에 faker를 유지보수하던 개발자가 불미스러운 일을 저질러 더 이상 사용하면 안 되는 라이브러리가 되었습니다. 가짜 데이터 생성을 위한 라이브러리가 필요하신 분들은 새로운 포스팅을 참고하시길 바랍니다. 가짜 데이터 시제품(prototype)을 개발하거나, 단위 테스트를 작성할 때 가짜 데이터가 필요할 때가 자주 있습니다. 이럴 때, 직접 가짜 데이터를 하드코딩(hard-coding)할 수도 있겠지만, 좀 더 편하고 빠르게 가짜 데이터를 얻
이번 포스팅에서는 tabindex 속성을 사용해서 키보드 포커스 여부와 우선순위를 제어하는 방법에 대해서 알아보았습니다. 키보드 포커스 혹시 마우스가 고장나거나 배터리가 나가서 키보드로만 컴퓨터를 조작하거나 웹서핑을 해보신 적이 있으신가요? 마우스 사용자는 포인터로 웹페이지의 어디든지 클릭을 할 수 있지만, 키보드 사용자는 포커스라는 제한된 방법을 이용해야 되는데요. 다행히도 웹은 사용자와 상호작용(interactive)이 가능한 요소(element)는 기본적으로 키보드로 포커스가 잡히게 되어 있습니다. 대표적으로 <input>,
웹에서는 UI가 비동기로 업데이트되는 경우가 참 많죠? UI가 변경될 때까지 기다려줘야 하기 때문에 많은 개발자들이 테스트하기 어려운하는 부분입니다. 이번 포스팅에서는 Testing Library로 비동기(asynchronous)로 작동하는 React 컴포넌트를 테스트하는 방법에 대해서 알아보겠습니다. 예제 컴포넌트 우선 테스트 대상이 될 간단한 React 컴포넌트 하나를 작성해보도록 하겠습니다. 아래 <Switch/> 컴포넌트 함수는 on 상태값에 따라 ON 버튼 또는 OFF 버튼을 리턴합니다. on 상태값은 최초에는 false이
CSS 코드를 읽다보면 아래와 같이 선택자(selector) 사이에서 >나 +, 또는 ~와 같은 기호를 어렵지 않게 볼 수 있습니다. CSS에서는 이렇게 선택자 사이에 나오는 기호들을 결합자(combinator)라는 다소 어려운 이름으로 부르는데요. 이번 포스팅에서는 CSS의 결합자를 사용하여 선택자를 조합하는 방법에 대해서 배워보겠습니다. CSS의 기본 선택자에 대해서는 별도 포스팅에서 자세히 다루고 있으니 참고 바랍니다. Descendant Combinator CSS에서 너무 흔하게 볼 수 있어서 많은 개발자들이 결합자라는 인식
CSS에서는 선택자(selector)를 통해서 웹페이지의 특정 부분만을 선택하여 원하는 스타일을 적용할 수 있습니다. 이번 포스팅에서는 CSS의 선택자의 근간이 되는 기본 선택자에 대해서 알아보겠습니다. Type Selector CSS에서 가장 쉽게 볼 수 있는 기본 선택자는 태그 이름을 그대로 사용하는 타입 선택자(Type selector) 입니다. 타입 선택자를 사용하면 HTML 문서에서 특정 태그로 마크업된 모든 요소(element)를 선택할 수 있습니다. 예를 들어, 웹페이지 상의 모든 <strong> 요소의 글꼴 두께를 스
HTML에는 모든 엘리먼트를 대상으로 사용할 수 있는 속성이 존재하는데요. 이를 전역 속성(global attribute)이라고 합니다. 이번 포스팅에서는 HTML에서 자주 사용되는 전역 속성에 대해서 알아보겠습니다. style 아무래도 많은 분들에게 가장 익숙한 HTML 전역 속성은 style일 것입니다. style 속성은 해당 엘리먼트에 인라인으로 CSS 스타일을 선언하고 싶을 때 사용합니다. class 두번째로 살펴볼 HTML 전역 속성은 class인데요. HTML 문서 상에서 여러 엘리먼트를 하나의 이름으로 묶고 싶을 때 사
모든 HTML 문서는 크게 head 영역과 body 영역으로 나누어 집니다. 이번 포스팅에서는 웹 개발을 하면서 간과하기 쉬운 head 영역에 대해서 살펴보려고 합니다. head 요소 HTML의 <head> 요소(element)는 <body> 요소와 함께 HTML 문서의 최상위 요소인 <html> 바로 아래 위치합니다. 브라우저 화면에 보여지는 영역을 감싸고 있는 <body> 요소와 달리 <head> 요소는 화면에 보여지지는 않지만 브라우저가 해당 HTML 문서에 대해서 알아야 할 정보를 감싸고 있습니다. 그럼, head 영역에는
아무리 웹에서 이미지나 비디오의 비중이 커지더라도 텍스트는 웹에서 빠질 수 없는 핵심적인 구성 요소인데요. 이번 포스팅에서는 웹에서 텍스트를 스타일하기 위해서 자주 사용되는 대표적인 CSS 속성을 정리해보겠습니다. 텍스트 색상: color CSS에서 정말 자주 사용되는 color 속성은 텍스트 색상을 지정하는데 사용됩니다. color 속성에는 여러 가지 타입의 값을 설정해줄 수 있는데요. 예를 들어, blue와 같은 명명된(named) 색상, #ff0000와 같은 색상 코드, 그리고 rgb(), hsl()과 같은 색상 함수도 사용할
웹 페이지의 레이아웃을 디자인할 때 CSS에서 요소의 너비를 정의하는 width 속성이 매우 중요한 역할을 하게 되는데요. 이번 포스팅에서는 CSS의 width 속성의 기본적인 사용법과 각 속성값에 따라 어떻게 너비가 결정되는지에 대해서 알아보겠습니다. width 속성 CSS의 width 속성은 HTML 요소의 너비를 제어하기 위해서 사용되는데요. 크게 절대값, 상대값, 키워드로 설정이 가능한데 이에 따른 너비가 어떻게 결정되는지 이해하는 것이 중요합니다. 절대값 px와 같은 절대 단위를 사용하여 width 속성값을 지정해주면 해당
이번 포스팅에서는 fontsource를 사용하여 웹폰트를 직접 호스팅하는 방법에 대해서 알아보겠습니다. fontsource fontsource는 오픈 소스(open source) 웹폰트를 npm 패키지의 형태로 손쉽게 설치하고 직접 호스팅이 가능하게 해주는 라이브러리입니다. 웹폰트를 사용할 때 Google Fonts와 같은 외부 서비스를 통해서 웹폰트를 호스팅하는 경우가 많은데요. 하지만 다양한 웹폰트를 사용하거나 속도가 민감한 서비스의 경우에는 웹폰트를 직접 호스팅하면, 웹폰트 다운로드로 인한 지연을 최소화하여 사용자 경험을 개선
웹폰트(web font)를 사용하면 사용자의 컴퓨터에 설치된 폰트뿐만 아니라 웹에서 다양한 폰트를 불러와서 웹사이트에 적용할 수 있습니다. 뿐만 아니라, 사용자가 어느 플랫폼에서 웹사이트를 이용하든 항상 동일한 글꼴로 텍스트 컨텐츠를 보여줄 수는 있다는 장점도 있습니다. 이번 포스팅에서는 Google Fonts를 통해서 웹폰트를 웹사이트에 적용하는 방법에 대해서 알아보겠습니다. 웹폰트 선택하기 웹사이트에 웹폰트를 적용하려면 우선 사용하고 싶은 웹폰트를 골라야겠죠? 유료로 웹폰트를 구매할 수도 있겠지만 본 포스팅에서는 무료 웹폰트를
CSS 변수는 예전에는 Sass나, LESS, Stylus와 같은 CSS 전처리기(CSS preprocessor)를 통해서 접할 수 있었던 기능이었습니다. 하지만 최근에는 CSS 스펙 자체에 CSS 변수 개념이 추가되어 이제 CSS 전처리기 없이도 부담없이 CSS 변수를 사용할 수 있게 되었는데요. 이번 포스팅에서는 CSS 사용자 정의 속성(CSS custom properties)라고도 알려진 CSS 변수(CSS variables)에 대해서 알아보겠습니다. CSS 변수 정의 CSS 변수가 CSS 사용자 정의 속성이라고 불리는 이유는
CSS의 sticky position을 이용하여 항상 화면 상단에 항상 달라붙어 있는 헤더(header)를 만들어보겠습니다. sticky position의 특징 sticky position은 CSS에 비교적 최근에 추가된 포지셔닝 메커니즘인데요. 스크롤하지 않을 때는 static position처럼 동작하다가 스크롤할 때는 fixed position과 유사하게 동작합니다. position 속성을 sticky로 설정되어 있는 엘리먼트는 마치 position 속성이 static으로 설정되어 있는 것처럼 부모 엘리먼트 내부에서 공간을 차
웹사이트 레이아웃에서 사이드바(sidebar)는 목차, 광고 배너, 인기/신규 게시물 목록, 연관/추천 상품 목록과 같이 보조적인 컨텐츠를 배치하기 위해서 사용합니다. 이번 포스팅에서는 플렉스 박스(Flexbox)와 미디어 쿼리(Media Query)를 이용해서 화면의 너비에 알아서 반응하는 사이드바를 만들어보겠습니다. 웹페이지 마크업 예제로 목차 영역과 기사 영역으로 이루어진 간단한 웹페이지의 구조를 HTML로 작성해보겠습니다. <main> 엘리먼트 아래에 목차 영역을 <aside> 엘리먼트로 기사 영역을 <article> 엘리먼
다크 모드(dark mode)는 야간에 눈을 편안하게 하고 작업의 집중도를 높을 수 있도록 시스템 전반에 어두운 색생 체계를 적용해주는 운영 체제의 기능입니다. 2018년에 macOS Mojave에 처음으로 소개된 다크 모드는 현재 Windows 10을 비롯하여 많은 운영 체제에서 지원하는데요. 이에 따라 점점 많은 애플리케이션과 웹사이트가 운영 체제의 다크 모드에서 어울리는 어두운 계열의 스타일을 추가하고 있는 추세입니다. 라이트 모드 스타일링 예전에는 웹사이트를 스타일할 때 전반적으로 밝은 배경색에 어두운 글자색을 사용하는 것이