Logo

257 posts

jQuery 없이 자바스크립트로 HTML 요소 선택하기

2006년에 출시되었던 jQuery는 한 때는 자바스크립트 개발이 곧 jQUery 개발이라고 여겨질 정도로 정도로 상당히 오랫동안 자바스크립트 생태계를 주름잡던 라이브러리입니다. 하지만 최근에는 Angular, React, Vue와 같은 모던 자바스크립트 라이브러리에 밀려 주로 레거시(legacy) 코드에서나 마치못해 쓰는 라이브러리로 전략하고 말았는데요. 아무래도 컴포넌트 기반의 웹 프로그래밍의 대세가 되고 브라우저의 표준화가 전반적으로 개선되고 있어서 앞으로 jQuery가 설 자리는 점점 더 좁아질 것입니다. 사실 jQuery…

자바스크립트 패키지 매니저: npm vs. Yarn

이번 포스팅에서는 자바스크립트에서 패키지 매니저로 가장 많이 사용되고 있는 npm과 Yarn에 대해서 알아보겠습니다. 자바스크립트 패키지 매니저 패키지 매니저(package manager)는 프로젝트가 의존하고 있는 패키지를 효과적으로 설치, 갱신, 삭제할 수 있도록 도와주는 관리 도구입니다. 그 어떤 프로그래밍 언어보다 풍부한 오픈 소스 생태계를 자랑하는 자바스크립트에서는 특히 패키지 매니저는 중요한 역할을 하는데요. 아무리 간단한 자바스크립트 프로젝트라고 해도 적게는 수십게 많게는 수백개의 다른 패키지에 의존하기 때문입니다. …

CSS의 position 속성으로 요소 배치하기

이번 포스팅에서는 요소(element)를 원하는 위치에 배치하기 위해서 사용하는 CSS의 position 속성에 대해서 알아보겠습니다. position 속성 CSS에서 position 속성은 HTML 문서 상에서 요소가 배치되는 방식을 결정합니다. 많은 경우, position 속성은 요소의 정확한 위치 지정을 위해서 top, left, bottom, right 속성과 함께 사용됩니다. position: static position 속성을 별도로 지정해주지 않으면 기본값인 static이 적용됩니다. position 속성이 stati…

자바스크립트 프로젝트에서 스크립트 활용하기 (npm run)

자바스크립트 프로젝트에서 개발을 하다보면 터미널을 열고 명령어를 실행해야하는 경우가 빈번하게 생기는데요. 대표적인 예로 로컬 환경에서 애플리케이션을 빌드하고 구동하거나 테스트를 실행하는 것을 들 수 있습니다. 이번 포스팅에서는 자바스크립트 프로젝트에서 자주 사용되는 명령어를 스크립트로 등록하고 실행하는 방법에 대해서 알아보겠습니다. 반복 명령은 스크립트로 자바스크립트 프로젝트에서 개발을 진행하다보면 테스트나 빌드(build), 린트(lint), 포멧(format)처럼 반복적으로 수행해야하는 작업들이 생기기 마련입니다. 각 작업은 …

CSS 배경(background) 관련 속성

이번 포스팅에서는 CSS로 배경을 설정하는데 자주 사용되는 속성에 대해서 알아보겠습니다. background-color 배경 관련 CSS 속성 중 가장 많이 사용되는 것은 아마도 배경색을 지정할 때 사용하는 background-color일 것 입니다. 기본값은 transparent, 즉 투명이며 색상명이나 색상 코드를 사용할 수 있습니다. 일반적으로 배경색은 웹 접근성(accessibility)을 준수하기 위해서 글자색과의 명암비를 고려해서 결정을 하는데요. 저시력자나 고령자도 텍스트를 인식하는데 어려움이 없도록 하기 위함입니다.…

파이썬의 yield 키워드와 제너레이터(generator)

이번 포스팅에서는 파이썬에서 제네레이터(generator)를 만드는데 사용되는 yield 키워드에 대해서 알아보겠습니다. yield 키워드 대부분의 프로그래밍 언어에서 일반적으로 함수는 어떤 결과 값을 return 키워드를 이용해서 반환을 합니다. 하지만 파이썬에서는 함수가 yield 키워드를 이용해서 다소 다른 방식으로 결과 값을 제공할 수 있습니다. 장황한 설명보다는 간단한 예제 코드부터 살펴보는 것이 좀 더 이해가 쉬울 것 같습니다. 알파벳 A, B, C를 결과 값으로 반환하는 함수를 작성해보겠습니다. 위 함수를 yield …

