많은 웹 개발자분들이 HTML 문서 내에서는 띄어쓰기를 여러 번 하더라도 한 번만 띄어쓰기가 되고, 들여쓰기나 줄바꿈이 무시되는 현상을 한번 쯤은 경험하셨을텐데요. 사실 이러한 HTML 요소 내의 공백 처리 방식은 CSS의 white-space 속성을 이용하여 쉽게 변경할 수가 있다는 사실을 알고 계셨나요? 공백 문자 우선 HTML에서 어떤 문자를 이용해서 공백을 나타낼 수 있는지 이해할 필요가 있는데요. 바로 띄어쓰기(s), 들여쓰기(t), 줄바꿈(n)이 대표적으로 공백을 나타내는 문자지요? 이러한 문자들을 아무리 연속해서 많이
이번 포스팅에서는 자바스크립트로 어떻게 JWT 토큰을 발급하고 검증하는지에 대해서 알아보겠습니다. jsonwebtoken 패키지 설치 우선 Node.js의 패키지 매니저인 npm을 이용하여 jsonwebtoken 패키지를 설치하겠습니다. jsonwebtoken는 JWT 표준 명세서를 자바스크립트 언어로 구현하고 있는 라이브러리입니다. 따라서 JWT 기반으로 사용자 인증이나 인가를 하는 자바스크립트 서버 애플리케이션에서는 직접적으로든 간접적으로든 (passport-jwt와 같은 프레임워크를 통해서) jsonwebtoken 라이브러리를
NestJS 앱을 개발,테스트, 운영 등 다양한 환경에 배포하려면 어느 환경에 배포하느냐에 따라서 다르게 설정되야하는 값들이 생기기 마련이죠? 이번 포스팅에서는 NestJS 앱에서 이렇게 환경 별로 달라지는 설정 값들을 어떻게 효과적으로 관리할 수 있는지 알아보겠습니다. 실습 프로젝트 구성 먼저 간단한 실습을 위해서 NestJS 프로젝트가 하나 필요할 것 같은데요. 터미널에서 NestJS CLI 도구의 nest new 명령어를 실행하여 새로운 프로젝트를 구성하도록 하겠습니다. NestJS CLI를 설치하고 NestJS 프로젝트를 구
웹 브라우저에서 3D 그래픽을 구현해야 할 때가 종종 있는데요. 제품을 360도로 돌려볼 수 있는 뷰어, 데이터를 입체적으로 보여주는 시각화, 혹은 몰입감 있는 인터랙티브 경험을 만들고 싶을 때 가장 먼저 떠오르는 라이브러리가 바로 Three.js입니다. Three.js는 WebGL을 추상화해서 복잡한 저수준 API를 직접 다루지 않고도 3D 장면을 만들 수 있게 해주는데요. WebGL로 직접 코딩하면 삼각형 하나 그리는 데도 수십 줄이 필요하지만, Three.js를 쓰면 몇 줄 만에 회전하는 큐브를 화면에 띄울 수 있습니다. 이번
웹 개발을 하다보면 아래와 같이 종종 영단어가 너무 길어서 모바일 환경과 같이 좁은 뷰포트(viewport)에서 부모 요소 밖으로 밀려나오는 경우를 접할 수 있는데요. 꼭 영문 웹사이트가 아니더라도 요즘에는 한국어 컨텐츠에도 워낙 외래어가 많이 사용되고, 게다가 인터넷 URL과 이메일 주소가 대부분 영어로 되어 있어서 의외로 한국어 웹시아트를 구현할 때도 쉽게 겪을 수 있는 문제입니다. 이번 포스팅에서는 웹에서 이렇게 원치 않게 부모 요소 밖으로 삐져나오는 영단어를 처리하는 다양한 방법에 대해서 알아보겠습니다. 영어와 한국어의 줄바
웹 개발을 하다 보면 데이터를 차트로 보여줘야 할 때가 있죠? 대시보드에 매출 추이를 꺾은선 그래프로 표시하거나, 설문 결과를 막대 차트로 보여주거나, 카테고리별 비율을 도넛 차트로 나타내야 하는 상황 말이에요. 이런 경우에 가장 많이 쓰이는 라이브러리가 바로 Chart.js인데요. GitHub 스타가 6만 개가 넘고, npm 주간 다운로드가 240만 건에 달할 정도로 자바스크립트 차트 라이브러리 중에서는 압도적인 인기를 자랑합니다. D3.js처럼 자유도가 높은 라이브러리에 비하면 차트 종류가 제한적이긴 하지만, 그만큼 배우기 쉽고
jQuery를 기억하시나요? <script> 태그 하나 떨어뜨리면 마법처럼 HTML이 살아 움직이던 그 시절 말이에요. $("button").click(...) 한 줄이면 클릭 이벤트가 붙었고 $(".menu").slideToggle() 한 방이면 메뉴가 스르륵 열렸죠. 빌드 도구도 없고 설정 파일도 없고 node_modules 블랙홀도 없었던 아름답고 단순한 시대였습니다. 그런데 어느 순간 웹 개발이 복잡해졌어요. React, Vue, Svelte 같은 메타 프레임워크가 등장하면서 컴포넌트 기반 개발이 대세가 됐는데요. 분명 강력
최근에 ORM으로 Prisma를 선택하는 자바스크립트 또는 타입스크립트 프로젝트가 부쩍 많아진 느낌입니다. 이번 포스팅에서는 차세대 ORM 프레임워크로 각광받고 있는 Prisma에 대해서 함께 알아볼까요? Prisma란? Prisma는 자바스크립트와 타입스크립트 커뮤니티에서 주목받고 있는 차세대 ORM(Object Relational Mapping) 프레임워크입니다. 데이터베이스와 상호작용하는 응용 애플리케이션을 개발할 때, 프로그래머가 직접 SQL을 작성하지 않아도 되므로, 개발 생산성을 높여주는 측면에서 기존에 사용되던 Sequ
우리는 보통 웹페이지를 2차원 공간으로 생각하고 웹 개발을 하는 경우가 많은데요. 하지만 복잡한 웹페이지를 구현할 때는 마치 3차원 공간처럼 요소를 앞뒤로 겹쳐서 배치해야 경우가 생기기 마련이죠. 이번 포스팅에서는 이렇게 웹에서 요소의 Z축 방향의 깊이를 결정하는 CSS의 z-index 속성에 대해서 배워보겠습니다. z-index가 없을 때 요소 간 상대적 깊이 z-index 속성에 대해서 본격적으로 배우기 전에 먼저 z-index가 없을 때 어떻게 요소(element) 간의 상대적 깊이가 결정되는지에 대해서 이해하는 것이 중요한데
마이크로서비스(microservices) 아키텍처나 분산 시스템 환경에서는 모든 서비스가 정상적으로 살아서 동작하는지를 검사하는 것이 매우 중요합니다. 이를 위해서 각 서비스에 생존 여부(liveness)와 가용 여부(readiness)를 응답해주는 HTTP 엔드포인트(endpoint)가 필요하기 마련인데요. 이번 포스팅에서는 NestJS 앱에서 이러한 엔드포인트(endpoint)를 어떻게 구현할 수 있는지에 대해서 알아보도록 하겠습니다. 실습 프로젝트 구성 먼저 간단한 실습을 위해서 NestJS 프로젝트가 하나 필요할 것 같은데요
웹에서 체크박스는 사용자로부터 어떤 동의를 받거나 하나 이상의 옵션을 선택받기 위해 사용되는데요. 양식(form)이나 설문(survey)과 같은 UI를 구현할 때 빠질 수 없는 핵심적인 요소입니다. 이번 포스팅에서는 체크박스(checkbox)를 사용하여 사용자와 다양하게 상호작용을 할 수 있는 React 컴포넌트를 작성해보도록 하겠습니다. Checkbox 컴포넌트 구현 웹에서 체크박스가 쓰이는 가장 흔한 사례는 사용자로 부터 어떤 동의를 받기 위함일텐데요. 이렇게 서로 관련이 없는 체크박스가 하나 이상 필요할 때 유용하게 쓸 수 있
자료형(data type)에 대한 이해가 중요한 타입스크립트(Typescript)가 대중화되면서 나타나는 흥미로운 현상이 있습니다. 바로 기존에 자바스크립트(JavaScript)에서 비교적 등한시되던 자료형에 대해서 많은 개발자들이 다시 관심을 갖게 되었다는 것인데요. 이번 포스팅에서는 typeof 연산자를 통해서 알아낼 수 있는 자바스크립트의 대표적인 자료형에 대해서 알아보겠습니다. typeof 연산자 우선 본 포스팅 전체에 걸쳐 빈번하게 사용하게 될 자바스크립트의 typeof 연산자에 대해서 짚고 넘어갈까요? 기본적으로 type
이번 포스팅에서는 React의 Children API를 사용해서 컴포넌트의 children prop을 다루는 방법에 대해서 다뤄보겠습니다. Children API의 필요성 먼저 React에서 Children라는 API가 왜 필요한지에 대해서 간단하게 짚고 넘어가겠습니다. 우선 이름이 비슷해서 컴포넌트의 children prop과 Children API이 헛갈리게 쉬운데요. 소문자로 시작하는 children은 소외 props라고 일컫는 컴포넌트 함수의 매개 변수가 가지고 있는 하나의 속성이며 이를 통해 컴포넌트의 자식이 넘어오게 됩니
로깅(logging)은 애플리케이션에서 발생하는 각종 이벤트에 대한 기록을 남기고 문제 발생 시 원인을 파악하는데 핵심적인 역할을 하는데요. 이번 포스팅에서는 NestJS 앱에서 어떻게 로거(logger)를 사용하고 커스터마이징(customizing)할 수 있는지 알아보겠습니다. 실습 프로젝트 구성 먼저 간단한 실습을 위해서 NestJS 프로젝트가 하나 필요할 것 같은데요. 터미널에서 NestJS CLI 도구의 nest new 명령어를 실행하여 새로운 프로젝트를 구성하도록 하겠습니다. NestJS CLI를 설치하고 NestJS 프로
분산 시스템 환경에서 가장 흔하게 접할 수 있는 백엔드(backend) 애플리케이션은 아마도 특정한 도메인의 데이터를 관리해주는 REST API일 텐데요. 이번 포스팅에서는 NestJS를 이용하면 얼마나 효과적으로 이러한 전형적인 REST API를 개발할 수 있는지 알아보겠습니다. 실습 프로젝트 구성 먼저 간단한 실습을 위해서 NestJS 프로젝트가 하나 필요할 것 같은데요. 터미널에서 NestJS CLI 도구의 nest new 명령어를 실행하여 새로운 프로젝트를 구성하도록 하겠습니다. NestJS CLI를 설치하고 NestJS 프
최근에 NestJS로 시작하는 백엔드(backend) 프로젝트가 부쩍 많아진 느낌입니다. 이번 포스팅에서는 차세대 웹 프레임워크로 각광받고 있는 NestJS에 대해서 함께 알아보려고 합니다. NestJS란? NestJS는 자바스크립트나 타입스크립트로 서버 애플리케이션을 개발할 수 있는 백엔드 웹 프레임워크(Web framework)입니다. 다른 프로그래밍 언어에서 넘어오신 분이라면 자바의 스프링(Spring)이나 파이썬의 장고(Django)를 생각하시면 이해가 쉬우실 것 같네요. 자바스크립트 쪽에서는 상당히 오랫동안 Express라
이번 포스팅에서는 CSS에서 height 속성을 사용할 때 흔히 겪을 수 있는 문제점과 min-height 속성을 사용하여 이러한 문제를 쉽게 예방하는 방법에 대해서 살펴보았습니다. height 속성의 기본값 height 속성을 명시해주지 않으면 auto라는 키워드가 기본값으로 사용이 되는데요. height 속성이 auto로 설정되어 있는 요소는 내부 컨텐츠를 해당 요소를 딱 맞게 담을 수 있을만큼 높이가 자동 결정됩니다. 이 기본값 덕분에 우리가 height 속성을 별도로 명시해주지 않아도 요소의 높이는 화면 크기에 따라서 자동
자바스크립트만 하시다가 처음으로 타입스크립트를 하시게 되면 매우 흔하게 겪는 문제가 있습니다. 바로 자바스크립트에서 하던데로 객체를 순회하는 코드를 짜다보면 자꾸 예상치 못한 타입 오류에 부딪치게 되는 것인데요. 이번 포스팅에서는 객체를 순회하다가 발생할 수 있는 타입 오류를 해결하는 방법에 대해서 알아보겠습니다. Object.keys() 간단한 실습을 위해서 TypeScript Playground에서 객체를 순회하는 코드를 같이 작성해볼까요? Object.keys() 함수로 객체의 키 배열을 얻고, 이 배열을 forEach() 함
이번 포스팅에서는 CSS에서 SVG 이미지를 배경으로 사용하는 방법을 간단한 실십을 통해 알아보겠습니다. 실습 시작 코드 HTML로 <div> 요소 3개를 만들고, 2번째 <div> 요소와 3번째 <div> 요소의 클래스를 각각 check와 heart로 설정해주겠습니다. CSS로는 글꼴 크기와 배경색과 같은 기본 스타일링을 해주었으며, SVG 이미지가 보일 자리를 확보하기 위해서 좌측 여백을 좀 크게 주었습니다. 이제부터 check와 heart 클래스에 스타일을 추가하여 2번째 <div> 요소와 3번째 <div> 요소 앞에 각각 체
웹에서 이미지 아래나 옆에 의도치 않게 공백이 생겨서 애를 먹는 경우가 있는데요. 이번 포스팅에서는 언제 이렇게 이미지 주변에 불필요한 공백이 생길 수 있으며, 이러한 성가신 공백을 효과적으로 제거하는 다양한 요령을 알려드리겠습니다. 이미지 아래에 생기는 공백 <div>나 <figure>와 같은 HTML 요소 안에 이미지를 담고 있는 <img> 요소를 넣어보겠습니다. 이미지 아래에 살짝 공백이 생긴 것이 보이시나요? 🤨 이미지 아래에 이러한 공백이 생기는 이유는 <img> 요소의 display 속성이 기본적으로 inline이기 때