Netlify에 웹사이트를 배포하면 기본적으로 <웹사이트명>.netlify.app이라는 무료 도메인 네임(domain name)을 주는데요. 취미 프로젝트라면 이 기본 무료 도메인만 사용해도 큰 지장이 없겠지만 대부분의 실제로 운영되는 웹사이트는 유료로 구매한 도메인 이름을 사용해야 할 것입니다. 이렇게 Netlify 사용자가 별도로 구매해서 Netlify에서 주는 도메임 대신에 사용하는 도메인 네임을 소위 커스텀(custom) 도메인 네임이라고 하는데요. 이번 포스팅에서는 Netlify에 배포한 웹사이트에 커스텀(custom) …
많은 웹 개발자분들이 HTML 문서 내에서는 띄어쓰기를 여러 번 하더라도 한 번만 띄어쓰기가 되고, 들여쓰기나 줄바꿈이 무시되는 현상을 한번 쯤은 경험하셨을텐데요. 사실 이러한 HTML 요소 내의 공백 처리 방식은 CSS의 white-space 속성을 이용하여 쉽게 변경할 수가 있다는 사실을 알고 계셨나요? 공백 문자 우선 HTML에서 어떤 문자를 이용해서 공백을 나타낼 수 있는지 이해할 필요가 있는데요. 바로 띄어쓰기(\s), 들여쓰기(\t), 줄바꿈(\n)이 대표적으로 공백을 나타내는 문자지요? 이러한 문자들을 아무리 연속해서…
이번 포스팅에서는 자바스크립트로 어떻게 JWT 토큰을 발급하고 검증하는지에 대해서 알아보겠습니다. jsonwebtoken 패키지 설치 우선 Node.js의 패키지 매니저인 npm을 이용하여 jsonwebtoken 패키지를 설치하겠습니다. jsonwebtoken는 JWT 표준 명세서를 자바스크립트 언어로 구현하고 있는 라이브러리입니다. 따라서 JWT 기반으로 사용자 인증이나 인가를 하는 자바스크립트 서버 애플리케이션에서는 직접적으로든 간접적으로든 (passport-jwt와 같은 프레임워크를 통해서) jsonwebtoken 라이브러리…
이번 포스팅에서는 Json Web Token, 줄여서 흔히 JWT라고 불리는 사용자 인증/인가 수단 대해서 알아보도록 하겠습니다. JWT 란? JWT(Json Web Token)는 말그대로 웹에서 사용되는 JSON 형식의 토큰에 대한 표준 규격인데요. 주로 사용자의 인증(authentication) 또는 인가(authorization) 정보를 서버와 클라이언트 간에 안전하게 주고 받기 위해서 사용됩니다. JWT 토큰 웹에서 보통 Authorization HTTP 헤더를 Bearer <토큰>으로 설정하여 클라이언트에서 서버로 전송되…
NestJS 앱을 개발,테스트, 운영 등 다양한 환경에 배포하려면 어느 환경에 배포하느냐에 따라서 다르게 설정되야하는 값들이 생기기 마련이죠? 이번 포스팅에서는 NestJS 앱에서 이렇게 환경 별로 달라지는 설정 값들을 어떻게 효과적으로 관리할 수 있는지 알아보겠습니다. 실습 프로젝트 구성 먼저 간단한 실습을 위해서 NestJS 프로젝트가 하나 필요할 것 같은데요. 터미널에서 NestJS CLI 도구의 nest new 명령어를 실행하여 새로운 프로젝트를 구성하도록 하겠습니다. NestJS CLI를 설치하고 NestJS 프로젝트를 …
웹 개발을 하다보면 아래와 같이 종종 영단어가 너무 길어서 모바일 환경과 같이 좁은 뷰포트(viewport)에서 부모 요소 밖으로 밀려나오는 경우를 접할 수 있는데요. 꼭 영문 웹사이트가 아니더라도 요즘에는 한국어 컨텐츠에도 워낙 외래어가 많이 사용되고, 게다가 인터넷 URL이 대부분 영어로 되어 있어서 의외로 한국어 웹시아트를 구현할 때도 쉽게 겪을 수 있는 문제입니다. 이번 포스팅에서는 웹에서 이렇게 원치 않게 부모 요소 밖으로 삐져나오는 영단어를 처리하는 다양한 방법에 대해서 알아보겠습니다. 영어와 한국어의 줄바꿈 차이 우선…
최근에 ORM으로 Prisma를 선택하는 자바스크립트 또는 타입스크립트 프로젝트가 부쩍 많아진 느낌입니다. 이번 포스팅에서는 차세대 ORM 프레임워크로 각광받고 있는 Prisma에 대해서 함께 알아볼까요? Prisma란? Prisma는 자바스크립트와 타입스크립트 커뮤니티에서 주목받고 있는 차세대 ORM(Object Relational Mapping) 프레임워크입니다. 데이터베이스와 상호작용을 하는 응용 애플리케이션을 개발할 때 프로그래머가 직접 SQL을 작성하지 않아도 되어 개발 생산성을 높여준다는 측면에서는 기존의 Sequeli…
우리는 보통 웹페이지를 2차원 공간으로 생각하고 웹 개발을 하는 경우가 많은데요. 하지만 복잡한 웹페이지를 구현할 때는 마치 3차원 공간처럼 요소를 앞뒤로 겹쳐서 배치해야 경우가 생기기 마련이죠. 이번 포스팅에서는 이렇게 웹에서 요소의 Z축 방향의 깊이를 결정하는 CSS의 z-index 속성에 대해서 배워보겠습니다. z-index가 없을 때 요소 간 상대적 깊이 z-index 속성에 대해서 배우기 전에 먼저 z-index가 없을 때 어떻게 요소(element) 간의 상대적 깊이가 결정되는지에 대해서 이해하는 것이 중요한데요. z-…
마이크로서비스(microservices) 아키텍처에서는 모든 서비스가 정상적으로 살아서 동작하는지를 검사하는 것이 매우 중요합니다. 이를 위해서 각 서비스에 생존 여부(liveness)와 가용 여부(readiness)를 응답해주는 HTTP 앤드포인트(endpoint)가 필요하기 마련인데요. 이번 포스팅에서는 NestJS 앱에서 이러한 앤드포인트(endpoint)를 어떻게 구현할 수 있는지에 대해서 알아보도록 하겠습니다. 실습 프로젝트 구성 먼저 간단한 실습을 위해서 NestJS 프로젝트가 하나 필요할 것 같은데요. 터미널에서 Ne…
이번 포스팅에서는 체크박스(checkbox)를 사용하여 사용자와 다양하게 상호작용을 할 수 있는 React 컴포넌트를 작성해보도록 하겠습니다. Checkbox 컴포넌트 구현 웹에서 체크박스가 쓰이는 가장 흔한 사례는 사용자로 부터 어떤 동의를 받기 위함일텐데요. 이렇게 서로 관련이 없는 체크박스가 하나 이상 필요할 때 유용하게 쓸 수 있는 React 컴포넌트를 먼저 구현해보겠습니다. 체크박스는 HTML에서 <input> 요소의 type 속성을 checkbox로 설정해주면 얻을 수 있는데요. 텍스트를 클릭햇을 때도 라디오 버튼이 선…
타입스크립트(Typescript)가 대중화되면서 나타나는 흥미로운 현상이 있는데요. 바로 기존에 자바스크립트(JavaScript)에서 비교적 등한시되던 자료형(data type)에 많은 개발자들이 다시 관심을 갖게 되었다는 점입니다. 이번 포스팅에서는 자바스크립트의 9가지 자료형과 typeof 연산자를 통해서 자료형을 파악하는 방법에 대해서 알아보겠습니다. typeof 연산자 우선 본 포스팅에서 전체에 걸쳐 빈번하게 사용하게 될 자바스크립트의 typeof 연산자에 대해서 짚고 넘어갈까요? 기본적으로 typeof 연산자는 바로 뒤에…
이번 포스팅에서는 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) 스토리지 옵션에 대해서 알아보겠습니다. aws-ec2-storage 이미지 출처: https://docs.aws.amazon.com/AWSEC2/latest/UserGuide/Storage.html Amazon EBS (Elastic Block Storage) Amazon Elast…
AWS Identity and Access Management, 줄여서 AWS IAM은 아마존 웹 서비스에서 보안 측면에서 매우 중요한 서비스입니다. 하지만 마치 물과 공기처럼 너무 기본이 되는 서비스인데다가 별도로 과금도 안 되다 보니 오히려 소홀히 여겨지기도 쉬운 것 같습니다. 이번 포스팅에서는 AWS IAM을 통해서 접근 통제의 기본 개념을 함께 이해해보는 시간을 가져보려고 합니다. AWS IAM 자체를 어떻게 사용하는지는 인터넷에 이미 튜토리얼이 많으므로 굳이 다루지 않겠습니다. AWS IAM 서비스 AWS에서 권한이란 어…