vue.js 기초: 프론트엔드 소개, 프론트엔드 프레임워크 비교

Frontend 웹 화면을 담당
Backend 중요한 서비스 로직 (데이터 저장, 관리)

Web Publising 디자인 된 내용을 화면에 구현

화면 구성에 용이한 코드 구조를 통해서 웹 표준과 웹 접근성을 준수해서 작성하고
디자이너가 구상을 하면 코드로 정확하게 구상을 하고 모바일과 데스크탑의 각기 다른 화면을 구현해야하는 일련의 작업.

Frontend Programming
- 서버에 저장된 데이터 요청

- 요청된 데이터를 가공해서 화면에 출력
- 사용자가 사용하기 편하고 효율적인 UI/UX가 가미된 상태값 등을 가공하고 각각의 기능들을 연결
- 화면에 주소를 담당하는 라우팅
- web publishing : 디자인된 내용을 화면에 구현

1) 올바른 HTML표준 코드와 문맥에 맞는 코드 사용

2) 화면 구성에 용이한 코드 구조를 통해서 웹 표준과 웹 접근성을 준수해서 작성

3) 모바일과 데스크탑의 각기 다른 화면을 구현

BackEnd Programming
- 보안
- DataBase 연결 및 관리
- 서비스의 핵심적인 코어 기능을 제작
- 서버 전송 처리해서 각각의 서비스로 분리해주는 컨트롤러
- 수집된 데이터를 데이터화 시켜주는 '모델링 작업'

 

---

프론트엔드 프레임워크

- 프로그레시브 프레임워크, 라이브러리
- 라이브러리 형태로 도입을 해서 높은 자유도를 바탕으로 다양한 방식으로 구현 가능
- 정해진 규칙과 프레임에 맞춰서 코드를 개발 가능
프레임워크 특징 

- SPA (Single Page Application))
- 하나의 페이지가 모든 화면과 기능을 담고 있음 (=페이지를 한번만 불러오면 됨)
- 페이지 안에서 화면이 전환(=새로고침이 발생하지 않고 페이지 이동 가능)

react
- 페이스북에서 개발
- 현재 가장 인기 있는 라이브러리
- 많은 IT기업에서 이용
- 높은 자유도
- 코드가 Plain JS와 거의 흡사
- TS 사용
- 다양한 상태 관리 툴
- 뛰어난 컴포넌트
- 방대한 커뮤니티
- 초심자에게는 진입장벽이 약간 높음

vue
- Angular와 React 장점만 골라 만듦
- 비교적 쉬운 학습 난이도
- 성능도 리액트와 비교하여 대등함
- 국내에서도 높은 점유율
- 꾸준한 업데이트와 방대한 커뮤니티
- 컴포넌트 재사용성과 상태관리가 우수

angular
- React와 vue보다 난이도가 높음
- 안정적인 시스템
- 엔터프라이즈급 규모의 프로젝트에 적합
- react와 vue보다 대중적이지는 않음