일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |
- CORS
- error
- vscode
- archiver
- Vue
- swiperOption
- index
- display
- watchOverflow
- slidePerView
- activeIndex
- JavaScript
- v-bind
- css
- jquery
- eslint prettier
- eslint
- realIndex
- 인덱스
- slidePerGroup
- js
- prettier
- vue2
- querySelector
- loop:true
- javascirpt
- centerSlides
- swiper
- classlist
- slideChange
- Today
- Total
목록Computer Science/Rendering (4)
코딩하는 둥둥
클라이언트 사이드 렌더링(CSR) 클라이언트인 브라우저가 렌더링을 처리하는 방식 서버에서 전체 페이지를 한번 렌더링해 보여주고, 사용자가 요청할 때마다 리소스를 서버에서 제공받아 클라이언트가 해석하고 렌더링하는 방식 브라우저에서 JavaScript로 콘텐츠를 렌더링 하는 것 SPA 트렌드와 CPU 성능 상승 + JS 표준화(리액트, 뷰, 앵귤러등의 프레임 발전)와 함께 본격적으로 시작되었다. ✔ SPA 장점 네이티브 앱과 비슷한 빠른 인터렉션을 구현할 수 있다. View 렌더링을 브라우저에게 담당시키으로서 서버 트래픽을 감소시키고, 사용자에게 더 빠른 인터렉션을 제공한다. 새로고침이 발생하지 않아 사용자가 네이티브 앱과 비슷한 경험을 할 수 있다. 각 클릭이 너무 오래 걸리지 않도록 하는데 도움이 될 수..
검색 엔진 최적화 (SEO) Search Engine Optimization 구글, 네이버와 같은 검색엔진에서 찾기 쉽도록 사이트를 개선하는 프로세스를 말한다. 웹사이트나 웹페이지를 검색엔진이 쉽게 발견(discovery)하고, 읽어가서(crawling), 색인하고(indexing), 상위 노출(ranking)시켜 자연 유입되는 트래픽의 양과 질은 높일수 있도록 관련 검색 알고리즘의 특성을 고려해 웹사이트의 구조나 콘텐츠를 개선하는 작업 References. https://www.ascentkorea.com/what-is-seo/
서버 사이드 렌더링 (SSR) 서버에서 사용자에게 보여줄 페이지를 모두 구성하여 사용자에게 페이지를 보여주는 방식 JSP/Servlet의 아키텍처에서 클라이언트(브라우저)가 서버에 매번 데이터를 요청하여 서버에서 처리하는 방식 클라이언트에서 요청이 들어올 때마다 매번 서버에서 새로운 화면(View)를 만들어 제공 서버가 화면(View)를 그리는 주체가 된다. 장점 첫 페이지 로딩 속도가 클라이언트 사이드 렌더링에 비해 더 빠르다. 해당 첫 페이지에 해당하는 문서만 브라우저에게 전달해 브라우저가 렌더링하기때문에 초기 로딩 속도가 클라이언트 사이드 렌더링에 비해 더 빠르다. 검색엔진최적화(SEO)가 가능 단점 초기 로딩 이후 페이지 이동 시 속도가 다소 느리다. 페이지 이동 시마다 클라이언트가 서버에게 필요..
렌더링 서버로부터 HTML 파일을 받아 브라우저에 뿌려주는 과정 HTML, CSS, JavaScript 코드의 사용을 말한다. 화면에 표시할 웹 페이지를 만드는 과정 웹 사이트 코드를 사용자가 웹 사이트를 방문할 때 보게 되는 대화형 페이지로 바꾸는 웹 개발에 사용되는 절차 렌더링 엔진에 의해 완성 렌더링 엔진 웹 페이지를 렌더링 하기 위해 웹 브라우저에서 사용하는 소프트웨어 브라우저 엔진이라고 불리기도 한다. 브라우저 렌더링 브라우저가 서버로부터 HTML 문서를 다운받는다. 렌더링 엔진이 HTML 문서를 파싱해서 DOM 트리를 만든다. DOM: HTML의 JavaScript 표현 외부 CSS파일과 함께 포함된 스타일 요소를 파싱해 CSSOM 트리(CSS 개체 모델)를 만든다. 스타일은 브라우저의 자체 ..