어드벤트 캘린더 프로젝트 회고/트러블슈팅
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 경로를 파일이 실제 위치한 곳과 다르게 설정하여 아이콘이 뜨지 않는 현상 발생 (절대 경로 / 권장)캐시 문제: 파일 수정 후 브라우저에 즉시 반영되지 않는 경우 발생 (강력
10.[리팩토링] Advent Calendar 번들 최적화로 모바일 메인 로딩 시간 단축
vite에서 500kb 이상 경고가 뜨는 것 확인.데스크톱에서는 로딩이 걸리지 않으나 모바일에서는 오래 걸리는 현상을 확인해서 혹시 해당 부분이 연관되어 있지 않을까? 고민하게 되었음.특히나 해당 서비스는은 사진을 올리는게 주된 사용인 웹이라 실질적으로 사진을 올리기
11.[리팩토링] Advent Calendar 검색엔진 최적화(SEO)
앞서 번들 최적화 리팩토링을 진행하면서 Lighthouse 점수를 보았을 때, SEO 점수가 낮았음크롬 비밀모드에서 메인화면 데스크탑으로 결과를 다시 측정했을 떄 아래와 같이 SEO 점수가 다른 점수에 비해 떨어지는 것 한 번 더 체크이를 다음 과제로 생각하고 검색엔진
12.[트러블슈팅] 로그아웃 후 뒤로가기 방지 및 리다이렉트 무한 로딩 해결
프로젝트 목록, 세부 페이지에서 로그아웃 후 브라우저 뒤로가기를 클릭하는 경우 프로젝트 화면 진입 및 무한 로딩 화면 발생뒤로가기에 대해 생각하지 못하고 진입을 막지 않음라우트 가드로 layout을 활용하여 로그인 사용자만 진입하는 페이지의 라우트만 묶어서 member
13.[트러블슈팅] Firebase 멀티호스팅 리다이렉트 로그인 오류 완벽 해결
계기 앞서 [트러블슈팅] 로그아웃 후 뒤로가기 방지 및 리다이렉트 무한 로딩 해결) 트러블슈팅을 통해 Firebase의 리다이렉트 로그인 오류가 배포 사이트에서만 안 생긴다고 생각했고 그럼 테스트 할 수 있는 다른 방법이 없을까? 찾아보았음. 그 결과 Firebase에
14.[리팩토링] React Context 패턴으로 인증 리팩토링
계기 최근 학습을 하면서 로그인을 provider로 한 번에 관리하는 구조를 알게 되어서 이를 프로젝트에 적용하기로 했다. 필요할 때마다 훅으로 불러왔는데 아래와 같이 리스너가 여러 개 붙는 구조였다. 이로 인한 문제는 각각의 리스너가 로그인 상태가 바뀌면 리스너 전부
15.[CI/CD] PR을 올리면 AI가 코드 리뷰를 해주는 워크플로우 도입
계기 PR로 머지 기록들을 남기는데 혼자 작업을 하기에 개인 프로젝트라 내가 올리고 머지 승인하다보니 의미가 없다고 생각이 들었음. 그러다가 누군가 PR을 올릴 때, PR에 대한 반응을 자동적으로 만들었다는 글을 보고 그렇다면 AI를 붙여서 리뷰를 받을 수 있지 않을까