Create React App: 손쉽게 프로젝트 만들기

이번 포스팅에서는 React 프로젝트를 쉽고 빠르게 만들 수 있도록 도와주는 Create React App에 대해서 알아보겠습니다. Create React App React로 개발 프로젝트를 맨땅에서 시작하려면 웹팩(Webpack), 바벨(Babel) 등 정말 미리 배워야하는 기술들이 한 두개가 아닙니다. 초보 개발자들이 이러한 선수 기술들을 일일이 학습하다보면 본래 목표했던 React 애플리케이션 개발이 아득하게 멀어지기 일수인데요… React는 각종 개발 편의 도구가 함께 포함된 프레임워크(framework)라기 보다는 어느 …

React Intl로 다국어 지원하기 (국제화)

국내 많은 서비스들이 당장 다국어 지원의 요구가 없더라도 향후 해외 진출을 염두해두고 개발 초기부터 애플리케이션을 국제화(internalization)하는 사례가 늘고 있습니다. 이번 포스팅에서는 React Intl 라이브러리를 이용해서 다국어를 지원하는 방법에 대해서 알아보겠습니다. React Intl 설치 React Intl 라이브러리는 Node.js 패키지 매니저인 npm으로 설치할 수 있습니다. Locale: Language & Region 국제화(internalization)된 애플리케이션은 다양한 언어로 서비스를 할 수…

React Hooks Testing Library 사용법

React v16.8에서 리액트 훅(React Hook)이 소개된 이후로 많은 프로젝트에서 커스텀(custom) 훅 함수를 사용하고 있는 것 같은데요. 이번 포스팅에는 리액트 훅(React Hook)을 테스트하는 방법에 대해서 알아보겠습니다. 예제 React Hook 먼저 테스트 대상이 될 간단한 React Hook 함수 하나를 작성해보겠습니다. 아래 useToggle() 함수는 true 또는 false가 될 수 있는 상태 state와 그 상태값을 반전할 수 있는 함수 toggle()을 배열에 담아 반환합니다. 초기 상태값을 in…

[자바스크립트] 테스트 데이터 생성

지난 포스팅에서 가짜 데이터를 만들 때 사용하는 Faker.js에 대해서 간단히 알아보았는데요. 이번 포스팅에서는 실제로 테스트를 작성할 때 Faker.js를 어떻게 활용할 수 있는지에 대해서 다뤄보려고 합니다. 테스트 대상 코드 작성하기 먼저 테스트 대상이 될 임의의 함수를 하나 필요한데요. 사용자 객체를 인자로 받아 회원 가입을 처리해주는 함수를 작성해보겠습니다. 이 함수는 인자로 넘어온 사용자의 이메일과 비밀번호에 대한 입력값 검증이 실패할 경우 error 속성에 오류 메세지를 담아서 반환하며, 회원 가입이 성공한 경우 us…

자바스크립트로 가짜 데이터 생성하기 - Faker.js

가짜 데이터 시제품(prototype)을 개발하거나, 단위 테스트를 작성할 때 가짜 데이터가 필요할 때가 자주 있습니다. 이럴 때, 직접 가짜 데이터를 하드코딩(hard-coding)할 수도 있겠지만, 좀 더 편하고 빠르게 가짜 데이터를 얻을 수 있는 방법이 있어서 소개드리려고 합니다. 바로, Faker.js라는 라이브러리인데요. Faker.js를 사용하면 가짜 데이터를 정말 너무 간단하게 생성할 수 있습니다. 👍 패키지 설치 패키지 임포트 ES 모듈을 사용하는 프로젝트에서는 import 키워드를 사용해서 패키지를 임포트 합니다.…

[HTML] tabindex 속성과 키보드 포커스

