어드벤트 캘린더 프로젝트 회고/트러블슈팅
1.[트러블슈팅] Firebase 함수와 타입을 분리하여 Import
TypeScript는 컴파일 타임과 런타임을 구분합니다:Firebase v9+는 다음과 같이 export합니다:TypeScript는 Auth가:실행 가능한 값인지? (함수, 클래스, 객체)컴파일 시에만 쓰이는 타입인지?를 구분하지 못해 혼란스러워합니다.
2.[트러블슈팅] import.meta.env.MODE
개발 모드에서는 리다이렉트 로그인이 작동되지 않아 테스트가 어려워 개발 모드, 배포 모드 분기처리하여 개발 모드에서는 팝업 로그인, 배포 모드에서는 리다이렉트 로그인이 되도록 처리하는 과정에서 import.meta.env.MODE 값에 대해 알게 되었음.혹시나 또 분기
3.[트러블슈팅] Firebase Authentication 팝업 로그인 시 Cross-Origin-Opener-Policy(COOP) 오류
문제 상황 Firebase Authentication을 사용해 Google 팝업 로그인(signInWithPopup) 을 구현했다. 로그인 자체는 정상적으로 동작하지만, 개발자 콘솔에 아래와 같은 오류가 지속적으로 출력되었다. 기능에는 문제가 없어 보였지만, 반복
4.[트러블슈팅] Firebase Authentication 리다이렉트 로그인 시 로그인되지 않고 초기 화면으로 돌아가는 문제 해결
문제 상황 [[Firebase Authentication 팝업 로그인 시 Cross-Origin-Opener-Policy(COOP) 오류]] 문제 해결 및 사이트 특성상 모바일 접속 비중이 높아 팝업 차단으로 인한 사용자 경험 저하가 우려되어 로그인 방식을 고민함. 이
5.[트러블슈팅] 카카오톡 인앱 브라우저에서 구글 OAuth 로그인 차단 문제 해결
어드벤트 캘린더 웹 서비스를 개발하고 배포한 후, 사용자가 카카오톡으로 공유된 링크를 통해 접속했을 때 구글 소셜 로그인이 작동하지 않는다는 제보를 받았다. 데스크톱이나 모바일 브라우저(Safari, Chrome 등)에서는 정상적으로 작동했기 때문에, 특정 환경에서만
6.[트러블슈팅] Firestore 프로젝트 삭제 시 관련 데이터 정리 누락 해결
Advent Calendar 프로젝트에 프로젝트 삭제 기능을 추가하면서, 프로젝트 문서만 삭제하고 해당 프로젝트에 속한 이미지와 주제 데이터를 함께 삭제하는 로직을 누락했다. 개발 중에는 삭제 버튼을 숨겨두었다가 기능이 완성되면 활성화할 계획이었는데, 연관 데이터 삭제
7.[트러블슈팅] 카카오톡 브라우저 감지 로직 위치로 인한 접근 차단 문제
웹 서비스에서 사용자가 카카오톡을 통해 링크를 공유받아 접속하는 경우가 많다. 카카오톡 인앱 브라우저는 일부 기능 제한이 있어, 사용자 경험 개선을 위해 외부 브라우저(Safari, Chrome 등)로 열리도록 유도하는 로직을 구현했다.초대코드 기능을 통한 접속에서는
8.[트러블슈팅] 이미지 모달 높이 고정으로 긴 이미지 사용성 개선
어드벤트 캘린더 프로젝트에서 사용자가 업로드한 이미지를 모달로 표시하는 기능을 구현했다. 이미지 상세보기 모달과 업로드 미리보기 모달 두 곳에서 이미지를 보여주는데, 이미지의 가로세로 비율이나 크기에 따라 모달의 높이가 동적으로 변하도록 구현했었다.세로로 긴 이미지 업
9.파비콘 추가 : 파비콘 생성 도구를 사용하여 표준 코드를 얻는 방식
https://realfavicongenerator.net/경로 설정 오류: href 경로를 파일이 실제 위치한 곳과 다르게 설정하여 아이콘이 뜨지 않는 현상 발생 (절대 경로 / 권장)캐시 문제: 파일 수정 후 브라우저에 즉시 반영되지 않는 경우 발생 (강력