스크린리더와 키보드 사용자를 위한 ‘본문 바로가기’ 구현하기

탭조작 관련 연습을 하면서 일전에도 한 번 이야기를 들은 적은 있는데, 이번 댕누비 프로젝트를 구현하며 처음으로 만들어 보게 되었다! 그런 김에 정리겸 남겨보는 글.Skip Link란? Skip Link(스킵 링크)는 키보드나 스크린리더 사용자들이 페이지에 처음 진입했을 때, 헤더나 내비게이션 같은 반복적인 요소를 건너뛰고 바로 주요 콘텐츠 영역(main)으로 이동할 수 있도록 도와주는 링크입니다.예를 들어, 키보드만 사용하는 사용자는 Tab 키를 이용해 포커스를 이동합니다. 이때 매번 상단 메뉴를 전부 지나쳐야 본문을 볼 수 있다면 굉장히 번거롭고 피로합니다. Skip Link는 이러한 비효율적인 이동을 없애고 접근성을 높이기 위한 가장 기본적인 장치입니다.Skip Link의 장점웹 접근성 향상 스크린..

• format_list_bulleted HTML
• · 2025. 6. 2.

[댕누비/React] Firestore 인증 상태 유지 + 사용자 문서 생성 하는 법

firebase+react로 웹 서비스를 만들며, 로그인은 분명히 됐는데 사용자의 정보가 UI에 반영되지 않거나, 새로고침을 하면 로그아웃된 것처럼 보이는 문제가 발생했습니다. 이 문제는 사용자에게 직접적인 불편을 주는 치명적인 UX 문제라는 점! 이번 글에서는 이 문제의 원인과 실제로 어떻게 해결했는지를 정리해보려 합니다.문제 상황`user?.nickname` 등 속성이 `undefined` 상태새로고침하면 로그인 정보가 사라지고 다시 로그인하라고 나옴Google 로그인은 되지만, Firestore에 사용자 문서가 없음해결 방법 1. 인증 유지 설정Firebase는 기본적으로 세션 기반 인증을 사용합니다.따라서 새로고침 후 로그인 정보가 날아가지 않도록, 지속성 설정이 필요합니다.await setPer..

• format_list_bulleted PROJECTS
• · 2025. 5. 21.

[댕누비/React] 공공 API 요청 한도 초과 대응

React/typescript + Firebase 기반으로 반려동물과 함께할 수 있는 국내 여행지를 소개하는 웹사이트 댕누비를 개발하며 겪었던 많은 오류들중에서도 제일 골치가 아팠던건 API 요청 초과 문제. 개발을 하면서도 계속 새로 호출하니 하다보면 요청량을 초과해서 결국 개발 중에도 페이지가 먹통이 되는 상황까지 벌어졌습니다...ㅠㅠ 어쨌든 이번 글에서는 그 문제를 어떻게 해결했는지, 그리고 캐싱 구조를 어떻게 설계했는지를 기록해보려고 합니다! 문제 상황지역별 페이지, 테마 페이지에서 매번 API 요청지역변경, 테마변경과 같은 페이지 전환, 새로고침 등등에서도 동일한 API 호출을 반복→ 결국 일일 1000건 제한 초과로 LIMITED_NUMBER_OF_SERVICE_REQUESTS_EXCEEDS_..

• format_list_bulleted PROJECTS
• · 2025. 5. 8.

[댕누비/React] API 인증 오류, 인코딩 문제 해결

이번에 새로 '반려동물 동반 관광 사이트' 프로젝트를 작업중인데, 하면서 겪었던 오류들을 적어보고자한다. api 연결이 익숙하지도 않지만 진짜 생각치도 못한 원인을 찾은 김에 ㅠㅠ..!!!ㅋㅋㅋㅋㅋ오류 상황: 인증키가 맞는데 계속 인증이 실패하는 문제.env에 VITE_TOUR_API_KEY= (키번호)%2F(키번호) 이렇게 키를 잘 넣었음!!!console.log(import.meta.env.VITE_TOUR_API_KEY) 하면 정상 출력됨그런데 최종 요청 URL을 찍어보니:...ServiceKey=(키번호)%252F(키번호)...=> 알고보니 %2F → %252F 로 이중 인코딩 상태가 발생인코딩에 대한 이해도도 부족한 지라 정말 '이거 왜이래???' 라는 생각만 들던 차에 이중 인코딩의 문제라는 ..

• format_list_bulleted PROJECTS
• · 2025. 4. 26.

[감정일기장/ React] 웹 스토리지 이용과 배포 방법

최근에 만든 React 기반 일기장을 웹 스토리지를 이용해 데이터에 브라우저에 저장하고, Vercel에 배포하기까지의 과정을 공유하려고 해요. (웹 스토리지를 이용하면 서버 없이도 사용자가 작성한 일기를 브라우저에 안전하게 저장하고 불러올 수 있음!) 1. localStorage로 일기 저장하기 서버를 따로 두지 않고 데이터를 저장하려면 웹 스토리지(localStorage) 를 사용하는 게 간단하고 편리해요.localStorage는 브라우저에 key-value 형식으로 데이터를 저장할 수 있는 저장소입니다.localStorage 기본 사용법// 저장하기localStorage.setItem("key", "value");// 불러오기const data = localStorage.getItem("key");..

• format_list_bulleted PROJECTS
• · 2025. 4. 15.

[투두리스트/ React] React Hook을 이용한 렌더링 최적화

기존에 만들었었던 투두리스트에 추가적인 react hook들을 배우며 렌더링 최적화를 겸해 공부할겸 코드를 정리했다. (큰 프로젝트는 아니지만 프로젝트가 커질 수록 중요한 부분이라 연습겸...!!)1. useCallback, useReducer, React.memo 활용  기존 코드 (useState 사용)기존에는 useState를 사용하여 상태를 관리했으며, 상태가 변화할 때마다 컴포넌트가 불필요하게 리렌더링되는 문제가 있었습니다. 특히, 자식 컴포넌트들에 props를 전달할 때마다 함수가 새로 생성되어 렌더링 최적화가 어려운 상황이었습니다.변경된 코드 (useReducer, useCallback, React.memo 사용)이제 useReducer로 상태를 관리하고, 상태에 따라 다른 처리를 switc..

• format_list_bulleted PROJECTS
• · 2025. 3. 25.