[Vue] Front-end 사전지식

# Front-end란?

웹사이트와 웹 어플리케이션 사용자 인터페이스(UI)와 사용자 경험(UX)를 만들고 디자인하는 것

웹 사이트 + UI + UX

→ HTML, CSS, JavaScript를 활용해서 사용자가 직접 상호작용하는 부분을 개발

 

 

🔹 Client-side frameworks

클라이언트 측에서 UI와 상호작용을 개발하기 위해 사용되는

JavaScript 기반 프레임워크

Client-side Frameworks

굳이 써야할까?

• 웹에서 하는 일이 많아져서 도와주는 역할이 필요함
• 다루는 데이터도 많아져서 얘네가 도와줌으로써 불필요한 코드의 반복을 피할 수 있음
• 참고) 웹 애플리케이션: 웹에서 문서만 읽는 것이 아닌, 음악을 스트리밍하고, 영화를 보고 등등의 다양한 역할을 함. 그런 현대적이고 복잡한 대화형 웹사이트를 웹 애플리케이션이라고 한다.

 

# 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(검색 엔진 최적화) 문제: 페이지를 나중에 그리기때문에 검색에 잘 노출되지 않을 수 있음