prefetchDNS

티스토리 뷰

web/react dom

prefetchDNS

dev_been94 2024. 12. 16. 17:17

728x90

🎯 prefetchDNS란 무엇인가요?

**prefetchDNS**는 웹페이지가 다른 서버에 연결해야 할 때, 미리 DNS 조회를 해두는 기능이에요.
DNS란 Domain Name System의 약자로,
우리가 흔히 입력하는 **도메인 이름(예: google.com)**을 컴퓨터가 이해할 수 있는 IP 주소로 바꿔주는 시스템이에요.

🍕 비유로 이해하기: 네비게이션 미리 설정하기 🚗

여러분이 차를 타고 여행을 떠난다고 생각해 봐요!

DNS 조회 없이 출발
- 도착지를 갈 때마다 그때그때 네비게이션으로 길을 검색한다고 가정해요.
- 시간이 더 걸리고, 출발할 때마다 잠깐 기다려야겠죠?
prefetchDNS를 사용하는 경우
- 여행을 떠나기 전에 가야 할 모든 목적지의 길을 미리 검색해 둡니다.
- 그러면 목적지에 도착할 때 기다리지 않고 바로 출발할 수 있겠죠?

**prefetchDNS**는 이처럼 웹페이지가 연결해야 할 서버 주소를 미리 찾아서
나중에 빠르게 연결할 수 있도록 준비해 주는 기능이에요.

🛠️ prefetchDNS 사용법

prefetchDNS는 HTML의 <link> 태그를 사용해서 설정할 수 있어요.
브라우저에게 **"이 서버의 DNS를 미리 확인해둬!"**라고 알려주는 거죠.

1. 기본 사용법

<head>
  <!-- DNS를 미리 조회할 서버 주소 설정 -->
  <link rel="dns-prefetch" href="https://example.com" />
</head>

설명:

rel="dns-prefetch": DNS 조회를 미리 하겠다는 의미입니다.
href: DNS를 조회할 대상 서버의 주소를 적습니다.

2. 실전 예제: 외부 리소스를 빠르게 불러오기

예를 들어, 여러분의 웹사이트에서 Google Fonts나 외부 API를 사용한다고 가정해 볼게요.
이런 리소스를 빠르게 불러오기 위해 DNS를 미리 조회할 수 있습니다.

<head>
  <!-- Google Fonts 서버의 DNS를 미리 조회 -->
  <link rel="dns-prefetch" href="https://fonts.googleapis.com" />
  <link rel="dns-prefetch" href="https://fonts.gstatic.com" />
  
  <!-- 외부 이미지 CDN 서버 DNS 미리 조회 -->
  <link rel="dns-prefetch" href="https://cdn.example.com" />
</head>

🚀 prefetchDNS의 장점

페이지 로딩 속도 개선
- DNS 조회를 미리 해두기 때문에 서버에 연결하는 시간을 절약할 수 있어요.
외부 리소스 불러오기 최적화
- 외부 서버(폰트, 이미지, API 등)에서 리소스를 더 빠르게 불러올 수 있어요.
사용자 경험 향상
- 화면이 빠르게 표시되기 때문에 사용자 경험이 훨씬 좋아집니다.

🔍 언제 사용할까요?

외부 폰트 사용 시
- Google Fonts나 다른 폰트 서비스를 사용할 때 DNS를 미리 조회하면 폰트가 더 빨리 로딩돼요.
이미지나 동영상 CDN 사용 시
- 외부 CDN에서 이미지를 가져올 때 연결 시간을 줄일 수 있어요.
외부 API 서버 요청 시
- 외부 API 호출이 잦다면, DNS를 미리 조회해서 연결 속도를 단축할 수 있습니다.

⚠️ 주의할 점

불필요한 DNS 조회는 피해야 해요
- 필요하지 않은 서버의 DNS를 미리 조회하면 오히려 성능이 나빠질 수 있어요.
- 자주 연결해야 하는 서버에만 dns-prefetch를 사용하세요.
이미 브라우저가 DNS를 캐시하는 경우
- 브라우저는 자주 접속하는 DNS를 자동으로 캐싱(저장)하기 때문에 꼭 필요한 경우에만 사용하면 돼요.

🌟 prefetchDNS와 preconnect 차이점

dns-prefetch: DNS 조회만 미리 준비해요.
preconnect: DNS 조회 + 보안 연결(SSL)까지 모두 미리 준비해요.

간단히 말하면 **preconnect**가 더 많은 준비를 하지만, **dns-prefetch**는 가볍게 DNS만 조회해요.

🌟 한 줄 요약

**prefetchDNS**는 브라우저가 서버의 DNS를 미리 확인해서 나중에 더 빠르게 연결할 수 있도록 준비하는 기능이에요.

🎉 마무리

prefetchDNS는 간단하지만 웹페이지의 로딩 속도를 조금 더 빠르게 만들어주는 멋진 도구예요!
외부 폰트, 이미지, API 서버를 사용할 때 적절히 활용하면 사용자 경험을 개선할 수 있답니다. 🚀

728x90

'web > react dom' 카테고리의 다른 글

preconnect (2)	2024.12.16
hydrate (0)	2024.12.16
findDOMNode (0)	2024.12.16
flushSync (0)	2024.12.16
createPortal (0)	2024.12.16

공지사항

최근에 올라온 글

최근에 달린 댓글

Total

Today

Yesterday

링크

TAG more

« 2025/01 »
일	월	화	수	목	금	토
			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30	31

글 보관함

250x250

JAM Development

티스토리 뷰

prefetchDNS

🎯 prefetchDNS란 무엇인가요?

🍕 비유로 이해하기: 네비게이션 미리 설정하기 🚗

🛠️ prefetchDNS 사용법

2. 실전 예제: 외부 리소스를 빠르게 불러오기

🚀 prefetchDNS의 장점

🔍 언제 사용할까요?

⚠️ 주의할 점

🌟 prefetchDNS와 preconnect 차이점

🌟 한 줄 요약

🎉 마무리

'web > react dom' 카테고리의 다른 글

티스토리툴바