preconnect

티스토리 뷰

web/react dom

preconnect

dev_been94 2024. 12. 16. 17:14

728x90

🎯 preconnect란 무엇인가요?

**preconnect**는 브라우저가 서버에 미리 연결해 두도록 하는 기능이에요.

웹사이트가 어떤 **리소스(이미지, 폰트, API 등)**를 불러와야 하는 경우,
미리 연결 작업을 해두면 나중에 리소스를 가져올 때 더 빠르게 불러올 수 있습니다.

🍕 비유로 이해하기: 전화 연결 준비하기

여러분이 친구에게 전화를 걸어서 피자를 주문한다고 생각해 보세요. 📞🍕

일반적인 경우 (preconnect 없이)
- 친구에게 전화를 걸 때, 전화가 연결될 때까지 기다려야 하죠.
- 전화 연결이 완료된 후에야 피자 주문을 할 수 있어요.
- 결과: 주문에 시간이 조금 더 걸립니다.
preconnect를 사용하는 경우
- 미리 친구에게 **"내가 피자 주문하려고 할 거야. 전화기 켜놓고 있어!"**라고 알려줘요.
- 나중에 전화할 때 연결이 이미 준비되어 있으니 바로 주문할 수 있겠죠?
- 결과: 주문이 훨씬 빠르게 완료됩니다.

**preconnect**는 웹사이트가 서버에 미리 연결을 준비해 두는 것과 같아요.
그래서 나중에 리소스를 요청할 때 시간을 절약할 수 있습니다.

🛠️ preconnect 사용법

preconnect는 보통 HTML의 <link> 태그를 사용해서 설정해요.
브라우저에게 **"이 서버에 미리 연결해 둬!"**라고 알려주는 거죠.

1. 기본 사용법

<head>
  <!-- 폰트를 제공하는 외부 서버에 미리 연결 -->
  <link rel="preconnect" href="https://fonts.googleapis.com" />
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
</head>

설명:

rel="preconnect": 이 서버에 미리 연결하라는 의미예요.
href: 연결할 서버의 주소를 적습니다.
crossorigin: 다른 도메인에서 리소스를 가져올 때 필요해요.

2. 언제 사용할까요?

외부 폰트를 불러올 때
- Google Fonts 같은 서비스를 사용할 때 preconnect를 설정하면 폰트 로딩 속도가 빨라져요.
API 요청을 미리 준비할 때
- 외부 API 서버와 연결을 미리 준비해 두면 데이터를 빠르게 가져올 수 있습니다.
CDN 리소스를 사용할 때
- 이미지나 동영상을 CDN(콘텐츠 전송 네트워크)에서 불러온다면 preconnect를 설정하면 좋습니다.

3. 성능 최적화 효과

웹사이트가 로딩될 때 가장 시간이 걸리는 부분 중 하나가 서버와의 연결이에요.

서버에 연결하려면 DNS 조회, 보안 연결(SSL), 핸드셰이크 같은 과정이 필요하거든요.

**preconnect**를 사용하면 이 연결 과정을 미리 준비해 두기 때문에
나중에 리소스를 불러오는 속도가 훨씬 빨라집니다!

🚀 어디에 쓰면 좋을까요?

Google Fonts나 외부 폰트 서비스
- 폰트를 사용하는 사이트에서 폰트 로딩 속도를 개선해 줍니다.
외부 API 요청
- 예: **https://api.example.com**과 연결을 미리 준비하면 데이터를 빠르게 가져올 수 있어요.
이미지, 동영상 같은 CDN 리소스
- 웹사이트에 큰 이미지를 CDN에서 불러온다면 preconnect로 연결 준비를 해두세요.

📝 실전 예제: Google Fonts 사용하기

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Preconnect 예제</title>

  <!-- Google Fonts를 위한 preconnect -->
  <link rel="preconnect" href="https://fonts.googleapis.com" />
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
  <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet" />
</head>
<body>
  <h1 style="font-family: 'Roboto', sans-serif;">안녕하세요! 🚀</h1>
</body>
</html>

🌟 preconnect의 장점

리소스 로딩 속도 향상
- 서버와의 연결을 미리 준비하기 때문에 시간을 절약할 수 있어요.
사용자 경험 개선
- 폰트, 이미지, API 데이터를 더 빨리 불러와서 화면이 더 빠르게 로딩됩니다.
성능 최적화
- 웹사이트의 초기 로딩 성능이 좋아져서 **SEO(검색 엔진 최적화)**에도 유리합니다.

⚠️ 주의할 점

불필요한 연결은 피해야 해요
- 자주 사용하지 않는 서버에 preconnect를 설정하면 오히려 성능이 나빠질 수 있어요.
preconnect와 dns-prefetch 차이
- dns-prefetch: DNS 조회만 미리 준비해요.
- preconnect: DNS 조회 + 보안 연결까지 모두 준비해요.

🌟 한 줄 요약

**preconnect**는 브라우저가 서버에 미리 연결해 두도록 해서 리소스를 더 빠르게 불러올 수 있게 도와주는 기능이에요.

🎉 마무리

preconnect는 웹사이트의 성능을 최적화하고 사용자 경험을 개선하는 아주 간단하지만 강력한 도구예요.
외부 폰트, 이미지, API 서버를 사용할 때 한 줄만 추가하면 큰 효과를 볼 수 있답니다! 🚀

728x90

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

prefetchDNS (1)	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/02 »
일	월	화	수	목	금	토
						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

글 보관함

250x250

JAM Development

티스토리 뷰

preconnect

🎯 preconnect란 무엇인가요?

🍕 비유로 이해하기: 전화 연결 준비하기

🛠️ preconnect 사용법

2. 언제 사용할까요?

3. 성능 최적화 효과

🚀 어디에 쓰면 좋을까요?

📝 실전 예제: Google Fonts 사용하기

🌟 preconnect의 장점

⚠️ 주의할 점

🌟 한 줄 요약

🎉 마무리

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

티스토리툴바