JavaScript
-
location.assign location.replace 기능 새로운 페이지로 이동된다. 현재 페이지에서 새로운 페이지로 이동하기 때문에 뒤로가기 버튼을 통해 이전페이지로 이동이 가능하다. 현재 페이지에서 새로운 페이지를 덮어 씌운다. 현재 페이지를 새로운 페이지로 덮어 씌우기 때문에 이전 페이지로 이동이 불가능하다. 타입 메서드 메서드 히스토리 기록된다. 기록되지 않는다. 예 location.assign = 'https://www.naver.com' location.replace = 'https://www.naver.com' location.assign 는 기존페이지에서 새로운 페이지로 이동시키기 때문에 뒤로가기 버튼을 통해 이전페이지로 갈 수 있다. 하지만 location.replace 는 기존페이..
location.assign 와 location.replace 차이location.assign location.replace 기능 새로운 페이지로 이동된다. 현재 페이지에서 새로운 페이지로 이동하기 때문에 뒤로가기 버튼을 통해 이전페이지로 이동이 가능하다. 현재 페이지에서 새로운 페이지를 덮어 씌운다. 현재 페이지를 새로운 페이지로 덮어 씌우기 때문에 이전 페이지로 이동이 불가능하다. 타입 메서드 메서드 히스토리 기록된다. 기록되지 않는다. 예 location.assign = 'https://www.naver.com' location.replace = 'https://www.naver.com' location.assign 는 기존페이지에서 새로운 페이지로 이동시키기 때문에 뒤로가기 버튼을 통해 이전페이지로 갈 수 있다. 하지만 location.replace 는 기존페이..
2022.09.07 -
modal id 값은 각각 아래와 같다. 1. manageDnisDialog 2. manageDnisLicenceCountDialog 레이어 팝업창을 2개 띄우기 위해 jquery ajax를 사용하여 Controller 에서 html 코드를 받아온 후 modal 태그에 직접 넣었다. // 첫번째 modal 레이어 팝업 $.ajax({ cache : false, type : 'POST', dataType : "html", url : menu_href, data : { dnis : dnis, action_type : action_type }, success : function(data) { $('#manageDnisDialog').html(data); //html data가 담길 target div $('#..
BootStrap modal 2개 띄웠을 때 hidden.bs.modal event 처리modal id 값은 각각 아래와 같다. 1. manageDnisDialog 2. manageDnisLicenceCountDialog 레이어 팝업창을 2개 띄우기 위해 jquery ajax를 사용하여 Controller 에서 html 코드를 받아온 후 modal 태그에 직접 넣었다. // 첫번째 modal 레이어 팝업 $.ajax({ cache : false, type : 'POST', dataType : "html", url : menu_href, data : { dnis : dnis, action_type : action_type }, success : function(data) { $('#manageDnisDialog').html(data); //html data가 담길 target div $('#..
2022.08.16 -
Javascript 의 "=="는 Equal Operator 이고, "==="는 Strict Equal Operator 이다. ==는 서로 다른 변수 유형이지만 변수 값을 기반으로 유형을 수정하여 비교한다. 즉, ==는 변수 값이 같으면 true를 반환하고, === 는 변수의 유형까지 비교하여 반환한다. == : 서로 다른 유형의 두 변수의 값을 비교 === : 엄격한 비교를 하는것으로 변수의 값 뿐만 아니라 변수의 유형까지 비교한다. == ==는 a == b 라고 했을 때 a 와 b 의 값이 같은지를 비교해서 같으면 true, 다르면 false 라고 한다. 예시) 0 == false // true 2 == "2" //true (변수의 유형을 자동변환) console.log(typeof 2); //num..
Javascript == 와 === 의 차이Javascript 의 "=="는 Equal Operator 이고, "==="는 Strict Equal Operator 이다. ==는 서로 다른 변수 유형이지만 변수 값을 기반으로 유형을 수정하여 비교한다. 즉, ==는 변수 값이 같으면 true를 반환하고, === 는 변수의 유형까지 비교하여 반환한다. == : 서로 다른 유형의 두 변수의 값을 비교 === : 엄격한 비교를 하는것으로 변수의 값 뿐만 아니라 변수의 유형까지 비교한다. == ==는 a == b 라고 했을 때 a 와 b 의 값이 같은지를 비교해서 같으면 true, 다르면 false 라고 한다. 예시) 0 == false // true 2 == "2" //true (변수의 유형을 자동변환) console.log(typeof 2); //num..
2022.08.16 -
옵셔널 체이닝(Optional Chaining)은 ES2020에서 등장한 새로운 연산자로서 '?.' 형태로 쓰인다. 접근하는 데이터가 유효한지 명시적으로 검증하지 않고 연결된 객체 체인 내에 깊숙히 위치한 속성 값을 읽을 수 있는 연산자이다. 참조된 값이 null 혹은 undefined 여도 에러로 뱉지 않고 undefined 값을 리턴한다. 함수 호출시에도 마찬가지로 값이 없다면 undefined를 리턴한다. 옵셔널 체이닝이 필요한 이유) 아래와 같이 user 객체의 info.name에 접근했지만 읽을 수 없는 TypeError가 나타났다. 당연히 존재하지 않는 값에 접근 했기 때문에 에러가 발생한다. const user = {}; console.log(user.info.name); * TypeErro..
옵셔널 체이닝(Optional Chaining) - ?.옵셔널 체이닝(Optional Chaining)은 ES2020에서 등장한 새로운 연산자로서 '?.' 형태로 쓰인다. 접근하는 데이터가 유효한지 명시적으로 검증하지 않고 연결된 객체 체인 내에 깊숙히 위치한 속성 값을 읽을 수 있는 연산자이다. 참조된 값이 null 혹은 undefined 여도 에러로 뱉지 않고 undefined 값을 리턴한다. 함수 호출시에도 마찬가지로 값이 없다면 undefined를 리턴한다. 옵셔널 체이닝이 필요한 이유) 아래와 같이 user 객체의 info.name에 접근했지만 읽을 수 없는 TypeError가 나타났다. 당연히 존재하지 않는 값에 접근 했기 때문에 에러가 발생한다. const user = {}; console.log(user.info.name); * TypeErro..
2022.08.16 -
* jquery $(''#subMenuDialog") * document.getElementById("subMenuDialog") 이 두개는 같은 DOM 데이터를 불러오는건 동일하다. $("#subMenuDialog") 처럼 jquery 를 이용해 DOM의 id를 불러올때는 jquery 의 객체를 반환한다. 그리고 document.getElementById("subMenuDialog") 를 이용해 id 값을 부를땐 DOM 객체 자체가 넘어온다. 아래 예시를 확인해보자 예를 들기 위해 bootstrap의 modal 창을 subMenuDialog 라는 id 값으로 생성하여 불러온다. 아래와 같이 html 코드가 있다. > document.getElementById("subMenuDialog") 를 통해 불러..
Jquery $() 와 document.getElementById() 의 차이* jquery $(''#subMenuDialog") * document.getElementById("subMenuDialog") 이 두개는 같은 DOM 데이터를 불러오는건 동일하다. $("#subMenuDialog") 처럼 jquery 를 이용해 DOM의 id를 불러올때는 jquery 의 객체를 반환한다. 그리고 document.getElementById("subMenuDialog") 를 이용해 id 값을 부를땐 DOM 객체 자체가 넘어온다. 아래 예시를 확인해보자 예를 들기 위해 bootstrap의 modal 창을 subMenuDialog 라는 id 값으로 생성하여 불러온다. 아래와 같이 html 코드가 있다. > document.getElementById("subMenuDialog") 를 통해 불러..
2022.08.03 -
환경구성 : Spring Boot + Jquery + Thymeleaf Jquery ajax를 통해 Spring Boot Controller로 데이터를 보낼때 415 에러, 400 에러가 났다. 결론1. Controller 로 ajax를 통해 Json 데이터를 보낼땐 String 형태로 보내기HTTP 프토로콜 요청의 본문(Body) 에 들어가는 데이터는 문자열이어야 한다.Ajax 또는 Axios 를 통해 요청을 보낼 때 Javascript 객체를 그대로 보낼수는 없고문자열로 직렬화 해야한다. 방법const user = { name: "홍길동", age: 30 };axios.post('/api/test', JSON.stringify(user), { headers: { 'Content-Type': 'app..
Jquery Ajax 415 에러(occure Ajax request Error. status code:415, request uri), 400 에러환경구성 : Spring Boot + Jquery + Thymeleaf Jquery ajax를 통해 Spring Boot Controller로 데이터를 보낼때 415 에러, 400 에러가 났다. 결론1. Controller 로 ajax를 통해 Json 데이터를 보낼땐 String 형태로 보내기HTTP 프토로콜 요청의 본문(Body) 에 들어가는 데이터는 문자열이어야 한다.Ajax 또는 Axios 를 통해 요청을 보낼 때 Javascript 객체를 그대로 보낼수는 없고문자열로 직렬화 해야한다. 방법const user = { name: "홍길동", age: 30 };axios.post('/api/test', JSON.stringify(user), { headers: { 'Content-Type': 'app..
2022.07.26