broken windows 깨진 유리창의 법칙(Broken Windows Theory)을 들어보셨나요? 깨진 유리창을 방치하면 그 지점을 중심으로 범죄가 확산된다는 사회학 이론인데요. 이미 낙서가 되어 있는 화장실 벽에는 왠지 낙서를 더 해도 괜찮을 것 같은 느낌이 들거나, 누군가가 무심코 버린 작은 쓰레기 주변에 금세 쓰레기 더미가 쌓이는 모습은 깨진 유리창의 법칙의 대표적인 예입니다. 최근 많이 들리는 미국 캘리포니아 주에서 경범죄에 대한 처벌을 약화시킨 결과, 유명 브랜드들이 사업을 철수할 정도로 치안이 매우 좋지 않아졌다는…
bun 차세대 자바스크립트 런타임으로 주목받고 있는 Bun이 v1.1을 출시하였습니다. 하필 거짓말처럼 만우절에 출시를 하여 윈도우즈 사용자들의 애간장을 태웠는데요. 그동안 Bun을 윈도우에서 사용하려면 WSL(Windows Subsystem for Linux)가 필요했었는데, 이제는 네이티브로도 사용할 수 있게 되었습니다 🙌 자세한 내용은 아래 공식 블로그와 유튜브 영상을 참고 바랍니다. 실제 Bun을 개발하고 있는 엔지니어들이 직접 나와서 소개하고 있는데 같은 개발자로서 약간 웃프네용 😂 📝 블로그: https://bun.sh…
테스트를 작성하다 보면 모든 테스트 케이스에 적용되어야 하는 공통 로직이 생기기 마련인데요. 이러한 모든 테스트 케이스에 중복되어 있으면 테스트 코드를 유지보수하는 것이 힘들어집니다. 이번 포스팅에서는 Vitest를 이용해서 이렇게 테스트 전이나 후에 항상 실행되야 하는 코드를 효과적으로 작성하는 방법에 대해서 알아보겠습니다. 테스트 대상 코드 데이터베이스에 접근하는 코드에 대한 테스트를 작성한다는 가정 하에 예제 코드를 작성해보겠습니다. 최대한 간단한 예제를 위해서 자바스크립트 배열로 데이터베이스를 대신하도록 할께요. 사용자 데…
길거나 복잡한 코드에 대한 테스트를 작성하다보면 테스트 코드의 양도 비례해서 늘어나게 됩니다. 하나의 파일 안에서 많은 수의 테스트가 있으면 도대체 어느 테스트가 어떤 코드를 위한 것인지 빠르게 파악하기가 어렵습니다. 게다가 디버깅을 하다보면 특정 테스트만 실행하거나 특정 테스트만 제외하고 테스트를 해야하는 경우도 생기죠. 이번 포스팅에서는 이러한 상황을 효과적으로 대처하기 위해서 Vitest로 어떻게 테스트를 그룹화하고 실행 제어를 할 수 있는지 알아보려고 합니다. 테스트 케이스와 스위트 테스트를 그룹화할 때 자주 사용되는 용어…
watch Slack에서 코드 리뷰 요청하는 알림을 확인하고 PR을 열어보았습니다. 제법 많은 양의 코드가 추가되었는데 테스트 코드가 전혀 없더군요. 그래서 저는 PR을 승인하지 않고, 추가한 코드에 대한 테스트 코드를 작성해 달라는 짧은 코멘트를 남겼습니다. 다음 날, 코드 리뷰를 요청했던 개발자가 속한 팀의 stand-up 미팅에 참석했습니다. 그런데 그 친구가 PM(Project Manager)에게 약간 원망조로 얘기를 하더군요. 어제 자기는 빨리 코딩을 하고 팀원들에게 리뷰를 요청했지만, 아무도 승인해주지 않아서 배포를 할…
Vitest는 테스트를 작성할 때 효과적인 검증이 가능하도록 Jest의 API와 호환이 되는 다양한 매처 함수를 제공하고 있습니다. 이번 포스팅는 실전 테스팅에서 많이 사용되는 매처 함수를 하나씩 살펴 보면서 함께 테스트를 작성하고 실행해보도록 하겠습니다. 차세대 테스팅 프레임워크로 각광받고 있는 Vitest에서 생소하시다면 먼저 소개 포스팅을 읽어 보시고 돌아오시기를 추천드립니다. 검증 (Assertion) 테스트라는 행위는 소프트웨어가 예상한데로 작동하는지를 확인하는 작업입니다. 이를 좀 어려운 말로 Assertion, 즉 검…
business domain 개발자 채용을 위한 면접을 하다보면 본인이 합류하게 될 회사나 팀이 어떤 기술을 사용하는지에 대해 신경을 쓰는 지원자들이 정말 많은데요. 어떤 프로그래밍 언어로 개발을 하는지부터, 어떤 프레임워크와 라이브러리를 사용하는지, 어떤 데이터베이스와 클라우드 컴퓨팅을 쓰는지 등등… 이렇게 꼬리에 꼬리를 잊는 질문이 이어지죠. 제 답변을 들은 후 실망하는 표정을 감추지 못하는 지원자도 보았습니다 😞 그러나 정작 본인이 지원한 회사가 어떤 사업을 하는지에 대한 관심을 갖고 좋은 질문을 하는 개발자들은 상대적으로 …
많은 양의 데이터를 다루는 서비스에서 검색 기능은 필수적이죠? 이번 포스팅에서는 아래와 같은 웹에서 흔히 볼 수 있는 검색 UI를 React로 함께 구현해보겠습니다. 검색창 컴포넌트 구현 검색창(SearchBox) 컴포넌트에는 사용자가 검색어를 입력하므로 기본적으로 HTML의 <input> 요소를 사용합니다. 이때, 접근성을 위해 type 속성을 search로 설정해 주세요. 스크린 리더 사용자에게는 매우 중요한 정보이기 때문입니다. 부모 요소에서 상태 관리를 하기 위해서 <SearchBox /> 컴포넌트는 prop으로 value…
코드로 인프라를 구성하는 Infrastructure as code의 장점이 많이 알려지면서 AWS CDK(Cloud Development Kit)를 도입하는 회사들이 늘어나고 있습니다. 이번 포스팅에서는 타입스크립트(TypeScript)로 클라우드 인프라를 정의하고 배포할 수 있게 해주는 도구인 AWS CDK에 대해서 알아보겠습니다. AWS CDK의 등장 배경 AWS와 같은 클라우드 서비스가 처음에 등장했을 때 많은 사람들은 AWS Management Console과 같은 웹 기반 UI에서 일일이 서버 자원을 프로비전(provis…
woowahan-typescript-with-react 한빛미디어에서 고맙게도 책을 보내주셔서 우아한 타입스크립트 with 리액트을 읽어 보았습니다. 타입스크립트(TypeScript)와 리액트(React)는 각자가 상당히 넓고 깊은 주제인데, 한 권의 책에 이 둘을 모두 다루었다니 책을 읽기 전부터 제목이 흥미로웠습니다. 책의 전반부에는 주로 타입스크립트에서 대해서 다루고 있으며, 후반부에는 타입스크립트와 리액트를 함께 사용하는 방법이 다루어지고 있습니다. 타입스크립트와 리액트의 비중은 약 7:3 정도 되는 것 같네요. 이 책의 …
ES6에서 클래스 관련 문법이 지원되면서 자바스크립트도 어엿한 객체 지향 프로그래밍 언어로서 점점 자리를 잡아가고 있는 것 같습니다. 그에 따라서 자바스크립트로 코딩을 할 때 어떤 객체가 어떤 클래스의 인스턴스인지를 알아내야 할 때가 자주 생기는데요. 이번 포스팅에서는 이럴 때 instanceof 연산자를 사용하는 방법과 프로토타입 체인과 관련된 작동 원리에 대해서 알아보겠습니다. instanceof 연산자 instanceof 연산자는 객체가 어떤 클래스의 인스턴스인지를 알아내기 위해서 사용합니다. 객체 instanceof 클래스…
자바스크립트에는 프로토타입(prototype)이라는 독특한 프로그래밍 패러다임을 가진 프로그래밍 언어입니다. 클래스 기반 객체 지향 프로그래밍도 결국은 이 프로토타입을 통해서 가능하죠. 이번 포스팅에서는 자바스크립트에서 객체의 프로토타입을 어떻게 다루는지에 대해서 알아보겠습니다. __proto__ 속성 자바스크립트에서 모든 객체는 자신의 프로토타입(prototype)을 __proto__라는 비밀 속성에 저장하고 있습니다. 한 번 브라우저 콘솔에서 빈 객체를 생성한 후에 __proto__ 속성을 확인해보세요. 그러면 여러 가지 속성…
객체 지향 프로그래밍 언어인 자바스크립트에서는 객체에 어떤 속성이 들어 있는지 알아내야 할 때가 많은데요. 이번 포스팅에서는 자바스크립트 객체에 특정 속성을 있는지 확인하는 다양한 방법에 대해서 실습을 통해 정리해보겠습니다. in 연산자 자바스크립트에서 객체에 어떤 속성이 있는지 확인하는 가장 널리 알려진 방법은 in 연산자를 사용하는 것입니다. 속성명 in 객체의 형태로 사용하며, 해당 속성이 객체 안에 있으면 결과가 참(true)이고 없으면 결과가 거짓(false)입니다. 객체를 생성한 후에도 얼마든지 속성을 추가할 수 있기 …
최근에 자바스크립트가 아닌 다른 프로그래밍 언어로 작성된 자바스크립트 프로젝트를 위한 빌드 도구들이 많이 등장하고 있습니다. 이번 포스팅에서 괴물같은 성능을 자랑하며 기존 빌드 도구들의 자리를 위협하고 있는 차세대 트랜스파일러이자 컴파일러인 SWC에 대해서 알아보겠습니다. SWC란? SWC(Speedy Web Compiler)는 자바스크립트 코드를 트랜스파일(transpile)하거나 타입스크립트 코드를 컴파일(compile)하기 위해 사용할 수 있는 개발 도구입니다. 여기서 자바스크립트 코드를 트랜스파일한다는 것은 ES6 이상의 …
ES6에서 클래스(class)가 도입되고 타입스크립트가 대중화되면서 이제 클래스를 사용하는 자바스크립트 코드를 흔하게 볼 수 있게 되었습니다. 뿐만 아니라 Angular나 NestJS처럼 클래스를 기반으로 동작하는 라이브러리나 프레임워크도 점점 늘어나고 있지요. 하지만 아직 클래스를 모킹하거나 테스팅하시는데 어려움을 겪는 개발자 분들이 많은 것 같습니다. 이번 포스팅에서는 자바스크립트의 대표적인 테스팅 프레임워크인 Jest를 사용하여 클래스를 모킹(mocking)하고 테스트 코드를 작성해보겠습니다. 본 포스팅을 이해하시려면 jes…
Vite가 Webpack을 대체하는 차세대 번들러(bundler)로 부상하면서, 더불어 자매 제품인 Vitest도 Jest를 위협하면서 자바스크립트 생태계에서 입지를 넓혀가고 있습니다. 이번 포스팅에서는 차세대 테스팅 프레임워크로 각광받고 있는 Vitest에 대해서 살펴보는 시간을 가져보겠습니다. Vitest란? Vitest는 Vite를 기반으로 작동하는 테스팅 프레임워크입니다. 예전에 나왔던 Jest처럼 테스트 실행뿐만 아니라 모킹(mocking)과 스냅샷(snapshot)을 지원하며, Jest와 호환되는 API를 제공하고 있어…
이번 포스팅에서는 자바스크립트에서 경량화 데이터베이스 SQLite를 사용하는 기본적인 방법에 대해서 알아보겠습니다. 파이썬에서 SQLite 데이터베이스를 사용하는 방법에 대해서는 관련 게시물을 참고 바랍니다. SQLite란? SQLite는 전 세계에서 가장 많이 사용되는 경량화 데이터베이스입니다. 알게 모르게 우리가 쓰고 있는 대부분의 전자기기에서 SQLite가 사용되고 있기 때문이죠. SQLite는 다른 데이터베이스와는 달리 클라이언트와 서버 간에 데이터를 송수신하지 않고, 모든 데이터를 로컬 컴퓨터에 저장하는데요. SQLite…
클라이언트나 서버를 가라지 않고 웹 개발을 할 때 랜덤 문자열 기반의 식별자가 많이 사용되고 있습니다. 전통적인 숫자 시퀀스 기반의 식별자를 사용하면 애플리케이션을 수평적으로 확장하기가 어렵고 보안적으로도 불리한 측면이 있기 때문입니다. 이번 포스팅에서는 대표적인 랜덤 문자열 기반의 식별자인 UUID를 자바스크립트로 생성하는 방법에 대해서 알아보겠습니다. UUID란? UUID(Universally Unique IDentifier)는 가장 대표적인 랜덤 문자열 기반의 식별자입니다. UUID는 16진수로 구성되며 128 비트, 즉 3…
자바스크립트 프로젝트에서 아래와 같은 형태로 모듈을 불러오는 코드를 마주친 적이 있으신가요? 머리 속에서 상위 디렉토리를 하나씩 차례대로 올라갔다가 다시 내려오다보면 혈압이 오르는 경험할 수 있는데요. 🤬 이번 포스팅에서는 상대 경로나 절대 경로를 통해서 내부 모듈을 불러올 때 겪을 수 있는 문제점에 대해서 알아보겠습니다. 그리고 경로 별칭을 통해서 좀 더 깔끔하게 내부 모듈을 불러올 수 있도록 타입스크립트를 설정하는 방법에 대해서 배우겠습니다. 상대 경로 타입스크립트 프로젝트에서 내부 모듈을 불러올 때 가장 쉽게 볼 수 있는 방…
최근에 사이드 프로젝트를 하다가 매우 신기한 경험을 하게 되어 공유드리려고 해요. OpenAI 회원 가입을 하면 소정의 무료 크레딧을 주죠? 제가 몇 달전에는 가입할 때는 $18을 줬는데, 요즘에는 $5로 줄어든 것 같더라고요. 처음에는 이 크레딧이 얼마나 많은 건지 몰랐는데, 제가 한 달동안 ChatGPT에 대해서 공부하면서 블로그 글을 쓰고, 유튜브 영상을 찍으면서 OpenAI의 API를 정말 물쓰듯이 호출해보았지만, $1도 못 썼다는 것을 알게 되었습니다. 😅 그래서 남아도는 OpenAI의 무료 크레딧을 어떻게 하면 좀 더 …