리액트공부를 하다가 보았는데 모르는 단어 모음
| 단어 | 의미 | 링크 | 비고 |
| 서버 랜더링 | 웹 페이지의 초기 HTML을 서버에서 생성하는 것 | 자세히보기> | |
| hydration (하이드레이션) |
서버 측 렌더링된 React 컴포넌트를 클라이언트에서 인터랙티브한 컴포넌트로 변환하는 프로세스를 의미합니다. 이는 사용자가 페이지를 로드할 때 초기 HTML이 서버에서 제공되고, 그 후에 클라이언트 측 JavaScript가 이를 가져와서 동적으로 만들어진 React 컴포넌트로 변경합니다. 이는 초기 로딩 속도를 향상시키고, 검색 엔진 최적화(SEO)를 개선하며, 사용자 경험을 향상합니다 |
자세히보기> | 아래 추가 설명 |
| Blocking (블록킹) |
한 작업이 완료될 때까지 다른 작업이 기다려야 하는 상황을 말합니다. 이는 작업이 실행되는 동안 제어권이 그 작업에게만 주어져 다른 작업이 실행되지 못하는 상태를 의미합니다. 🙂 : 햄버거를 먹어야겠다.(입안 가득 우물우물) 😎 : 뭐 먹는거야??! 🙂 : 우물우물...(다~ 먹고 이야기 해야지) |
자세히보기> | |
| non-Blocking (논블록킹) |
한 작업이 실행되는 동안 다른 작업이 계속 진행될 수 있는 상황을 말합니다. 작업이 실행되는 동안 제어권이 주기적으로 바뀌어 다른 작업이 실행될 수 있습니다. 🙂 : 햄버거를 먹어야겠다.(입안 가득 우물우물) 😎 : 뭐 먹는거야??! 🙂 : 햄버거 먹어 (우물우물..) 😎 : 맛있어? 🙂 : 응~ |
자세히보기> | |
| Superset (슈퍼셋) |
원래의 언어에 추가적인 기능이나 확장된 문법을 포함하는 언어 | ||
| IntelliSense Suggest | 프로그래밍 환경에서 코드를 작성하는 동안 개발자에게 자동 완성 기능을 제공하는 기능 | ||
| IDE |
통합 개발 환경(IDE)이란 프로그래머가 소프트웨어 코드를 효율적으로 개발하도록 돕는 소프트웨어 애플리케이션입니다.
|
자세히보기> | |
| literal(리터럴) | 리터럴은 데이터(값) 그 자체를 뜻한다. 즉, 변수에 넣는 변하지 않는 데이터를 의미하는 것. const a = 1; 여기서 a는 상수이고, 1은 리터럴이다. |
자세히보기> | |
| Migration (마이그레이션) |
아이폰에 있던 주소록을 안드로이드로 옮기는 것처럼, IT 분야에서 데이터나 소프트웨어 같은 걸 한 시스템에서 다른 시스템으로 옮기는 것 | ||
| 정적리소스 | 변경되지 않고 모든 사용자에게 동일하게 제공되는 웹자원이다. 웹서버는 이를 요청에 따라 그대로 전달한다. |
||
| 동적리소스 | 사용자의 요청이나 상황에 따라 내용이 변화하는 웹자원이다. 웹 서버는 이를 실시간으로 생성하거나 수정하여 제공한다. |
||
| SSR, CSR | 사이트로 보기> | ||
[ hydration ]
hydration(하이드레이션)"은 웹 개발에서 서버 렌더링된(서버 측에서 생성된) HTML을 클라이언트에서 인터랙티브한 React 컴포넌트로 변환하는 프로세스를 가리킵니다. 이는 클라이언트 측 JavaScript가 HTML과 동일한 구조를 생성하여 기존 HTML을 "하이드레이션"하는 것을 의미합니다.
보통 서버 측에서 생성된 HTML은 정적인 콘텐츠로 사용되지만, React와 같은 자바스크립트 프레임워크를 사용하면 이 HTML을 동적이고 인터랙티브한 사용자 인터페이스로 변환할 수 있습니다. 하이드레이션은 이러한 변환을 가능하게 하며, 사용자가 페이지를 로드할 때 서버에서 이미 준비된 콘텐츠를 빠르게 표시하고, 그 다음에 클라이언트 측 JavaScript가 이를 가져와서 상호작용 가능한 컴포넌트로 변환합니다.
결과적으로, 하이드레이션을 통해 초기 로딩 시간이 단축되고, 페이지의 인터랙티브 성능이 향상됩니다. 이것은 웹 애플리케이션의 사용자 경험을 향상시키는 데 중요한 역할을 합니다.