본문 바로가기

Programming Language/Javascript

(3)
[Javascript] ES6 템플릿 문자열 ES6에서는 템플릿 문자열을 문자열 연결 대신 사용할 수 있다. 그러면 문자열 중간에 변수를 삽입할 수도 있다. 전통적인 문자열 연결은 더하기 (+)로 문자열과 변수를 서로 이어붙이는 방식을 사용한다. getTitleOldVersion() { return this.lastName + ", " + this.firstName + " " + this.middleName; }, 템플릿에서는 ${ } 를 사용해 문자열 안에 변수를 집어넣을 수 있기 때문에 문자열을 단 하나만 사용해도 된다. getTitleEs6() { return `${this.lastName}, ${this.firstName} ${this.middleName}`; }, 템플릿 문자열에서는 공백 뿐아니라 개행문제 등도 유지시킨다. 따라서 아래와 ..
[Javascript] axios로 rest api 호출시 cookie 값 전달 안되는문제 해결 Vue나 react로 frontend를 개발하고 spring으로 backend를 개발할 경우 보통은 frontend server와 backend server의 origin이 달라지게 된다. 즉 frontend 주소는 localhost:3000 backend의 주소는 localhost:8080 이런 식이다. backend side에서 CORS 설정을 해줌으로서 origin이 달라지는 경우에 교차 접근 허용을 설정하여 동작을 진행하게 된다. 하지만 origin이 달라지는 경우 분명 browser에서는 cookie값이 확인이 되는데 backend에서 api 호출을 잡아보면 request객체에 cookie값이 안실려오는 경우가 있다. 이럴 경우에는 axios 호출시 config에 withCredentials :..
[Javascript] jquery 비동기 처리 (promise, $.when.apply) UI 단을 jquery로 개발할때 여러 rest api를 사용해서 데이터를 조합하고 화면을 그리는 일을 많이 하게 된다. 그러나 ajax로 비동기 api 호출 시 api 종료 시점을 판단하고 그때 무언가 하고 싶을때는 어떨게 하면 될까? 아래와 같이 rest api를 호출하는 함수가 하나 있다고 하자 function testCall(url) { $.ajax({ type : "GET" ,url : url ,async : true ,dataType: null ,beforeSend: function (xhr) { } ,success : function(response) { console.log(response); } ,error : function(jqXHR, error) { } }); } function c..