사유와 일상 ·
사진
사진 3장으로 남긴 이야기
THE WRITING ARCHIVE
저마다 빛나는 이야기
프론트엔드 개발자 윤창원의 기술과 프로젝트, 일상과 마음에 관한 기록.
하나의 글, 하나의 별. 마음이 닿는 이야기부터 읽어 보세요.
58개의 기록 · 3 / 3페이지
개발과 기술 ·
Object.entries의 키 타입을 보완하기 — typedEntries의 조건과 한계
2026-09-10: 설명과 코드 예시를 보완했습니다. 아래 예시는 글의 설계 의도를 전달하기 위한 것이며, 원 프로젝트에 반영된 변경 내역과는 구분합니다. 객체를 순회할 때 Object.entries()를 자주 사용한다. TypeScript에서는 값이 유니온으로 추론되더라도 키와 값의 구체적인 대응 관계가 그대로...
개발과 기술 ·
빈 팝업을 줄이는 이미지 로딩 상태 설계
2026-09-10: 설명과 코드 예시를 보완했습니다. 아래 예시는 글의 설계 의도를 전달하기 위한 것이며, 원 프로젝트에 반영된 변경 내역과는 구분합니다. 팝업의 틀은 열렸는데 이미지가 아직 준비되지 않으면 사용자는 빈 화면을 보게 된다. 캐시가 있는 개발 환경에서는 잘 드러나지 않아도 느린 연결에서는 쉽게 확인할...
개발과 기술 ·
하나의 UI를 나누어 보여주는 Step 컴포넌트
2026-09-10: 설명과 코드 예시를 보완했습니다. 아래 예시는 글의 설계 의도를 전달하기 위한 것이며, 원 프로젝트에 반영된 변경 내역과는 구분합니다. 회원가입이나 날짜 입력은 같은 항목을 PC에서는 한 화면에, 모바일에서는 여러 단계로 보여줄 수 있다. 입력 항목 자체를 중복 작성하지 않고 표시 방식만 바꾸고...
사유와 일상 ·
팀으로서 일을 한다는 것
팀으로 일하는 것은 한 그림을 여럿이서 그리는 일과 비슷하다. 각자가 자기 속도와 기준으로 열심히 그려도, 마지막에 조각을 합쳤을 때 어긋날 수 있다. 누군가는 세부를 끝까지 다듬고, 누군가는 아직 큰 형태를 잡고 있다면 같은 시간을 써도 완성의 기준이 달라진다. 그래서 처음부터 모든 부분을 선명하게 만들기보다, 함...
개발과 기술 ·
React Slot 패턴 — 자식에게 스타일과 클릭을 전달하는 규칙
2026-09-10: 설명과 코드 예시를 보완했습니다. 아래 예시는 글의 설계 의도를 전달하기 위한 것이며, 원 프로젝트에 반영된 변경 내역과는 구분합니다. 버튼처럼 보이는 UI를 링크로 사용하고 싶을 때, 바깥에 button을 하나 더 감싸면 인터랙티브 요소가 중첩될 수 있다. 자식 요소가 실제 DOM을 담당하고...
개발과 기술 ·
useStorage — 같은 창과 다른 탭의 변경을 구독하는 React 훅
2026-09-10: 설명과 코드 예시를 보완했습니다. 아래 예시는 글의 설계 의도를 전달하기 위한 것이며, 원 프로젝트에 반영된 변경 내역과는 구분합니다. 여러 컴포넌트에서 같은 localStorage 값을 쓸 때, 저장된 값과 화면의 상태가 어긋나지 않게 하고 싶었다. 여기서 먼저 확인할 점이 있다. 브라우저의...
개발과 기술 ·
확인 모달을 콜백으로 연결하기 — 대기·실패·중복 요청까지
2026-09-10: 설명과 코드 예시를 보완했습니다. 아래 예시는 글의 설계 의도를 전달하기 위한 것이며, 원 프로젝트에 반영된 변경 내역과는 구분합니다. 삭제처럼 되돌리기 어려운 작업에는 실행 전 확인이 필요할 수 있다. 매 이벤트 핸들러마다 모달을 열고 응답을 기다리는 코드를 반복하지 않도록, 실행할 함수를 확...
개발과 기술 ·
두 번의 pointerdown 감지하기 — 시간·거리·기존 이벤트를 함께 다루기
2026-09-10: 설명과 코드 예시를 보완했습니다. 아래 예시는 글의 설계 의도를 전달하기 위한 것이며, 원 프로젝트에 반영된 변경 내역과는 구분합니다. 크기를 조정하는 핸들에서 두 번의 포인터 입력으로 초기화하는 동작을 만들고 싶었다. 브라우저의 더블 클릭 판정 대신, 입력 간격을 직접 정할 수 있는 작은 로직...
개발과 기술 ·
테이블의 요약과 상세 보기 — 최신 내용을 유지하는 컴포넌트
2026-09-10: 설명과 코드 예시를 보완했습니다. 아래 예시는 글의 설계 의도를 전달하기 위한 것이며, 원 프로젝트에 반영된 변경 내역과는 구분합니다. 테이블에서는 긴 내용을 짧게 보여주고, 필요할 때 전체를 열어볼 수 있으면 좋겠다. 같은 데이터를 요약과 상세 두 방식으로 렌더링하는 Magnifying 컴포넌...