CORS, 캐시, CDN을 이해하려고 웹 요청 흐름부터 다시 정리해봤다CORS는 "갑자기 뜨는 에러"가 아니라,브라우저가 리소스를 가져오고, 캐시를 확인하고, 응답 헤더를 검사하는 과정 안에서 발생하는 정책 체크다.CORS 문제를 보다가 오히려 더 헷갈렸던 건 에러 문구 자체보다 흐름이었다.브라우저는 HTML을 받고 나서 뭘 하는지CSS나 JS는 언제 다시 요청하는지캐시는 언제 쓰고, 언제 안 쓰는지CDN이 끼면 응답이 어떻게 달라지는지그리고 CORS는 정확히 어느 시점에 막히는지처음엔 CORS 에러가 났다 = 서버 문제인가? 정도로만 생각했는데, 찾아보면 볼수록 단순한 얘기가 아니었다.그래서 이번엔 CORS만 따로 보지 않고,"사용자가 사이트에 접속해서 브라우저가 화면을 그릴 때까지 어떤 일이 일어나는..

페이지 이동할 때만 간헐적으로 터지던 그 CORS, 왜 강력 새로고침하면 사라졌을까가끔 이런 경우가 있다.처음 들어왔을 때는 멀쩡하다.직접 URL을 치고 들어와도 정상이다.그런데 어떤 페이지를 거쳐 다른 페이지로 이동하면, 갑자기 CSS나 폰트에서 CORS 에러가 난다.심지어 더 헷갈리는 건 Ctrl + Shift + R로 강력 새로고침하면 또 멀쩡해진다는 점이다.처음에는 preload가 문제인가 싶었고, 브라우저 캐시가 어딘가 꼬였나 싶기도 했는데, 결론부터 말하면 핵심은 preload 자체가 아니라 같은 URL을 서로 다른 방식으로 요청하고 있었다는 점이었다.이번 글은 페이지 이동 시 간헐적으로 발생하던 CORS 에러를 추적하면서, 왜 이런 현상이 생겼는지 정리해 둔 기록이다.결론 먼저핵심만 먼저 정..

[실무 기록] 렌더링 차단(Render‑blocking) 줄이려고 preconnect / preload를 썼는데… 진짜 뭐가 좋아지나?Lighthouse 돌리면 가끔 꼭 뜨는 애들이 있다.Eliminate render‑blocking resources(참고: Chrome 공식 문서) → https://developer.chrome.com/docs/lighthouse/performance/render-blocking-resourcesPreconnect to required origins(리소스 힌트 개념) → https://web.dev/learn/performance/resource-hints대충 "CSS가 렌더링 막고 있어요" "외부 도메인 연결을 미리 하세요" 이런 뜻인데, 막상 적용하려고 보면 헷갈..

