URL이 바뀔 때 마다 새로운 페이지를 서버로 요청하지 않는 SPA(Single Page Application)에서는 보통 클라이언트 단에서 라우팅(routing)을 하는데요. 그래서 React, Svelte, Vue.js와 같은 대부분의 프론트엔드 프레임워크을 사용할 때는 이러한 클라이언트 단 라우팅을 지원하는 라이브러리와 함께 쓰는 경우가 많습니다. 그런데 이러한 라우팅 라이브러리는 대부분은 내부적으로 자바스크립트의 History API를 사용하고 있다는 것을 알고 계셨나요? 이번 글에서는 클라이언트 단 라우팅을 이해하는데 핵심
이번 포스팅에서는 자바스크립트에서 배열을 합치는 방법에 대해서 간단히 정리해보겠습니다. concat() 메서드 연결하다(concatenate)를 의미하는 배열의 concat() 메서드를 사용하면 하나의 배열에 다른 배열을 합칠 수 있습니다. 예를 들어, concat() 메서드로 숫자 배열에 글자 배열을 합쳐보겠습니다. concat() 메서드의 중요한 특징은 바로 원본 배열을 건드리지 않고 새로운 배열을 반환한다는 것입니다. 따라서 원본 배열을 건드리지 않는 배열의 다른 메서드와 함께 체인(chain)의 형태로 연쇄 호출이 가능합니다
웹에서 페이지 간의 이동은 일반적으로 하이퍼링크(Hyperlink)를 통해 이루어집니다. 즉, 사용자가 웹 페이지 상의 링크를 클릭하면 브라우저에서 해당 페이지가 열리게 됩니다. 웹 개발자는 이를 위해 HTML의 <a> 요소의 href 속성에 이동해야 할 URL을 명시해주죠. 하지만 웹 개발을 하다보면 부득이하게 자바스크립트로 페이지 이동을 처리해야하는 경우가 생기기 마련인데요. 대표적인 예로 미인증 사용자가 접근했을 때 바로 로그인 페이지로 강제 이동 시키는 것을 들 수 있겠습니다. 이번 글에서는 자바스크립트를 사용하여 페이지 이
지난 포스팅에서는 URL API의 URL을 사용하여 좀 더 안전하게 웹 주소 다루는 방법에 대해서 살펴보았는데요. 이번 포스팅에서는 URL API에서 제공하는 또 다른 유용한 기능인 URLSearchParams를 이용하여 웹 주소의 구성 요소 중에서도 가장 다루기 어려운 쿼리 스트링(Query String) 다루는 방법에 대해서 알아보겠습니다. URLSearchParams 객체의 필요성 자바스크립트의 URLSearchParams에 대해서 본격적으로 배우기 전에 먼저 URL의 쿼리 스트링에 대해서 짚고 넘어가는 게 좋을 것 같아요.
Prettier는 일관적인 규칙에 따라서 코드를 자동으로 포맷팅해줌으로써 특히 협업 프로젝트에서 개발 생산성을 올려주는 유용한 도구입니다. Prettier는 대부분의 경우에 별다른 설정없이 그대로 사용할 수 있으나 간혹 개발팀의 입맛에 맞게 약간의 설정이 필요한 경우도 생길 수 있는데요. 이번 글에서는 Prettier의 설정 방법을 알아보고 자주 사용되는 옵션에 대해서 살펴보겠습니다. 자바스크립트에서 가장 많이 사용되는 코드 포맷터인 Prettier 자체에 대한 내용은 별도 포스팅에서 자세히 다루고 있으니 참고 바랍니다. Prett
웹 개발에서 URL을 다루는 일은 참 빈번하게 발생하죠? 프론트엔드에서는 URL로 다른 웹페이지로 링크를 걸고, CSS와 자바스크립트 코드를 불러오며, 이미지, 오디오, 비디오와 같은 멀티미디어도 제공할 수 있습니다. 반면에 백엔드에서는 요청 URL의 경로에 따라서 DB에 저장되어 있는 데이터를 조회하고 URL의 쿼리 스트링으로 넘어온 매개변수에 따라서 다른 데이터 처리를 해줄 수 있습니다. 이번 글에서는 웹 주소를 좀 더 안전하게 다룰 수 있도록 도와주는 자바스크립트의 URL API에 대해 알아보겠습니다. URL이란? 우리는 거의
자바스크립트에서 부분 문자열이 필요하실 때 substr()을 쓰시나요 아니면 substring()을 쓰시나요? 혹시 이 두 함수가 동일하다고 생각하시고 계셨나요? 🤪 이름이 비슷한 이 두 함수는 둘 다 문자열의 일부를 잘라내는 기능을 수행하지만 사용 방법과 동작 방식에서 미묘한 차이가 있는데요. 의외로 많은 개발자들이 이 두 함수를 무분별하게 혼용해서 사용하다가 당혹스러운 상황을 겪기도 합니다. 이번 글에서는 substr()와 substring() 함수에 대해 자세히 알아보고 각각의 특징과 어떤 점이 같고 어떤 점이 다른지에 대해
CSS로 웹사이트의 레이아웃을 잡다보면 어떤 HTML 요소의 높이를 브라우저의 화면에 맞추고 싶을 때가 있죠? 웹 페이지의 풋터(footer) 영역을 화면 하단에 붙이고 싶을 때도 그렇고 모바일에서는 네비게이션 버튼을 화면 하단에 두기도 하니까요. 이번 글에서는 CSS로 화면 높이의 HTML 요소 만드는 다양한 방법에 대해서 알아보겠습니다. 흔히 범하는 실수 CSS 초보자들이 HTML 요소의 높이를 스타일할 때 하기 쉬운 실수가 있는데요. 바로 무작정 height 속성을 100%로 설정하고 해당 요소의 높이가 화면 높이만큼 커질 거
최근에 웹 개발에 대해서 얘기할 때 메타 프레임워크(Meta Framework)라는 용어를 한 번쯤 써보셨거나 적어도 들어보셨을텐데요. 하지만 자주 쓰이는 용어임에도 불구하고 막상 메타 프레임워크가 뭔지 설명해보려고 하면 쉽지 않은 것 같죠? 이번 글에서는 요즘 유행하는 메타 프레임워크가 전통적인 프레임워크와 어떻게 다르며 왜 필요한지에 대해서 알아보았습니다. 그리고 현재 시장에 어떤 메타 프레임워크가 주목받고 있는지도 간단히 살펴보겠습니다. 메타 프레임워크의 특징 우리가 기존에 프레임워크를 생각할 때는 보통 어떤 프로그래밍 언어를
배열 안의 값들을 정렬하는 것은 백엔드 프론트엔드를 가리지 않고 빈번하게 필요한 작업이죠? 자바스크립트에서 배열을 정렬할 때는 예전부터 있었던 sort() 함수나 비교적 최근에 추가된 toSorted() 함수를 사용합니다. 이번 글에서는 이 두 함수를 사용하여 자바스크립트에서 배열을 정렬하는 기본적인 방법과 주의해야 할 부분에 대해서 알아보겠습니다. 배열의 sort() 함수 자바스크립트에서 배열을 정렬을 하는 가장 유명한 방법은 뭐니뭐니 해도 sort() 함수일텐데요. 배열을 상대로 sort() 함수를 호출하면 해당 배열 내의 값들
이번 글에서는 가드(Guard)를 활용하여 NestJS 앱을 위험한 요청으로 부터 효과적으로 보호하는 방법에 대해서 배워보도록 하겠습니다. 가드(Guard)란? NestJS에서 가드(guard)란 애플리케이션의 최전선에서 말그대로 애플리케이션을 보호하는 역할을 담당하는데요. NestJS로 들어오는 요청은 컨트롤러(controller) 단에 도달하기 전에 반드시 가드를 거쳐가도록 되어 있습니다. 가드를 이용하면 컨트롤러가 요청을 처리하기 전에 안전하지 않은 요청을 효과적으로 차단할 수 있습니다. 따라서 애플리케이션 보안을 위해서 필수
웹사이트 개발을 하다보면 여러가지 이유로 내가 작성하지 않은 서드파티(3rd-party) 스크립트를 불러와야 하는 경우가 있습니다. 대표적인 예로 Google Analytics와 같은 통계용 스크립트와 Google AdSense와 같은 광고용 스크립트를 들 수 있는데요. 이번 글에서는 웹 워커(Web Worker)라는 기술을 사용하여 이러한 서드파티 스크립트를 매우 빠르게 로딩해주는 혁신적인 라이브러리인 Partytown을 소개해드리겠습니다. 기존 스크립트 로딩 방식의 문제점 Partytown에 대해서 이야기하기 전에 기존에 웹에서
ChatGPT와 같은 LLM(Large Language Model, 대형 언어 모델)이 등장하면서 웹에서 텍스트를 스트리밍하는 사례가 점점 늘어나고 있는데요. 그에 따라 별다른 라이브러리없이도 웹에서 스트림을 쓰고 읽을 수 있는 자바스크립트의 Streams API가 다시 주목받고 있는 것 같습니다. 이번 포스팅에서는 자바스크립트의 Streams API을 사용하여 스트림을 생성하고 데이터를 읽는 방법에 대해서 알아보겠습니다. 읽을 수 있는 스트림 생성 자바스크립트에서 데이터를 읽을 수 있는 스트림을 만들 때는 ReadableStrea
지난 포스팅에서 Zod로 스키마를 정의하는 다양한 방법에 대해서 알아보았는데요. Zod의 부가적인 기능이지만 알아두면 굉장히 유용한 입출력 간 데이터 변환에 대해서 알아보겠습니다. 내장 트랜스포머 Zod는 입출력 간 문자열 변환을 돕기 위해서 트랜스포머(transformer)를 내장하고 있는데요. 대표적으로 .trim(), .toLowerCase(), .toUpperCase()를 들 수 있습니다. 그럼 이 3가지 내장 트랜스포머를 모두 사용해서 스키마를 하나 정의한 후에 데이터 변환을 해보겠습니다. 결과를 출력해보면 입력된 문자열이
이전 포스팅에서는 Zod를 사용하여 하나의 스키마로 유효성 검증과 타입 선언을 한 번에 해결하는 방법에 대해서 살펴보았는데요. 이번 포스팅에서는 Zod에 제공하는 타입스크립트 친화적인 검증자를 사용하여 스키마를 정의하는 다양한 방법에 대해서 알아보도록 하겠습니다. 자료형 스키마 정의는 자료형울 명시하는 것부터 시작하는데요. Zod는 자바스크립트의 기본 자료형이나 Date와 같은 내장 클래스에 대응하는 검증자(validator) 함수를 제공합니다. 예를 들어, 이메일, 나이, 활성화 여부, 생성 일자로 이루어진 사용자 객체를 나타내는
이전 포스팅에서 타입스크립트로 코드를 작성하는 것과 무관하게 왜 자바스크립트 프로그램에서 유효성 검증이 필요한지에 대해서 알아보았는데요. 이번 포스팅에서는 최근 개발자들로부터 많은 인기를 끌고 있는 Zod를 사용하는 전반적인 방법에 대해서 알아보겠습니다. 라이브러리 설치 프로젝트에 zod라는 패키지를 npm으로 설치합니다. 그리고 Zod를 사용하실 때는 가급적 타입스크립트는 strict 모드로 쓰시기를 추천드릴게요. 이제 zod 패키지에서 z를 불러올 수 있으며, 이 녀석만 있으면 우리는 Zod의 모든 기능을 활용할 수 있습니다.
"타입스크립트로 코드를 짜니까 별도로 유효성 검증은 필요없는 거 아니에요?" 타입스크립트를 공부하고 계시거나 자바스크립트 경험이 많지 않은 개발자들로 부터 종종 받는 질문인데요. 정말 타입스크립트의 타입 검사가 자바스크립트의 유효성 검증을 대신할 수 있을까요? 이번 포스팅에서는 이러한 타입스크립트에 대한 오해를 풀어보는 시간을 갖도록 하겠습니다. 타입스크립트의 역할 이해를 돕기 위해서 타입스크립트로 간단한 코드를 함께 짜볼까요? 사용자 계정을 나타내는 Account 인터페이스를 선언하고 이것을 입력으로 받는 processAccoun
세트(Set)는 자바스크립트에서 고유한 값들의 집합을 다루는 자료구조입니다. 이를 활용하면 데이터 중복을 제거하고 유일한 값들을 효과적으로 관리할 수 있는데요. 아무래도 세트가 ES6에서 추가된 기능이다 보니 아직도 많은 분들이 세트를 쓰면 딱인 경우에도 습관처럼 배열을 쓰시는 것 같습니다. 뿐만 아니라 굳이 세트를 쓸 필요가 없는 상황에서 단지 새로운 기능이라고 세트를 오용/납용하시는 주니어분들도 심심치 않게 볼 수 있는데요. 이번 포스팅에서는 다양한 예제를 통해서 자바스크립트의 Set을 어떻게 사용하는지 아주 꼼꼼하고 차근차근
HTML에서 체크 박스나 라디오 버튼과 같이 양식(form)을 구성하는 요소들은 CSS로 스타일하기가 까다롭기로 악명이 높은데요. 브라우저에서 제공하는 기본 스타일대로 두자니 너무 올드해보이고 직접 스타일을 하자니 다른 HTML 요소처럼 쉽게 스타일이 되지 않으니까요. 그런데 CSS 속성 딱 하나로 이렇게 스타일이 어려운 HTML 요소를 나름 그럴 듯하게 스타일할 수 있다는 사실을 알고 계셨나요? 이번 포스팅에서는 최소한 노력으로 최대 스타일 효과를 낼 수 있는 CSS의 accent-color라는 유용한 속성을 소개해드리겠습니다.
우리가 버그가 없는 코드를 작성하기 위해서 사용하는 타입스크립트도 알고 보면 은근히 버그 투성이라는 것을 혹시 알고 계신가요? 이번 포스팅에서는 많은 개발자들이 타입스크립트로 코딩하다가 겪게 되는 황당한 경우에 대해서 알아보고, 이러한 타입스크립트의 버그를 깔끔하게 고쳐주는 ts-reset이라는 라이브러리를 소개해드리려고 합니다. 배열의 includes() 함수의 배신 배열에 특정 요소가 존재하는지를 확인하기 위해서 includes() 함수를 많이 사용하시죠? 그런데 배열을 상대로 as const를 사용하여 읽기 전용(read-on