다양한 디바이스들이 웹브라우징을 지원하면서 뷰포트(viewport) 너비에 따라 유연하게 컨텐츠를 배치하는 기술이 점점 중요해지고 있습니다. 이번 포스팅에서는 이러한 반응형 웹디자인의 기본이되는 CSS의 미디어 쿼리(Media Query)에 대해서 살펴보겠습니다. 기본 문법 미디어 쿼리는 CSS에서 어떤 스타일을 선택적으로 적용하고 싶을 때 사용합니다. 다른 프로그래밍 언어의 if 조건문과 비슷한 개념이라고 생각하시면 이해가 쉬우실 겁니다. @media 키워드로 시작하는 미디어 쿼리의 문법 구조는 아래와 같습니다. 스타일 부분에는
테스트를 작성하다보면 다양한 테스트 데이터에 대해서 동일한 테스트 코드를 돌리고 싶을 때가 있죠? 이러한 테스팅 기법을 보통 파라미터화(parameterized) 테스팅이라고 하는데요. 이번 글에서는 Jest에서 제공하는 test.each()와 describe.each() 함수를 사용하여 파라미터화 테스트를 하는 방법에 대해서 배워보겠습니다. 파라미터화(parameterized) 테스트 간단한 실습을 위해 2개의 문자열의 인자로 받아 애너그램(anagram) 여부를 반환해주는 함수를 작성해볼까요? 이제 위 함수에 대한 테스트를 작성
![[파이썬] 내장 함수 dir 사용법](https://img.daleseo.com/cdn-cgi/image/width=800,height=450,fit=cover,format=auto,onerror=redirect/t8DaFrKl.webp)
이번 포스팅에서는 네임 스페이스를 들여다보고 싶을 때 요긴하게 쓸 수 있는 dir() 내장 함수에 대해서 알아보겠습니다. 네임 스페이스와 dir() 함수 파이썬에는 다른 언어와 비슷하게 소위 네임 스페이스(name space)라는 개념이 있는데요. 변수명이나 함수명 그리고 클래스의 이름을 언어 차원에서 관리해주는 매커니즘이라고 생각하시면 편할 것 같습니다. dir()은 네임 스페이스에 등록되어 있는 모든 이름들을 리스트로 반환해주는 파이썬의 내장 함수입니다. 예를 들어, 변수 A와 B를 선언 후 dir() 함수를 호출해보겠습니다.
파이썬 3.6에서 소위 f-string이라고 불리는 문자열을 좀 더 쉽게 포맷팅하기 위한 새로운 방법이 추가되었는데요. 이번 포스팅에서는 간결하고 읽기 편한 문법으로 많은 파이썬 개발자들에게 사랑받고 있는 이 f-string에 대해서 살펴보겠습니다. 기본 문법 파이썬에서 문자열은 아시는 것처럼 홈 따옴표나 쌍 따움표를 이용해서 나타내죠? 이러한 일반적인 문자열 앞에 f 또는 F 문자만 붙여주면 f-string이 됩니다. 변수 치환 중괄호(brace)을 사용하면 f-string 안 에 파이썬의 표현식(expression)을 삽입할 수
React 컴포넌트에 ref prop을 넘겨서 그 내부에 있는 HTML 엘리먼트에 접근을 하게 해주는 forwardRef() 함수에 대해서 알아보겠습니다. HTML 엘리먼트의 ref prop React에서 ref prop은 HTML 엘리먼트의 직접 접근하기 위해서 사용됩니다. 예를 들어, 아래 <Field/> 컴포넌트에서는 useRef() 훅(hook) 함수로 생성한 inputRef 객체를 <input/> 엘리먼트의 ref prop으로 넘기고 있습니다. 이렇게 해주면 inputRef 객체의 current 속성에 <input/> 엘리
React로 웹 애플리케이션을 개발하다 보면 간혹 React 컴포넌트가 아닌 HTML 엘리먼트에 직접 접근해서 DOM API를 이용해서 제어해야 할 필요가 있는데요. 이번 포스팅에서는 이럴 때 유용하게 사용할 수 있는 React의 독특한 prop인 ref 에 대해서 알아보도록 하겠습니다. ref prop React의 ref prop은 HTML 엘리먼트의 레퍼런스를 변수에 저장하기 위해서 사용합니다. 예를 들어, 다음과 같이 <input> 엘리먼트에 ref prop으로 inputRef라는 변수를 넘기게 되면, 우리는 이 inputRe
macOS에서 개발 환경을 처음 셋업할 때 가장 먼저 하는 일이 뭘까요? 대부분의 개발자가 Homebrew부터 설치할 거예요. Git, Node.js, Python, Docker CLI 같은 개발 도구를 터미널 명령어 하나로 설치하고 관리할 수 있게 해주는 도구이기 때문인데요. 한번 쓰기 시작하면 없이는 못 살게 되는 도구죠. 이번 글에서는 2026년 9월에 나온 Homebrew 7을 기준으로 설치부터 Cask, Tap, Bundle, 그리고 새로 들어온 취약점 점검과 GUI 앱까지 하나씩 살펴보겠습니다. Homebrew란? Hom
많은 프로그래밍 언어들에서 i, j, k와 같은 소위 인덱스(index) 변수를 증가시키면서 for 루프를 돌리지요? 하지만 파이썬에서는 enumerate()라는 내장 함수를 통해 이러한 인덱스 변수를 사용하지 않고 루프를 돌리는 방식이 선호되며 이런 코딩 스타일을 소위 Pythonic, 즉 파이썬답다고 하죠. 이번 글에서는 파이썬의 enumerate() 함수에 대해서 알아보도록 하겠습니다. for 루프 먼저 파이썬에서 for 문을 사용해서 루프를 돌리는 가장 기본적인 방법부터 짚고 넘어가겠습니다. 파이썬에서는 for 루프는 기본적
마치 옷의 지퍼(zipper)처럼 두 그룹의 데이터를 서로 엮어주는 파이썬의 내장 함수 zip()에 대해서 알아보도록 하겠습니다. zip() 기본 문법 zip() 함수는 여러 개의 순회 가능한(iterable) 객체를 인자로 받고, 각 객체가 담고 있는 원소를 튜플의 형태로 차례로 접근할 수 있는 반복자(iterator)를 반환합니다. 설명이 좀 어렵게 들릴 수도 있는데요. 간단한 예제를 보면 이해가 쉬우실 겁니다. 위 코드를 보면 numbers 리스트와 letters 리스트를 zip() 함수에 인자로 넘겨서 호출 후에, for 문
웹 페이지 상에서 많은 양의 데이터를 일목요연하게 보여주기 위해서 테이블(table) UI가 많이 사용됩니다. 정렬이나 검색을 지원하는 완성도 있는 테이블 UI를 직접 개발하려면 생각했던 것보다 구현이 복잡해지는 경우가 많은데요. React Table은 React로 테이블 UI를 간단하게 구현할 수 있도록 도와주는 라이브러리 입니다. 이 번 포스팅에서는 React Table을 이용하여 정렬과 검색을 지원하는 테이블 UI를 구현해보도록 하겠습니다. 테이블 데이터 생성 본인의 React 프로젝트에 npm으로 랜덤 데이터를 생성해주는 f
웹 페이지에서 많은 양의 데이터를 일목요연하게 보여주기 위해서 테이블(table) UI가 많이 사용됩니다. React로 완성도 있는 테이블 컴포넌트를 개발하려면 이외로 고려할 부분이 많아서 생각보다 많은 시간과 노력이 들어가게 되는데요. 이번 포스팅에서는 Material UI를 이용하여 좀 더 손쉽게 테이블 UI를 구현해보도록 하겠습니다. Material UI의 기본적인 셋업에 대한 부분은 관련 포스팅를 참고 바랍니다. 필요한 컴포넌트 HTML을 사용해서 테이블의 열과 행의 골격을 만들 때, <table> 엘리먼트 뿐만 아니라, <
많은 Node.js 프로젝트에서 환경 변수를 좀 더 효과적으로 관리하기 위해서 dotenv라는 라이브러리를 사용하고 있습니다. 이번 포스팅에서는 환경 변수를 파일에 저장해놓고 접근할 수 있게 도와주는 dotenv 라이브러리에 대해서 알아보겟습니다. dotenv 패키지 설치 npm 패키지 매니저를 이용하여 dotenv 라이브러리를 Node.js 프로젝트에 설치합니다. .env 파일 작성 dotenv 라이브러리는 아무 설정을 하지 않으면 현재 디렉토리에 위치한 .env 파일로 부터 환경 변수를 읽어오는데요. .env 파일을 생성하고,
여러 환경에 동일한 애플리케이션을 배포하려면 환경 변수(environment variable)라는 것을 사용해야하는데요. 이번 포스팅에서는 환경 변수에 대한 기본 개념을 설명드리고 Node.js에서는 어떻게 환경 변수에 접근하고 설정할 수 있는지에 대해서 알아보겠습니다. 환경 변수란? 먼저 환경 변수(environment variable)가 무엇인지 간단하게 개념부터 짚고 넘어가면 좋을 것 같아요. 일반적으로 우리는 코드 베이스는 하나만 관리하고, 개발, 테스트, 운영 등 여러 환경에 애플리케이션을 배포하는데요. 어느 환경에 배포하
React 앱을 개발하다보면 네트워크를 통해 REST API나 GraphQL API를 호출하여 원격에 있는 데이터를 가져와야 하는 일이 빈번하게 생기는데요. 이번 포스팅에서는 React 훅 함수를 이용해서 원격 API를 깔끔하게 호출하는 방법에 대해서 알아보겠습니다. useEffect()로 원격 데이터 가져오기 보통 원격 API를 호출하는 작업은 컴포넌트 랜더링을 막지않기 위해서 비동기로 처리하기 경우가 대부분인데요. 이러한 Side Effect 처리를 위해 React에서는 useEffect 훅 함수를 제공하고 있습니다. 예를 들어
이번 포스팅에서는 React에서 웹 스토리지를 사용해서 컴포넌트의 상태를 유지시키는 방법에 대해서 살펴보겠습니다. useState()로 유실되는 상태 관리하기 React에서 제공하는 useState() 훅 함수를 사용하면 컴포넌트의 상태를 간편하게 관리할 수 있는데요. 예를 들어, 버튼 클릭 횟수에 대한 상태 관리가 필요한 간단한 카운터 컴포넌트를 작성해보겠습니다. 너무 당연한 얘기겠지만 페이지를 새로 고침하는 순간 기존의 count 상태값은 사라집니다. 만약에 이 컴포넌트의 상태값을 웹 스토리지를 이용해서 유지시키고 싶다면 어떻게
웹 개발을 하다보면 <script> 요소를 이용해서 HTML 문서 안에 자바스크립트 코드를 삽입하는 경우가 필연적으로 생기기 마련인데요. 이번 글에서는 이렇게 정말 자주 사용하게 되는 <script> 요소를 좀 더 효과적으로 사용하는 방법에 대해서 알아보겠습니다. script 요소의 위치 혹시, 브라우저가 <script> 요소를 어떻게 처리하는지 생각해보신 적이 있으신가요? 당연한 얘기처럼 들리기시겠지만 브라우저는 HTML 문서를 처리하다가 <script> 요소를 만나면 src 속성에 명시된 경로의 파일을 내려받아 자바스크립트 코드
브라우저 상에서 사용자가 발생시키는 이벤트에 웹 애플리케이션이 예상대로 반응하는지 어떻게 테스트할 수 있을까요? 이번 포스팅에서는 사용자와 애플리케이션의 상호 작용을 검증하기 위한 테스트 코드를 작성하는 방법에 대해서 알아보겠습니다. 예제 컴포넌트 우선 테스트 대상이 될 간단한 React 컴포넌트 하나를 작성해보도록 하겠습니다. 아래 <LoginForm/> 컴포넌트는 이메일 입력란과 비밀번호 입력란, 로그인 버튼으로 구성되어 있습니다. 로그인 버튼은 이메일과 비밀번호가 입력되었을 때만 활성화가 되고, 클릭을 하면 prop으로 넘어온
화면을 만드는 자바스크립트 프레임워크를 고르다 보면 React의 JSX가 어색하게 느껴질 때가 있는데요. HTML을 쓰던 대로 쓰고, 값만 바꾸면 화면이 알아서 따라오면 좋겠다는 생각이 드는 거죠. 🤔 Vue는 바로 이런 감각을 살린 프레임워크입니다. 2020년 9월 18일에는 "One Piece"라는 이름으로 Vue 3가 정식 출시됐는데요. 2016년 Vue 2 이후 4년 만에 나온 메이저 버전으로, 코드베이스 전체를 TypeScript로 새로 쓰고 반응성(reactivity) 시스템과 컴포넌트 작성 방식까지 손봤습니다. 이번
이번 포스팅에서는 Jest를 이용해서 스냅샷(snapshot) 테스트를 하는 방법에 대해서 알아보겠습니다. Jest에 대한 기본적인 설치 및 사용 방법은 관련 포스팅를 참고하시길 바랍니다. 스냅샷 테스팅 스냅샷 테스팅(snapshot testing)이란 어떤 기능의 예상 결과를 미리 정확히 포착해두고 실제 결과에 비교하는 테스트 기법입니다. 테스트 대상 기능의 구현이 변경되어 실제 결과과 스냅샷을 떠놓은 예상 결과와 달라질 경우 해당 테스트 케이스는 실패하게 되는데요. 이럴 경우, 다시 새로운 스냅샷을 떠서 기존 스냅샷을 교체하는
requests는 파이썬으로 HTTP 통신이 필요한 프로그램을 작성할 때 가장 많이 사용되는 라이브러리입니다. 특히 원격에 있는 API를 호출할 때 유용하게 사용할 수 있는데요. 이번 포스팅에서는 requests 라이브러리를 사용하는 방법에 대해서 알아보겠습니다. 패키지 설치 파이썬의 패키지 매니저인 pip를 이용해서 requests 패키지을 설치합니다. 설치가 잘 되었는지 파이썬 인터프리터를 실행하여 확인해봅니다. requests 라이브러리로 구글에 접속을 해보니 상태 코드 200이 응답이 되는 것을 볼 수 있습니다. 🎉 API