컴포넌트 기반 UI 개발의 패러다임을 주도한 React가 등장한지도 어느 덧 10년이 넘었네요. 이제 Vue.js, Svelte, Angular 등 어떤 프론트엔드 프레임워크를 사용하든 현대 웹 개발에서 컴포넌트 기반으로 UI 개발하는 것은 거의 당연한 얘기가 되었죠. 그리고 마침내 웹 컴포넌트(Web Components)를 통해서 별다른 프론트엔드 프레임워크가 없어도 웹 표준 기술만을 이용해서 UI 컴포넌트를 만들 수 있는 길이 활짝 열렸습니다. 이번 포스팅에서는 UI 컴포넌트를 만들 수 있는 웹 표준 기술인 웹 컴포넌트의 기본…
파이썬에서는 객체가 같은지 확인하기 위해서 is 연산자와 == 연산자, 이렇게 두 개의 연산자를 사용합니다. 이 두 연산자의 차이점을 정확히 이해하지 않고 잘못 쓰시면 큰 낭패를 보실 수 잇는데요. 이번 포스팅에서는 is 연산자와 == 연산자의 차이점에 대해서 알아보도록 하겠습니다. is 연산자 🆚 == 연산자 파이썬에서 is 연산자는 두 개의 객체가 메모리 상에서 같은 위치에 있는지 확인할 때 사용하는 연산자입니다. 예를 들어, 숫자나 문자 간에 is 연산자로 비교해보면 참이 나옵니다. 하지만, 리스트나 사전을 is 연산자로 비…
Command Palette(명령 팔레트)는 VSCode의 기본 기능과 확장 기능을 빠르게 실행할 수 있는 매우 강력한 도구입니다. Command Palette를 사용하면 번거롭게 마우스로 메뉴바에서 원하는 기능을 일일이 찾아보지 않아도 키보드만으로 VSCode 다양한 기능을 제어할 수 있습니다. 이번 포스팅에서는 VSCode의 만능 치트키와 같은 Command Palette를 어떻게 사용하는지 알아보겠습니다. 파일 검색 VSCode에서 Command Palette를 여는 것은 매우 간단한데요. 맥에서는 Cmd + P, 윈도우즈에…
이번 포스팅에서는 차세대 번들러인 Vite 사용하여 React 프로젝트를 생성하고 설정하는 방법에 대해서 알아보겠습니다. Vite에 대한 기초적인 내용에 대해서는 별도 포스팅에서 자세히 다루고 있으니 참고하세요. CRA 🆚 Next.js 🆚 Vite 오랫동안 React 프로젝트를 만들기 위해서 Create React App라는 CLI 도구가 사용되었습니다. State of JS 2023 설문 결과를 보시면 Create React App을 사용해봤다는 응답자가 90%가 넘을 정도로 CRA는 오랫동안 React 생태계에서 프로젝트를 …
VSCode에서 코딩을 하다보면 글자나 단어 단위가 아닌 줄 또는 행(line) 단위로 편집 작업을 하고 싶을 때가 있은데요. 이번 포스팅에서는 개발 생산성을 극대화 시킬 수 있는 VSCode의 줄 편집 관련 단축키를 알려드리려고 합니다. 위/아래에 새로운 줄 넣기 코드 편집을 하다보면 커서가 줄 맨 뒤에 있지 않을 때도 아래에 새로운 줄을 추가하고 싶을 때가 있는데요. 이럴 때 커서가 있는 곳에서 그냥 Enter 키를 누르시면 커서 뒤에 있는 모든 내용이 다음 줄로 가버리죠. 대신에 한번 Command+Enter를 눌러보세요. …
VSCode에서 효과적으로 코드 편집을 하려면 무엇보다 마우스 커서(cursor)를 원하는 위치로 빠르게 이동하고 원하는 영역을 빠르게 선택하는 것이 매우 중요한데요. 양손으로 키보드로 타이핑을 하다가 커서를 옮기거나 드래그를 하기 위해서 잠깐 잠깐 한 손을 마우스나 트랙패트로 옮기는 것이 은근히 개발 생산성을 떨어뜨릴 수 있기 때문입니다. 이번 포스팅에서는 VSCode에서 커서를 키보드로 자유자재로 제어하시려면 꼭 알고 계셔야 하는 필수 단축키를 정리해드리겠습니다. 영역 선택 코드를 편집할 때 한 글자씩 하면 너무 생산성이 떨어…
CSS 네스팅(Nesting)은 어떤 선택자 내부에 다른 선택자를 넣어서 계층적인 스타일이 가능케하는 문법입니다. 예전에는 SCSS, SASS, LESS와 같은 CSS 전처리기를 사용해야 쓸 수 있던 기능이 었지만, 최근에는 CSS 표준에도 CSS Nesting이 정식으로 도입되어 Vanilla CSS에서도 사용이 가능해졌습니다. 이번 포스팅에서는 CSS Nesting을 왜 사용해야하고 어떻게 사용하는지에 대해서 알아보겠습니다. 본 포스팅은 CSS 선택자(selector)와 결합자(combinator)에 대한 기본적인 이해가 필요…
Vite가 Webpack이나 Parcel과 같은 전통적인 번들러를 위협하는 차세대 번들러(bundler)로 빠르게 부상하고 있습니다. Vue.js의 창시자인 Evan You가 만든 Vite는 빠른 개발 서버와 빌드 최적화를 제공하여 현대적인 프론트엔드 개발에 핵심적인 도구로 자리 잡고 있는데요. 이번 포스팅에서는 Vite를 처음 사용하시는 분들의 위해서 Vite를 시작하는 방법을 안내해드리겠습니다. Vite란? Vite는 기존 자바스크립트 번들러의 만성적인 성능 문제를 해결하고 개발자 경험을 향상시키기 위해서 등장한 차세대 번들러…
쉘 프로그래밍을 처음 하시는 분들이 스크립트를 읽으시다가 2>&1와 같은 알 수 없는 문법을 보고 당황하시는 경우가 있습니다. 이 것을 보통 리다이렉션(Redirection)이라고 하는데요. 어떤 명령의 입력이나 출력을 다른 곳으로 변경하기 위해서 사용됩니다. 이번 포스팅에서는 쉘 리다이렉션의 기본 사용법을 알아보고 다양한 예제를 통해 어떻게 실제 쉘 프로그래밍에 활용할 수 있는지 배워보겠습니다. 표준 스트림 쉘의 리다이렉션을 이해하려면 우선 MacOS와 같은 리눅스/유닉스 운영체제의 세 가지 표준 스트림(Standard Stre…
웹 개발을 하다 보면 소위 팝업(pop-up) 창을 띄어서 무언가를 알려주거나, 확인을 받거나, 입력을 받아야할 때가 있는데요. 브라우저에서는 아주 오래 전부터 이러한 팝업 창을 띄울 수 있도록 alert(), confirm(), prompt()를 제공하였습니다. 이번 포스팅에서는 간단한 예제를 통해서 이 세가지 함수를 언제 어떻게 사용하는지 알아보겠습니다. alert() 함수 사용자에게 정보를 전달하는 간단한 팝업 창이 필요하다면 alert() 함수를 사용할 수 있습니다. alert() 함수는 인자로 넘어온 문자열을 그대로 팝업…
자바스크립트의 배열은 여러가지 메서드를 제공하고 있지만 그 중에서 가장 강력한 녀석을 뽑으라면 단연 reduce()를 뽑을 수 있을텐데요. 워낙 범용적으로 쓰일 수 있는 메서드이다 보니 reduce()가 사용된 코드를 해석하는데 어려움을 느끼시는 분들이 많습니다. 이번 포스팅에서는 reduce() 메서드의 기본 사용법을 알아보고 다양한 예제를 통해 어떻게 실제 개발에서 활용할 수 있는지 배워보겠습니다. 기본 문법 어떤 배열을의 reduce() 메서드를 호출하면 배열을 상대로 각 요소인자로 넘어온 콜백 함수를 실행하여 누적된 하나의…
주변에 보면 경력과 무방하게 오픈 소스 기여에 관심이 있는 개발자 분들이 참 많은 것 같아요. 오픈 소스에 기여한 이력은 인터넷에 공개되어 있기 때문에 개인의 인지도를 높이는 데 도움이 되고, 오픈 소스 경험이 있는 개발자를 우대하거나 적극적으로 채용하는 기업들도 있으니까요. 뿐만 아니라, 오픈 소스 커뮤니티에서 활동하고 있는 전 세계의 개발자들과 협업하면서 글로벌 네트워크를 넓힐 수 있다는 점도 큰 매력인 것 같습니다. 무엇보다 자신이 작성한 코드가 무료로 많은 사람들에게 해택을 준다는 것은 개발자로서 정말로 보람된 경험이죠. …
자바스크립트의 배열은 forEach(), filter(),map(), reduce, every(), some() 등과 같이 콜백 함수를 인자로 받아 배열에 저장되어 있는 모든 원소로 상대로 호출해주는 함수들을 제공합니다. 이 함수들을 잘 활용하면 소위 함수형 프로그래밍(Functional Programming) 스타일로 코딩을 할 수 있게 되죠. 그런데 혹시 이러한 자바스크립트의 배열에 제공하는 함수에 비동기 함수를 인자로 넘기면 낭패를 볼 수 있다는 것을 아시나요? 이번 포스팅에서는 자바스크립트 배열 함수를 통해서 비동기 함수를…
타입스크립트 프로젝트에서 @types/로 시작하는 수 많은 패키지가 개발 의존성으로 설치되어 있는 것을 보신 적이 있으신가요? 이번 포스팅에서는 이러한 패키지들이 도대체 왜 필요하며 어디서 오는 것인지에 대해서 간단히 알아보려고 합니다. Definitely Typed란? 자바스크립트는 생겨난지 30년이 다 되가는 프로그래밍 언어이지만 타입스크립트는 이제 겨우 탄생한지 10년이 조금 넘었습니다. 최근에 만들어진 자바스크립트 패키지는 대부분은 타입 선언(type definitions)이 내장되어 있지만, 타입스크립트가 등장하기 이전에…
요즘 어떤 프로그래밍 언어로 개발을 하든 코드 편집기로 VSCode를 참 많이 사용하는 것 같아요. 그런데 VSCode에서 마치 커서를 여러 곳에 둔 것처럼 동시에 편집할 수 있다는 것을 알고 계시나요? 잘 활용하면 여러분의 개발 생산성을 폭발시킬 수 있는 치트키와 같은 기능이죠! 이번 포스팅에서는 제가 VSCode에서 다중 편집을 위해서 즐겨 사용하는 멀티 커서 기능에 대해서 알려드리겠습니다. 멀티 커서 하나씩 추가하기 우선 멀터 커서를 사용하는 가장 기초적인 방법부터 알려드릴게요. VSCode에서 아무 파일이나 하나 여시고 맥…
실시간 양방향 통신을 위해서 웹소켓(WebSocket)이 표준이 된지가 꽤 되었고, 현재 대부분의 모던 브라우저에서 웹소켓 API를 지원하고 있습니다. 하지만 여전히 우리는 모든 사용자가 최신 브라우저를 사용한다고 단정할 수 없으며, 웹소켓이 지원되지는 않는 환경에서는 어쩔 수 없이 대안 기술을 사용해야 하죠. Socket.IO는 이런 호환성 부분에 대해서 개발자가 크게 걱정할 필요없이 실시간 양방향 통신을 하는 웹 애플리케이션을 작성할 수 있도록 도와주는 라이브러리입니다. 이번 포스팅에서는 간단한 실습을 통해서 Socket.IO…
요즘 웹을 보면 예전에는 상상하지도 못했던 방식으로 여러 사용자와 실시간으로 양방향 상호작용을 하는 애플리케이션을 볼 수 있습니다. 대표적인 예로 다수의 참여자가 동시에 메시지를 주고 받는 채팅이나 실시간으로 게이머 간의 동기화해야 하는 온라인 게임을 들 수 있는데요. 게다가 최근에는 ChatGPT가 등장하면서 AI 기반 채팅 기능을 제공하는 웹사이트들이 점점 늘고 있는 것 같습니다. 이 블로그 글에서는 웹에서 이렇게 실시간 양방향 통신을 필요로 하는 애플리케이션을 구현하는데 필수적인 기술인 웹소켓(WebSocket)에 대해서 살…
올인원(All-in-one) 테스팅 프레임워크 Vitest를 사용하면 다른 라이브러리 설치 없이 바로 mocking과 spying 기능을 쓸 수 있는데요. 그런데 여기서 mocking과 spying을 한국어로 뭐라고 번역해야 모르겠네요. 😅 주변에서 보면 “모킹”과 “스파잉”으로 그냥 영어를 차용해서 쓰고 있는 것 같습니다. Mocking 이란? 먼저 mocking이 생소하신 분들을 위해서 mocking 대한 기본 개념부터 잡고 들어가는 게 좋을 것 같습니다. mocking은 단위 테스트를 작성할 때, 해당 코드가 의존하는 부분을…
broken windows 깨진 유리창의 법칙(Broken Windows Theory)을 들어보셨나요? 깨진 유리창을 방치하면 그 지점을 중심으로 범죄가 확산된다는 사회학 이론인데요. 이미 낙서가 되어 있는 화장실 벽에는 왠지 낙서를 더 해도 괜찮을 것 같은 느낌이 들거나, 누군가가 무심코 버린 작은 쓰레기 주변에 금세 쓰레기 더미가 쌓이는 모습은 깨진 유리창의 법칙의 대표적인 예입니다. 최근 많이 들리는 미국 캘리포니아 주에서 경범죄에 대한 처벌을 약화시킨 결과, 유명 브랜드들이 사업을 철수할 정도로 치안이 매우 좋지 않아졌다는…
bun 차세대 자바스크립트 런타임으로 주목받고 있는 Bun이 v1.1을 출시하였습니다. 하필 거짓말처럼 만우절에 출시를 하여 윈도우즈 사용자들의 애간장을 태웠는데요. 그동안 Bun을 윈도우에서 사용하려면 WSL(Windows Subsystem for Linux)가 필요했었는데, 이제는 네이티브로도 사용할 수 있게 되었습니다 🙌 자세한 내용은 아래 공식 블로그와 유튜브 영상을 참고 바랍니다. 실제 Bun을 개발하고 있는 엔지니어들이 직접 나와서 소개하고 있는데 같은 개발자로서 약간 웃프네용 😂 📝 블로그: https://bun.sh…