만드는 이야기 ·
키 입력 시퀀스로 만드는 이스터에그 — 보안 기능과 구분하기
2026-09-10: 설명과 코드 예시를 보완했습니다. 아래 예시는 글의 설계 의도를 전달하기 위한 것이며, 원 프로젝트에 반영된 변경 내역과는 구분합니다. ↑ ↑ ↓ ↓ ← → ← → B A 이 순서를 보면 손부터 움직이는 사람이 있을 것이다. 게임 속 비밀 코드를 웹에도 살짝 옮겨봤다. 정해진 키 순서를 입력하면...
THE WRITING ARCHIVE
저마다 빛나는 이야기
프론트엔드 개발자 윤창원의 기술과 프로젝트, 일상과 마음에 관한 기록.
하나의 글, 하나의 별. 마음이 닿는 이야기부터 읽어 보세요.
65개의 기록 · 3 / 3페이지
사유와 일상 ·
늦게 당도한 파도가 가장 깊은 곳을 적신다
흔히 백 세 시대라고 말한다. 오래 살 수 있다는 이야기인데, 가끔은 이상하게 마음이 더 급해진다. “이만큼 살았는데, 나는 왜 아직 여기에 있을까.” 생각해보면 수명은 길게 잡으면서 성장에 허락하는 시간은 꽤 짧게 잡아둔다. 마흔쯤에는 이만큼, 쉰쯤에는 저만큼. 그 뒤의 삶은 벌써 정리하는 시간처럼 여긴다. 백 년...
만드는 이야기 ·
선불권을 디지털로 — 프리페이 실험기
이름과 날짜를 쓰고, 옆에 “3회 남음”이라고 적는다. 헬스장, 미용실, 소형 학원, 동네 카페와 음식점에서도 볼 수 있는 선불권 관리 방식이다. 종이 자체가 문제는 아니다. 다만 손님은 잔액과 사용 내역을 직접 확인하기 어렵고, 기록을 잃어버리거나 서로 기억하는 내용이 다르면 확인할 근거가 부족해진다. 종이 한 장...
개발과 기술 ·
커스텀 인풋과 키보드, 프로토타입에서 설계로 (2부)
2026-09-10: 설명과 코드 예시를 보완했습니다. 아래 예시는 글의 설계 의도를 전달하기 위한 것이며, 원 프로젝트에 반영된 변경 내역과는 구분합니다. 나는 프로토타입을 만드는 걸 좋아한다. 머릿속에서 가능할 것 같은 일을 일단 움직이게 해보는 쪽이다. 한글 입력도 직접 다뤄보고 싶어서 커스텀 인풋과 키보드를...
사유와 일상 ·
한글 입력의 미스터리: 컴포지션 이슈의 정체 (1부)
2026-09-10: 설명과 코드 예시를 보완했습니다. 아래 예시는 글의 설계 의도를 전달하기 위한 것이며, 원 프로젝트에 반영된 변경 내역과는 구분합니다. 한글을 입력하다 포커스를 옮겼는데 이전 조합이 남았다. 값을 비웠는데 다음 입력에 영향을 주기도 했다. 화면에 글자가 보인다고 입력이 끝난 것은 아니었다. 커스...
개발과 기술 ·
React Query 옵션 생성 자동화 — 요청의 의미까지 구분하기
2026-09-10: 설명과 코드 예시를 보완했습니다. 아래 예시는 글의 설계 의도를 전달하기 위한 것이며, 원 프로젝트에 반영된 변경 내역과는 구분합니다. API 함수를 하나 만들면 query key를 적고, 옵션을 만들고, 다시 비슷한 파일을 만든다. Query, Mutation, Infinite Query를 쓸...
사유와 일상 ·
AI는 왜 페더레이션을 추천할까?
2026-09-10: 설명과 코드 예시를 보완했습니다. 아래 예시는 글의 설계 의도를 전달하기 위한 것이며, 원 프로젝트에 반영된 변경 내역과는 구분합니다. MFE 구조를 검토하며 Module Federation과 iframe을 AI에 물었다. 내가 받은 답변은 자원 공유와 성능에 자주 무게를 뒀다. 큰 서비스에는...
사유와 일상 ·
사진
© uiwwsw · 본인 소유의 글·이미지에 대한 무단 복제·재게시를 허용하지 않습니다. 개인 열람·원문 링크 공유·검색 색인과 제한적인 미리보기는 허용합니다. 법령상 이용 예외, 기존 이용 허락, 코드·제삼자 자료의 기존 라이선스는 유지합니다. 콘텐츠 이용 안내
개발과 기술 ·
Object.entries의 키 타입을 보완하기 — typedEntries의 조건과 한계
2026-09-10: 설명과 코드 예시를 보완했습니다. 아래 예시는 글의 설계 의도를 전달하기 위한 것이며, 원 프로젝트에 반영된 변경 내역과는 구분합니다. 객체를 순회할 때 Object.entries()를 자주 쓴다. 그런데 키를 확인한 뒤 그 키에 맞는 값의 메서드를 쓰려면 타입이 아쉬울 때가 있다. 값이 유니온...
개발과 기술 ·
빈 팝업을 줄이는 이미지 로딩 상태 설계
2026-09-10: 설명과 코드 예시를 보완했습니다. 아래 예시는 글의 설계 의도를 전달하기 위한 것이며, 원 프로젝트에 반영된 변경 내역과는 구분합니다. 팝업은 열렸는데 내용이 없다. 이미지가 도착하기 전에 팝업의 틀부터 나타난 것이다. 개발 중에는 캐시 덕분에 지나치기 쉽고, 느린 연결에서는 그대로 드러난다....
개발과 기술 ·
하나의 UI를 나누어 보여주는 Step 컴포넌트
2026-09-10: 설명과 코드 예시를 보완했습니다. 아래 예시는 글의 설계 의도를 전달하기 위한 것이며, 원 프로젝트에 반영된 변경 내역과는 구분합니다. 회원가입 항목을 PC에서는 한 화면에 놓고, 모바일에서는 몇 단계로 나누고 싶었다. 날짜와 시간도 한꺼번에 입력하거나 순서대로 입력하게 할 수 있다. 표시 방식...
사유와 일상 ·
팀으로서 일을 한다는 것
팀으로서 일을 한다는 것은 마치 한 그림을 여럿이서 그리는 것과 같다. 각자가 알아서 열심히만 그리다 보면, 나중에 완성된 그림은 여러 조각이 어색하게 얽힌 결과물이 되기 쉽다. 각자가 예상한 해상도가 다를 수도 있다. 누구는 흐릿하게 그렸고, 누구는 너무 정밀하게 그리느라 시간 안에 끝내지 못한다. 그렇다면 어떻게...
개발과 기술 ·
React Slot 패턴 — 자식에게 스타일과 클릭을 전달하는 규칙
2026-09-10: 설명과 코드 예시를 보완했습니다. 아래 예시는 글의 설계 의도를 전달하기 위한 것이며, 원 프로젝트에 반영된 변경 내역과는 구분합니다. 버튼에 공통 스타일을 넣어두었는데, 어떤 곳에서는 그 모양 그대로 링크를 쓰고 싶을 때가 있다. 스타일을 다시 적자니 중복이고, 링크 바깥에 button을 하나...
개발과 기술 ·
useStorage — 같은 창과 다른 탭의 변경을 구독하는 React 훅
2026-09-10: 설명과 코드 예시를 보완했습니다. 아래 예시는 글의 설계 의도를 전달하기 위한 것이며, 원 프로젝트에 반영된 변경 내역과는 구분합니다. 설정값 하나를 localStorage에 저장하는 일은 간단하다. 같은 값을 여러 컴포넌트가 보여주고, 다른 탭에서도 바꿀 수 있게 되면 저장 이후의 일이 남는다...
개발과 기술 ·
왜 또 “컨펌 모달”인가?
2026-09-10: 설명과 코드 예시를 보완했습니다. 아래 예시는 글의 설계 의도를 전달하기 위한 것이며, 원 프로젝트에 반영된 변경 내역과는 구분합니다. 삭제 버튼을 누르면 모달을 열고, 확인을 누르면 삭제 함수를 실행한다. 이런 코드를 이벤트 핸들러마다 쓰다 보니 확인창을 다루는 부분이 반복됐다. 실행할 함수에...
개발과 기술 ·
두 번의 pointerdown 감지하기 — 시간·거리·기존 이벤트를 함께 다루기
2026-09-10: 설명과 코드 예시를 보완했습니다. 아래 예시는 글의 설계 의도를 전달하기 위한 것이며, 원 프로젝트에 반영된 변경 내역과는 구분합니다. 크기 조정 핸들을 두 번 누르면 원래 크기로 돌아가게 하고 싶었다. 이때 두 입력을 얼마나 가까운 간격으로 받아들일지 직접 정할 수 있도록 작은 로직을 실험했다...
개발과 기술 ·
테이블의 요약과 상세 보기 — 최신 내용을 유지하는 컴포넌트
2026-09-10: 설명과 코드 예시를 보완했습니다. 아래 예시는 글의 설계 의도를 전달하기 위한 것이며, 원 프로젝트에 반영된 변경 내역과는 구분합니다. 긴 설명을 테이블 셀에 전부 넣으면 한눈에 훑기 어렵고, 잘라놓기만 하면 필요한 내용을 읽을 수 없다. 평소에는 짧게 보여주고 누르면 전체를 여는 컴포넌트를 만...