Logo

333 posts

React에서 체크박스 사용하기

이번 포스팅에서는 체크박스(checkbox)를 사용하여 사용자와 다양하게 상호작용을 할 수 있는 React 컴포넌트를 작성해보도록 하겠습니다. Checkbox 컴포넌트 구현 웹에서 체크박스가 쓰이는 가장 흔한 사례는 사용자로 부터 어떤 동의를 받기 위함일텐데요. 이렇게 서로 관련이 없는 체크박스가 하나 이상 필요할 때 유용하게 쓸 수 있는 React 컴포넌트를 먼저 구현해보겠습니다. 체크박스는 HTML에서 <input> 요소의 type 속성을 checkbox로 설정해주면 얻을 수 있는데요. 텍스트를 클릭햇을 때도 라디오 버튼이 선…

자바스크립트의 자료형과 typeof 연산자

타입스크립트(Typescript)가 대중화되면서 나타나는 흥미로운 현상이 있는데요. 바로 기존에 자바스크립트(JavaScript)에서 비교적 등한시되던 자료형(data type)에 많은 개발자들이 다시 관심을 갖게 되었다는 점입니다. 이번 포스팅에서는 자바스크립트의 9가지 자료형과 typeof 연산자를 통해서 자료형을 파악하는 방법에 대해서 알아보겠습니다. typeof 연산자 우선 본 포스팅에서 전체에 걸쳐 빈번하게 사용하게 될 자바스크립트의 typeof 연산자에 대해서 짚고 넘어갈까요? 기본적으로 typeof 연산자는 바로 뒤에…

React의 Children API 사용법

이번 포스팅에서는 React의 Children API를 사용해서 컴포넌트의 children prop을 다루는 방법에 대해서 다뤄보겠습니다. Children API의 필요성 먼저 React에서 Children라는 API가 왜 필요한지에 대해서 간단하게 짚고 넘어가겠습니다. 우선 이름이 비슷해서 컴포넌트의 children prop과 Children API이 헛갈리게 쉬운데요. 소문자로 시작하는 children은 소외 props라고 일컫는 컴포넌트 함수의 매개 변수가 가지고 있는 하나의 속성이며 이를 통해 컴포넌트의 자식이 넘어오게 됩…

NestJS에서 로깅(logging)하기

로깅(logging)은 애플리케이션에서 발생하는 각종 이벤트에 대한 기록을 남기고 문제 발생 시 원인을 파악하는데 핵심적인 역할을 하는데요. 이번 포스팅에서는 NestJS 앱에서 어떻게 로거(logger)를 사용하고 방커스터마이징(customizing)할 수 있는지 알아보겠습니다. 실습 프로젝트 구성 먼저 간단한 실습을 위해서 NestJS 프로젝트가 하나 필요할 것 같은데요. 터미널에서 NestJS CLI 도구의 nest new 명령어를 실행하여 새로운 프로젝트를 구성하도록 하겠습니다. NestJS CLI를 설치하고 NestJS …

NestJS로 REST API 찍어내기

분산 시스템 환경에서 가장 흔하게 접할 수 있는 백앤드(backend) 애플리케이션은 아마도 특정한 도메인의 데이터를 관리해주는 REST API일 텐데요. 이번 포스팅에서는 NestJS를 이용하면 얼마나 효과적으로 이러한 전형적인 REST API를 개발할 수 있는지 알아보겠습니다. 실습 프로젝트 구성 먼저 간단한 실습을 위해서 NestJS 프로젝트가 하나 필요할 것 같은데요. 터미널에서 NestJS CLI 도구의 nest new 명령어를 실행하여 새로운 프로젝트를 구성하도록 하겠습니다. NestJS CLI를 설치하고 NestJS …

NestJS 시작하기

최근에 NestJS로 시작하는 백앤드(backend) 프로젝트가 부쩍 많아진 느낌입니다. 이번 포스팅에서는 차세대 웹 프레임워크로 각광받고 있는 NestJS에 대해서 함께 알아보려고 합니다. NestJS란? NestJS는 자바스크립트나 타입스크립트로 서버 애플리케이션을 개발할 수 있는 백앤드 웹 프레임워크(Web framework)입니다. 다른 프로그래밍 언어에서 넘어오신 분이라면 자바의 스프링(Spring)이나 파이썬의 장고(Django)를 생각하시면 이해가 쉬우실 것 같네요. 자바스크립트 쪽에서는 상당히 오랫동안 Express…

