FrontEnd(Vue, Javascript, JQuery) (24) 썸네일형 리스트형 XSS - <template></template> 개인적인 프로젝트를 하면서 XSS 필터링을 처리하지 않아서 한 번 Vue에서 간단한 XSS공격을 해봤다.정상적으로 INSERT되었다?. 내가 기존에 사용하는 JSP에서는 html태그 안에 를 삽입하면javascript로 인식한다. 하지만 Vue의 template는 template안에 를 넣을 수 없으므로그냥 특수문자 취급하기 때문에 정상적으로 삽입된 것이다. [ 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조작을 방지하기 위해서 필터단에서 인증이 안되면 .. [ Javascript ] ES5, ES6 우선 ES는 ECMAScript의 약자이다. 자바스크립트 언어가 준수해야 하는 규칙 및 세부 사항, 지침이라고할 수 있다. 1) let, const 키워드 추가let과 const를 사용하면 기존의 호이스팅에 의한 var의 문제점을 해결할 수 있다. 그렇다고 착각하면 안되는 것이 let과 const도 호이스팅이 된다. 다만 선언과 동시에 초기화가 되지 않을 뿐이다. 2) 템플릿 리터럴 기존에는 변수를 " + " 기호로 상수 문자열과 비교를 했다.그러나 템플릿 리터럴( ${} )을 이용하면 똑같이 수행된다. 기존에 일일이 " + "를 세어가면서 할 필요가 없어졌다. 3) 화살표 함수화살표 함수를 표현할 수 있게 되어 코드가 간결하게 표현되어 가독성 및 유지보수성이 올라갔다.return과 { }가 생략될 수.. <Button>, <a> Vue를 하면서 RestController을 하게 되면서 무작정 SI때처럼(내가 한 프로젝트만 그럴 수도 있다) RequestParam을하면 Get이든 Post든 상관이 딱히 없었다. 그런데 RestApi의 경우 RestController을 사용하면서GET, DELETE, POST, PUT, PATCH를 하게 되면서 GET, POST에 의해 405에러가 떠서 정리를 해야겠다. form안에 있는 값을 넣기 위해서 사용된다. action에 해당하는 URI로 이동하게 되는데method="GET"을 하게 되면 안에 있는 변수들이 GET방식으로 파라미터를 전달해주고, method="POST"를 하게 되면 변수들이 POST 방식으로 진행된다. 기본적으로 숙지하자.아무것도 작성하지 않으면 기본적으로 POST이다... onMounted(), ref() 기능 개발하는데 배보다 배꼽이 더 큰 느낌이다... 자꾸 vue를 더 알아가는 기분인데 긍정적으로 생각하자 1) onMounted()필자의 경우는 Javascript, JQuery를 했으므로 이것을 했던 사람들이 간단하게 이해하기 위해서는 window.onload = function(){ /* 작성 코드 */} 라고 생각하면 될 것 같다. 즉 Dom이 완성된 후에 DomTree위에 올라탄다고 생각하면 된다. // 컴포넌트가 마운트된 후 초기화 작업 onMounted(() => { alert("test"); }); 간단한 예시인데 Component가 활성화 되면 test라는 alert창이 나타난다. document.reday(function(){ .. 이전 1 2 3 다음
