프로토타입을 제대로 이해하는 것이야말로 자바스크립트의 고수로 가는 지름길입니다. 하지만 프로토타입은 자바스크립트에서 이해하기 어렵기로 악명이 높은 개념이기도 하죠. 자바스크립트는 프로토타입(prototype)이라는 다소 독특한 프로그래밍 패러다임을 가진 언어입니다. ES6에 클래스가 도입되면서 예전처럼 프로토타입을 직접 다뤄야 할 일은 줄었지만 여전히 프로토타입은 자바스크립트의 근간이 되는 개념입니다. 프로토타입을 제대로 이해하지 않으면 레거시 코드를 읽거나 문제가 발생했을 때 디버깅이 어려워질 수 있어요. 이번 글에서는 자바스크립
최근에 자바스크립트가 아닌 다른 프로그래밍 언어로 작성된 자바스크립트 프로젝트를 위한 빌드 도구들이 많이 등장하고 있습니다. 이번 포스팅에서 괴물같은 성능을 자랑하며 기존 빌드 도구들의 자리를 위협하고 있는 차세대 트랜스파일러이자 컴파일러인 SWC에 대해서 알아보겠습니다. SWC란? SWC(Speedy Web Compiler)는 자바스크립트 코드를 트랜스파일(transpile)하거나 타입스크립트 코드를 컴파일(compile)하기 위해 사용할 수 있는 개발 도구입니다. 여기서 자바스크립트 코드를 트랜스파일한다는 것은 ES6 이상의 최
ES6에서 클래스(class)가 도입되고 타입스크립트가 대중화되면서 이제 클래스를 사용하는 자바스크립트 코드를 흔하게 볼 수 있게 되었습니다. 뿐만 아니라 Angular나 NestJS처럼 클래스를 기반으로 동작하는 라이브러리나 프레임워크도 점점 늘어나고 있지요. 하지만 아직 클래스를 모킹하거나 테스팅하시는데 어려움을 겪는 개발자 분들이 많은 것 같습니다. 이번 포스팅에서는 자바스크립트의 대표적인 테스팅 프레임워크인 Jest를 사용하여 클래스를 모킹(mocking)하고 테스트 코드를 작성해보겠습니다. 본 포스팅을 이해하시려면 jest
자바스크립트 생태계에서 Vite가 번들러의 왕으로 등극하면서, 덩달아 자매 제품인 Vitest도 인기도 높아지고 있는데요. State of JS 2024 설문 결과를 보면 오랫동안 테스팅 프레임워크의 강자였던 Jest까지 위협하는 모습입니다. 이번 포스팅에서는 차세대 테스팅 프레임워크로 각광받고 있는 Vitest에 대해서 살펴보는 시간을 가져보겠습니다. Vitest란? Vitest는 Vite를 기반으로 작동하는 테스팅 프레임워크입니다. 이전에 나왔던 Jest처럼 테스트 실행뿐만 아니라 모킹(mocking)과 스냅샷(snapshot)
이번 포스팅에서는 자바스크립트에서 경량화 데이터베이스 SQLite를 사용하는 기본적인 방법에 대해서 알아보겠습니다. 파이썬에서 SQLite 데이터베이스를 사용하는 방법에 대해서는 관련 게시물을 참고 바랍니다. SQLite란? SQLite는 전 세계에서 가장 많이 사용되는 경량화 데이터베이스입니다. 알게 모르게 우리가 쓰고 있는 대부분의 전자기기에서 SQLite가 사용되고 있기 때문이죠. SQLite는 다른 데이터베이스와는 달리 클라이언트와 서버 간에 데이터를 송수신하지 않고, 모든 데이터를 로컬 컴퓨터에 저장하는데요. SQLite는
OpenTelemetry 정리에서 계측 코드가 API에만 의존하면 백엔드를 갈아 끼울 수 있다는 이야기를 했는데요. 그때 만든 스팬은 greet 하나뿐이었습니다. 이름을 붙이고 끝낸 게 전부였죠. 실제로는 여기서부터가 어렵습니다. 요청 하나를 처리하는 동안 스팬을 하나만 만들면 "이 요청이 200밀리초 걸렸다"까지만 알 수 있고, 반대로 함수마다 만들면 화면이 스팬으로 뒤덮여 오히려 안 보이거든요. 😅 이 글에서는 스팬에 무엇을 담는지, 어느 단위로 나누는 게 쓸모 있는지, 그리고 만든 추적을 Jaeger에서 어떻게 확인하는지를
클라이언트나 서버를 가리지 않고 웹 개발을 할 때 랜덤 문자열 기반의 식별자가 많이 사용되고 있습니다. 전통적인 숫자 시퀀스 기반의 식별자를 사용하면 애플리케이션을 수평적으로 확장하기가 어렵고 보안적으로도 불리한 측면이 있기 때문입니다. 이번 포스팅에서는 대표적인 랜덤 문자열 기반의 식별자인 UUID를 자바스크립트로 생성하는 방법에 대해서 알아보겠습니다. UUID란? UUID(Universally Unique IDentifier)는 가장 대표적인 랜덤 문자열 기반의 식별자입니다. UUID는 16진수로 구성되며 128 비트, 즉 36
자바스크립트에서 배열의 원소를 삭제하거나 추가하거나 교체할 때 가장 많이 사용되는 메서드가 바로 splice()인데요. 이 메서드에는 한 가지 골치 아픈 문제가 있습니다. 바로 원본 배열을 직접 변경해버린다는 점이죠 😅 원본 배열이 바뀌면 안 되는 상황에서는 매번 배열을 복제한 다음에 splice()를 호출해야 했는데 이게 꽤 번거로웠습니다. ES2023에서 이 불편함을 해소해주는 toSpliced() 함수가 등장했는데요. 이번 글에서는 toSpliced() 함수의 사용법과 splice()와의 차이점에 대해서 알아보겠습니다. sp
브라우저 주소창이나 서버 로그에서 2001:db8::1 같은 알 수 없는 주소를 본 적 있으신가요? 점(.) 대신 콜론(:)이 줄줄이 박혀 있는 모양인데요. 이게 바로 IPv6 주소입니다. IPv4 주소 공간이 거의 바닥났다는 이야기는 이제 익숙하실 거예요. 그 문제에 대한 단기 처방이 사설 IP와 NAT였다면, 진짜 해법으로 마련된 게 IPv6입니다. 이번 포스팅에서는 IPv6가 어떤 주소 체계를 가지는지, 그 낯선 표기법을 어떻게 읽어야 하는지, IPv4와 비교해 무엇이 달라졌는지를 차근차근 살펴보겠습니다. 왜 IPv6가 필요했
자바스크립트 프로젝트에서 아래와 같은 형태로 모듈을 불러오는 코드를 마주친 적이 있으신가요? 머리 속에서 상위 디렉토리를 하나씩 차례대로 올라갔다가 다시 내려오다보면 혈압이 오르는 경험할 수 있는데요. 🤬 이번 포스팅에서는 상대 경로나 절대 경로를 통해서 내부 모듈을 불러올 때 겪을 수 있는 문제점에 대해서 알아보겠습니다. 그리고 경로 별칭을 통해서 좀 더 깔끔하게 내부 모듈을 불러올 수 있도록 타입스크립트를 설정하는 방법에 대해서 배우겠습니다. 상대 경로 타입스크립트 프로젝트에서 내부 모듈을 불러올 때 가장 쉽게 볼 수 있는 방
최근에 사이드 프로젝트를 하다가 매우 신기한 경험을 하게 되어 공유드리려고 해요. OpenAI 회원 가입을 하면 소정의 무료 크레딧을 주죠? 제가 몇 달전에는 가입할 때는 $18을 줬는데, 요즘에는 $5로 줄어든 것 같더라고요. 처음에는 이 크레딧이 얼마나 많은 건지 몰랐는데, 제가 한 달동안 ChatGPT에 대해서 공부하면서 블로그 글을 쓰고, 유튜브 영상을 찍으면서 OpenAI의 API를 정말 물쓰듯이 호출해보았지만, $1도 못 썼다는 것을 알게 되었습니다. 😅 그래서 남아도는 OpenAI의 무료 크레딧을 어떻게 하면 좀 더
npm 저장소는 모든 프로그래밍 언어를 통털어 명실상부 가장 큰 패키지 저장소입니다. 자바스크립트 개발자들은 편리하게 npm install 명령어를 사용하여 npm 저장소로부터 다양한 패키지를 내려받아 사용하고 있는데요. 이번 포스팅에서는 워낙 자주 사용하다 보니 의외로 잘 모를 수 있는 npm install 명령어를 사용하는 방법에 대해서 알아보려고 합니다. 별도 포스팅에서 자바스크립트 개발자를 위한 필수 npm 커맨드도 정리해두었으니 참고바랍니다. npm install의 별칭 npm install 명령어는 여러가지 별칭이 있는데
자바스크립트로 코딩하다 보면 배열의 순서를 뒤집어야 할 때가 종종 있죠? 최신 데이터를 먼저 보여줘야 하는 타임라인이나, 정렬 순서를 반대로 바꿔야 하는 상황처럼요. 이럴 때 예전부터 있었던 reverse() 함수를 사용하면 간단히 해결되는데, 이 함수에는 한 가지 까다로운 점이 숨어 있습니다. 바로 원본 배열을 직접 변경해버린다는 건데요. 이번 글에서는 기존의 reverse() 함수가 왜 문제가 될 수 있는지 살펴보고 비교적 최근에 추가된 toReversed() 함수로 안전하게 배열을 뒤집는 방법을 알아보겠습니다. 배열의 reve
개발자 경험을 중요시하는 트렌드에 따라서 최근에 나오는 자바스크립트 프레임워크는 대부분 프로젝트를 편리하게 구성할 수 있도록 명령줄 도구(CLI)를 제공하고 있습니다. 그런데 각 프레임워크의 문서를 확인해보면 프로젝트를 생성하는 방법이 조금씩 다르다는 것을 알 수 있는데요. 예를 들어, React 기반 SPA(Single Page Application)을 생성할 때 많이 사용되는 Create React App의 문서를 보면, npx 명령어나 npm init 명령어를 사용하고 있습니다. 다른 예로, React의 대표적인 메타 프레임워
웹에서 아이콘(icon)과 텍스트(text)를 함께 배치해야 하는 경우가 많습니다. 예를 들어, 버튼(button) 안에 아이콘과 텍스트가 같이 있으면 사용자에게 해당 버튼의 용도를 좀 더 빠르게 전달할 수 있습니다. 뿐만 아니라 같은 버튼인데 데스크탑 화면에서는 텍스트만 모바일 화면에서는 아이콘만 보여줄 수도 있지요. 하지만 웹 개발을 하다보면 아이콘과 텍스트를 나란히 가로 배치하는데 의외로 어려움을 겪을 수 있는데요. 이번 포스팅에서는 이럴 때 적용할 수 있는 CSS 스타일링 요령에 대해서 알아보겠습니다. HTML 마크업 스타일
테스트를 작성하다보면 날짜와 시간이 골칫거리가 되는 경우가 많습니다. 날짜와 시간은 다른 데이터와 다르게 항상 변하기 때문인데요. 이번 포스팅에서는 Jest를 이용하여 날짜와 시간을 효과적으로 모킹(mocking)하는 방법에 대해서 알아보겠습니다. 테스팅 프레임워크인 Jest에 생소하신 분들은 먼저 관련 포스팅를 읽어 보시고 돌아오시기를 추천드립니다. 예제 코드 자바스크립트의 Intl API를 사용하여 현재 날짜를 주어진 언어에 따라 문자열로 변환해주는 간단한 함수를 작성해보겠습니다. 이 함수는 Date() 생성자를 통해서 현재 날
많은 양의 내용을 보여줘야하는 웹페이지에서 목차(TOC, Table of Contents) UI를 쉽게 볼 수 있는데요. 사용자가 목차에 있는 링크를 클릭하면, 번거롭게 스크롤을 여러 번 내리지 않아도 해당 페이지의 특정 지점으로 바로 건너뛸 수 있기 때문에, 더 나은 경험을 제공할 수 있습니다. 하지만 이 때 스크롤링이 너무 빠르게 일어나기 때문에 기존에 보던 화면과 이동한 화면이 비슷한 경우 사용자에게 혼선을 줄 수도 있는데요. 이번 포스팅에서는 함께 간단한 목차 UI를 구현하면서, 어떻게 하면 좀 더 부르럽게 스크롤링을 하여
이 글이 제 블로그의 400번째 글이네요. 제가 평균적으로 주 1회 포스팅을 하니, 이 말은 제가 블로그를 시작한 지도 언 8년의 시간이 흘렀다는 얘기입니다. 현재 제가 16년 째 개발자로 일하고 있으니, 제 커리어의 절반은 블로그를 쓰면서 보냈다고 할 수 있겠네요. 제가 글재주가 그렇게 뛰어난 편이 아니라서 주로 지식 전달 위주의 포스팅을 하고 있는데요. 그동안 많은 분들께서 어떻게 그렇게 꾸준히 블로그를 쓸 수 있는지를 여쭤보셔서, 오늘은 제가 400번째 글을 쓸 수 있게 한 원동력에 대해서 한번 얘기해보려고 합니다. 바로 블로
추적(trace)을 처음 붙일 때 Jaeger를 골랐다고 해 볼게요. Jaeger가 주는 라이브러리를 받아 서비스 곳곳에 스팬을 만드는 코드를 심었고, 잘 돌아갑니다. 그런데 반년 뒤 팀이 다른 백엔드로 옮기기로 합니다. 무엇을 다시 해야 할까요? 심어 둔 계측 코드 전부입니다. 😅 몇 년 전까지는 이게 기본값이었습니다. 관측 도구를 고르는 일이 곧 그 도구를 코드에 새겨 넣는 일이었고, 한번 새기면 되돌리기 어려웠죠. 지금은 다릅니다. 계측 코드는 그대로 두고 환경 변수 하나만 바꾸면 텔레메트리(telemetry)가 다른 곳으로
세트(set)는 파이썬에서 고유한 값들의 집합을 다루는 자료구조입니다. 이를 활용하면 데이터 중복을 제거하고 유일한 값들을 효과적으로 관리할 수 있는데요. 이번 포스팅에서는 다양한 예제를 통해서 파이썬의 세트을 어떻게 사용하는지 아주 꼼꼼하고 차근차근 알아보도록 하겠습니다. 세트 자료구조 먼저, 파이썬와 별개로 자료구조로서의 집합이라고도 불리는 세트에 대해서 가볍게 개념 정리를 하고 넘어가면 좋을 것 같습니다. 세트(set)는 한마디로 순서가 없는 중복되지 않은 데이터의 집합인데요. 리스트(list)과 차이점을 이해하는 것이 무엇보