반응형 Programing/JavaScript123 Javascript Canvas 텍스트 추가 fillText, strokeText Javascript Canvas 텍스트 추가 fillText, strokeText Canvas 에 텍스트를 추가하는 방법에 대해 알아보겠습니다. 우선 Canvas 태그를 생성해줍니다. 그럼 아래와 같이 Canvas가 보이실꺼에요. 324x68 사이즈의 Canvas가 생성되었습니다. 이제 Canvas에서 텍스트를 추가할 수 있는 fillText와 strokeText를 활용해보겠습니다. 사용법은 아래와 같습니다. 1. fillText fillText(text, x, y, [, maxWidth]) Canvas 영역 내 x, y 위치에 text를 추가합니다. maxWidth는 옵셔널하며, 최대 폭을 지정할 수 있습니다. 위에 생성한 Canvas에 fillText를 사용해보도록 하죠. const ctx = doc.. Programing/JavaScript 2022. 1. 20. [VanilaJS Free Grid library] Aljjabaegi Grid Grand Open [Free Grid library] Aljjabaegi Grid Grand Open 여러 무료 라이브러리를 사용해오다가 많은 요구사항에 맞추어 커스텀하기 어려워 직접 만든 그리드를 공개합니다. 페이징, 정렬, 단일조회, 복수조회, 편집, 엑셀 다운로드 등 다양한 기능을 제공합니다. 추후 각 옵션 기능에 대한 설명 페이지 Link를 추가하도록 하겠습니다. Quick Usage IE 에서는 정상동작 하지 않을 수 있습니다. 추후 IE에서도 동작하는 버전을 공개할 예정입니다. Options id : Grid Element 를 추가할 div 태그의 id를 설정합니다. (String / default "grid") url : 데이터를 조회할 url을 설정합니다. (String) title : 그리드의 제목, 캡션.. Programing/JavaScript 2021. 11. 24. javascript Chain-of-responsibility pattern 체이닝 패턴 javascript Chain-of-responsibility pattern 체이닝 패턴 javascript 에서 체이닝 패턴에 대해 알아보겠습니다. 예를들어 javascript 에서 selector를 활용해 어떠한 element의 child에 접근 하고자 할 때 아래와 같이 접근 하는 경우를 볼 수 있습니다. 테스트 "grid" 를 id property로 갖는 요소에 접근하는 getElementById 메소드를 호출 후 바로 .getElementsByTagName 메소드를 호출했습니다. 이렇게 연속적으로 메서드를 연결해서 호출할 수 있도록 하는 패턴이 체이닝 패턴입니다. 이제 체이닝 패턴을 어떻게 구현하는지 알아보도록 하겠습니다. 계산기 Class를 생성해 예로 들어보겠습니다. value 변수를 갖고 .. Programing/JavaScript 2021. 11. 16. javascript 비공개 프로퍼티와 메소드, class prototype private public javascript 비공개 프로퍼티와 메소드, class prototype private public javascript 프로퍼티와 메소드를 private하게 활용하는 방법을 알아보겠습니다. 이번 포스팅의 선행학습이 되어야 하는 내용은 아래의 Link를 참고하세요! Link : https://aljjabaegi.tistory.com/586 javascript 생성자 알짜만 빼먹기, 현업 활용 예 class, prototype javascript 생성자 알짜만 빼먹기, 현업 활용 예 class, prototype 생성자 (Constructor) 는 인스턴스 (메모리상에 존재하게 하는) 객체를 생성하고 초기화 하는 함수입니다. 생성자 함수로 객체를 생성하고 aljjabaegi.tistory.com Link .. Programing/JavaScript 2021. 11. 10. 프로그래밍에서의 Curring 이란? Curring in javascript 프로그래밍에서의 Curring 이란? Curring in javascript 프로그래밍에서 Curring이란 함수가 부분적용으로 로직을 처리할 수 있도록 만들어가는 과정입니다. 매개변수가 항상 비슷한 함수를 호출하는 경우 Curring을 고려해볼 수 있습니다. 이론은 이렇고, 간단한 예로 Curring에 대해 이해해 보도록 하겠습니다. 아래와 같이 매개변수 x 와 y 를 전달받아 x + y 를 리턴하는 함수가 있습니다. const sum = function(x, y){ return x + y; } 만일 x값만 전달이 되었다면 결과는 어떻게 될까요? const sum = function(x, y){ return x + y; } console.log(sum(5)); 결과는 당연히 NaN ( Not a Num.. Programing/JavaScript 2021. 10. 28. javascript 생성자 알짜만 빼먹기, 현업 활용 예 class, prototype javascript 생성자 알짜만 빼먹기, 현업 활용 예 class, prototype 생성자 (Constructor) 는 인스턴스 (메모리상에 존재하게 하는) 객체를 생성하고 초기화 하는 함수입니다. 생성자 함수로 객체를 생성하고 활용하는 방법을 알아보도록 하겠습니다. 이전에 javascript에서는 function, new 연산자를 활용한 방식으로 객체를 생성했습니다. (생성자 객체는 항상 대문자로 시작합니다.) 1. new연산자를 사용한 객체 생성 function Student(data){ this.name = data.name; this.age = data.age; } const aStudent = new Student({name:"geon", age : 36}); console.log(aStud.. Programing/JavaScript 2021. 10. 28. javascript Object 의 property가 있는지 체크하는 여러 방법 javascript Object 의 property가 있는지 체크하는 여러 방법 1. typeof 사용 const obj = { name : "geonlee", age : 36 } if(typeof obj.name === "undefined"){ console.log(false); }else{ console.log(true); } 객체의 속성이 없을 경우 선언하지 않은 값에 접근하게 되어, undefined 가 됩니다. typeof 를 사용하여 undefined 인지를 확인할 수 있습니다. 2. hasOwnProperty const obj = { name : "geonlee", age : 36 } if(!obj.hasOwnProperty("name")){ console.log(false); }else{ .. Programing/JavaScript 2021. 10. 27. 주니어 개발자가 들이면 좋은 습관! 주니어 개발자가 들이면 좋은 습관! 현업에서 개발자로 10년 가까이 일을 하면서 느낀 주니어 개발자가 반드시 들여야할 습관을 정리해 보려고 합니다. 지극히 개인적이지만 도움이 되는 정보이길 바랍니다. 우선 개발자가 아니어도 들이면 좋은 습관들 입니다. 1. 폴더관리 처음 신입으로 입사를 하게되면 폴더관리가 엉망입니다. 보내준 파일을 찾아보라고 해도 여기 저기 뒤적뒤적 하죠. 폴더 관리는 별 것 아닌 것 같지만, 업무 효율성을 높이는데 도움을 줍니다. 예를들면 저 같은 경우 프로젝트별로 모두 같은 폴더구성을 가지고 있습니다. 01.project ㄴ 01.project명 (2021.01.01 ~ 2021.12.31) ㄴ 01.받은자료 ㄴ 02.작성자료 ㄴ 03.전달자료 ㄴ 04.참고자료 ㄴ 05.구현자료 현.. Programing/JavaScript 2021. 10. 19. javascript Template literals (Template strings) 문자열 병합 javascript Template literals (Template strings) 문자열 병합 이번 포스팅에서는 javascript에서 문자열을 병합하는 방법을 알아보겠습니다. ECMA6 이전에서 문자열을 병합 할때는 + 연산자를 사용하거나 const firstName = "geon"; const lastName = "lee" console.log("My name is "+firstName+" "+lastName+"."); String.prototype.concat() 함수를 사용했었습니다. const firstName = "geon"; const lastName = "lee" console.log("My name is ".concat(firstName, " ", lastName, ".")); 이런 .. Programing/JavaScript 2021. 10. 19. iframe innerText 공백 non breaking spaces 처리 iframe innerText 공백 non-breaking space 처리 iframe 내의 텍스트를 DB에 저장 할 때 innerText로 뽑아서 저장을 하면 공백이 이상한 문자로 저장되는 경우가 있습니다. HTML 요소 내 공백은 $nbsp; (none-breaking space) 로 표현되며 이는 공백 처럼 보이지만 DB에 저장할 때 이상한 문자가 삽입됩니다. 그래서 innerText로 뽑은 텍스트 내 none-breaking space를 치환 해주어야 합니다. 우선 받은 텍스트를 유니코드로 치환해 줍니다. let ctnt = encodeURI(frame.innerText); 유니코드에서 none-breaking space는 %C2%A0 입니다. 이를 실제 space 로 치환해 줍니다. let ct.. Programing/JavaScript 2021. 10. 19. javascript .focus() not working 포커스 함수 동작 하지 않는 이유 javascript .focus() not working 포커스 함수 동작 하지 않는 이유 javascript의 focus 함수는 DOM 내 요소에 포커스를 이동할 때 사용합니다. 동적으로 추가된 요소에 포커스를 이동하는 경우 요소가 추가되기 전에 포커스를 준 경우 함수가 동작하지 않습니다. 이럴경우에는 setTimeout 함수를 주어 delay를 주면 동작합니다. setTimeout(function(){ document.getElementById("newElement").focus(); },100); 하지만 포커스를 주기 전에 console로 확인하여 객체가 있음에도 불구하고 focus 함수가 동작하지 않을 때가 있습니다. table 요소의 tr (행) 에 포커스를 줄 때가 그런데요. 이 때는 tabi.. Programing/JavaScript 2021. 10. 5. javascript 수선의 발 구하는 방법, 직선과 점의 가장 가까운 점 구하는 방법, 폴리라인과 마커간 최단거리 javascript 수선의 발 구하는 방법, 직선과 점의 가장 가까운 점 구하는 방법, 폴리라인과 마커간 최단거리 이번 포스팅은 수학적인 지식이 약간은 필요합니다. 수선의 발(foot of perpendicular) 이란 수선과 직선 또는 평면이 만나는 점을 뜻하며, 한 점에서 직선 또는 평면에 대해 수선을 그었을 때 만나는 점을 의미합니다. 간단히 직선과 점을 이은 수선의 각이 90도가 되는 점을 의미합니다. (점과 직선과의 최단거리) 아래의 이미지 처럼 검은색 두 점을 연결한 직선과 파란색 점을 연결하였을 때 직각이 되는 빨강색 점을 수선의 발이라고 합니다. 이제 이 수선의 발을 구하는 공식을 사용하여 카카오 지도에 표시해 보도록 하겠습니다. 저의 경우 링크와(폴리라인) 정류소(마커) 사이의 최단거리.. Programing/JavaScript 2021. 9. 28. 카카오 지도 보이는 영역 내 마커만 표출 방법 카카오 지도 보이는 영역 내 마커만 표출 방법 카카오 지도에서 보이는 영역 내 마커만 표출하는 방법을 알아보도록 하겠습니다. 보통 지도 내 표출해야 될 마커의 개수가 많을 경우 브라우저의 성능이 현저히 떨어지기 때문에 지도 레벨과 영역에 따라 표출할 마커를 다르게 설정합니다. 카카오 지도의 레벨 변경 감지 이벤트는 아래와 같이 추가 할 수 있습니다. kakao.maps.event.addListener(MAP, "zoom_changed", function() { //do something.. }); 콜백 함수 내에서는 this.getLevel() 을 통해 현재 레벨 값을 구할 수 있습니다. 예를 들어 3 레벨 이하일 경우에만 지도 영역 내 모든 정보를 가져오는 코드를 작성해보겠습니다. kakao.maps... Programing/JavaScript 2021. 9. 2. javascript 2개 div 스크롤 위치 동기화 처리, 동시에 같은 위치로 움직이기 javascript 2개 div 스크롤 위치 동기화 처리, 동시에 같은 위치로 움직이기 2개의 그리드가 있을 때 어떤 그리드에서 스크롤을 움직이든 2개의 그리드의 스크롤 위치를 동기화 하는 방법에 대해 알아보도록 하겠습니다. 스크롤 위치는 돔 요소의 scrollTop 을 변경해주면 됩니다. 간단히 생각해보면 스크롤이 생기는 요소에 scroll 이벤트를 등록하여 다른 요소의 scrollTop 값을 적용해주면 될 것 같습니다. document.getElementById("grid1").addEventListener("scroll", function(){ document.getElementById("grid2").scrollTop = this.scrollTop; }); document.getElementByI.. Programing/JavaScript 2021. 9. 1. javascript 배열 비교 방법 javascript 배열 비교 방법 javascript 에서 배열을 비교하는 방법을 알아보겠습니다. [배열의 길이로 비교] 배열의 길이는 Array.length 를 사용하여 비교할 수 있습니다. const array1 = [1,2,3,4]; const array2 = [4,3,2,1]; const compareLength = function(a,b){ if(a.length == b.length){ return true; }else{ return false; } } 단순히 길이 비교로는 배열의 값이 같은지 까지는 확인 할 수 없죠. 값을 비교해 보겠습니다. 제일 먼저 떠오르는 방법은 for문을 돌며 각각 비교하는 것이죠. [for문을 사용한 비교] if(compareLength(array1, array2).. Programing/JavaScript 2021. 8. 17. 이전 1 2 3 4 5 ··· 9 다음 💲 추천 글 반응형