이번 포스팅에서는 tabindex 속성을 사용해서 키보드 포커스 여부와 우선순위를 제어하는 방법에 대해서 알아보았습니다. 키보드 포커스 혹시 마우스가 고장나거나 배터리가 나가서 키보드로만 컴퓨터를 조작하거나 웹서핑을 해보신 적이 있으신가요? 마우스 사용자는 포인터로 웹페이지의 어디든지 클릭을 할 수 있지만, 키보드 사용자는 포커스라는 제한된 방법을 이용해야 되는데요. 다행히도 웹은 사용자와 상호작용(interactive)이 가능한 요소(element)는 기본적으로 키보드로 포커스가 잡히게 되어 있습니다. 대표적으로 <input>,…

React Testing Library - 비동기 테스트

이번 포스팅에서는 React Testing Library(RTL)로 비동기(asynchronous)로 작동하는 컴포넌트를 테스트하는 방법에 대해서 알아보겠습니다. 예제 컴포넌트 우선 테스트 대상이 될 간단한 React 컴포넌트 하나를 작성해보도록 하겠습니다. 아래 <Switch/> 컴포넌트 함수는 on 상태값에 따라 ON 버튼 또는 OFF 버튼을 리턴합니다. on 상태값은 최초에는 false이지만 버튼을 클릭할 때 마다 true, false, …로 번갈아 가면서 바뀝니다. 상태값이 바뀌는데는 0.5초(500ms)가 걸리며, 상태값…

CSS 결합자(combinator)로 선택자 조합하기

CSS 코드를 읽다보면 아래와 같이 선택자(selector) 사이에서 >나 +, 또는 ~와 같은 기호를 어렵지 않게 볼 수 있습니다. CSS에서는 이렇게 선택자 사이에 나오는 기호들을 결합자(combinator)라는 다소 어려운 이름으로 부르는데요. 이번 포스팅에서는 CSS의 결합자(combinator)에 대해서 한번 알아보려고 합니다. Descendant combinator CSS에서 너무 흔하게 볼 수 있어서 많은 개발자들이 결합자라는 인식도 없이 사용하는 결합자가 있습니다. 바로 공백 문자를 사용해서 선택자를 조합하는 후손 …

CSS 기본 선택자 (selector)

CSS에서는 선택자(selector)를 통해서 웹페이지의 특정 부분만을 선택하여 원하는 스타일을 적용합니다. 이번 포스팅에서는 CSS의 선택자의 근간이 되는 기본 선택자에 대해서 알아보겠습니다. Type Selector CSS에서 가장 쉽게 볼 수 있는 기본 선택자는 태그 이름을 그대로 사용하는 타입 선택자(Type selector) 입니다. 타입 선택자를 사용하면 특정 태그로 마크업된 모든 요소(element)를 선택할 수 있습니다. 예를 들어, 웹페이지 상의 모든 <strong> 요소의 글꼴 두께를 스타일하기 위한 CSS 코드…

HTML에서 자주 쓰이는 전역 속성

HTML에는 모든 엘리먼트를 대상으로 사용할 수 있는 속성이 존재하는데요. 이를 전역 속성(global attribute)이라고 합니다. 이번 포스팅에서는 HTML에서 자주 사용되는 전역 속성에 대해서 알아보겠습니다. style 아무래도 많은 분들에게 가장 익숙한 HTML 전역 속성은 style일 것 입니다. style 속성은 해당 엘리먼트에 인라인으로 CSS 스타일을 선언하고 싶을 때 사용합니다. class 두번째로 살펴볼 HTML 전역 속성은 class인데요. HTML 문서 상에서 여러 엘리먼트를 하나의 이름으로 묶고 싶을 때…

HTML 문서의 head 영역을 살펴보기

모든 HTML 문서는 크게 head 영역과 body 영역으로 나누어 집니다. 이번 포스팅에서는 웹개발을 하면서 간과하기 쉬운 head 영역에 대해서 살펴보려고 합니다. head 요소 HTML의 <head> 요소(element)는 <body> 요소와 함께 HTML 문서의 최상위 요소인 <html> 바로 아래 위치합니다. 브라우저 화면에 보여지는 영역을 감싸고 있는 <body> 요소와 달리 <head> 요소는 화면에 보여지지는 않지만 브라우저가 해당 HTML 문서에 대해서 알아야 할 정보를 감싸고 있습니다. 그럼, head 영역에는 …

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 속성을 설정하면 가용 너비이나 컨텐트의 크기와 무방하게 특정값으로 엘리먼트의 너비를 고정시킬 수 …