하이드레이션 (Hydration), 하이드레이션 에러 (Hydration Error)하이드레이션 개념은 주로 SSR(Server-Side-Rendering) 프레임워크인 Next.js, Nuxt.js, SvelteKit 등에서 사용된다.서버 사이드 렌더링(SSR)은 서버에서 미리 정적인 HTML을 생성하여 클라이언트(브라우저)로 보내주기 때문에 사용자는 자바스크립트가 완전히 로드되기 전에도 페이지를 볼 수 있다.서버에서 생성되는 HTML은 단순히 텍스트와 이미지로 이루어진 정적인 페이지일 뿐이며 상호작용이 불가능한데, 이때 하이드레이션이 이 정적인 HTML을 동적인 웹 페이지로 바꿔주는 역할을 한다. 하이드레이션 (Hydration)하이드레이션은 물을 공급하여(하이드로) 건조한 상태를 활성화 시키는 것처..
웹 렌더링 기법 종류 간단히 알아보자 (CSR, SSR, SSG, ISR 등..) 웹 렌더링 기법의 종류CSR (Client-Side Rendering) SSR (Server-Side Rendering)ISR (Incremental Static Regeneration)SSG (Static Site Generation)DPR (Deferred Page Rendering)SPR (Streaming Page Rendering)ESR (Edge-Side Rendering) RSC (React Server Components) 개념은 이해하고 넘어가면 좋다. 하지만 꼭 다 정확한 정보까지 학습할 필요는 없다. 그 자체의 개념들도 있고, 같이 사용가능한 기법들도 있다. 간단히 알아보자. CSR (Client..
02. 홈페이지가 사용자에게 웹 사이트를 보여주는 과정을 간략히 설명해주세요. (브라우저 렌더링 포함)
사용자 동작을 나열하며 간략히 공부해보자. >>> 사용자 동작 시작 1. https://okayoon.tistory.com/ 를 검색한다. 2. DNS(Domain Name System)에서 주소를 검색, 해당 ip 주소를 찾아서 사용자가 입력한 URL과 함께 전달한다. - 이때 캐싱된 DNS 기록이 있는지 먼저 확인한다. 3. 전달받은 ip 주소를 이용하여 웹 브라우저는 웹 서버에게 해당 웹 사이트의 리소스를 요청하고 해상 웹 서버는 리소스를 전달한다. >>>> 전달받은 리소스를 통해 브라우저 렌더링 과정 시작 4. DOM Tree 구축을 위해 HTML을 파싱한다. - DOM Tree는 문서 객체 모델로 모든 요소, 속성, 텍스트 등 (문서노드, 요소노드, 속성노드, 텍스트노드)을 트리 구조로 표현한 ..
(work-break="keep-all") 골치 아픈 이슈 발견해서 기록상 작성
뒤에 필수표시(*)를 적용 시키려고 하다가 발견한 이슈로... word-break="keep-all"이 아닌 경우에는 붙이기가 굉장히 쉬웠다. 그냥 position: absolute해서 우측에 가져다가 붙이면 되니까. 여기서 이제 모바일에서 단어 기준으로 끊으려고 하다 발견. 떨어지는 공백 '자차'의 크기만큼 영역이 유지되고 있다. 따라서 떨어지는 글자수의 값이 다르면 필수표시(*)의 위치 값도 달라진다. 중요한 이슈가 아니다보니, 그냥 줄 바꿈 처리를 위해서 문자열 끝에 붙이기로 했다.