많은 양의 내용을 보여줘야하는 웹페이지에서 목차(TOC, Table of Contents) UI를 쉽게 볼 수 있는데요. 사용자가 목차에 있는 링크를 클릭하면, 번거롭게 스크롤을 여러 번 내리지 않아도 해당 페이지의 특정 지점으로 바로 건너뛸 수 있기 때문에, 더 나은 경험을 제공할 수 있습니다. 하지만 이 때 스크롤링이 너무 빠르게 일어나기 때문에 기존에 보던 화면과 이동한 화면이 비슷한 경우 사용자에게 혼선을 줄 수도 있는데요. 이번 포스팅에서는 함께 간단한 목차 UI를 구현하면서, 어떻게 하면 좀 더 부르럽게 스크롤링을 하여
이 글이 제 블로그의 400번째 글이네요. 제가 평균적으로 주 1회 포스팅을 하니, 이 말은 제가 블로그를 시작한 지도 언 8년의 시간이 흘렀다는 얘기입니다. 현재 제가 16년 째 개발자로 일하고 있으니, 제 커리어의 절반은 블로그를 쓰면서 보냈다고 할 수 있겠네요. 제가 글재주가 그렇게 뛰어난 편이 아니라서 주로 지식 전달 위주의 포스팅을 하고 있는데요. 그동안 많은 분들께서 어떻게 그렇게 꾸준히 블로그를 쓸 수 있는지를 여쭤보셔서, 오늘은 제가 400번째 글을 쓸 수 있게 한 원동력에 대해서 한번 얘기해보려고 합니다. 바로 블로
세트(set)는 파이썬에서 고유한 값들의 집합을 다루는 자료구조입니다. 이를 활용하면 데이터 중복을 제거하고 유일한 값들을 효과적으로 관리할 수 있는데요. 이번 포스팅에서는 다양한 예제를 통해서 파이썬의 세트을 어떻게 사용하는지 아주 꼼꼼하고 차근차근 알아보도록 하겠습니다. 세트 자료구조 먼저, 파이썬와 별개로 자료구조로서의 집합이라고도 불리는 세트에 대해서 가볍게 개념 정리를 하고 넘어가면 좋을 것 같습니다. 세트(set)는 한마디로 순서가 없는 중복되지 않은 데이터의 집합인데요. 리스트(list)과 차이점을 이해하는 것이 무엇보
최근에 번(Bun) v1.0이 출시되면서 차세대 자바스크립트 런타임(Runtime)으로 많은 기대를 한몸에 받고 있습니다. 2023년 JavaScript Rising Stars에서도 Bun이 당당이 2위를 차지하였는데요. 이번 포스팅에서는 귀여운 이름과 로고 뒤에 무시무시한 기능과 성능으로 무장하고 하고 있는 Bun이라는 새로운 자바스크립트 런타임에 대해서 살펴보겠습니다. 자바스크립트 런타임 Bun에 대해서 소개드리기 전에 먼저 자바스크립트 런타임(Runtime)이 무엇인지 가볍게 짚고 넘어가면 좋을 것 같아요. 자바스크립트 런타임
이번 글에서는 NestJS에서 API의 버전을 체계적으로 관리하는 방법에 대해서 배워보도록 하겠습니다. API Versioning이란? REST API와 같은 서버 애플리케이션을 운영하다 보면, 부득이하게 클라이언트에 큰 영향을 줄 수 있는 위험한 변경을 해야 할 때가 있는데요. API Versioning, 즉 버전 관리를 통해서, 우리는 서버 측 API 변경에 따른 클라이언트의 영향을 최소화하고, API의 호환성과 안정성을 높일 수 있습니다. 버전 관리가 이루어지는 API는 보통 클라이언트에게 v1, v2, v3... 이런 식으로
배열에 원소를 제거하는 것은 자바스크립트 코딩할 때 매우 빈번하게 필요한 작업이죠? 이번 포스팅에서는 자바스크립트 배열의 원소를 제거하는 다양한 방법에 대해서 간단히 정리해보겠습니다. pop() 메서드 자바스크립트 배열에 원소를 제거하는 방법 중에서 가장 널리 알려진 방법은 뭐니뭐니 해도 배열의 pop() 메서드일 것 같은데요. 예를 들어, pop() 메서드로 과일 이름을 담은 배열로 부터 원소를 제거해보겠습니다. pop() 메서드는 배열에서 마지막 원소를 제거한 후에, 제거된 원소를 결과로 반환합니다. shift() 메서드 반대로
배열에 원소를 추가하는 것은 자바스크립트 코딩할 때 매우 빈번하게 필요한 작업이죠? 이번 포스팅에서는 자바스크립트 배열에 원소를 추가하는 다양한 방법에 대해서 간단히 정리해보겠습니다. push() 메서드 자바스크립트 배열에 원소를 추가하는 방법 중에서 가장 널리 알려진 방법은 뭐니뭐니 해도 배열의 push() 메서드일 것 같은데요. 예를 들어, push() 메서드로 과일 이름을 담은 배열에 원소를 추가해보겠습니다. push() 메서드에 넘어온 인수는 배열의 끝, 즉 기존에 마지막 원소 바로 뒤에 추가됩니다. 그리고 결과로 원소를 추
이번 포스팅에서는 파이썬에서 하나라도 참인지 확인할 때 사용하는 any() 내장 함수에 대해서 알아보겠습니다. 반복문으로 하나라도 참인지 확인하기 여러 개의 데이터가 하나라도 어떤 조건을 만족하는지 확인을 해야 할 때 보통 어떻게 접근을 하시나요? 많은 분들이 자연스럽게 반복문을 떠올릴 것 같은데요. 예를 들어, 여러 숫자 중에서 하나라도 양의 짝수인지를 확인하는 함수를 다음과 같이 구현할 수 있을 것입니다. 이 함수에 양의 짝수가 하나라도 들어있는 리스트를 넘겨서 호출하면 True를 반환하겠죠? 반면에 인자로 넘긴 리스트에 양의
도메인을 구매한 후에 DNS 설정을 했는데 브라우저에서 해당 웹사이트에 접속이 안되면 어디서부터 디버깅을 해야 할지 상당히 난감할 수 있는데요. 이번 포스팅에서는 DNS 설정에 문제가 발생했을 때 정말로 유용하게 사용할 수 있는 도구인 dig 명령어에 대해서 알아보겠습니다. 명령어 소개 dig는 Domain Information Groper의 약자로, DNS 정보를 조회하고 진단하기 위한 커맨드 라인 도구인데요. dig라는 영단어가 "파다", "파헤치다", "파서 찾아내다" 라는 뜻이 있어서, 도구의 목적을 생각해보면 굉장히 쉽게
전자 상거래와 같이 많은 양의 데이터를 다루는 서비스에서 필터(filter)는 사용자가 데이터를 추려낼 수 있는 도와주는 매우 중요한 UI입니다. 이번 포스팅에서는 아래와 같은 간단한 상품 목록 페이지를 구현하면서 필터(filter) UI를 어떻게 React로 개발하는지 알아보겠습니다. 상품 목록 컴포넌트 구현 우선 단순히 모든 상품 목록을 보여주는 React 컴포넌트를 작성하겠습니다. <Products/> 컴포넌트는 prop으로 상품 배열(products)와 로딩 여부(loading)를 받습니다. 그리고 아직 데이터를 로딩 중이라
React로 개발하다 보면 useState()를 정말 많이 쓰게 됩니다. 값이 바뀌어야 하니까 state로 만들고, 그 state가 바뀔 때 뭔가 해야 하니까 useEffect()를 붙이고... 이러다 보면 컴포넌트에 state와 effect가 잔뜩 쌓이면서 코드가 복잡해지고 디버깅도 어려워지죠. 사실 이런 코드의 상당 부분은 state나 effect 없이도 작성할 수 있습니다. 이번 글에서는 React 개발자가 빠지기 쉬운 useState와 useEffect의 흔한 오용 패턴과 이를 개선하는 방법을 알아보겠습니다. 파생 값을 st
자바스크립트 프로젝트의 최상위 경로를 열어 보면 대부분 package.json 파일이 있습니다. 처음에는 설치한 패키지와 실행 명령어를 적어 두는 파일 정도로 보입니다. 그런데 프로젝트가 커질수록 낯선 필드가 하나둘 늘어나는데요. 어떤 프로젝트에는 exports가 있고 다른 프로젝트에는 module이 있습니다. 모노레포(monorepo)를 열어 보면 workspaces도 등장하죠. 이 필드들이 모두 같은 프로그램을 위한 설정은 아닙니다. npm과 같은 패키지 관리자(package manager)가 읽는 필드도 있고 Node.js와
자바스크립트에서 배열을 다루다 보면 특정 조건에 맞는 원소를 하나만 찾아야 할 때가 종종 있는데요. 이럴 때 배열 전체를 filter()로 걸러낸 다음 첫 번째 원소만 꺼내는 코드를 작성하시는 분이 의외로 많습니다. 물론 동작은 하지만, 배열 전체를 순회해서 새 배열을 만든 뒤 첫 번째 원소만 쓰고 나머지는 버리니까 비효율적이죠? 이번 글에서는 이런 상황에 딱 맞는 find() 계열 메서드 네 가지를 정리해보겠습니다. find()로 원소 찾기 find() 메서드는 배열을 앞에서부터 순회하면서 콜백 함수가 true를 반환하는 첫 번째
웹 개발을 할 때 쿼리 스트링(Query String)을 다루는 일은 번거롭기도 하고 버그도 생기기 쉬워서 오래전부터 라이브러리가 많이 쓰였는데요. 관련해서 npm에서 검색해보면 이름이 조금씩 다른 수많은 라이브러리가 있어서 어떤 것을 선택해야 할지 헷갈릴 수 있습니다. 이번 포스팅에서는 현재 npm trends 기준으로 가장 많이 사용되고 관리가 잘 되고 있는 2종의 자바스크립트 라이브리리, qs와 query-string에 대해서 알아보겠습니다. 라이브러리가 필요한 이유 먼저 자바스크립트로 쿼리 스트링을 다룰 때 왜 라이브러리가
제가 몇 년 전에 블로그에서 npm 패키지 저장소에 faker라는 이름으로 등록되어 있는 라이브러리를 소개해 드린 적이 있는데요. 안타깝게도 2022년에 faker를 유지보수하던 개발자가 불미스러운 일을 저질러 더 이상 사용하면 안 되는 라이브러리가 되었습니다. (오픈 소스 커뮤니티에 시사하는 바가 컸던 사건이므로 관심있으신 분은 관련 기사를 참고하시기 바랍니다.) 현재는 npm 패키지 저장소에 @faker-js/faker라는 패키지 이름으로 등록된 새로운 라이브러리가 예전에 faker 라이브러리를 대신하고 있는데요. 과거의 실수를
React로 SPA(Single Page Application)를 개발하는 경우 window.location 객체에 접근할 때 여러가지 문제가 발생할 수 있는데요. SPA에서는 보통 클라이언트 단에서 랜더링을 하기 때문에 브라우저의 location 객체를 사용할 때 조금 더 세심한 고려가 필요합니다. 이번 포스팅에서는 React 앱에서 브라우저의 location 객체에 안전하게 접근하는 방법과 이를 위한 커스텀 훅(hook)을 구현해보도록 하겠습니다. 브라우저의 location 전역 객체 우선 브라우저의 location 객체에 대해
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의 쿼리 스트링에 대해서 짚고 넘어가는 게 좋을 것 같아요.