20231005 _[84일차]_01. Vue 관련 개념들

[ 수제비 기출문제 ]

 소수판별

---

 

---

@RequestMapping 으로 /api 요청을 받아 처리해준다.

http://localhost:80/api/board  => api가 포함된 요청은 controller에서 받아서 처리하고

이후 vue에서 넘겨받아 데이터를 브라우저에 띄워줄예정.  

 

* vue에게 요청한게 controller로 가면 json형태의 데이터를 그대로 보여주기 때문에 구분을 위해 api를 붙여준거다.

main.js에서도 /api를 붙여준다. (Vue 와 서버 연결)

---

 

* 참고 *

 

 

8080 : 테스트용 홈페이지에서 사용.

80 : 실제 서비스용.

---

 

 

Controller와 View 사이에 데이터를 주고받을 때 xml, json 을 사용해서 통신.

( 지금은 json을 사용해서 Spring boot 와 Vue 를 왔다갔다 하는중)

 

npm run build 명령어로 vue를 spring boot에 compile 시켜주는거다.

몇개의 js로 압축시켜서 spring boot로 보내주고 이걸 jar 파일로 만들어준거다.

 

legacy에는 tomcat이 따로 있어서 war 파일로 압축해준거고

Spring boot에는 tomcat이 내장되어 있기 때문에 jar파일로 압축이 가능한거.

 

view가 제거되어 있으면 restapi (restController) 라고 부른다. 데이터 전달의 역할만 한다.

view만 서비스해주는건 SPA 라고 한다.

index.html 에서 14번줄 부분의 내용만 바꿔준다. (ajax 통신개념으로 생각하면 된다. )

 

Vue는

SPA ( Single Page Application ) _ CSR(Client Side Rendering) 방식으로 렌더링

=> 필요한 모든 정적 리소스를 처음에 한번 다운로드 한 뒤에 페이지 간 이동시,  필요한 데이터만을 JSON으로 전달받아 페이지를 갱신

 

MPA ( Multiple Page Application ) _ SSR(Server Side Rendering) 방식으로 렌더링

=> 새로운 페이지를 요청할 때마다 정적 리소스가 다운로드,  페이지 이동하거나 새로고침하면 전체 페이지를 다시 렌더링

 

---

SPA와 기존 웹사이트의 차이 (velog.io)

SPA와 기존 웹사이트의 차이

 

페이지수, 구동속도 아래로는 두개 바뀜 주의******

---

---

 

VUE의 MVVM 패턴 이해 (velog.io)

VUE의 MVVM 패턴 이해

 

 

 

[CSS] CSS, SASS, SCSS 차이점, 사용방법 :: 코딩 공부 일지 (tistory.com)

[CSS] CSS, SASS, SCSS 차이점, 사용방법

 

 

 

 

 

에스코어 | 개발자가 사랑하는 프론트엔드 프레임워크, 스벨트(Svelte) (s-core.co.kr)

에스코어

 

 

---

* DOM _ 문서의 구조(이걸 통해 원하는 데이터를 찾아갈 수 있다.) 

* VDOM (Virtual Dom)

 

---

[ Vue.js devtools ]

설치해주면 개발자도구에서 아래처럼 vue의 구조 확인가능

이런 기능도 있다. 참고

 

Vue.js 로 만든 사이트들 (카카오, 네이버, 바이브, 인프런, 프로그래머스) (tistory.com)

Vue.js 로 만든 사이트들 (카카오, 네이버, 바이브, 인프런, 프로그래머스)

 

---

DTO를 쓰는 경우 아래처럼 별칭을 만들어줬었는데 

지금은 Map을 사용하고 있으니 필요없다. 

---

[Vue3] devServer proxy 설정하는 이유, 방법 (tistory.com)

[Vue3] devServer proxy 설정하는 이유, 방법

---

 

vue.config.js에 proxy 설정을 다시 해줘서

모든페이지(/) 에 대해서 웹소켓기능을 끄고 cors를 막을예정