Blog
오픈AI 아틀라스 브라우저
오픈 AI에서 아틀라스라는 브라우저를 내놨다고 해서 깔아봤다. 챗GPT 계정으로 로그인 해야 사용할 수 있다. 뭔가 오류가 있는지 패스키를 사용할 수 없다. 다른 브라우저의 정보를 가져온다든가 기본 브라우저 설정, 기본적인 아틀라스 사용법 안내를 받으면 설치가 완료된다. 챗GPT 계정만든지 벌써 3년이 되었다. 첫인상은 아주 심플한데 놀랍게도 주소창이 없다. 주소창이 있을 것 같은 곳에 마우스를 올리면 주소창이 나오고 여기에 입력을 할 수 있다. 메시지를 입력하면 챗GPT와 연결되는 추천 메시지가 나 …
browser | 2025-10-25 | Comments (0)
극장판 귀멸의 칼날: 무한성편
스케일도 커졌고 액션도 커졌다. 무한열차도 수준급이었고 무한성편도 그렇다. 이번 것은 1편이고 3편까지 나와야 단행본 스토리까 끝날 것 같은데 완결 보려면 시간이 꽤나 걸릴 것 같다. 러닝타임이 좀 길다. 흥행에 어느정도 자신이 있어서 이런 구성으로 나올 수 있는 것 같다. 돌비 시네마에서 보길 잘했다고 생각할 정도로 액션이나 극적인 효과가 좋다. 포스터를 좀 찾아봤는데 애니맥스 플러스의 트위터 계정에서 고화질 포스터를 올려놨다.
hobby | 2025-09-06 | Comments (0)
의미에 맞는 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)