Blog

CSS clamp() 함수

width와 height에는 min/max 값을 지정하는 별도의 속성이 있어서 레이아웃 구성에 유용하게 사용할 수 있다. 다른 속성에도 이와 같이 최대/최소값을 적용할 수 있으면 좋겠다는 생각이 드는 경우가 있는데 이럴 때 clamp()를 사용할 수 있다. const css = document.createElement('style'); css.i ……

dev |2024-12-08 | Comments (0)

철지난 스마트폰을 보면 하드웨어 성능은 나쁘지 않은데 이를 활용할 방법은 없을까 고민해 왔다. 보통은 대체제들도 가격이 워낙 싸서 그다지 유용한 경우는 많지 않았다. 라즈베리 파이 가격이 많아 올라서 작은 서버로 사용할 수 있을지 시도해 봤다. 서버는 리눅스 계열이 익숙해서 살펴보니 하드코어하게 폰을 다 밀고 설치하는 방법도 있는데 설치할 수 있는 폰 ……

software |2024-11-03 | Comments (0)

Ubuntu 24에 Puppeteer용 Chromium 설치하기

우분투 24(Ubuntu 24)에 퍼피티어(Puppeteer)를 깔고 크로미움(Chromium)을 깐다. sudo -u www-data npx puppeteer browsers install chrome 다음에 크롬이 사용하는 의존 패키지를 깐다. sudo apt-get install gconf-service libasound2 libatk ……

dev |2024-10-26 | Comments (0)

Puppeteer에서 SSH 터널링 프록시 사용하기

한국 공공 사이트들은 해외 접속을 차단한 경우가 참 많다. 해외에 있는 서버에서 접근이 안된다. 외국에 나가 있으면 국민이 아닌건지 세금으로 만든 사이트를 왜 그렇게 운영하는지 모르겠는데, 그래서 국내에 프록시를 두고 접근하게 설정을 해봤다. 프록시 서버를 만드는 방법은 다양하지만 SSH 터널링이 가능하다면 가장 간단한 방법으로 생각된다. SSH 터널 ……

dev |2024-10-19 | Comments (0)

리버스 프록시로 HTTP 기본 인증 우회

HTTP 기본 인증(HTTP basic authentication)이 보안에 좋지 않다고 하지만 편리하기 때문에 널리 사용된다. 이름만 대면 모르는 DS가 없을 툴 중에도 인증 기능이 HTTP 기본 인증으로 되어 있는 경우가 있다. location /auth { auth_basic "Authentication required"; auth_bas ……

dev |2024-10-09 | Comments (0)

Promise.race로 실행 시간 제한 걸기

동시에 여러개의 비동기 처리를 할 때 Promise.all을 사용해서 처리 속도를 올리곤 한다. const results = await Promise.all([fetchData1(), fetchData2()]); 이렇게 하면 데이터 패칭을 동시에 요청하고 병렬로 둘 다 끝난 후에 results에 [data1, data2]와 같이 데이터가 들어간다 ……

dev |2024-09-22 | Comments (0)

천재의 식단

객관적인 사실과 작가의 주장이 섞여 있어서 어디까지가 증명된 과학인지 애매한 부분들이 있다. 저자의 주장을 함축하자면 인간이 산업화되면서 바뀐 식습관에 비해 아직 충분히 진화하지 않았기 때문에 이전 생활의 식습관이 건강에 좋다는 것이다. 이런 이해를 바탕으로 본인이 연구하고 조합한 사실과 주장을 아주 설득력 있게 설명해 주고 있고 이를 바탕으로 한 좋은 ……

book |2024-09-14 | Comments (0)

WebP의 품질과 파일 크기

웹피(WebP)를 저장 할 때 품질을 얼마로 정해야 품질과 파일 크기 사이에서 적당한 지점을 찾을 수 있을지 실험을 좀 해봤다. 먼저 웹피에 대해서 알아보려면 반디소프트나 구글, 타이니파이의 글을 참고하면 좋다. 간단히 말하면 구글에서 만든 무손실과 손실, 알파채널, 애니메이션까지 지원하면서 기존 포맷 보다 작은 파일 크기를 유지하는 최근에 가장 각광 받고 ……

dev |2024-09-07 | Comments (0)

맥북 USB-C 충전 전력 확인하기

사용하고 있는 맥북 프로는 맥세이프(MagSafe)로 충전을 하고 있는데 USB 젠더로 충전을 하고 싶어서 USB-C to C 케이블을 이용해서 충전해 봤다. 어떤 케이블은 충전이 되지 않았고 USB-C 케이블마다 충전 용량이 다르다는 것을 알았다. 문제는 가지고 있는 케이블 중에 충전 전력이 표시된 케이블은 하나도 없어서 각 케이블들의 충전 용량을 확인하 ……

life |2024-08-31 | Comments (0)

Puppeteer로 웹페이지 열고 조작하기

화면 없이 웹 브라우징을 할 수 있는 제품으로 기억나는 최초는 팬텀(PhantomJS)이다. 화면도 없이 브라우저를 열고 스크린 샷도 찍고 탐색하는 것이 엄청 신기했다. 지금은 개발이 중단되었다. 팬텀의 불편함을 극복해보고자 캐스퍼(CasperJS)도 나왔었는데 이것 역시 지금은 개발이 중단되었다. 아마도 퍼피티어(Puppeteer)와 플레이라이트(Play ……

dev |2024-08-25 | Comments (0)