FE/JavaScript10

• 

  [JSON] JSON.stringify와 JSON.parse의 차이점 JSON.stringify 와 JSON.parse의 차이점 및 사용시점 알기 AJAX 통신을 하다 보면 누구나 한 번쯤은 JSON.stringify와 JSON.parse를 접해봤을 거고 누군가는 왜 사용하는지 헷갈리는 경우가 있을 것이다. JSON.stringify와 JSON.parse의 차이점을 비교해보며 각각 어떤시점에 사용해야 하는지 확실하게 알아두자 ! ! ! 먼저 JSON을 간략하게 정의하면, JavaScript Object Notation의 약자로, Javascript 객체 문법으로 구조화된 데이터를 표현하기 위한 문자 기반의 표준 포맷. 웹 애플리케이션에서 데이터를 전송할 때 일반적으로 사용한다. (브라우저와 서버 사이에서 오고 가는 데이터의 형식) 여기에 간단히 JSON.stringify와.. FE/JavaScript 2022. 2. 25.

• 

  [javaScript] 클로저(Closure)란,,? 자바스크립트 클로저(Closure) 개념 이해하기. '클로저(Closure)'는 자바스크립트뿐만 아니라 다른 언어에서도 사용되는 특성이다. 특히 함수를 일급 객체로 취급하는 언어(함수형 언어 functional language)에서 주요하게 사용되는 특성이라고 하니 잘 알아두자 !! 자바스크립트 또한 함수를 일급 객체로 취급한다. 함수를 일급 객체로 취급하는 것은 함수를 다른 함수의 인자로 넘길 수도 있고, return으로 함수를 통째로 반환받을 수도 있음을 의미한다. 이점을 유의하여 클로저를 이해해보자 ! 클로저(Closure) : 이미 생명 주기가 끝난 외부 함수의 변수를 참조하는 함수 자바스크립트 클로저의 간단한 전형적인 구조를 보고 이해해보자 !! function outerFunc() { var .. FE/JavaScript 2021. 2. 24.

• 

  [javaScript] chart.js 사이즈 변경 / 크기 설정 chart.js 사이즈 변경하기 / 크기 설정하기 chart.js 샘플 코드를 받아서 실행하면 사이즈가 고정적으로 되어있다. 난 그것도 모르고 계속 css 코드를 수정작업했지만 크기는 변경되지 않았다ㅏ... chart.js 크기 변경하는 방법은 너무 간단했다.. 아래는 chart.js의 샘플예제를 살펴볼수 있는 주소이다. 다양한 chart가 있으니 들어가서 살펴보면 나중에 필요한 chart를 바로 사용할 수 있을 것이다. https://www.chartjs.org/ 먼저, chart.js의 샘플예제 코드 !!! 나는 도넛차트를 사용할 예정이여서 type:'doughnut'을 선택해줬다. 크기를 변경해주는 방법은 정적 크기 변동과 반응형을 위한 동적 크기 변동 두가지가 있다. 정적이던 동적이던 크기를 변경.. FE/JavaScript 2020. 11. 27.

• 

  [javascript] Dom객체 id 존재여부 확인하기 javascript를 이용해서 페이지 내 특정 DOM 객체가 존재하는지 확인하는 방법 (id사용) 자바스크립트와 jQuery 각각의 사용 방법을 정리해본다. test라는 id를 갖고 있는 객체가 있는지 찾아보자 ! jQuery는 객체가 존재하지 않으면 length를 0으로 리턴한다. 이 점을 알고 원하는 조건에 맞게 알맞게 수정해서 사용하면 편리하겠다 :> ~~ FE/JavaScript 2020. 9. 17.

• 

  [javascript] 콜백(callback) 함수 사용이유 ,,? callback() 함수란 무엇이고 왜 사용하는가,,? 간단히 말하자면, 자바스크립트의 비동기 처리 방식의 문제점을 해결해주기 위해 특정 시점에서 호출이 되도록 사용하는 함수이다. javascript의 비동기 처리란 ? : 특정 코드의 연산이 끝날 때까지 코드의 실행을 멈추지 않고 다음 코드를 먼저 실행하는 자바스크립트의 특성. 이 특성이 어떤 문제점을 야기하냐면 , , , ajax통신할 때를 예로 들어 보자 ! ^_^ 통신을 하고 받아온 data를 가지고 실행이 되어야 하는 test 함수가 있다고 가정해보자. getData(); test(); function getData() { //ajax 통신 } function test(){ alert("test"); } 이렇게 하면 어떻게 실행이 될까? . . .. FE/JavaScript 2020. 9. 16.

• 

  [javascript] input 입력 글자 수 제한 input 입력 글자 수 제한하기 input 박스로부터 값을 입력받아 db에 저장을 하게 되는데 그 data가 size가 제한되어 있다면 설정을 해줘야된다. input type 입력 글자 수 제한하는 방법을 정리해본다. 먼저, input type이 text 일 떄를 보자 ! input type이 text일때는 maxlength의 값만 설정해주면 된다. 예시로. ID의 입력 값을 10으로 제한을 주고 싶을 때는 이렇게 해주면 된다. (간편하군~ :b) USER ID 하지만 여기서 추가로 주의해야 할 점은 input type이 number일 때는 maxlength가 정상 작동하지 않는다. ㅠㅠ input type이 number일 때는 따로 함수를 생성해서 추가해줘야된다. 생성해준 함수를 number type.. FE/JavaScript 2020. 9. 10.

• 

  [javascript] IE상에서 오류나는 .remove() 호환가능한 대체 로직 웹개발을 하다보면 Chrome에서는 잘돌아가다가 IE에서는 호환이 안되는게 여려개 있다. 나는 그것들을 지금 다 찾아야 된다 ㅠㅠ.... IE 싫다ㅏ............. 잘 돌아가던 .remove( )가 IE에서는 돌아가지 않는다. 해결방법을 찾아보자 ! //기존 코드 this.parentElement.remove(); SCRIPT438: 개체가 'remove' 속성이나 메서드를 지원하지 않습니다. 기존 코드를 IE상에서 돌리면 이런 오류가 발생한다. IE 호환이 가능한 대체 로직을 찾았다 !!! 다음과 같이 수정해주자 그러면 오류없이 삭제기능이 잘 구현될 것이다 :) //IE 호환 가능한 remove 대체 로직 var reMov = this.parentElement; reMov.parentNode... FE/JavaScript 2020. 8. 27.

• 

  [javascript] console.log() 오류 _ IE11을 이용한 디버깅 무조건적인 줄 알았던 console.log()에서 오류가 발생했다.. 뭐냥 ... -_- 찾아보니 ,,,,,,,,,,,, 브라우저에 따라, 그리고 브라우저의 세부적인 버전에 따라 console 개체가 지원하는 기능이 조금씩 미묘하게 다르다고 한다. 극단적으로는 console 개체 자체가 지원되지 않는 버전도 당연히 존재하기 때문에 그런 경우 console 개체를 호출하면 오류가 발생한다고 한다 ㅠ__ㅠ 그럼 우짤깡 ... 바로바로바로 크로스-브라우징 개발 환경에서 console 개체의 기능을 사용하고 싶지만 오류는 피하고 싶다면 다음과 같이 방어용으로 코드를 페이지 최상단에 추가해주면 오류는 피할 수 있당 ! 와.후.ㅇ0ㅇ if (typeof window.console == "undefined") { w.. FE/JavaScript 2020. 8. 26.

• 

  [javascript] html DOM control하기 javascript로 html DOM을 control하는 속성들의 사용방법에 대해 정리하려한다. document.getElementById("testId").innerHTML = "테스트"; .innerHTML을 사용하다가 속성을 제대로 알지 못하고 사용해 오류가 발생해 여러가지 속성들에 대해 파헤쳐 공부하고 정리한다. 먼저 innerHTML과 outerHTML의 차이를 알아보자 ! 차이점을 알고 사용하면 헷갈리지 않고 확실하게 구현할 수 있을 것이다. ▶ innerHTML : innerHTML에서 지정한 요소 태그를 제외한 안쪽(내부)를 가져온다. 자기 자신을 포함하지 않는다. ▶ outerHTML : outerHTML에서 지정한 요소 태그를 포함하여 가져온다. 자기 자신을 포함한다. 추가적인 속성을 .. FE/JavaScript 2020. 6. 23.

• 

  [javascript] js 파일생성으로 jsp 반복부분 간편하게 사용하기 코드를 좀 더 효율적으로 코딩하기 위해 jsp에서 자주 반복되는 ajax부분을 따로 JS파일로 빼려고 한다. 이 작업을 하는 가장 큰 이유는 코드의 재사용을 줄이기 위해서이다. 기존에는 Servlet에 request 요청을 하고 싶을 때마다 그 jsp 안에서 ajax코드를 다 써야한다. 하지만 공통으로 사용중인 ajax로 통신하는 부분을 js로 빼놓으면 jsp에서 ajax를 쓰고 싶을 때 해당 함수 호출만 하면되는 간편함이 생긴다. 시작해보자 ! 먼저 js파일을 만들어서 공통으로 사용할 함수를 생성해준다. 나는 ajax통신 부분을 ajaxFunc() 함수로 만들었다. //ajax 함수 - js파일에 생성 function ajaxFunc(url, param, callback){ console.log("js.. FE/JavaScript 2020. 6. 18.