신현석(Hyeonseok Shin) - mysetting

11:49 5/30

hyeonseok.com

mobile screenshot relative

11:49

hyeonseok.com

mobile screenshot

신현석(Hyeonseok Shin)
https://hyeonseok.com/

사는 이야기, 웹개발 이야기

최종 피드 수집: 2024-12-16 03:17

전체 (60)

7d

CSS clamp() 함수

width와 height에는 min/max 값을 지정하는 별도의 속성이 있어서 레이아웃 구성에 유용하게 사용할 수 있다. 다른 속성에도 이와 같이 최대/최소값을 적용할 수 있으면 좋겠다는 생각이 드는 경우가 있는데 이럴 때 cla

000

1M

Android 폰에 웹서버 설치하기

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

001

1M

Ubuntu 24에 Puppeteer용 Chromium 설치하기

우분투 24(Ubuntu 24)에 퍼피티어(Puppeteer)를 깔고 크로미움(Chromium)을 깐다.
sudo -u www-data npx puppeteer browsers install chrome
다음에 크롬이 사용하는 의

000

1M

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

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

001

2M

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

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

000

2M

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

동시에 여러개의 비동기 처리를 할 때 Promise.all을 사용해서 처리 속도를 올리곤 한다.
const results = await Promise.all([fetchData1(), fetchData2()]);
이렇게 하면 데이

000

3M

천재의 식단

객관적인 사실과 작가의 주장이 섞여 있어서 어디까지가 증명된 과학인지 애매한 부분들이 있다. 저자의 주장을 함축하자면 인간이 산업화되면서 바뀐 식습관에 비해 아직 충분히 진화하지 않았기 때문에 이전 생활의 식습관이 건강에 좋다는

000

3M

WebP의 품질과 파일 크기

웹피(WebP)를 저장 할 때 품질을 얼마로 정해야 품질과 파일 크기 사이에서 적당한 지점을 찾을 수 있을지 실험을 좀 해봤다. 먼저 웹피에 대해서 알아보려면 반디소프트나 구글, 타이니파이의 글을 참고하면 좋다. 간단히 말하면 구

000

3M

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

사용하고 있는 맥북 프로는 맥세이프(MagSafe)로 충전을 하고 있는데 USB 젠더로 충전을 하고 싶어서 USB-C to C 케이블을 이용해서 충전해 봤다. 어떤 케이블은 충전이 되지 않았고 USB-C 케이블마다 충전 용량이 다

000

3M

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

화면 없이 웹 브라우징을 할 수 있는 제품으로 기억나는 최초는 팬텀(PhantomJS)이다. 화면도 없이 브라우저를 열고 스크린 샷도 찍고 탐색하는 것이 엄청 신기했다. 지금은 개발이 중단되었다. 팬텀의 불편함을 극복해보고자 캐스

000

4M

Node의 SQLite 지원

노드(Node)가 22.5.0 버전 부터 node:sqlite 모듈을 지원하기 시작했다. 번(Bun)이 SQLite를 지원해서 쓰고 있었는데 메모리 릭때문에 하루에 한번씩 재시작하고 있었다. 이 기회에 다시 노드로 바꿨다.
nod

000

6M

Astro와 Bun 적용

스벨트킷에서 아스트로(Astro)로 넘어왔다. 스벨트킷은 매우 만족하고 있고 회사에서도 많이 사용하는 툴이지만 단일 페이지 어플리케이션(single page application)의 한계를 그대로 가지고 있다. :target 셀렉

000

7M

로보락 S8 프로 울트라 사용 후기

사용하고 있던 로보락 S6가 고장났다. 레이저 센서가 돌지 않아서 청소를 시작할 수 없었다. 검색을 해보니 2만원정도에 교체용 모터를 사서 갈면 고칠 수 있을 것 같은데 배터리도 상태가 안 좋아서 그동안 계속 점찍어뒀던 S8 프로

000

7M

노드 간의 포함관계를 확인하는 contains

노드가 다른 노드를 포함하고 있는지 확인하고 싶을 때 Node.contains를 사용한다. 클릭 위치에 따라서 레이어가 열리고 닫히는 동작을 제어하고 싶을 때 유용하게 사용할 수 있다.
버튼 클릭으로 레이어를 열고 레이어가 아닌

000

9M

HTTP 리다이렉션과 메서드 변경

POST 액션으로 항목을 생성을 하고 생성된 항목의 상세페이지로 리다이렉션을 시켰는데 작동하지 않았다. 맨날 쓰던 기능이 왜 작동하지 않는지 봤더니 아무 생각없이 복사해온 HTTP 코드 307(Temporary Redirect)이

000

9M

Flask에서 SvelteKit으로

파이썬에 익숙해지고 싶어서 개발 언어를 바꾼지 사년만에 이번엔 스벨트킷으로 바꿨다. 생업으로는 자바스크립트를 많이 다루다보니 아무래도 파이썬 쓰는 시간이 적고 이런 정도의 코드를 짰다고 익숙해지는 것은 무리였다. 스벨트킷에 익숙해

000

10M

Focus, blur 이벤트와 focusin, focusout 이벤트

focus, blur 이벤트는 버블링되지 않지만 focusin, focusout 이벤트는 버블링 된다. 2011년에 한 제이쿼리 교육 자료에도 이 내용이 있는데 내 머리속에는 없다.
IE는 무려 2001년, 크롬과 사파리는 201

000

10M

사진의 날짜 정보 수정하기

사진 찍은 날짜를 바꾸고 싶다는 부탁을 받아서 제대로 수정하는 방법을 살펴봤다. 개인적으로는 애플 포토(Photos)를 사용해서 사진을 관리하는데 가끔 날짜가 이상한 사진은 간단하게 수정이 가능하다. 그런데 포토에서 수정한 사진은

000

10M

개인 공간

웹에 개인 공간을 검색해보니 인간이 안정감을 느끼는 다양한 공간과 거리에 대한 얘기들이 나오는데 관련이 있을 수도 있고 없을 수도 있는 얘기다.
집을 이사하면서 때가 잘 맞지 않아 3개월 정도 원룸에서 생활을 했다. 성인 두명,

000

1y

Visual Studio Code 자동 포매팅 안하고 저장하기

VS Code를 사용하는 많은 사람들이 자동 코드 포매팅을 켜놓았을 것이다. 코드를 저장하거나 복사 붙여넣기를 할 때에 미리 설정되어 있는 포매팅 규칙을 적용해주는 기능이다. 코드 포매팅에 들어가는 시간을 획기적으로 줄여주기 때문

000