신현석(Hyeonseok Shin) - mysetting

11:49 5/30

hyeonseok.com

mobile screenshot relative

11:49

hyeonseok.com

mobile screenshot

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

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

최종 피드 수집: 2025-08-29 23:16

전체 (76)

5d

의미에 맞는 href 사용

링크에 onclick 핸들러를 달 때 href에 #을 많이 사용하는데 특이하게 http://를 사용한 경우를 봤다. 딱히 신경쓰지 않고 있었는데 이로 인한 버그가 리포팅됐다.
사파리는 링크를 롱탭해서 프리뷰를 볼 수 있는데 ht

000

6d

클라우드 플레어 뒤에 있는 웹서버에서 사용자 IP를 로그로 남기기

클라우드 플레어 뒤에 있는 웹서버의 로그를 보니 클라우드 플에어 프록시 서버의 IP를 남기고 있다. 클라우드 플레어는 CF-Connecting-IP로 실제 IP를 넘겨주고 있어서 이것을 이용하게 설정할 필요가 있다.
엔진엑스의 r

000

13d

F1 더 무비

트레일러 영상이 나왔을 때 소리가 아이폰의 진동 센서와 연동되었다고 해서 사람들 사이에서 이슈였던 영화다. 메가박스 남양주 현대아울렛 스페이스원 돌비 시네마에서 봤는데 음향과 음량이 정말 뛰어났다. 자동차 엔진의 저음이 몸이 떨릴

000

20d

웹 애니메이션 API

시작은 제이쿼리로 되어 있는 코드를 바닐라로 변환이 필요해서 였다. 화면에서 보이지 않다가 특정 조건에서 화면에 나오는 애니메이션을 보여주는 기능이었다. 챗지피티에 물어보니 전반적인 변환은 잘 해줬는데 화면에 나오기 직전에 dis

000

1M

CSS 네스팅과 우선순위

CSS 네스팅의 우선순위를 보다가 좀 독특한 사항이 있는 것을 발견했다.
<b class="foo"><i>blue?</i></b>
#a, b {
i {
color: blue;
}
}
.foo i {
color: green

000

1M

CSS 네스팅과 미디어쿼리

CSS 네스팅(CSS nesting)은 SASS같은 CSS 전처리기에서 지원하던 문법인데 표준이 됐다. 모든 CSS 룰은 병렬로 선언이 되기 때문에 관리가 어렵다. 우선순위를 이용해서 어느정도 관리할 수는 있지만 여전히 선언이 여

000

2M

넷플릭스: 규칙 없음

나온지 좀 됐는데 아주 재미있게 읽었다. 한마디로 요약하자면 인재 밀도를 올리고, 솔직한 피드백을 주고 받고, 제약을 없애고 판단할 수 있게 했다는 내용이다. 읽으면서 문화적으로 잘 안맞는 부분도 있을 것 같다는 생각이 들었는데

000

3M

Vite 개발 환경에 정적 파일 디렉토리 추가하기

스벨트킷에서 src나 static 디렉토리가 아닌 다른 곳의 파일을 브라우저에서 접근하면 아래와 같은 403 오류가 발생한다.
403 Restricted
The request url "/Users/hyeonseok/repo/pho

000

4M

다이얼로그 요소와 모달

개인적으로는 alert와 confirm과 같은 시스템 모달을 좋아하지만 이걸 그대로 쓰는 제품은 거의 없다. 어떻게든 디자인 아이덴티티를 적용하기위해 기존의 HTML 요소로 비슷하게 만드는 방법을 사용한다. 보기는 좋지만 시스템에

001

5M

Cursor와 웹페이지 만들기

커서(Cursor)가 엄청 좋다는 얘기를 들어서 입코딩으로 간단한 페이지를 만들어봤다. 안드로이드 폰에서 배터리 정보를 보내주면 이걸 모아서 선그래프로 보여주는 페이지이다. 초기에 데이터를 읽어오고 쉘에서 텍스트 정리하는 부분은

000

6M

깔끔한 모니터링 도구 Beszel

모니터릭스(Monitorix)라는 좀 된 모니터링 도구를 쓰다가 긱뉴스에 나온 베스젤(Beszel)을 깔아봤다. 명령어 각 한줄로 서버와 클라이언트를 설치할 수 있다. 시스템 데몬에 자동으로 등록까지 된다.
그래프를 확대한다든

000

6M

구형 맥북 운영체제 복구하기

2016 레티나 맥북(Retina Macbook)에 우분투 서버를 깔았는데 applespi spi-APP000D:00: SPI transfer timed out이라는 오류가 나면서 부팅이 제대로 안된다. 키보드, 터치패드, Wi-

000

6M

맥오에스에서 launchd로 서비스 띄우기

맥오에스에서 systemd와 같은 역할을 하는 기능이 있나 찾아보니 launchd가 있다고 한다. Launchd는 에이전트(agent)와 데몬(daemon) 두가지로 띄울 수 있는데 에이전트는 사용자 계정을 로그인 했을 때 뜨게

000

6M

맥오에스에서 로컬 로그인을 해야만 SSH 연결이 되는 현상

보통은 부팅 후 로컬에서 로그인을 하지 않아도 원격에서 로그인 할 수 있어야 한다. 그런데 어떤 연유로 맥을 재부팅한 후에 그 컴퓨터에서 로그인을 해야만 SSH연결이 됐다. SSH만 그런 것이 아니라 launch deamon도 로

000

6M

오디오엔진 A2+ 와이어리스

오랬동안 눈여겨 보고 있던 오디오엔진 A2+ 와이어리스를 구매했다. 패키지도 성의 있고 작고 아담한 액티브 스피커다. 데스크에 놓고 쓰기에 디자인도 예쁘다. RCA와 3.5mm, USB 입력이 되고 연결하는 전선도 한다발 들어 있

000

7M

크론탭 명령어의 퍼센트 기호

The "sixth" field (the rest of the line) specifies the command to be run. The entire command portion of the line, up to a newlin

000

8M

CSS clamp() 함수

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

000

9M

Android 폰에 웹서버 설치하기

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

001

10M

Ubuntu 24에 Puppeteer용 Chromium 설치하기

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

000

10M

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

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

002