Component Based Development
SPA - Single Page Application
SPA를 가능하게 하는 프레임워크 Angular
라이브러리 React, Vue
패키지 구조나 흐름이 다 정해져있어서 가져다 쓰면 됨 React 는 Next, Vue는 Nuxt
한번에 다 가져와야해서 로드 속도는 느림 화면에서 클릭했을 때 서버로 요청을 보내는 게 아님 브라우저 url은 바뀌어도 서버 요청 안 함 클릭 하면 history api 적용돼서 url만 바뀌고 이미 가져온 각각 화면 (Page Component) 을 보여줌
Client Side Rendering - CSR 브라우저 url에 해당하는 화면 가져옴
기존에 사용했던 방식은 화면에서 클릭했을 때 => Server Side Rendering - SSR Controller에서 요청 처리 서버에서 데이터 연결해서 돌려줌 (데이터를 가져와서 화면에 뿌림)
서버 쪽에서 부하가 커짐
JSP, PHP, ASP 서버 쪽에서 DB 데이터 가져와서 화면 동적으로 가져와서 보여줌
Next, Nuxt 의 공통점 CSR도 가능, 프레임워크 SSR 가능하게 서버 쪽에서 화면 만들어서 다시 돌려줌 SSR, CSR 둘 다 가능 SSG (Static Site Generation) 도 가능
Vue 프로젝트 생성
cmd 에서 생성하기
cd 명령어로 vue.js workspace로 이동
vue create vue-project 입력
vue-project는 프로젝트 명
방향키로 이동 + enter
Babel : Vue 문법대로 만들면 es5버전으로 자동 변환
Router : 브라우저에 url이 바뀌면 url에 매핑되는 화면으로 이동하는데 브라우저 url 보고 해당 component로 이동하게 해줌
Vuex :
CSS Pre-processors : 전처리기가 css로 바꿔줌
Linter / Formatter : 문법 틀리거나 들여쓰기 같은 거 바로 확인할 수 있도록
해줌
방향키 + 스페이스바로 별표시 + enter
Vue 3 버전 사용할 거 enter
router history 그냥 default로
그 이후로는 router history 사용 n
css Sass/SCSS
ESLint + Prettier
List on save
In package.json
Save preset 사용 N
cmd vue workspace에서 vue ui 입력하면
8000번 포트로 연결됨
새프로젝트 만들기 해서
프로젝트 생성하면 똑같이 만들어짐
npm run serve
