- 발행일
커밋하고 4분 뒤 Revert, 한 시간 동안 "파일 복원" 넷 — 카카오 공유 이미지가 안 뜨던 저녁
커밋하고 4분 뒤 Revert, 한 시간 동안 "파일 복원" 넷
이 글은 2026년 9월에 당시 커밋 이력을 다시 보며 정리한 것입니다. 날짜는 작업한 날 기준입니다.
직짱건강 설문 결과 화면에는 카카오톡 공유 버튼이 있습니다. 2월 25일에 만들 때 공유 카드의 이미지를 이렇게 적어 뒀어요.
// todo : 온라인 환경에서만 이미지를 받을 수 있습니다.
imageUrl: '/Logo.png',
주석대로라면 로컬에서는 안 뜨는 걸 알고 배포 뒤로 미뤄 둔 상태였습니다. 3월 8일 저녁에 그걸 잡으려다 커밋이 여섯 개 났습니다.
6723d3a 21:17 [24-03-08] 공유하기 등 수정 fix
0be14ef 21:21 Revert "[24-03-08] 공유하기 등 수정 fix"
91c7cde 21:31 [24-03-08] 파일 오류 수정
194d0ca 21:51 [24-03-08] 파일 오류 수정 2차
173655c 21:54 [24-03-08] 파일 복원
f218ae0 22:18 [24-03-08] 카카오 파일 복원
첫 커밋에 넷을 섞었고, 4분 뒤 GitHub에서 되돌렸다
첫 커밋은 4개 파일 +46/−53입니다. 공유 이미지 주소만 바꾼 게 아니었어요.
next.config.js에basePath: process.env.NEXT_PUBLIC_URL추가- 공유 이미지 주소를
'/Logo.png'에서https://jop-jjang-health-frontend.vercel.app/Logo.png로 - 마이페이지 기본 이미지 경로를
/assets/...에서/assets/myPage/...로 - 찜 화면의 병원 상세 조회를
forEach안에서setState를 누적하던 것에서Promise.all로
4분 뒤 Revert 커밋이 있습니다. 저자가 GitHub noreply 주소이고 커미터가 GitHub이라, 터미널이 아니라 GitHub 화면의 Revert 버튼을 누른 것으로 보입니다. 왜 되돌렸는지는 커밋에 없어요. 다만 basePath에 URL 전체를 넣으면 Next는 그 값을 경로 접두어로 쓰기 때문에 모든 페이지 주소가 깨집니다. 되돌린 뒤 다시 올린 커밋에는 basePath가 없습니다.
이미지 주소를 절대 → 상대 → 절대로 오갔다
Revert 이후 네 커밋의 KakaoShareButton.tsx diff만 모으면 이렇습니다.
// 91c7cde 21:31
- imageUrl: '/Logo.png',
+ imageUrl: 'https://jop-jjang-health-frontend.vercel.app/Logo.png',
// 194d0ca 21:51
- imageUrl: 'https://jop-jjang-health-frontend.vercel.app/Logo.png',
+ // todo : 온라인에서만 작동 해야하는데 이상하게 안됨
+ imageUrl: 'Logo.png',
// f218ae0 22:18
- imageUrl: 'Logo.png',
+ imageUrl: 'https://jop-jjang-health-frontend.vercel.app/_next/image?url=%2F_next%2Fstatic%2Fmedia%2FLogo.dd161765.png&w=128&q=75',
배포 도메인을 붙인 절대 경로가 안 되자 "온라인에서만 작동 해야하는데 이상하게 안됨"이라고 적고 상대 경로로 돌아갔고, 그것도 안 되자 배포된 화면에서 실제로 로고가 그려지는 _next/image 주소를 붙였습니다. 브라우저에서 복사해 온 것으로 보입니다. 마지막 것이 됐고, 지금도 그 주소 그대로입니다.
왜 절대 경로도 안 됐나
이 글을 쓰며 저장소를 다시 보고 안 것입니다. 로고 파일은 public/Logo.png가 아니라 public/assets/Logo.png에 있었어요. 그러니 https://.../Logo.png는 404였습니다. "이상하게 안됨"이 아니라 파일이 그 자리에 없었던 겁니다. 그날 그 주소를 브라우저에 직접 쳐 봤다면 바로 알았을 텐데, 그 기록은 없습니다.
상대 경로 'Logo.png'가 안 되는 이유는 따로 있습니다. 카카오 공유 카드의 이미지는 사용자의 브라우저가 아니라 카카오 쪽에서 가져가 카드에 그립니다. 카카오 쪽에서 열 수 있는 절대 주소여야 하고, /Logo.png나 Logo.png는 카카오 서버 입장에서 어디를 가리키는지 정할 수 없어요. 2월의 주석 "온라인 환경에서만"은 반쯤 맞았습니다. 온라인이어야 하는 건 맞는데, 절대 주소여야 한다는 조건이 빠져 있었어요.
마지막에 붙인 _next/image?url=...Logo.dd161765.png 주소는 되긴 하지만 빌드 산출물의 경로입니다. 파일 이름의 해시가 로고 파일 내용에서 나오니 로고를 바꾸면 주소가 죽습니다.
찜 화면은 같은 저녁에 한 번 더 뒤집혔다
여섯 커밋 중 셋이 Like/index.tsx를 건드렸습니다. 21:54 커밋은 찜 목록을 받아 오는 useEffect를 통째로 지웠고, 22:18 커밋은 그걸 initializeHospitalInfo라는 이름으로 다시 넣었어요. 저녁 전체를 한 diff로 보면 +45/−36이고, 남은 변화는 forEach 안에서 setHospitalInfo를 누적하던 것을 Promise.all로 모아 한 번에 넣는 것 하나입니다.
검증
그날 확인한 것.
- 배포된 화면에서 카카오톡 공유를 눌러 카드에 로고가 뜨는 것을 봤을 겁니다. 마지막 커밋 뒤로 공유 이미지 커밋이 없다는 것이 근거의 전부입니다.
이 글을 쓰며 확인한 것.
- 여섯 커밋의 시각·저자·커미터는
git log --format='%h %ci %an %cn'으로, Revert가 GitHub 화면에서 된 것은 커미터GitHub으로 판단했습니다. - 로고 파일 위치는
git ls-tree f218ae0으로, 현재imageUrl이 그날 마지막 값 그대로인 것은git grep으로 확인했습니다. - 저녁 전체의 순변화 +45/−36은
git diff 6723d3a^ f218ae0 --stat입니다. - 카카오 쪽에서 이미지를 가져간다는 설명은 지금의 이해이고, 그날 공유 API 문서를 봤는지는 기록이 없습니다.
남은 것 · 한계
- 한 커밋에 네 가지를 넣고, 되돌리고, 조각내서 다시 올렸습니다. 무엇이 문제였는지 커밋 단위로 알 수 없게 된 게 그날 저녁의 가장 큰 비용이에요. 커밋 제목이 "파일 오류 수정"·"파일 복원"이라 나중의 저도 diff를 열어야 했습니다.
- 주소가 안 되면 주소를 직접 열어 보는 것을 안 했습니다. 404 하나면 끝날 일이었어요.
- 빌드 해시가 든 주소가 지금도 코드에 있습니다. 로고를 바꾸는 순간 공유 카드 이미지가 깨지는데, 그 위험을 아는 사람이 저장소에 없습니다.
- 여섯 달 뒤 TripTune에서도 한 저녁에 메서드를 세 번 바꾸고2024-09-01검색은 GET, 목록은 POST — 하루에 세 번 바꾼 메서드여행지 목록과 검색 API의 메서드를 하루에 세 번 바꿨습니다. 오후 6시에 둘 다 GET, 7시에 page를 쿼리로, 8시 반에 목록만 POST, 밤 11시 반에 검색은 GET으로 확정. 그런데 POST로 바꾸면서 좌표를 params라는 키로 한 번 감싸서 보냈고, 그걸 다음 날 점심에야 풀었어요. 엿새 뒤 검색도 POST가 됐습니다. 이틀 사이에 axios를 두 번 걷어냈습니다2024-09-14axios를 걷어냈다가 이틀 만에 되돌렸다가 다시 걷어냈다 — 문제는 라이브러리가 아니라 프록시였다사이드 프로젝트에서 axios를 fetch로 바꿨다가 28시간 뒤 되돌리고, 30분 뒤 다시 fetch로 갔습니다. 그 사이 커밋 메시지는 "프록시 시도 중", "프록시 실험 일단 종료", "credentials 처리 방법 실험 시도"였어요. 되돌아보니 HTTP 클라이언트를 바꾼 게 아니라 Netlify 리다이렉트와 Next 리라이트 사이를 헤맨 이틀이었습니다. 왜 흔들렸는지를 커밋 순서대로 적습니다.. 바꾸고 보고 또 바꾸는 방식은 그때까지 그대로였어요.
관련 글: 직짱건강 — 백엔드를 기다리지 않고 설문 인터페이스를 먼저 완성한 방법2024-03-31직짱건강 — 백엔드를 기다리지 않고 설문 인터페이스를 먼저 완성한 방법직장인 대상 건강 설문과 위치 기반 병원 추천을 묶은 헬스케어 서비스입니다. 6인 협업 프로젝트에서 프런트엔드로 참여했고, 백엔드 API가 없는 상태에서 JSON 목업으로 설문 플로우를 먼저 완성해 병렬 작업이 가능하게 만든 게 핵심 기여였어요. · 검색은 GET, 목록은 POST2024-09-01검색은 GET, 목록은 POST — 하루에 세 번 바꾼 메서드여행지 목록과 검색 API의 메서드를 하루에 세 번 바꿨습니다. 오후 6시에 둘 다 GET, 7시에 page를 쿼리로, 8시 반에 목록만 POST, 밤 11시 반에 검색은 GET으로 확정. 그런데 POST로 바꾸면서 좌표를 params라는 키로 한 번 감싸서 보냈고, 그걸 다음 날 점심에야 풀었어요. 엿새 뒤 검색도 POST가 됐습니다. · axios를 걷어냈다가 이틀 만에 되돌렸다가 다시 걷어냈다2024-09-14axios를 걷어냈다가 이틀 만에 되돌렸다가 다시 걷어냈다 — 문제는 라이브러리가 아니라 프록시였다사이드 프로젝트에서 axios를 fetch로 바꿨다가 28시간 뒤 되돌리고, 30분 뒤 다시 fetch로 갔습니다. 그 사이 커밋 메시지는 "프록시 시도 중", "프록시 실험 일단 종료", "credentials 처리 방법 실험 시도"였어요. 되돌아보니 HTTP 클라이언트를 바꾼 게 아니라 Netlify 리다이렉트와 Next 리라이트 사이를 헤맨 이틀이었습니다. 왜 흔들렸는지를 커밋 순서대로 적습니다.