Intro

1. Framework

Framework란?

어플리케이션을 구축 및 배포하는 표준 방법을 제공하며 소프트웨어 응용 프로그램. 제품 및 솔루션의 개발을 용이하게 하기 위해 더 큰 소프트웨어 플랫폼의 일부로 특정 기능을 제공하는 보편적이고 재사용 가능한 소프트웨어 환경입니다.
그 중에서도 웹 프레임위크(Web framework) 또는 웹 어플리케이션 프레임워크(Web application framework)는 웹 서비스개발을 위한 프레임워크이다.

프레임워크는 소프트웨어를 구축할 수 있는 구조입니다. 기초 역할을 하므로 처음(Scratch)부터 완전히 시작하지 않습니다. 프레임위크는 일반적으로 특정 프로그래밍 언어와 연결되며 다양한 유형의 작업에 적합합니다.
생산성 - 시간이 절약되고 오류 위험이 줄어듭니다. 치음부터 모든 것을 작성할 필요가 없으므로 오류가 발생할 가능성이 적습니다.

• 더 안전한 코드 (secure code)
• 더 간단한 테스트 및 디버깅 (simpler test debugging)
• 중복 코드 방지 (avoid duplicate code)
• 깨끗하고 쉽게 적용 가능한 코드 (clean, adaptable code)
• 프로젝트에 특정한 코드 작성에 집중 (focusing 예 specfic code)
• 확장성 (extensibllity)

2. SPA(Single Paga Application)

2-1 SPA(Single Page Application)란?

SPA(Eh일 페이지 응용 프로그램)은 웹 브라우저가 전제 새 페이지를 로드하는 기본 방법 대신 웹 서버의 새 데이터로 현재 페이지를 동적으로 다시 작성하여 사용자와 상호 작용하는 웹 응용 프로그램 또는 웹 사이트입니다. 목표는 웹사이트를 네이티브 앱처럼 느끼게 하는 더 빠른 전환입니다.

SPA에시는 페이지 새로 고침이 발생하지 않습니다. 대신에 필요한 모든 HTML, JavaScript 및 CSS 코드는 단일 페이지 로드로 브라우저에서 검색하거나 적절한 리소스가 일반적으로 사용자 작업에 대한 응답으로 필요에 따라 동적으로 로드되어 페이지에 추가됩니다.

• Vue.js
• React
• Angular
• Svelte

2-2 SPA vs MPA

SPA(EIP 페이지 응용 프로그램)온 월 브라우저가 전체 새 페이지를 로드하는 기본 방법 대신 월 시비의 새 데이터로 한재 원 페이지를 업데이트한다.

SPA (CSR:클라이언트사이드렌더링)

• 웹에 필요한 모든 정적 리소스를 최초 한 번에 다운로드
• SEO(Search Engine Optimization)에 취약
• 첫 로딩이 비교적 느림
• 웹 사용자 경험(UX)
• 서비의 템플릿 연산을 클라이언트 분산으로 성능 우위
• 컴포넌트를 개발 우위(재사용성)

MPA (SSR:서버사이드렌더링)

• 새로운 페이지를 요청할 때마다 정적 리소스가 다운로드
• SEO(Search Engine Optimization)에 유리 (완성된 HTML 파일)
• 첫 로딩이 매우 빠름
• 페이지 라우팅(주소)가 바필 때 다다 재요청
• 서비렌디렁으로 인한 성능 이슈 가능성

3. Vanilla JS

Vue, React, Angular와 같은 web framework 또는 jQuery와 같은 library 다신 자바스크립트를 순수하기 사용하는 방법

• 컴퓨터 소프트웨어 및 때로는 컴퓨터 하드웨어 또는 알고리즘과 같은 기타 컴퓨팅 관련 시스템이 원래 형태에서 커스터마이징 되지 않은 경우 "바닐라"는 “보통”보다 "기본”을 더 의미
• 라이브러리 또는 써드파티 플러그인을 쓰지 않는 경우