Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 | 31 |
Tags
- 싸피10기
- TypeScript
- git
- 백준
- sqld
- js
- pwa적용하기
- react
- 데코레이터
- Python
- VITE
- unionfind
- Javascript
- 플로이드워셜
- 싸피셜
- 머신러닝종류
- 셀프넘버
- SSAFYcial
- 14658
- Django
- 리액트
- vitepwa
- SQL
- 싸피
- 알고리즘
- PWA
- queryset
- SSAFY
- db
- QuerySetAPI
Archives
- Today
- Total
Meme's IT
[Vue] Front-end 사전지식 본문
# Front-end란?
웹사이트와 웹 어플리케이션 사용자 인터페이스(UI)와 사용자 경험(UX)를 만들고 디자인하는 것
웹 사이트 + UI + UX
→ HTML, CSS, JavaScript를 활용해서 사용자가 직접 상호작용하는 부분을 개발
🔹 Client-side frameworks
클라이언트 측에서 UI와 상호작용을 개발하기 위해 사용되는
JavaScript 기반 프레임워크
굳이 써야할까?
- 웹에서 하는 일이 많아져서 도와주는 역할이 필요함
- 다루는 데이터도 많아져서 얘네가 도와줌으로써 불필요한 코드의 반복을 피할 수 있음
- 참고) 웹 애플리케이션: 웹에서 문서만 읽는 것이 아닌, 음악을 스트리밍하고, 영화를 보고 등등의 다양한 역할을 함. 그런 현대적이고 복잡한 대화형 웹사이트를 웹 애플리케이션이라고 한다.
# Single Page Application(SPA)
페이지 한 개로 구성된 웹 애플리케이션
어떻게 페이지 한개로 되나..?
1. 처음에 서버로부터 필요한 모든 정적 HTML을 한번 가져오고
2. 브라우저가 페이지를 로드하면 Vue 프레임워크는 각 HTML 요소에 적절한 JavaScript 코드를 실행
즉, 웹 애플리케이션을 처음에 로딩하고 이후에는 새로운 페이지 요청 없이 동적으로 화면을 갱신
그러기 위해서는 CSR방식을 이용한다.
# CSR(= Client-side Rendering)
클라이언트에서 화면을 렌더링하는 방식
1. 브라우저는 페이지에 필요한 최소한의 HTML과 JavaScript를 다운로드
2. 이후 JavaScript를 이용해서 DOM을 업데이트하고 페이지를 랜더링
CSR의 장점
- 빠른속도: 서버로 전송되는 데이터 양을 최소화
- 사용자 경험: 새로고침이 없음
- Front-end와 Back-end의 분리
- Front-end는 UI 랜더링 및 사용자 상호 작용 처리
- Back-end 는 데이터 및 API 제공
- 대규모 애플리케이션을 더 쉽게 개발 및 유지 관리
CSR의 단점
- 초기 구동속도가 느림: 약간의 지연 → JavaScript가 다운로드 및 분석 실행될 때까지의 시간
- SEO(검색 엔진 최적화) 문제: 페이지를 나중에 그리기때문에 검색에 잘 노출되지 않을 수 있음
'FrontEnd > Vue' 카테고리의 다른 글
[Vue] v-on (0) | 2023.11.02 |
---|---|
[Vue] v-bind (Attribute, Class, Style) (0) | 2023.11.02 |
[Vue] Directive (0) | 2023.11.02 |
[Vue] Template Syntax (0) | 2023.11.02 |
[Vue] Vue의 기본 구조 (0) | 2023.11.01 |