보통 aixos를 통해 데이터를 전송할 때 데이터들을 객체에 담아서 보내고는 했었는데, 지금까지는 대부분 .post 요청으로 데이터를 전송했었기 때문에 .get 요청으로 데이터를 보낼 일이 없었다. 그래서 그냥 평소하던대로 .post() 를 .get()으로만 바꿔서 URL을 호출하니 다음과 같은 에러가 떴다. 그래서 한번 이것저것 찾아보다 정리해본다. 415 ( Unsupported Media Type ) 에러가 발생하는 이유? 보통 415 (Unsupported Media Type) 에러가 떨어진다는 말은 전송한 데이터와 전송받는 데이터의 타입이 일치하지 않기 때문이라고 알고 있었다. 이런 에러가 예전에도 뜬 적이 있는데, json데이터를 서버로 보냈는데 Controller에서 받을 때 json이 아니..

이번에 동기가 드래그 앤 드롭 기능을 구현하는 것을 보았는데, 생각해보니 나도 드래그 앤 드롭으로 뭘 만들어 본 적이 없어서 이번에 그냥 재미삼아 만들어 보려고 한다. 실제 이것저것 만드는 기능은 바닐라js로 만들 생각이지만, 제이쿼리에 sortable 함수도 있길래 그냥 간단히 정리만 해보려고 한다. 아래와 같은 목차로 진행되니 보도록 하자. 기본문법 예제 그외 sortable의 편리한 속성들 제이쿼리의 sortable 함수를 활용한 드래그 앤 드롭 구현 당연하지만 제이쿼리의 함수를 사용하는 것이기 때문에, 제이쿼리 라이브러리를 추가해줘야 한다. cdn을 남겨놓을테니 필요한 사람은 가져다 쓰도록 하자. 제이쿼리 cdn코드 기본문법 $([열에 해당하는 컬럼]).sortable({ items : $([행에..

얼마전에 문자열을 자바스크립트 코드로 사용하기 위해 eval 함수가 있다는 것을 정리했는데 보안상의 문제로 MDN에서 절대 사용하지 말라고 하였었다. 그렇다면 그림의 떡이라는 말인데.. 여기서 MDN이 다른 대안을 문서로 제공하고 있다. 바로 window.Function을 사용하는 것이다. 오늘은 이 window.Function에 대해 정리해보려고 한다. window.Function함수를 사용하여 문자열을 자바스크립트 코드로 변환해보자. 오늘은 이 window.Function을 통해 문자열을 자바스크립트로 변환하는 것만 알아볼 것이기 때문에 자세한 내용은 MDN문서를 참조하도록 하자 - MDN문서 참조 샘플변수 선언 //샘플 변수 선언 const originVar_1 = 'this_is_originVar..

가끔 개발하다보면 다음과 같은 경우가 있다. 1. 문자열 변수로 특정 변수를 호출해야 하는 상황 2. 문자열 변수에 특정 문자열을 더해서 변수를 호출해야 하는 상황 eval함수를 활용하여 문자열로 자바스크립트 코드를 실행해보자. 1. eval 함수란? 문자로 표현 된 Javascript 코드를 실행하는 함수이다. - MDN 참조 주의 : 개발을 할 때 절대로 eval()를 사용하지 말도록 하자. 문자열을 통해 eval함수를 사용하는 것은 매우 위험하다. ※ eval()를 사용하면 안되는 이유는 MDN문서를 참조하도록 하자. 샘플변수 선언 //샘플 변수 선언 const originVar_1 = 'this_is_originVar_1'; const originVar_2 = 'this_is_originVar_2..

진짜 아무것도 아니긴 한데, 블로그에 정리가 안되어 있는 것 같아 정리해본다. 문자별 변수로 객체의 키값을 통해 value값 가져오기 이 방법이 어떨 때 주로 쓰이냐면, 같은 로직이라도 객체의 값이 변할 때 주로 쓰인다. ( 나는 그럴 때 씀.. ) 기본문법 그냥 객체에 해당 변수를 넣어만 주면 된다. 객체명[변수명] ex) obj[srh] 샘플코드 var obj = {}; var srh = ''; // true/false에 따라 obj값이 변하는 함수선언 const testFun = (bool) =>{ // bool이 true면 obj는 'one'이라는 키값을 가짐 if(bool==true){ obj = { 'one' : 'this is one', }; // 변수 srh에 'one'을 넣어줌 srh =..

addEventListener 웹API로 부모자식에게 이벤트를 추가하면 자식노드들에게도 해당 이벤트가 전파된다. 만약 나는 부모노드에만 클릭 이벤트를 추가하고 싶어서 addEventListener를 사용했는데, 자식 노드들을 클릭해도 같은 함수가 호출 된다면 당황스러울 것이다. 그래서 오늘은 addEventListener의 이벤트 전파를 막는 방법에 대해서 알아보자 addEventListener의 이벤트 전파 막는 방법 기본문법 // 여기서 item은 addEventListener로 이벤트를 추가하고자 하는 타겟을 의미함 if(item !== event.target) return; 어려울 것 없다. 그냥 addEventListener로 호출하고자 하는 함수안에 밑의 코드를 넣어주기만 하면 된다. 대충 보..