하이드레이션이란? 서버가 먼저 HTML을 만들어 보내고(SSR), 클라이언트에서 그 HTML에 자바스크립트 이벤트·상태·동작을 붙여서 ‘살리는’ 과정을 말해요.즉, 이미 화면에 보이는 정적 DOM을, 브라우저 안의 **동적 앱(가상 DOM/프레임워크 런타임)**과 매칭하고 이벤트 핸들러를 연결하는 단계입니다.Hydrate는 '수분을 공급하다', 라는 뜻이다. 즉, 말라있는 html에 javascript를 hydrate하여 생기를 넣어주는 과정을 의미한다,왜 필요한가? 초기 표시 속도(First Paint) 향상: 서버가 미리 HTML을 그려 주니 사용자에게 화면이 빨리 뜹니다.SEO/소셜 프리뷰: 크롤러가 콘텐츠를 바로 읽을 수 있어요.상호작용: 화면은 보이지만 아직 “죽어있는”(이벤트 없는) 상태 →..
전체 글
1. SSG / SSR / CSR 정리이건 우리가 웹페이지를 브라우저에 띄울 때 어떻게 해왔었는지 기존의 웹 어플리케이션의 역사를 살펴보면 이해하기 참 좋다. 아 물론 더 예전에 주로 사용하던 방식이 구리고, 요 근래 사용하고 있는 방식이 좋다. 이런 얘기가 아니라 애초에 웹어플리케이션의 용도에 따라서 더 좋은 방식이 있다고 생각할 수 있으면 좋겠다. 그럼 순서대로 이야기해보자. 1) SSG (Static Site Generation)1990년대 웹사이트를 막 만들기 시작할 때 사용되던 방식이다. 해당 웹사이트를 구성하는 HTML을 개발자가 싹 다 만들어두고 빌드/배포를 하면 해당 HTML/CSS 파일을 가지고 있는 웹서버(ex ==> Apache Web Server)(80 포트)가 요청하는 브라우저..
회사 홈페이지를 만들다가.. 좌우 여백이 충분한데 단어 하나 "은" 이게 줄바꿈되어 내려온다. 이유는 브라우저의 줄바꿈 처리 때문이다.🔍 진짜 원인💥 한글과 영어의 줄바꿈 로직 차이영어는:TOTHETOP은 → 영어 + 한글 혼합.영어는 보통 word-break 없이 단어 단위로만 줄바꿈.한글은 기본적으로 어절 단위 줄바꿈.즉, TOTHETOP은이 한 단어로 취급되지 않고,브라우저가 내부적으로 TOTHETOP + 은을 분리할 수 있다고 판단하여TOTHETOP은 처럼 줄바꿈된 것이다.특히, word-break가 기본 normal이거나, CSS로 따로 막아주지 않으면, 브라우저가 알아서 깨서 영어 한글 줄바꿈 시도한다.🛠️ 해결책✅ 강제로 단어 안 끊게 막기아래 CSS 추가:word-break: kee..
📌 서론https://www.npmjs.com/package/@react-native-seoul/kakao-login @react-native-seoul/kakao-loginReact Native Module for Kakao Login. Latest version: 5.4.1, last published: a year ago. Start using @react-native-seoul/kakao-login in your project by running `npm i @react-native-seoul/kakao-login`. There are no other projects in the npm registry using @rwww.npmjs.com @react-native-seoul/kakao-logi..