우리는 보통 웹페이지를 2차원 공간으로 생각하고 웹 개발을 하는 경우가 많은데요. 하지만 복잡한 웹페이지를 구현할 때는 마치 3차원 공간처럼 요소를 앞뒤로 겹쳐서 배치해야 경우가 생기기 마련이죠. 이번 포스팅에서는 이렇게 웹에서 요소의 Z축 방향의 깊이를 결정하는 CSS의 z-index 속성에 대해서 배워보겠습니다. z-index가 없을 때 요소 간 상대적 깊이 z-index 속성에 대해서 본격적으로 배우기 전에 먼저 z-index가 없을 때 어떻게 요소(element) 간의 상대적 깊이가 결정되는지에 대해서 이해하는 것이 중요한데
마이크로서비스(microservices) 아키텍처나 분산 시스템 환경에서는 모든 서비스가 정상적으로 살아서 동작하는지를 검사하는 것이 매우 중요합니다. 이를 위해서 각 서비스에 생존 여부(liveness)와 가용 여부(readiness)를 응답해주는 HTTP 엔드포인트(endpoint)가 필요하기 마련인데요. 이번 포스팅에서는 NestJS 앱에서 이러한 엔드포인트(endpoint)를 어떻게 구현할 수 있는지에 대해서 알아보도록 하겠습니다. 실습 프로젝트 구성 먼저 간단한 실습을 위해서 NestJS 프로젝트가 하나 필요할 것 같은데요
JWT를 한 번이라도 디코딩해 본 적이 있다면 header.payload.signature처럼 점으로 나뉜 세 조각을 기억하실 텐데요. 앞의 두 조각은 그냥 Base64로 인코딩된 JSON이라 누구나 열어볼 수 있지만, 마지막 서명(signature) 조각이 있어서 토큰의 위변조를 잡아낼 수 있습니다. 그런데 이 서명, 사실 JWT만의 것이 아닙니다. **JWS(JSON Web Signature)**라는 별도의 표준이 있고, JWT는 그 위에 얹힌 한 가지 응용일 뿐인데요. 이번 글에서는 JWS가 정확히 무엇이고 어떻게 데이터에 서
JWT는 익숙한데 JWS, JWE, JWK, JWA까지 줄줄이 나오면 갑자기 머리가 복잡해지는데요. 이름도 비슷하고 죄다 eyJ로 시작하는 긴 문자열을 다루는 것 같은데, 도대체 뭐가 뭔지 경계가 흐릿합니다. 🤔 사실 이 다섯은 JOSE라는 한 가족입니다. 서로 다른 일을 맡은 형제들이 모여 "JSON으로 데이터를 안전하게 주고받는다"는 하나의 목표를 이루는 구조죠. 이 글은 JOSE 가족의 큰 그림을 그리고, 각 멤버가 무슨 역할을 하며 어떻게 맞물리는지, 그리고 더 깊이 알고 싶을 때 어느 글로 가면 되는지를 안내하는 지도 역
웹에서 체크박스는 사용자로부터 어떤 동의를 받거나 하나 이상의 옵션을 선택받기 위해 사용되는데요. 양식(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라
Happy New Year! 2023년 새해가 밝았네요. 🎊 컨테이너 관리 도구를 직접 개발하는 것은 매우 어려운 일이기 때문에, AWS에서는 다양한 완전 관리형 컨테이너 오케스트레이션 서비스를 제공하고 있습니다. 이번 포스팅에서는 AWS에서 사용할 수 있는 다양한 컨테이너(container) 서비스에 대해서 살펴보도록 하겠습니다. ECS Amazon Elastic Container Service, 줄여서 ECS는 AWS에서 가장 오래된 컨테이너 서비스로서 도커(Docker) 컨테이너를 사용할 수 있도록 해주는 서비스입니다. EC
이번 포스팅에서는 AWS에 어떠한 이벤트(event) 기반 메시징(messaging) 서비스가 있는지 간단하게 살펴보도록 하겠습니다. SQS Amazon Simple Queue Service, 줄여서 SQS는 메시지 대기열(queue) 서비스인데요. EC2, S3와 함께 AWS에서 가장 역사가 깊은 서비스 중에 하나이며 그만큼 Amazon 내부에서도 오래전 부터 사용했었고 여러 해 동안 테스트가 되어서 아주 안정화된 서비스입니다. SQS는 일반적으로 두 개의 애플리케이션 사이에서 송수신되고 있는 메시지를 중간에서 담아 놓는 일종의
AWS에는 정말로 여러 종류의 데이터베이스 제품이 있어서 용도에 따라서 어떤 서비스를 써야할지 헛갈리가 쉬운데요. 이번 포스팅에서는 AWS에서 제공하는 데이터베이스 관련 서비스를 간략하게 정리해보려고 합니다. RDS AWS에서 데이터베이스라고 하면 아마 많은 분들이 Amazon Relational Database Service, 줄여서 Amazon RDS라는 서비스를 떠올리실텐데요. RDS는 클라우드 환경에서 마치 온 프레미스(on-premises) 환경처럼 제약없이 원하는 데이터베이스 엔진을 쓰고 싶을 때 사용할 수 있는 AWS의
Amazon EC2(Elastic Cloud Compute)를 사용할 때 순수하게 계산만 하는 경우가 아라면 데이터를 저장할 파일 시스템이 필요하기 마련인데요. 이번 포스팅에서는 Amazon EC2에서 제공하는 다양한 블록 수준(block-level) 스토리지 옵션에 대해서 알아보겠습니다. 이미지 출처: https://docs.aws.amazon.com/AWSEC2/latest/UserGuide/Storage.html Amazon EBS (Elastic Block Storage) Amazon Elastic Block Storage,
AWS Identity and Access Management, 줄여서 AWS IAM은 아마존 웹 서비스에서 보안 측면에서 매우 중요한 서비스입니다. 하지만 마치 물과 공기처럼 너무 기본이 되는 서비스인데다가 별도로 과금도 안 되다 보니 오히려 소홀히 여겨지기도 쉬운 것 같습니다. 이번 포스팅에서는 AWS IAM을 통해서 접근 통제의 기본 개념을 함께 이해해보는 시간을 가져보려고 합니다. AWS IAM 자체를 어떻게 사용하는지는 인터넷에 이미 튜토리얼이 많으므로 굳이 다루지 않겠습니다. AWS IAM 서비스 AWS에서 권한이란 어떤
이번 포스팅에서는 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이기 때
이번 포스팅에서는 파이썬에서 연산자를 이용해서 나눗셈을 하는 방법에 대해서 간단히 알아보고, 몫과 나머지를 동시에 구할 때 사용하는 divmod() 내장 함수에 대해서도 알아보겠습니다. 나누기 연산자 파이썬은 특이하게도 2가지 나누기 연산자를 제공하는데요. 첫 번째는 실수 나누기 연산자인 /이고, 두 번째는 정수 나누기 연산자인 //입니다. 이 두 종의 나누기 연산자는 나머지가 없는 경우에는 동일한 값을 반환하는데요. 하지만 엄밀히 얘기하면 이 두 값의 자료형(data type)은 각각 실수와 정수로 차이가 있습니다. 그럼 나눗셈