신현석(Hyeonseok Shin) - mysetting

11:49 5/30

hyeonseok.com

mobile screenshot relative

11:49

hyeonseok.com

mobile screenshot

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

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

최종 피드 수집: 2024-05-31 04:45

전체 (48)

15d

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

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

000

1M

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

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

000

2M

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

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

000

3M

Flask에서 SvelteKit으로

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

000

3M

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

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

000

4M

사진의 날짜 정보 수정하기

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

000

4M

개인 공간

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

000

9M

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

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

000

10M

:has() 셀렉터

부모 요소 셀렉터는 오래전 부터 많은 개발자들이 원하는 기능이었다. 하지만 탐색 순서나 순환 참조와 같은 브라우저 성능과 관련된 구현 문제가 있어서 오랬동안 실현되지 못했다. 20여년이 지나서야 CSS4 스펙에 추가되고 2021년

000

11M

PG RX-78-2 Gundam 30th Anniversary Extra Finish Version

10년도 더 전에 일을 좀 도와드리고 선물로 받은 키트다. 그동안 엄두가 안나서 조립을 못하고 있었는데 계속 들고만 다니고 있어서 맘먹고 조립을 했다. PG는 처음으로 조립해 봤는데 무게도 그렇고 MG나 RG에서는 느껴보지 못한

000

11M

두 변수의 값 서로 바꾸기

프로그래밍 커리큘럼 초기에 나오는 주제다. 보통 임시 변수를 쓴다. temp에 a를 넣고 a에 b를 넣고 b에 temp를 넣는 식이다. 숫자라면 임시 변수 없이도 가능한데, 더했다 빼거나, 곱했다 나누기, 또는 XOR 연산을 사용

000

1y

text-decoration: underline 의 하위 요소 전파

파이어폭스와 크롬에서는 나오지 않는 밑줄이 사파리에서만 나왔다. 사파리의 랜더링이 잘 못 되었을 거라고 생각하고 살펴봤는데 오히려 파이어폭스에서 밑줄이 나오지 않는 것이 이상했다. MDN에서 text-decoration을 보니 부

000

1y

비밀번호의 강도를 알려주는 zxcvbn

사용자가 추측하기 쉬운 비밀번호를 사용하면 계정이 탈취될 수 있기 때문에 보통 비밀번호 규칙을 정해서 너무 쉬운 비밀번호는 사용 하지 못하게 한다. 최소 길이를 제한하거나 영어 대소문자나 숫자, 특수문자를 포함하도록 하는 경우가

000

1y

DOM의 변화를 감지하는 MutationObserver

보통 자바스크립트 프레임워크를 사용해서 개발할 때에는 DOM을 직접 다루지 않아도 모든 요소를 제어할 수 있기 떄문에 거의 사용할 일이 없는 API이다. 하지만 플러그인이나 확장 기능 개발과 같이 직접 제어할 수 없는 부분의 영향

001

1y

지정된 디렉토리에서 Git 명령어 실행하기

크론탭에 git pull을 주기적으로 하는 명령어를 등록하려고 했다. 보통은 cd로 이동하고 실행을 하는데 특정 디렉토리에서 pull을 하는 명령어가 없나 찾아보니 역시나 있었다. -C를 이용해서 지정된 디렉토리에서 Git 명령을

000

1y

SvelteKit을 SPA로 사용하기

검색 엔진 최적화(SEO; search engine optimization) 측면에서는 서버측 랜더링(SSR; server side rendering)을 사용해야 하지만 검색 엔진에 노출되지 않는 사이트에 SSR을 적용할 이유는

000

1y

event.keyCode와 event.code, event.key

새로 설정한 스벨트킷(SvelteKit) 프로젝트에 기존에 사용하던 UI 모듈을 추가하고 있었는데 못보던 타입스크립트 오류가 보였다.
Hint: 'keyCode' is deprecated. (ts)
if (event.keyCode

002

1y

런타임 CSS-in-JS의 성능

"Why We're Breaking Up with CSS-in-JS"(번역)
전에도 CSS-in-JS가 성능 문제를 가지고 있다는 글을 본 적이 있는데 이번에는 글을 쓴 사람이 이모션(emotion)의 컨트리뷰터여서 좀 더 사람들

005

1y

HTML을 SVG로 변환하기

"Forking Chrome to turn HTML into SVG".
크로미움을 패치해서 HTML을 SVG로 변환하는 과정을 설명한 글이다. 특별한 장점이 있어서 변환을 했다고 생각되지는 않는데 재미있는 시도라고 생각된다. 요즘

004

1y

테이블에 border-radius가 적용되지 않을 때

테이블에 스타일을 적용할 때 보통 아래와 같은 스타일을 적용해서 제어를 한다.
table {
table-layout: fixed;
border-collapse: collapse;
}
이렇게 해야 셀의 너비를 원하는

000