FrontEnd(Vue, Javascript, JQuery)/Vue (12) 썸네일형 리스트형 [ AxiosInstance ] 기존 화면에서는 일일이 catch문을 통해서 로그인 실패에 대한 안내문을 발송했다.그러나 로그인 필요화면이 늘어날 때마다 일일이 하는게 비효율적이라고 느껴졌다.그래서 AxiosInstance객체에서 Interceptor을 이용해 요청을 가로 채고 공통 모듈을 만드는게 효율적인 것 같다. [ Promise ] async, awiat을 통해서 Promise객체를 return한다고 했다. 그에 대해서 배워보자. 어떤 작업에 관한 '상태 정보'를 갖고 있는 객체입니다. 작업의 결과가 promise 객체에 저장됩니다. 상태1) pending작업이 진행중임을 의미하는 pending. 2) fulfilled 작업이 성공적으로 완료되었음을 의미하는 fulfilled. 이때, 작업이 성공해서 promise 객체가 fulfilled 상태가 되면, promise 객체는 '작업의 성공 결과'도 함께 갖게됩니다. (작업 성공 결과) 3) rejected작업이 실패했음을 의미하는 rejected. 이때, 작업이 실패해서 promise 객체가 rejected 상태가 되면, promise 객체는 '작업의 실패 이유'에 관한 정보도 .. [ async, await ] 기본적으로 javascript는 단일 쓰레드 동기적 처리이다. 그러나 Ajax나 Axios같은 경우로 비동기적 처리를사용함으로써 페이지 로드 시간 자체를 줄일 수 있다. 근데 비동기 처리의 문제점은순서를 보장해주지 않는다는 것이다. 나의 문제점은 다음과 같았다. 로그아웃을 했는데 비동기적인 처리로 인해서 logout처리를 통해서 v-if v-else문이 store의 값이 인식하기도 전에실행되어서 token값이나 JSESSIONID를 비웠지만 화면에서는 Login을 한 것처럼 인식이 되었다.결국 로그아웃 처리를 async, await 동기적으로 처리해서 해결했다. async로 동기적으로 실행한다고 선언한다.그리고 await 키워드는 Promise 객체가 완료될 때까지 코드 실행을 일시 중지한다. [ router.beforeEach ] 기존에 SpringSecurity를 통해서 백엔드에서 인증을 못하면 수행하지 말아야 할 치명적인 에러는 막았다.그런데 프론트 단에서도 생각을 해야 한다. 예를 들면 다음과 같다. 1) URI를 통해 직접 Get요청을 하게 되면 사용자의 이름과 page를 직접 입력한다. → RestFulAPI의 장점이자 단점이라고 생각한다. 자원에 대한 요청을 직관적으로 알 수 있어서 개발 속도에 향상을 기여하지만 제대로 만들지 않으면 자원에 대한 요청을 직접 URI에 요청할 수 있으므로 보안에 신경써야 할 것 같다. 2) 그 후 게시글 등록(GoTo Register)을 하면 오른쪽 이미지와 같이 정상적으로 처리가 된다. 3) 하지만 CRUD조작을 방지하기 위해서 필터단에서 인증이 안되면 .. onMounted(), ref() 기능 개발하는데 배보다 배꼽이 더 큰 느낌이다... 자꾸 vue를 더 알아가는 기분인데 긍정적으로 생각하자 1) onMounted()필자의 경우는 Javascript, JQuery를 했으므로 이것을 했던 사람들이 간단하게 이해하기 위해서는 window.onload = function(){ /* 작성 코드 */} 라고 생각하면 될 것 같다. 즉 Dom이 완성된 후에 DomTree위에 올라탄다고 생각하면 된다. // 컴포넌트가 마운트된 후 초기화 작업 onMounted(() => { alert("test"); }); 간단한 예시인데 Component가 활성화 되면 test라는 alert창이 나타난다. document.reday(function(){ .. Vue3 디버깅 ToyProject1 하면서 우선 하나만 페이지 만들어보자는 생각으로 Debugging을 우선 생략하고console.log로 했다. 이게 더 바보같은 짓이었다... 하면 할수록 debugging 먼저 설정할 걸 후회했다. 일단 chrome에서 제공하는 vue component에 대한 이벤트나 데이터같은 정보를 아는 방법을 알아보자 1) Chrome에서 제공하는 devTools 설치하기 https://chromewebstore.google.com/?pli=1 로 들어간다. 그러고 vue를 검색하면 다음과 같은 이미지가나온다. 그 후 vue.js devtools를 설치한다. 2) 설치 후 개발자 도구(F12) 열기그러면 다음과 같은 그림이 나온다.왼쪽 상단 탭에 [ >> ] 에 [ Vue ] 를 클릭하면 .. [ Composition API ] vs [ Optional API ] 이전 글에서 Vue Import 예약어 관련해서 Composition API라는 말이 나왔다. Optional API먼저 Optional API를 알아보자. 주로 Vue2에서 쓰인다.컴포넌트의 속성, 메소드, 라이프사이클 훅 등을 객체 리터럴 형태로 정의할 수 있다.→ 객체 리터럴이란 중괄호({})를 사용하여 객체를 정의하고, 속성-쌍 (key-value) 형태로 프로퍼티를 구성하는 것이다. 다음 이미지가 예시이다. data 객체는 컴포넌트의 데이터 속성을 정의하고,methods 객체는 컴포넌트의 메소드를 정의한다.created는 Option API에서 사용하는 라이프사이클 중 하나이다. → 상당히 직관적이다. 각각의 역할이 무엇인지 직관적으로 알 수 있다. 그런데 저런 함수가 많아지면 .. vue, vue-router, vuex, axios ☏ 1) import Vue from 'vue' vue를 사용하는데 기본적인 API이다. 1 - MVVM 패턴Vue.js MVVM(Model-View-ViewModel) 패턴을 기반으로 한 프론트엔드 라이브러리이다.데이터 바인딩과 뷰 갱신을 효율적으로 관리하여 UI와 비즈니스 로직을 분리하는데 도움을 준다. 다음 이미지가 그 예시다. axios.post를 통해 해당 url을 통해 서버에 갔다와서 reactive라는 함수를 통해 state객체를 저장했다. 그 후, 2번 째 그림에 있는 state.form.email을 통해 사용자단에 동적으로 보여주는 것이다.결국 MVVM의 View-Model부분에 해당하는 데이터를 View단에서 처리하는 것이다. 2. 선언적 렌더링Vue.js는 HTML 템플릿을 사용하여 U.. 이전 1 2 다음
