Blog
의미에 맞는 href 사용
링크에 onclick 핸들러를 달 때 href에 #을 많이 사용하는데 특이하게 http://를 사용한 경우를 봤다. 딱히 신경쓰지 않고 있었는데 이로 인한 버그가 리포팅됐다. 사파리는 링크를 롱탭해서 프리뷰를 볼 수 있는데 http://로 href 값을 정하면 프리뷰에서 오류가 발생한다. 이 외에도 새탭을 연다든가 북마크로 저장을 한다든가 할 때도 오류가 발생할 것이다. href 값이 필요 없는 경우에는 <button> 요소를 사용하도록 하자. HTML의 의미가 왜 중요한지 말해주는 또 하나의 사례라고 할 수 …
dev |2025-08-24 | Comments (0)
클라우드 플레어 뒤에 있는 웹서버에서 사용자 IP를 로그로 남기기
클라우드 플레어 뒤에 있는 웹서버의 로그를 보니 클라우드 플에어 프록시 서버의 IP를 남기고 있다. 클라우드 플레어는 CF-Connecting-IP로 실제 IP를 넘겨주고 있어서 이것을 이용하게 설정할 필요가 있다. 엔진엑스의 real_ip 모듈을 사용하면 특정 IP 범위의 요청에서 $remote_addr의 값을 변경할 수 있게 해 준다. 클라우드 플레어의 IP 범위는 https://www.cloudflare.com/ips-v4/ 주소에서 텍스트 형태로 제공하고 있다. 이 것을 엔진엑스에서 set_real_ip_from으로 추 …
dev |2025-08-23 | Comments (0)
F1 더 무비
트레일러 영상이 나왔을 때 소리가 아이폰의 진동 센서와 연동되었다고 해서 사람들 사이에서 이슈였던 영화다. 메가박스 남양주 현대아울렛 스페이스원 돌비 시네마에서 봤는데 음향과 음량이 정말 뛰어났다. 자동차 엔진의 저음이 몸이 떨릴 정도로 강하게 전달 됐다. 영화 평점에서 시나리오가 0점이길래 내용이 그리 없나 싶었지만 나름 짜임새 있어서 재미있게 봤다. 결국 승리 트로피를 누가 받을지 궁금했는데 엔딩도 나름 괜찮았다. 레이싱을 잘 안다고 생각한 적은 없었는데 영화 처음에 나오는 데이토나 트랙도 아는 트랙이고 계속 해서 나오는 레 …
hobby |2025-08-16 | Comments (0)
웹 애니메이션 API
시작은 제이쿼리로 되어 있는 코드를 바닐라로 변환이 필요해서 였다. 화면에서 보이지 않다가 특정 조건에서 화면에 나오는 애니메이션을 보여주는 기능이었다. 챗지피티에 물어보니 전반적인 변환은 잘 해줬는데 화면에 나오기 직전에 display: none을 block로 바꿔주다 보니 트랜지션 애니메이션이 작동하지 않았다. element.offsetWidth;같이 레이아웃을 참조하면 애니메이션이 되지만 다른 방법은 없는지 제미나이에게 물어보니 element.animate를 사용해서 변환을 했다. display 조작의 영향을 받지 않고 의도대 …
dev |2025-08-09 | Comments (0)
CSS 네스팅과 우선순위
CSS 네스팅의 우선순위를 보다가 좀 독특한 사항이 있는 것을 발견했다. <b class="foo"><i>blue?</i></b> #a, b { i { color: blue; } } .foo i { color: green; } 이렇게 되어 있을 때 네스팅이 마치 아래와 같이 나눠져서 적용된다고 생각할 수 있다. /* WRONG! */ #a i { color: blue; } b i { color: blue; } .foo i { c …
dev |2025-07-19 | Comments (0)
CSS 네스팅과 미디어쿼리
CSS 네스팅(CSS nesting)은 SASS같은 CSS 전처리기에서 지원하던 문법인데 표준이 됐다. 모든 CSS 룰은 병렬로 선언이 되기 때문에 관리가 어렵다. 우선순위를 이용해서 어느정도 관리할 수는 있지만 여전히 선언이 여기저기 흩어지는 문제는 문법적으로 어떻게 할 방법이 없다. CSS 네스팅 구문을 활용하면 이러한 문제에 어느정도의 공통된 가이드를 만들 수 있다. CSS 네스팅 기본 문법만 좀 살펴보면 CSS 룰 안에 다른 CSS 룰을 포함해서 선언해서 일종의 상위 룰의 의존성을 갖게 해주는 문법이다. a { …
dev |2025-07-12 | Comments (0)
넷플릭스: 규칙 없음
나온지 좀 됐는데 아주 재미있게 읽었다. 한마디로 요약하자면 인재 밀도를 올리고, 솔직한 피드백을 주고 받고, 제약을 없애고 판단할 수 있게 했다는 내용이다. 읽으면서 문화적으로 잘 안맞는 부분도 있을 것 같다는 생각이 들었는데 책의 맨 마지막에 이런 국가나 문화적인 차이에 대해서 어떻게 대응했는지도 잘 설명해주고 있다. 회사의 조직이나 처한 위치에 따라 읽을 때마다 다르게 읽혀질 책 같다. 옆에 두고 생각날 때마다 읽으면 좋을 책이라고 생각된다.
book |2025-06-22 | Comments (0)
Vite 개발 환경에 정적 파일 디렉토리 추가하기
스벨트킷에서 src나 static 디렉토리가 아닌 다른 곳의 파일을 브라우저에서 접근하면 아래와 같은 403 오류가 발생한다. 403 Restricted The request url "/Users/hyeonseok/repo/photo-date/uploads/c8a1cbda-d16f-4289-a2b0-318f1ddfea6e.HEIC" is outside of Vite serving allow list. - /Users/hyeonseok/repo/photo-date/src/lib - /Users/hyeonseok/re …
dev |2025-05-18 | Comments (0)
다이얼로그 요소와 모달
개인적으로는 alert와 confirm과 같은 시스템 모달을 좋아하지만 이걸 그대로 쓰는 제품은 거의 없다. 어떻게든 디자인 아이덴티티를 적용하기위해 기존의 HTML 요소로 비슷하게 만드는 방법을 사용한다. 보기는 좋지만 시스템에서 제공하는 접근성이나 인터랙션을 비슷한 수준으로 만드려면 노력을 많이 해야 한다. 이러한 어려움을 없애기 위해서 dialog 요소와 관련 API가 나왔다. 대화 상자를 의미하는 dialog 요소는 단독으로 사용하면 그다지 인상적이지 않다. 기본적으로 화면에 나오지 않고 open 속성을 줘야 화면에 나 …
dev |2025-03-30 | Comments (0)
Cursor와 웹페이지 만들기
커서(Cursor)가 엄청 좋다는 얘기를 들어서 입코딩으로 간단한 페이지를 만들어봤다. 안드로이드 폰에서 배터리 정보를 보내주면 이걸 모아서 선그래프로 보여주는 페이지이다. 초기에 데이터를 읽어오고 쉘에서 텍스트 정리하는 부분은 챗지피티한테 물어봐서 만들었다. 귀찮아서 텍스트로 출력해 놨는데 AI 툴도 써볼겸해서 그래프로 출력해봤다. 비주얼 스튜디오 코드(VSCode)를 포크한 제품이어서 실행하면 아주 익숙한 화면이 나온다. 깔려 있는 VSCode의 설정을 가져올 수 있다. 우측 패널에서 챗봇을 사용할 수 있고 코드 수정된 …
dev |2025-03-01 | Comments (0)