JavaScript에서 HTML 태그에 파라미터 전달하기: 클릭 이벤트에 파라미터 넘기기 📈1. 문제 설명 📝웹 애플리케이션에서 동적으로 HTML 태그를 생성하고, 이를 클릭 이벤트와 연결할 때, JavaScript 함수에 파라미터를 전달하는 방법에 대해 알아보겠습니다. 이 경우, 동적으로 생성된 HTML 태그에 클릭 이벤트를 할당하고, 파라미터를 함수로 넘기는 방식을 사용합니다.2. 예시 코드 설명 💻목표:우리는 Dynamically 생성된 HTML에서, **blockNoVal**이라는 값을 클릭 시 blockView 함수에 파라미터로 전달하려고 합니다.var blockNoVal = "12345"; // 예시로 사용될 blockNoVal 값var str = "";str += "" + blockN..
✅ JavaScript에서 null, undefined, 빈 문자열 처리 함수 만들기웹 개발을 하다 보면 null, undefined, 또는 빈 문자열('')이 섞인 데이터를 자주 만나게 됩니다. 이를 안전하게 처리하지 않으면 화면에 "null", "undefined" 같은 문자열이 그대로 출력되거나 예기치 않은 오류를 유발할 수 있습니다.이번 글에서는 값이 null, undefined, 또는 빈 문자열일 경우 공백("")으로 대체하는 함수를 만들어보고, 실전에서 어떻게 사용할 수 있는지 정리해보겠습니다.📌 1. 기본 목적null, undefined, '' → '' (공백으로 처리)그 외의 값은 원래 값 또는 문자열로 변환한 값을 반환💡 2. 기본 버전 함수다음은 가장 기본적인 구현입니다:functi..
⚡ 클로저(closure) 클로저(closure)라는 개념은 내부 함수가 외부함수의 스코프(범위)에 접근할 수 있는 것을 말한다. 📝 예제 function outer() { var a = 'A'; var b = 'B'; function inner() { var a = 'AA'; console.log(b); } return inner; } var outerFunc = outer(); outerFunc(); // B 해당 코드에서 inner() 함수의 스코프가 outer()함수의 스코프를 참조하고 있고 outer()의 실행이 끝나고 소멸된 이후에도 inner() 함수가 outer() 함수의 스코프에 접근할 수 있는 것을 클로저라고 한다
자바스크립트는 동적언어이다. 타입은 프로그램이 처리되는 과정에서자동으로 파악한다. ⚡ let, const 사용하는 이유 ES6 이후로 var 대신 되도록 const, let을 사용해야 한다. 그 이유는 var의 변수 호이스팅과 function-level-scope로 생기는 문제 때문이다. 1. 호이스팅(Hoisting) 이란? console.log(puppy); var puppy ="cute"; console.log(puppy) //결과 undefined cute puppy변수를 아직 선언하지 않은 상태에서 호출했는데 오류가 나지 않고 undefined라는 값을 반환한다. 이런 현상을 "호이스팅"이라고 한다. 변수 호이스팅(Hoisting)은 변수의 선언과 초기화가 동시에 이루어져, 아직 값이 없음에도 ..
fetch 활용 수강생 명단 student-2.json [ { "name" : "도레미", "major" : "컴퓨터 공학", "grade" : 2 }, { "name" : "백두산", "major" : "철학과", "grade" : 1 }, { "name" : "홍길동", "major" : "국문학과", "grade" : 3 } ] JS fetch('student-2.json') .then(response => response.json()) .then(json => { let output= ""; json.forEach(student => { output += ` ${student.name} 전공: ${student.major} 학년: ${student.grade} `; }); document.quer..
Javascript만을 활용한 스타일 변경 예제 예제 title 클릭 시 글씨 변경 이미지 클릭 시 다른 이미지로 변경 My Profile 이름 : 도레미 주소 : somewhere 연락처 : 1234-5678 const title = document.querySelector("#title"); const pfImg = document.querySelector("#profile img"); title.onclick = () => (title.innerHTML = "프로필"); pfImg.onclick = () => (pfImg.src = "images/pf2.png");
프로미스란 콜백을 사용했을 때의 복잡함을 피하기 위해, ES6부터 "프로미스(promise)" 등장 프로미스는 객체를 생성(제작)하는 부분과소비하는 부분으로 나뉜다. 프로미스 제작 코드에서 '성공'과 '실패'를 확인한 후 소비 코드로 알려준다 프로미스 체이닝 then()을 사용해 여러 개의 프로미스를 연결하는 것을 '프로미스 체이닝' 이라고 한다. 프로미스는 resolve와 reject를 사용해서 성공과 실패에 대한 동작을 명확하게 구별할 수 있고, 함수에 계속해서 함수를 포함시키지 않기 때문에 콜백 지옥을 벗어날 수 있는 좋은 방법이다. 예) A,B,C 각 실행 시간이 다르지만 A작업이 끝날 때까지 기다렸다가 B작업을 하고, 다시 B작업이 끝날 때 까지 기다렸다가 C작업을 해아 한다면? 프로미스 체이닝..
Date 함수 활용 let now = new Date(); let year = now.getFullYear(); let month = now.getMonth() + 1; let day = now.getDate(); console.log('now =', now); // Date Sun Mar 12 2023 20:59:40 GMT+0900 (대한민국 표준시) console.log(year); // 2023 console.log(month); // 3 console.log(day); // 12 예제) 'yyyy-mm-dd' 형태로 출력 let nowDate = year + '-' + month.toString().padStart(2,0) + '-' + day.toString().padStart(2,0); //..
ajax Access-Control-Allow-Origin 문제 response.addHeader("Access-Control-Allow-Origin", "*"); 추가 해주니 정상 작동!!
| 컨트롤러에서 HashMap으로 받은 내용을 Javascript에서 key, value로 출력하는 방법 //checkedList는 Controller에서 HashMap으로 전달받은 데이터이다. var checkedList = data.checkedList; Object.keys(checkedList).forEach(key => { var mKey = key; // key var mValue = checkedList[key]; // value console.log('key -- ' , key); // 7210000591-4010017668-MSG console.log('value -- ', checkedList[key]); //var mKey = key + "-MSG"; //var mValue = che..
📝 async , defer 이란 async HTML parsing과 병렬적으로 로드가 되는데, 스크랩트를 실행할 때는 파싱이 중단된다. defer HTML parsing과 병렬적으로 로드가 되지만, parsing이 다 끝나고나서 스크립트를 로드한다. 기본적으로 head안에 defer 옵션을 써서 사용하는게 효율적이고 안전하다. | head에 script 포함한 경우 | body 끝부분에 넣을 경우 | head + async | head + defer 참고 URL : https://www.youtube.com/watch?v=tJieVCgGzhs&list=PLv2d7VI9OotTVOL4QmPfvJWPJvkmv6h-2&index=2
브라우저의 하단 창으로 파일다운로드(url 방식) IE에서와 그외 브라우저에서의 방법이 다르다. window.open(data.url, "_blank", "width=100, height=100"); 참고로 data.url 의 값은 window.open(data.url, "_blank", "width=100, height=100"); 이다. if (browserChecker.ie) { // IE일 경우 window.open(data.url, "_blank", "width=100, height=100"); }else{ // 그 외의 브라우저(ex. 크롬, firefox 등) // a태크 생성해서 해당 url을 넣고 클릭 이벤트 발생시켜준다. const link = document.createElement(..