AWS 컨테이너 서비스 훑어보기

Happy New Year! 2023년 새해가 밝았네요. 🎊 컨테이너 관리 도구를 직접 개발하는 것은 매우 어려운 일이기 때문에, AWS에서는 다양한 완전 관리형 컨테이너 오케스트레이션 서비스를 제공하고 있습니다. 이번 포스팅에서는 AWS에서 사용할 수 있는 다양한 컨테이너(container) 서비스에 대해서 살펴보도록 하겠습니다. ECS Amazon Elastic Container Service, 줄여서 ECS는 AWS에서 가장 오래된 컨테이너 서비스로서 도커(Docker) 컨테이너를 사용할 수 있도록 해주는 서비스입니다. EC…

AWS 메시징 서비스 훑어보기

이번 포스팅에서는 AWS에 어떠한 이벤트(event) 기반 메시징(messaging) 서비스가 있는지 간단하게 살펴보도록 하겠습니다. SQS Amazon Simple Queue Service, 줄여서 SQS는 메시지 대기열(queue) 서비스인데요. EC2, S3와 함께 AWS에서 가장 역사가 깊은 서비스 중에 하나이며 그만큼 Amazon 내부에서도 오래전 부터 사용했었고 여러 해 동안 테스트가 되어서 아주 안정화된 서비스입니다. SQS는 일반적으로 두 개의 애플리케이션 사이에서 송수신되고 있는 메시지를 중간에서 담아 놓는 일종의…

AWS 데이터베이스 서비스 훑어보기

AWS에는 정말로 여러 종류의 데이터베이스 제품이 있어서 용도에 따라서 어떤 서비스를 써야할지 헛갈리가 쉬운데요. 이번 포스팅에서는 AWS에서 제공하는 데이터베이스 관련 서비스를 간략하게 정리해보려고 합니다. RDS AWS에서 데이터베이스라고 하면 아마 많은 분들이 Amazon Relational Database Service, 줄여서 Amazon RDS라는 서비스를 떠올리실텐데요. RDS는 클라우드 환경에서 마치 온 프레미스(on-premises) 환경처럼 제약없이 원하는 데이터베이스 엔진을 쓰고 싶을 때 사용할 수 있는 AWS…

Amazon EC2의 스토리지 옵션

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 IAM으로 배우는 접근 통제의 기본 개념

AWS Identity and Access Management, 줄여서 AWS IAM은 아마존 웹 서비스에서 보안 측면에서 매우 중요한 서비스입니다. 하지만 마치 물과 공기처럼 너무 기본이 되는 서비스인데다가 별도로 과금도 안 되다 보니 오히려 소홀히 여겨지기도 쉬운 것 같습니다. 이번 포스팅에서는 AWS IAM을 통해서 접근 통제의 기본 개념을 함께 이해해보는 시간을 가져보려고 합니다. AWS IAM 자체를 어떻게 사용하는지는 인터넷에 이미 튜토리얼이 많으므로 굳이 다루지 않겠습니다. AWS IAM 서비스 AWS에서 권한이란 어…

CSS에서 height 속성 대신에 min-height 속성을 사용하는 이유

이번 포스팅에서는 CSS에서 height 속성을 사용할 때 흔히 겪을 수 있는 문제점과 min-height 속성을 사용하여 이러한 문제를 쉽게 예방하는 방법에 대해서 살펴보았습니다. height 속성의 기본값 height 속성을 명시해주지 않으면 auto라는 키워드가 기본값으로 사용이 되는데요. height 속성이 auto로 설정되어 있는 요소는 내부 컨텐츠를 해당 요소를 딱 맞게 담을 수 있을만큼 높이가 자동 결정됩니다. 이 기본값 덕분에 우리가 height 속성을 별도로 명시해주지 않아도 요소의 높이는 화면 크기에 따라서 자동…

객체를 순회하다가 발생하는 타입스크립트 오류 해결하기

자바스크립트만 하시다가 처음으로 타입스크립트를 하시게 되면 매우 흔하게 겪는 문제가 있습니다. 바로 자바스크립트에서 하던데로 객체를 순회하는 코드를 짜다보면 자꾸 예상치 못한 타입 오류에 부딪치게 되는 것인데요. 이번 포스팅에서는 객체를 순회하다가 발생할 수 있는 타입 오류를 해결하는 방법에 대해서 알아보겠습니다. Object.keys() 간단한 실습을 위해서 TypeScript Playground에서 객체를 순회하는 코드를 같이 작성해볼까요? Object.keys() 함수로 객체의 키 배열을 얻고, 이 배열을 forEach() …

