2023.07.03.
Vuejs
- 오픈소스(MIT)
- 프로그레시브 자바스크립트 프론트엔드 프레임워크
- 최초 출시: 2014년 2월
- 낮은 러닝 커브(배우기 쉽다)
- 전 세계적으로 점점 그 영향력이 커져가고 있는 프론트엔드 프레임워크 중 하나
- Vue를 만들어낸 개발자가 구글 출신이라, 앵귤러와 리엑트의 장점을 살려서 제작
- Vue2버전에서 Vue3버전으로 올라갈 때 컴포지션 API를 추가. 시대 변화에 대응
- 가상 돔(Virtual DOM)을 사용하기 때문에 변화감지를 빠르게 처리
- 소-중 규모의 프로젝트에 적합
- 추가 빌드 과정 필요 없음
- 컴포넌트 단위
- SSR, SSG 지원
- SPA
* 프로그레시브 웹 앱(Progressive Web Apps/PWA)?
- 웹을 통해 전달되는 응용 소프트웨어의 일종
- HTML, CSS, Javascript를 포함한 일반 웹 기술들을 사용하여 제작
- 표준을 준수하는 브라우저를 사용하는 플랫폼에서 동작하도록 고안
- 모바일 앱처럼 작동되며 보여지는 특성(모바일 앱에서 동작하도록 구현된 기술을 사용하여 구현할 수 있음 -예: 알림)
- 네이티브 모바일 기기가 가진 기술의 장점을 살리도록 고안
- 대표예: 스포티파이 프로그레시브 웹 앱(Spotify PWA)
* 컴포지션 API(Composition API)?
- Come + Position : 구성 = 위치(position)을 조합(come)한다
- 기존 OOP(Object Oriented Programming)의 특성중 하나인 상속(Inheritance)의 개념을 깨부수고 새롭게(새롭진 않지만) 뜨고있는 프로그래밍의 개념 중 하나
- 코드의 재 사용성을 상당히 높이며
- 유연성이 확장되고
- 코드가 획기적으로 짧아짐에 따라 개발 시간이 단축되며
- 가독성 및 유지보수에도 좋은 특징
- 예제코드
* SSR(Server Side Rendering)?
- 서버 사이드 렌더링
- 서버에서 렌더링(DOM을 그려서)하여 완성된 프론트엔드
- 국내에서 엄청나게 사용되고 있는 eGov의 한 주축인 JSP/Servlet의 아키텍처
- CSR(Client Side Rendering)보다 느린 속도
- 하지만 DOM을 그릴 때 Backend <-> Frontend 의 과정이 없기 때문에 더 빠르게 작성되는 DOM
- SEO(Search Engine Optimization)에 탁월
* SSG(Static-Site-Generation)?
- 정적 사이트 생성기
- (정적 사이트라서)백단이 필요하지 않기 때문에 매우 빠른 속도
- 주로 텍스트 사이트 전용(위키피디아 같은)
- SSG만 사용하기 보다는 SSR + SSG 조합을 사용하여 개발
- 백단을 필요로 하지 않기 때문에 보안에 아주 좋음
- 개발/배포가 굉장히 쉬움
- SEO를 사용함에 있어서 최적화된 기술
- Vuejs의 Nuxt.js가 해당 기술제공(Nuxt.js는 SSR, SSG 두가지 기술 전부 제공)
* SPA(Single Page Application)?
- 하나의 페이지로 구현한 어플리케이션
* 컴포넌트(Component)?
- 말 그대로 전체를 이루는 하나의 작은 조각
* SEO(Search Engin Optimization)?
- 검색엔진 최적화: 검색엔진에서 찾기 쉽도록 사이트를 개선하는 프로세스(=상위노출)
javascript fullstack dev