KOMAS

백엔드는 spring security, 프론트엔드는 Vue로 구성해서

로그인, 로그아웃, Post 요청 처리를 하는 도중

계속해서 cookie가 전달되지 않는 문제가 있었다.

요청마다 withCredential을 true로 설정해주면 되었는데,

또 다른 문제는 get 요청은 동작하는데 post 요청은 동작하지 않았다.

전역으로 설정하니 post 요청도 해결되었다.

알고보니 axios post 메서드에는 매개인자 순서가 있다.

post(url, data, config) 순서로 넣어주면 동작한다.

post(url, config) 으로 넣어서 동작하지 않았던 것

Axios api가 컴파일 에러, 런타임 에러가 나지않고 동작하여 이걸 눈치채지 못했다.

도움이 된 곳

https://yamoo9.github.io/axios/guide/api.html#http-%EB%A9%94%EC%84%9C%EB%93%9C-%EB%B3%84%EC%B9%AD

Vue 설치

npm install -g vue

npm install -g @vue/cli

-g global

cli 를 사용해서 환경 설정을 통일화.

Vue 프로젝트 생성

vue create 프로젝트명

Vue 프로젝트 실행

cd 프로젝트 내부 폴더로 이동

npm run serve

package.json 

의존 모듈 관리

node_modules 

적용된 모듈들을 볼 수 있다.

초기 설정 살펴보기

main.js

Vue를 실행하면 가장 먼저 main.js 가 실행된다.

App.vue에 index.html 에 있는 div id="app"을 마운트 시킨다.

전역 설정은 이곳에 추가한다.

App.vue

라우터가 포함되어있다.

전역으로 사용되는 template, style을 이곳에서 관리한다.

#app은 최상위 div가 된다.

ROUTER

SPA는 라우터를 통해 single page로 하위 부분만 교체하므로, 사용자 경험을 향상시킨다.

<router-view/> 부분이 교체된다.

router/index.js 에서 라우터 설정을 해줄 수 있다.

path경로와 view.vue 를 매핑

import를 상단에 할 경우, 바로 loading,

component에서 import할 경우, 해당 path에 접근해야 import되는 lazy loading 방식으로 동작한다.

VIEWS

UI

화면에 보일 라우터에 의해 교체되는 template 

사용할 components를 지정해서 사용한다.

해당 view에서만 사용되는 script를 직접 작성할 수도 있다.

Components

UI + 재사용할 기능

화면에 보일 template + 재사용할 js  + 재사용할 css 

화면뿐만 아니라 js, css 를 여러 VIEW에서 사용할 수 있도록 component화한 것이다.