Blog
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)
깔끔한 모니터링 도구 Beszel
모니터릭스(Monitorix)라는 좀 된 모니터링 도구를 쓰다가 긱뉴스에 나온 베스젤(Beszel)을 깔아봤다. 명령어 각 한줄로 서버와 클라이언트를 설치할 수 있다. 시스템 데몬에 자동으로 등록까지 된다. 그래프를 확대한다든가 같은 세밀한 조작은 안되지만 화면도 깔끔하고 간편하게 쓰기 좋다. 터먹스에도 깔아봤는데 루팅을 안하면 권한때문에 값이 제대로 안올라온다. 설정 화면에 들어가면 뭔가 다른 화면이 나오는데 백엔드로 포켓베이스(PocketBase)를 사용하고 있다. 베스젤 화면은 기능이 좀 부족한데 서버 이름 ……
software |2025-02-22 | Comments (0)
구형 맥북 운영체제 복구하기
2016 레티나 맥북(Retina Macbook)에 우분투 서버를 깔았는데 applespi spi-APP000D:00: SPI transfer timed out이라는 오류가 나면서 부팅이 제대로 안된다. 키보드, 터치패드, Wi-Fi 모듈이 제대로 작동 안 할때 발생한다고 한다. 드라이버를 설치하라고 하는데 Wi-Fi가 안되니 설치를 할 수가 없다. 랜선으로 연결하고 설치를 하면 되는 것 같은데 포기하고 다시 맥오에스로 돌아가기로 했다. 화면 해상도도 제대로 안잡힌다. 복구 모드로 들어가서 설치를 할 수 있는데 파티션이 다 날 ……
life |2025-02-21 | Comments (0)
맥오에스에서 launchd로 서비스 띄우기
맥오에스에서 systemd와 같은 역할을 하는 기능이 있나 찾아보니 launchd가 있다고 한다. Launchd는 에이전트(agent)와 데몬(daemon) 두가지로 띄울 수 있는데 에이전트는 사용자 계정을 로그인 했을 때 뜨게 되고 데몬은 맥이 부팅되면 뜨게 된다. 에이전트는 ~/Library/LaunchAgents/에 넣고 데몬은 /Library/LaunchDaemons/에 넣는다. 데몬은 root 권한이 필요하다. 형식은 plist XML파일로 한다. <?xml version="1.0" encoding="UTF ……
dev |2025-02-18 | Comments (0)
맥오에스에서 로컬 로그인을 해야만 SSH 연결이 되는 현상
보통은 부팅 후 로컬에서 로그인을 하지 않아도 원격에서 로그인 할 수 있어야 한다. 그런데 어떤 연유로 맥을 재부팅한 후에 그 컴퓨터에서 로그인을 해야만 SSH연결이 됐다. SSH만 그런 것이 아니라 launch deamon도 로그인을 해야 그제서야 작동을 했다. 결론부터 말하자면 파일볼트(FileVault)가 켜져 있으면 꺼야 작동을 한다. 사용자 로그인 화면이 나와서 마치 운영체제가 뜬 것으로 생각할 수 있지만 사실 스토리지가 잠겨 있는 상태이고 사용자 비밀번호가 입력이 되어야 스토리지에 접근이 된다. 재부팅이 엄청 빠르게 ……
dev |2025-02-16 | Comments (0)
오디오엔진 A2+ 와이어리스
오랬동안 눈여겨 보고 있던 오디오엔진 A2+ 와이어리스를 구매했다. 패키지도 성의 있고 작고 아담한 액티브 스피커다. 데스크에 놓고 쓰기에 디자인도 예쁘다. RCA와 3.5mm, USB 입력이 되고 연결하는 전선도 한다발 들어 있다. 발란스 입력은 없다. 그래도 스피커인데 유선 연결을 해야하나 생각했지만 큰 차이 없다는 리뷰들이 있어서 그냥 블루투스로 연결했다. L-R 연결은 전선으로 연결하게 되어 있다. 크기가 작아서 그런지 음량이 부족하다. 고음역대는 실크돔 트위터를 사용한다고 하는데 만족스럽다. 전반적인 음질은 만족스 ……
life |2025-02-15 | Comments (0)