CSS에서 SVG 이미지를 배경으로 사용하기

이번 포스팅에서는 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이기 때문인데요. 다시 말해서, HT…

파이썬의 divmod() 내장 함수로 나눗셈하기

이번 포스팅에서는 파이썬에서 연산자를 이용해서 나눗셈을 하는 방법에 대해서 간단히 알아보고, 몫과 나머지를 동시에 구할 때 사용하는 divmod() 내장 함수에 대해서도 알아보겠습니다. 나누기 연산자 파이썬은 특이하게도 2가지 나누기 연산자를 제공하는데요. 첫 번째는 실수 나누기 연산자인 /이고, 두 번째는 정수 나누기 연산자인 //입니다. 이 두 종의 나누기 연산자는 나머지가 없는 경우에는 동일한 값을 반환하는데요. 하지만 엄밀히 얘기하면 이 두 값의 자료형(data type)은 각각 실수와 정수로 차이가 있습니다. 그럼 나눗셈…

CSS 리스트 스타일링 가이드 (HTML <ul>, <ol>, <li> 요소)

이번 포스팅에서는 HTML의 <ul> 또는 <ol> 요소로 마크업이 되는 리스트(list)와 <li>로 마크업되는 리스트 아이템(list item)을 CSS로 스타일하는 방법에 대해서 알아보겠습니다. HTML 코드 작성 HTML에서 리스트는 <ul> 또는 <ol> 요소로 마크업 할 수 있는데요. 순서가 중요하지 않은 경우에는 <ul> 요소를 사용하고, 순서한 중요한 경우에는 <ol> 요소를 사용해야 합니다. 그럼 지금부터 다음과 같이 간단한 중첩 리스트를 같이 스타일해보도록 하겠습니다. 브라우저 기본 링크 스타일링 우리가 굳이 스…

CSS의 :where() 의사 클래스 함수

이번 포스팅에서는 CSS에 비교적 최근에 추가된 의사 클래스(pseudo class) 함수인 :where()에 대해서 알아보겠습니다. 기본 문법 :where() 의사 클래스 함수는 인자로 여러 개의 선택자를 쉼표(,)로 구분하여 넘길 수 있습니다. 위와 같은 CSS 규칙은 마치 아래와 같이 CSS 코드를 작성한 효과가 발생하게 되는데요. 여기까지만 보면 뭐하러 굳이 :where() 함수를 사용해야될까 싶죠? 😅 지금부터 사례를 통해서 :where()를 사용하면 어떠한 이점이 있는지 살펴보겠습니다. 여러 상태 스타일링 :where(…

CSS Normalize와 CSS Reset

이번 포스팅에서는 CSS Reset(리셋)과 CSS Normalize(노멀라이즈)에 대해서 알아보도록 하겠습니다. CSS Normalize와 CSS Reset의 필요성 세상에서는 여러가지 브라우저가 있으며 우리가 만든 웹사이트나 웹 애플리케이션이 이 중 어떤 브라우저에서 돌아갈지는 알 수 없습니다. 여기서 문제는 소위 User Agent Stylesheet라고 불리는 브라우저 내장 스타일이 브라우저마다 조금씩 다르다는 것 인데요. 다시 말해서, 우리가 만든 UI가 크롬(Chrome)에서 열었을 때와 사파리(Safari)에서 열었을…

HTML과 CSS로 토글 스위치 UI 만들기

이번 포스팅에서는 순수하게 HTML과 CSS만을 이용하여 아래와 같이 웹에서 어렵지 않게 볼 수 있는 토글 스위치 UI를 만들어보겠습니다. 토글 스위치란? 먼저 웹에서 토글(toggle) 혹은 토글 스위치(toggle switch)라고도 불리는 스위치(switch) UI 대해서 짚고 넘어가겠습니다. 마치 우리가 집 안에서 조명을 켜고 끌 때 사용하는 벽에 붙어있는 스위치를 상상하면 쉬울 것 같은데요. 웹에서도 이렇게 사용자가 어떤 기능을 켜거나 끌 수 있도록 해야하는 경우가 생기기 마련입니다. 좋은 사례로, 알람(notificat…