본문 바로가기

JAVASCRIPT/요점정리4

[자바스크립트]ES6 문법정리(2) - 호이스팅 그리고 const, let 목차 1. [자바스크립트]ES6 문법정리(1) - var의 문제점 지난 문법정리에서는 자바스크립트에서 var을 사용함으로써 발생하는 문제점들을 나열해보았다. 간단하게 정리해보면, var은 블럭레벨에서 선언했음에도 불구하고 그 범위를 벗어났을 때 계속 남아있었다. 또한, 긴 코드문을 작성할 때 변수를 중복선언해도 오류가 없이 작동하여 유지보수 시간이 늘어날 수 있다. 또 변수를 나중에 선언했음에도 앞쪽에서 변수를 사용했을 때 undefined라는 값이 찍히며 정상으로 작동한다. 이는, 오늘 알아볼 변수의 호이스팅 때문이다. 호이스팅https://developer.mozilla.org/ko/docs/Glossary/Hoisting 호이스팅 - MDN Web Docs 용어 사전: 웹 용어 정의 | MDNJav.. 2023. 3. 25.
[jquery]사용자 정의 함수 메소드(플러그인) 만들기 - $.fn 사용(공통 팝업 띄우기 예제) 개요 자바스크립트를 사용하다 보면 여러 페이지에서 사용할 수 있는 공통 함수를 만들고 싶을때가 많다. 여러 상황이 있겠지만 예를 들면 프로젝트를 진행하면서 여러 군데에서 같은 팝업 창을 띄울 상황이 있을 때가 있다. 그래서 이 때 fn을 이용하여 사용자 정의 함수를 만들고 공통 자바스크립트 파일에 저장한 후 필요한 곳에서 불러서 써보는 예제를 통해 fn의 사용법에 대해 알아보고자 작성했다. fn? https://learn.jquery.com/plugins/basic-plugin-creation/ How to Create a Basic Plugin | jQuery Learning Center Sometimes you want to make a piece of functionality available th.. 2023. 3. 20.
[jquery]제이쿼리 자바스크립트 라디오버튼,체크박스,셀렉트박스 option 값 가져오기, 체크여부 확인, 체크박스 여러개 체크값 가져오기 라디오버튼, 체크박스 체크 여부 확인 //두 라디오버튼이 있을 때 체크여부를 확인하려면 $('input[name=radio_btn]').is(":checked"); //true or false //자바스크립트면 document.getElementsByName('radio_btn').checked; //혹은 document.querySelector('input[type=radio][name=radio_btn]:checked'); 라디오버튼, 체크박스 체크된 값 가져오기 var radio_val = $('input[name=radio_btn]:checked').val(); //자바스크립트면 var radio_val = document.getElementsByName('radio_btn').value; 셀렉트.. 2023. 2. 24.
[자바스크립트]ES6 문법정리(1) - var의 문제점 개요 필자는 SI업체 백엔드 팀에서 근무하는 초급 개발자다. 대학에 재학중일때도 백엔드 쪽으로 진로를 희망하고 있어서 자바스크립트를 본격적으로 만질 일은 흔하지 않을 줄 알았다. 해봐야 이미 짜여져 있는 코딩을 해석하거나, 사소한 것을 수정하는 정도. 그래서 학교 과제나 프로젝트를 진행하면서 자바스크립트를 만질 때도 '아, 이것만 버티고 졸업하면 자바스크립트 안만져도 되겠지 히힣' 하면서 버텼는데 취업을 하고보니 이게 웬 걸, 더 본격적으로 JS를 만지고 있다. 물론 규모가 작은 회사라 그런 점도 있겠지만 백엔드는 프론트엔드 쪽의 로직을 어느정도 파악하고 있어야 코딩을 할 수 있기 때문에 자바스크립트도 매우 중요하다는 것을 알았다. 더 나아가 React를 공부할 때도 자바스크립트의 문법이 쓰이기 때문에 .. 2023. 2. 23.