공부 자료/자바스크립트[JS] (5) 썸네일형 리스트형 [JavaScript] JS의 라이브러리 AJAX 비동기식 자바스크립트 라이브러리인 AJAX(Asysnchronous Javascript And XML) JSP Servlet에서는 form을 이용해 action, method를 설정해 서버와 연동하는 방식과, AJAX를 이용해 서버와 연동하는 방식 두가지고 나눌 수 있는데, 둘의 차이는 동기/비동기 방식이라는 것이다. 오늘은 이 중 Ajax에 대해서 정리하고자 한다. AJAX(Asysnchronous Javascript And XML)란? : Javascript 라이브러리 중 하나 : Javascript를 이용한 비동기 통신 및 클라이언트와 서버간의 XML 데이터를 주고 받는 것 : 브라우저가 가지는 XMLHttpRequest 객체를 이용해 전체 페이지를 새로 고치지 않고도 페이지의 일부를 위해 데이터를.. [Springframework] Redirect 시 데이터 전달 요청 이후 화면 전환 혹은 새로고침 시 요청 재발행을 막아주는 redirect 얼마 전 Springframework에서 회원가입을 하면서 login 페이지로 이동시키는 로직을 수행하는 중 회원가입 요청 후 로그인 페이지로 이동했을 때 자동으로 로그인이 되는 현상이 발생하였다. 이는 클라이언트에서 POST 요청을 보낼 때 화면이 전환이 된 이후 요청이 함께 살아남았기 때문인데, 오늘은 이에 대한 블로깅을 작성할 예정이다. [POST 요청 시 요청이 살아남는다?] POST 요청을 할 경우 클라이언트에서 위함한 POST요청을 재발행하는 것을 막아주는 것이 좋다. 예를들어 회원가입에 대한 POST 요청을 진행한 다음 회원에 대한 정보를 함께 넘어가는 것은 보안상 매우 좋지 않기 때문이다. 어떻게 POST 요청 .. [JS] 타이머 / setTimeout(), setInterval() 일정 시간 이후 실행을 위한 setTimeout() 주기적으로 반복 실행을 위한 setInterval() [setTimeout() 함수] [기본 형식] setTimeout(() => {코드, 시간(ms)}); - 코드를 바로 실행하는 것이 아닌 일정 시간을 기다린 후 코드를 실행해야 하는 경우가 존재할 때 사용 [가변 변수 이용] function add(x+y){ console.log(x+y); } setTimeout(add, 2000, 3, 4); // 2초 후 7 출력 - setTimeout() 함수의 경우 세번째 인자부터 가변 변수를 받을 수 있어, 첫번째에서 넘어온 함수가 인자를 받는 경우 이 함수에 넣은 변수를 명시하기 위해 사용 [함수 실행 취소] function add(x+y){ consol.. [JS] 전개 연산자 객체나 배열을 펼쳐내는 전개 연산자 전개 구문은 문법 이름 그대로 객체 혹은 배열들을 펼치는 것을 의미하며, 배열이나 객체 앞에 점 3개를 붙여주면 되며, 펼쳐진 객체나 배열을 담을 바구니가 필요 // 펼칠 대상이 객체인 경우 {...obj} // 펼칠 대상이 배열인 경우 [...arr] // 혹은 {...arr} 기존 ES5에서는 concat을 사용하여 배열을 합쳤다면, ES6에서는 전개 연산자를 활용하여 배열을 합칠 수 있다 [펼칠 대상이 배열인 경우] const arr1 = [1, 2, 3]; const arr2 = [4, 5, 6]; const arr3 = [7, [8, 9]]; const result = [...arr1, ...arr2, ...arr3]; console.log(result); /.. [JS] 배열(array)의 삽입/삭제/추출/연결 메서드 - splice(), slice(), concat() 자바스크립트에서는 배열의 일부를 삭제하거나, 삽입, 추출이 자바에 비해서는 자유로운데, 어떤지 살펴보고자 한다. [배열의 삭제] let arr =[10, 20, 30, 40]; delete arr[1]; // (1) [10, 20, 40] arr.splice(1,1); // (2) [10, 20, 40] arr.splice(1, 2, 100, 200); // (3) [10,100, 200, 40] (1) delete 배열명[m] : 해당 배열의 m번째 요소를 삭제 (2) 배열명.splice(m 시작 위치, n 삭제 개수) : 해당 배열의 m번째(시작 위치)부터 n개만큼 삭제 (3) 배열명.splice(m 시작 위치, n 삭제 개수, n1, n2 ,,,) : 해당 배열의 m번째(시작 위치)부터 n개만큼 .. 이전 1 다음