[실무 기록] (2탄) macOS에서 adb가 "개발자 신원을 확인할 수 없습니다"로 막혀 Chrome Inspect가 또 안 될 때1탄: Chrome Inspect에서 Pending authentication만 뜨고 안드로이드 디버깅이 안 될 때[FrontEnd/web] - [실무 기록] Chrome Inspect에서 Pending authentication만 뜨고 안드로이드 디버깅이 안 될 때 간만에 웹뷰에서 이슈가 있는 것 같다는 얘기를 듣고 테스트용 안드로이드 폰으로 디버깅을 하려는데, 또 연결이 안 됐다.예전에 정리해둔 1탄 글을 보고 따라 했는데도 안 됐고(사실 기억이 잘 안 남…), 결국 처음부터 다시 세팅을 해봤다.이번에 걸린 포인트는 이거였다.1탄에서 받았던 Platform-Tools(A..

어느 날부터 서비스에서 CSS가 간헐적으로 안 먹는 현상이 생겼다콘솔을 보면 CORS 관련 에러가 뜨고, 화면은 스타일이 빠진 채로 깨져 보였다힘들었던 포인트는 이거였다어떤 브라우저에서는 안 터지고어떤 브라우저/디바이스에서는 터지고같은 환경에서도 가끔은 되고, 가끔은 실패원인 파악이 너무 어려웠다.결론우리는 써드파티 라이브러리/CSS를 버저닝 + 캐싱 목적 때문에 회사 S3에 올려두고, 서비스에서는 그 S3 주소로 직접 로드하고 있었다.그런데 로 CSS를 불러올 때 예전에 넣어둔crossorigin="anonymous" 이 속성 때문에, 브라우저가 CSS를 CORS 모드로 요청하면서 간헐적인 CORS 에러가 발생했다.그래서 나는 crossorigin="anonymous"를 제거했고, 그 뒤로 문제는 멈췄..

회사 테스트폰(안드로이드)으로 모바일 웹/웹뷰 디버깅을 하려고 chrome://inspect/#devices를 열었는데, 기기가 연결된 것처럼 보이면서도 실제로는 계속 이 메시지에서 멈췄다Pending authentication: please accept debugging session on the device. 보통은 폰 화면에 USB 디버깅(RSA) 허용 팝업이 떠야 하고, 거기서 허용을 누르면 끝난다그런데 문제는…팝업이 아예 안 뜨거나뜨더라도 허용했는데 다시 연결하면 또 Pending무엇보다 회사에서 쓰는 테스트폰들이 전부 똑같이 이러는 상황결국 “폰 설정 문제”라기보다 PC 쪽 디버깅 도구(ADB) 문제일 확률이 높다고 판단했다결론폰에서 USB 디버깅을 껐다 켜는 걸로 안 풀리면, PC의 ADB(..

회사에서 앱팀이랑 같이 일하다 보면 가끔 이런 식으로 얘기가 나온다."이 브릿지 웹에서 호출해서 써주세요~ 전역 객체로 내려드릴게요."처음엔 당연히 이렇게 생각했다."브릿지는 앱에서 잘 내려주겠지. 난 그냥 window.xxx.yyy()만 호출하면 되겠구나."근데 실제 운영 환경에서 한 번 이슈경험하고 생각이 바뀌었다.웹은 항상 최신인데, 앱은 그렇지 않다웹뷰라서 “앱 안에서 도는 웹 페이지”라는 느낌이 강하다 보니앱이랑 웹이 같이 버전이 맞춰서 움직일 거라고 착각했다.현실은 딱 반대다.웹은 배포하는 순간 전 유저가 최신 버전을 보게 되고앱은 강제 업데이트 안 걸면 예전 버전이 계속 살아 있음여기서 문제가 터진다.최신 앱 버전에서 새로 이런 브릿지가 생겼다고 치자전역 객체: window.xxx메서드: s..

"SPA + CSR 시대에, 검색 엔진이 자바스크립트 페이지를 어떻게 보고 있는지 정리해보자"프론트 개발하다 보면 한 번쯤 이런 고민이 온다.우리 서비스는 SPA + CSR인데, 검색 엔진이 제대로 가져가고 있을까?구글은 자바스크립트를 돌려 준다는데, 그럼 SEO는 그냥 믿고 맡겨도 되는 걸까?SSR, SSG, 동적 렌더링 이런 키워드들 사이에서 뭘 골라야 하는지 막막할 때가 있다.이 글은 구글 공식 문서 + 직접 테스트해 본 경험을 바탕으로,검색 엔진 크롤링/색인 흐름자바스크립트 렌더링(WRS, 렌더링 대기열)실무에서 SSR/사전 렌더링/동적 렌더링을 어떻게 선택할지이 세 가지를 한 번에 정리해 둔 기록이다.1. 결론 먼저먼저 결론부터 보자대부분의 검색 엔진은 여전히 초기 HTML 기준으로 페이지를 본..

"주소창에 URL 한 줄 쳤을 뿐인데, 브라우저 안에서는 생각보다 많은 일이 벌어진다."렌더링 파이프라인이 어떻게 흐르는지CSS/JS가 렌더링을 어떻게 막거나 도와주는지DOM / CSSOM / Render Tree / Layout / Paint / Composite 관계레이아웃 스래싱에서 왜 성능이 깨지는지결론 먼저먼저, 큰 그림만 잡고 가자.브라우저는 HTML, CSS, JS를 받아서 다음 순서로 화면을 만든다.HTML 파싱 → DOM 트리CSS 파싱 → CSSOM 트리DOM + CSSOM → Render TreeRender Tree 기반으로 Layout → Paint → CompositeCSS는 렌더‑블로킹이 될 수 있다.CSSOM이 완성되어야 Render Tree를 만들 수 있기 때문이다.JS는 파..

"네트워크 요청 하나 보냈을 뿐인데, 브라우저가 멈춘 느낌이 들었다면 여기서부터 다시 정리."자바스크립트로 프론트 개발하다 보면 동기 / 비동기 이야기는 계속 나온다.API 호출, 파일 읽기, 애니메이션처럼 대기 시간이 긴 작업 처리할 때화면이 멈추지 않게 UX를 지키고 싶을 때async/await, Promise, 콜백 지옥 같은 것들이 왜 필요한지 이해하고 싶을 때결국 이 모든 이야기의 바닥에는 동기(Sync)와 비동기(Async)가 깔려 있다.동기/비동기를 감으로만 아는 상태 → 말로 설명할 수 있는 상태까지 끌어올리기 위한 정리다.결론 먼저짧게 정리하면 이렇게 볼 수 있다.동기(Synchronous)앞 작업이 끝나야 다음 작업이 시작된다.흐름이 단순해서 이해하기 쉽지만, 대기 시간이 길면 전체가 ..