아마도 파이썬에서 가장 많이 사용되는 내장 함수는 뭐니 뭐니 해도 print()일 것 같은데요. 특히 아무리 디버거(debugger)가 좋아지더라도 간단한 버그를 찾을 때 print()로 출력해보는 것만큼 빠르고 간단한 방법도 없기 때문일 것입니다. 이렇게 정말 유용하고 많이 사용되는 print() 함수를 어떻게하면 좀 더 잘 활용할 수 있을까요? 기본 출력 제일 먼저 주변에서 print() 함수를 사용하는 가장 흔한 방법을 살펴볼까요? 매일 쓰다보니 당연히 받아드려지는 부분이지만 print() 함수는 문자열을 출력하지만 입력으로
개발을 하다 보면 이미지를 가공해야 하는 일이 참 많죠. 포맷을 변환하거나, 크기를 줄이거나, 여러 이미지를 합성하거나, 워터마크를 넣거나... 이런 작업을 매번 포토샵 같은 GUI 프로그램을 열어서 하기엔 너무 번거로운데요. ImageMagick은 바로 그런 상황에서 빛나는 도구입니다. 1990년에 첫 릴리스된 이후 30년이 넘도록 꾸준히 개발되어 왔고, 200개 이상의 이미지 포맷을 지원하는 사실상의 표준 CLI 이미지 도구라고 할 수 있어요. PNG, JPEG, WebP, TIFF, GIF, SVG, PDF까지 거의 모든 포맷
객체 지향 프로그래밍 언어인 파이썬에서 모든 데이터는 결국 객체라고 볼 수 있습니다. 우리가 작성한 클래스의 인스턴스 뿐만 아니라, 심지어 함수, 문자열, 정수, 실수도 결국 타입을 가집니다. 이번 포스팅에서는 파이썬에서 데이터 타입을 확인할 수 있는 몇 가지 방법을 알아보도록 하겠습니다. __class__ 속성 파이썬에서 모든 객체는 __class__라는 특별한 속성을 가지는데요. 여기에는 해당 객체의 데이터 타입이 저장이 되어 있습니다. 예를 들어, 변수 a에 정수 1을 저장하고, a.__class__를 출력해보겠습니다. 정수의
웹사이트의 로딩 속도를 줄이려면 이미지 최적화가 빠질 수 없죠. JPEG이나 PNG 대신 WebP 포맷을 사용하면 동일한 화질에서 파일 크기를 25~35% 정도 줄일 수 있는데요. WebP는 Google이 2010년에 발표한 이미지 포맷으로, 손실(lossy)과 무손실(lossless) 압축을 모두 지원합니다. 현재 Chrome, Firefox, Safari, Edge 등 모든 주요 브라우저에서 지원하고 있어서 실무에서도 안심하고 사용할 수 있어요. Google은 WebP 포맷과 함께 libwebp라는 공식 도구 모음도 제공하고 있
하드웨어와 소프트웨어를 불문하고 Caching(캐싱)은 정말 광범위하게 다양한 형태로 활용되고 있는 성능 최적화 기법입니다. 이번 포스팅에서는 파이썬으로 프로그래밍할 때는 어떻게 캐시를 적용할 수 있는지 알아보도록 하겠습니다. 캐싱이란? 먼저 프로그래밍 입문자 분들을 위해서 캐싱에 대해서 간단히 개념은 짚고 넘어가는 게 좋을 것 같습니다. 일반적으로 캐싱은 접근하는데 시간이 오래 걸리는 데이터를 접근 속도가 빠른 저장소에 사본을 저장해두고 재사용하거나, 실행하는데 오래 걸리는 연산의 결과를 미리 계산해놓고 최초로 필요할 때 한번만
웹사이트를 운영하다 보면 이미지 용량 때문에 고민하는 순간이 꼭 찾아옵니다. 특히 PNG 파일은 무손실 포맷이라 화질은 좋지만 용량이 크다는 게 늘 아쉬운 부분이죠. 로고, 아이콘, 스크린샷 같은 이미지는 JPEG으로 바꾸기도 애매하고, 그렇다고 용량이 큰 채로 두자니 페이지 로딩 속도가 걱정됩니다. 이런 상황에서 pngquant를 사용하면 PNG 이미지의 용량을 60~80%까지 줄이면서도 눈으로 보기에는 거의 차이가 없는 수준의 화질을 유지할 수 있습니다. 이번 글에서는 pngquant의 설치부터 실무에서 바로 활용할 수 있는 다
텍스트로만은 설명하기가 부족한 부분이 있어서 별도의 시연 동영상을 유튜브에 따로 올렸으니 참고바랍니다. 요즘에는 로컬에 복잡하게 개발 환경을 구축하지 않고 대신 온라인에서 코드 편집이 가능한 도구들을 많이 사용하는 것 같습니다. 이러한 온라인 코드 편집기 중에서도 거의 원조격에 해당하면서 꾸준하게 전 세계적으로 많은 개발자들에게 사랑받고 있는 CodePen에 대해서 알아보겠습니다. CodePen이란? CodePen을 한마디로 정의하면 프론트엔드(frontend) 웹 개발에 특화된 온라인 코드 편집기입니다. 프론트엔드(frontend
macOS를 쓰다 보면 이미지 크기를 줄이거나 포맷을 바꿔야 할 때가 종종 있죠. 스크린샷을 PNG에서 JPEG으로 변환하고 싶거나, 블로그에 올릴 사진의 해상도를 낮추고 싶을 때처럼요. 이럴 때 보통 Preview 앱을 열거나 ImageMagick 같은 도구를 따로 설치하곤 하는데요. 사실 macOS에는 이미 강력한 이미지 처리 도구가 기본으로 탑재되어 있습니다. 바로 sips(Scriptable Image Processing System)인데요. 터미널에서 한 줄이면 이미지를 리사이징하고, 포맷을 변환하고, 회전까지 할 수 있어
와, 2022년이 밝았습니다! 🎊 나도 새해에는 블로그를 하나 시작해볼까 하시는 분들이 많을 것 같은데요. 블로그는 크게 두가지 방법으로 시작할 수 있는데요. 첫번째는 블로그 서비스를 이용하는 것이고, 두번째는 스스로 블로그를 만드는 것이에요. 블로그를 다년 간 운영해온 경험을 바탕으로 블로그를 시작하는 다양한 방법과 직접 블로그를 만들 수 있는 정적 사이트 생성기에 대해서 소개해드릴게요. 포털 블로그 서비스 블로그를 한 번도 안 해보신 분들이 블로그를 시작할 때 가장 쉽게 접근할 수 있는 방법은 바로 대형 포털 사이트에서 제공하
요즘 프론트엔드(front-end) 개발을 하다 보면 SPA, SSG, SSR이라는 상당히 비슷해서 헷갈리는 약어를 심심치 않게 들을 수 있는데요. 이번 포스팅에서는 모던 웹 개발의 트랜드를 주도하고 있는 이 3가지 랜더링(rendering) 기법에 대해서 이야기해보려고 합니다. SPA: Single Page Application SPA(Single Page Application)는 직역하면 단일 웹페이지로 돌아가는 애플리케이션을 의미하는데요. 이를 곧이곧대로 받아드리면 정말로 페이지 하나로 이루어진 정말 간단한 웹사이트로 오해할
웹사이트를 개발하다 보면 아무래도 사람들에게 보여질 부분에만 치중하기 쉬워집니다. 그런데 알고보면 사람뿐만 아니라 기계가 웹사이트를 읽어야하는 경우가 의외로 많은데요. 여기서 기계라함은 유저가 사용하는 브라우저가 될 수도 있고 웹사이트의 데이터를 수시로 수집해가는 검색엔진이 될 수도 있겠습니다. 또한 어떤 웹페이지의 링크를 공유하면 링크를 열기 전에 해당 콘텐츠를 미리보여주는 SNS나 메신저가 될 수도 있겠네요. 이번 포스팅에서는 이러한 기계들이 웹페이지를 효과적으로 이해할 수 있도록 도와주는 메타 태그에 대해서 알아보겠습니다. 메
자바스크립트로 개발을 시작하게 되면 꼭 한번 씩은 만나게 되지만 별로 대수롭지 않게 넘어가는 함수 2개가 있습니다. 바로 setTimeout() 함수와 setInterval() 함수인데요. 이번 포스팅에서는 자바스크립트의 타이머를 사용하는 이 두 내장 함수에 대해서 한 번 알아보려고 합니다. setTimeout() 사용법 어떤 코드를 바로 실행하지 않고 일정 시간 기다린 후 실행해야하는 경우가 있는데요. 이럴 때는 자바스크립트의 setTimeout() 함수를 사용할 수 있습니다. setTimeout() 함수는 첫번째 인자로 실행할
페이지네이션(pagination)은 여러 개의 게시물을 보여주는 웹사이트에서 보통 화면 하단에서 흔히 볼 수 있는 UI입니다. 이번 포스팅에서는 아래와 같이 간단한 페이지네이션(pagination) UI를 구현하는 방법에 대해서 알아보겠습니다. 전체 게시물 목록 구현 우선 단순히 모든 게시물의 목록을 보여주는 React 컴포넌트를 페이지네이션이 없이 구현해볼까요? 게시물 데이터는 JSON Placeholder라는 인터넷에 공개된 API를 통해 가져오도록 하겠습니다. <Posts/>라는 함수 컴포넌트를 작성하고, useState()
자바스크립트에서 배열을 다룰 때 자주 사용하게되는 함수 중에서 이름이 상당히 비슷한 slice()와 splice()가 있습니다. 이번 포스팅에서는 예제 코드를 작성하면서 이 두 함수가 어떤 점이 비슷하고 어떤 점이 다른지에 대해서 알아보겠습니다. slice() 함수 slice() 함수는 배열로 부터 특정 범위를 복사한 값들을 담고 있는 새로운 배열을 만드는데 사용합니다. 첫번째 인자로 시작 인덱스(index), 두번째 인자로 종료 인덱스를 받으며, 시작 인덱스부터 종료 인덱스까지 값을 복사하여 반환합니다. 간단한 실습을 위해 숫자
사이트 네비게이션(site navigation)은 웹사이트에서 사용자가 효과적으로 페이지 사이를 이동을 할 수 있도록 도와주는 매우 흔하면서도 중요한 UI 입니다. 이번 포스팅에서는 React와 Styled Components를 이용하여 아래와 같은 다단계 사이드 네비게이션 UI를 한 번 구현해도록 하겠습니다. 컴파운트 컴포넌트 HTML에는 부모없이는 단독으로 쓰이지 않는 요소들이 있습니다. 대표적인 예로 <option> 요소는 항상 <select> 요소 안에서 사용되며, <li> 요소는 항상 <ul>이나 <ol> 요소 안에서 사용
이번 포스팅에서는 자바스크립트에서 JSON 내장 객체를 이용하여 JSON 형식으로 표현된 데이터를 다루는 방법에 대해서 알아보겠습니다. JSON 이란? 자바스크립트의 JSON 내장 객체에 대해서 배우기 전에 먼저 JSON이 무엇인지에 대해서 간단하게 짚고 넘어가겠습니다. JSON은 JavaScript Object Notation의 약자로서 데이터를 문자열의 형태로 나타내기 위해서 사용됩니다. 이름이 암시하듯 JSON은 본래 자바스크립트에서 파생되었지만 현재는 거의 표준으로 자리잡아 대부분의 다른 프로그래밍 언어에서도 지원하는 데이터
이번 포스팅에서는 Node.js에서 파일 입출력 처리를 할 때 사용하는 fs 모듈에 대해서 알아보겠습니다. fs모듈 불러오기 fs 모듈은 Node.js에 내장되어 있어 있기 때문에 별도의 라이브러리 설치없이 바로 불러와서 사용할 수 있습니다. CommonJS 모듈 시스템을 사용하는 프로젝트에서는 require 키워드로 불러오고, ES 모듈 시스템을 사용하는 프로젝트에서는 import 키워드를 사용할 수 있습니다. 비동기 함수 vs 동기 함수 fs 모듈는 비동기(asynchronous) API와 동기(synchronous) API를
Git을 쓰다 보면 "이 파일은 추적하지 마!" 하고 싶을 때가 참 많습니다. .env 파일에 담긴 비밀 키, node_modules처럼 덩치 큰 의존성 폴더, IDE가 만들어내는 .idea나 .vscode 디렉토리까지. 대부분은 .gitignore에 한 줄 추가하면 끝이지만 실제로는 그것만으로 해결되지 않는 상황이 꽤 있습니다. "팀 전체가 아니라 나만 무시하고 싶은 파일이 있는데?", "이미 커밋된 파일인데 이제 와서 무시하려면?", "설정 파일을 로컬에서만 살짝 바꿔 쓰고 싶은데?" 이번 글에서는 Git에서 파일 추적을 막는
이번 포스팅에서는 Node.js에서 파일이나 디렉토리의 경로를 다룰 때 사용하는 path 모듈에 대해서 알아보겠습니다. 운영체제 파일이나 디렉토리의 경로를 다루는 게 뭐가 어렵다고 굳이 별도의 모듈이 필요할까요? 사실 경로 처리는 많은 분들이 간과하지만 알고 보면 은근히 오류가 발생할 소지가 많은 부분인데요. 일단 유닉스 계열 운영체제와 윈도우 운영체제는 서로 다른 문자로 디렉토리 구조를 표현합니다. 유닉스 계열 운영체제에서는 / 문자를 사용하는 반면에 윈도우 운영체제에서는 문자를 사용하죠. 유닉스 계열 윈도우 또한 이 두 진영의
이번 포스팅에서는 .gitignore 파일을 이용하여 Git으로 프로젝트의 버전 관리를 할 때 특정 파일이나 디렉토리를 제외시키는 방법에 대해서 알아보겠습니다. 버전 관리를 하지 않는 파일과 디렉토리 어떤 프로그래밍 언어로 프로젝트를 하든 버전 관리를 할 필요가 없거나 하지 말아야하는 파일이나 디렉토리가 생기기 마련입니다. 대표적인 예로, 자바스크립트(JavaScript) 프로젝트에서는 의존성을 설치하고 나면, 프로젝트에 node_modules 디텍토리가 생성되고 그 안에 npm 저장소로 부터 내려받은 라이브러리 코드가 저장됩니다.