삽질하는 프로그래머 통통만두의 판톼스틱한 삽질기

onPrint() { const html = document.querySelector('html'); const printContents = document.querySelector('.modal-body').innerHTML; const printDiv = document.createElement("DIV"); printDiv.className = "print-div"; html.appendChild(printDiv); printDiv.innerHTML = printContents; document.body.style.display = 'none'; window.print(); document.body.style.display = 'block'; printDiv.style.display = 'none'..

종종 프론트엔드를 개발하다보면 JavaScript를 사용하다가 객체(Object) 를 합쳐야 할 필요가 있을 때가 있습니다. 이 경우에는 여러 방법들이 있겠지만 본 포스팅에서는 Object.assign과 jQuery의 $.extend를 사용해서 하는 방법을 알아보겠습니다. Object.assign var obj1 = {id: 'marsland', name: '통통만두'}; var obj2 = {id: 'marsland', name: '삽질하는 프로그래머 통통만두'}; var obj3 = Object.assign(obj1, obj2); // result obj1 = {id: 'marsland', name: '삽질하는 프로그래머 ..

자바스크립트에서 객체 복사에 대해서 알아보도록 하겠습니다. 객체 복사에는 크게 얕은 복사(Shallow Copy)와 깊은 복사(Deep Copy)가 있습니다. 우선 아래의 예제를 살펴보도록 하겠습니다. 얕은 복사(Shallow Copy)var user = { name: 'marsland.tistory.com' } console.log(user.name); // marsland.tistory.com var customer = user; console.log(customer.name); // marsland.tistory.com user.name = 'great marsland.tistory.com'; console.log(user.name); // great marsland.tistory.com conso..

이번에는 네이버 밴드 공유하기에 대해서 포스팅을 해보도록 하겠습니다. 네이버 블로그 공유하기 포스팅에서 잠시나마 설명을 드렸지만 페이스북에 비해서 정말 쉽습니다. 일단 네이버 밴드 API 홈페이지에서 나와 있는 예제.. 는 앱만 있네요. 페이스북, 네이버 블로그 공유하기에 비하면 설명이 다소 부족하다는 느낌이 듭니다. 웹 예제는 제가 못찾았을 수도 있지만.. 딱히 찾으려고 해봐도 보이지는 않네요. 별다른 설명 없이 네이버 밴드 공유하기 함수 나갑니다. function shareNaverBand(url, content) { var encodeBody = encodeURIComponent( StringTool.format('{0}\n{1}', content, url) ); var encodeRoute = e..

지난 번 페이스북 공유하기에 이어서 이번 포스팅에서는 네이버 블로그 공유하기에 대해서 알아보겠습니다. 이미 페이스북 공유하기 포스팅을 보시고 오신 분이시라면 페이스북 공유하기에 비해서 네이버 블로그 공유하기의 난이도는 개껌(?) 수준입니다. 별 다른 것 없이 url 만 조합해서 호출해주면 됩니다. 먼저 네이버 공유하기 API 명세에 있는 API 호출 예제를 보도록 하겠습니다. URL입력: Title입력: 인코딩 : UTF-8 요청방식 : GET방식 https://share.naver.com/web/shareView.nhn?url=인코딩한URL값&title=인코딩한title값인터페이스는 위와 같습니다. 그렇다면 아래와 같은 함수를 만들고 특정 버튼(네이버 블로그 공유하기)을 눌렀을 경우 바로 팝업이 뜨도록..

뉴스나 블로그 등을 보시다보면 SNS 등을 하시다보면 SNS 내보내기 소셜 공유하기 등의 내용이나 버튼을 보셨을 것입니다. 이 포스팅에서는 그 중에서 페이스북 공유하기에 대해서 설명하려 합니다. 티스토리나 기타 블로그, 사이트에서 서비스를 받고 있다면 몇 번의 클릭만으로 손쉽게 소셜 공유하기나 페이스북 공유하기를 적용할 수 있지만 직접 사이트를 개발하고 운영하는 곳에서는 수동으로 버튼을 달아주고 제기능을 하도록 해주어야 합니다. 페이스북, 카카오, 트위터, 네이버, 구글, 네이버 밴드 등 굵직굵직한 사이트에서는 이를 위해서 공유하기 API 를 제공해줍니다. 물론 네이티브 앱에서 구현을 한다면 SDK 를 받고 운영체제에 맞게 스크립트도 심어줘야 하겠지만 JavaScript 로 PC 또는 모바일 MOBILE..

js 를 하다보면 문자열 조합의 경우가 빠지지 않고(?) 발생하게 됩니다. alert 창을 띄울 때 안내문구와 변수의 조합이라던가 ajax 를 통해서 받아온 데이터를 가지고 동적으로 페이지에 랜더링할 때라던가 여러 가지 경우가 있습니다. 버튼을 클릭했을 때 count 변수의 값을 1씩 증가시켜서 alert 창을 띄우는 함수를 살펴보도록 하겠습니다. var clickCount = 0; function showClickCount() { clickCount++; var msg = '버튼의 클릭 횟수는 ' + clickCount + '회 입니다.'; alert( msg ); }뭐 이렇게 단순하게 변수 하나만을 가지고 문자열을 조합하는 것은 약과에 불과합니다. 만약 ajax 통신으로 json 데이터를 가지고 ta..

letlet 예약어는 한 번 선언하면 다시 선언할 수 없습니다.let tmp = 1; let tmp = 2; // Uncaught SyntaxError: Identifier 'tmp' has already been declared const const 예약어는 한 번 할당한 값을 변경할 수 없습니다.const tmp = 1; tmp = 2; // Uncaught TypeError: Assignment to constant variable.단, 객체 {} 또는 배열 []로 선언했을 때는 객체의 속성과 배열의 요소를 변경할 수 있습니다. const obj = { id: 'id', name: 'marsland' }; console.log(obj.name); // marsland obj.name = 'marsl..