반응형 Programing497 Javascript Cavans 내 텍스트 이미지 드래그, drag & drop text, image in canvas Javascript Cavans 내 텍스트 이미지 드래그, drag & drop text, image in canvas Canvas Element 내 추가된 text와 image지의 drag & drop 기능에 대해서 알아보겠습니다. Canvas에는 Javascript 에서 Element에 적용할 수 있는 Dragstart, Dragend 와 같은 Drag 이벤트가 제공되지 않습니다. 그럼 어떤 마우스 이벤트가 제공되는지 보도록 하죠. Cavans Mouse Event click, dblclick, contextmenu, mousedown, mouseup, mouseenter, mouseover, mouseleave, mouseout, mousemove 위 마우스 관련 이벤트 중에 mousedown 과 .. Programing/JavaScript 2022. 3. 8. Javascript 특정 시간마다 반복 setInterval, setTimeout Javascript 특정 시간마다 반복 setInterval, setTimeout 이번 포스팅에서는 Javascript에서 특정 시간마다 반복할 수 있는 기능인 setInterval과 setTimeout에 대해서 알아보도록 하겠습니다. setInterval setInterval은 window 메서드로, 매개변수인 시간만큼 함수를 반복 하는 기능을 합니다. [argument1, argument2..] 는 옵션이고 전달되는 함수의 매개변수로 사용됩니다. 문법) const intervalId = setInterval(function(arg1, arg2..){}, milisecond, [argument1, argument2...]); setInterval 사용 예제) const testFunc = functio.. Programing/JavaScript 2022. 3. 3. Javascript 배열 값에 접근하는 간결하고 가독성을 높이는 방법 at() Javascript 배열 값에 접근하는 간결하고 가독성을 높이는 방법 at() Javascript 에서 배열에 접근 할때는 대괄호와 index를 사용해서 접근 할 수 있습니다. [대괄호 & 인덱스로 접근] const array = [1,2,3,4,5]; const firstValue = array[0]; /*첫번째 값 반환(index 0)*/ const lastValue = array[array.length - 1]; /*마지막 값 반환(index 4)*/ Javascript 에서는 대괄호 표기법보다 간결하고 가독성을 높일 수 있는 at() 이라는 메서드를 제공합니다. [at 문법] array.at(index); at 메서드에 파라메터로 index를 넘기면 해당 index의 값을 리턴해줍니다. 위의 대괄.. Programing/JavaScript 2022. 2. 24. Javascript Canvas drawImage 이미지 추가 방법 Javascript Canvas drawImage 이미지 추가 방법 Canvas에 이미지를 추가하기 위해서는 CanvasRenderingContext2D.drawImage() 를 활용합니다. 파라미터의 개수에 따라 일반 이미지 추가와 추가할 이미지의 일부 영역을 추가로 구분됩니다. 일반 이미지 추가 문법은 아래와 같습니다. 일반 이미지 추가 문법 drawImage(image, sx, sy, sWidth, sHeight); 파라메터 설명 [image]*필수 CSSImageValue, an HTMLImageElement, an SVGImageElement, an HTMLVideoElement, an HTMLCanvasElement, an ImageBitmap, or an OffscreenCanvas. [sx.. Programing/JavaScript 2022. 2. 18. Javascript Canvas Text 객체 삭제 방법 fillRect Javascript Canvas Text 객체 삭제 방법 fillRect 앞선 포스팅에서 Text 객체를 Canvas에 추가하는 방법을 알아보았습니다. Link : https://aljjabaegi.tistory.com/599 Javascript Canvas 텍스트 추가 fillText, strokeText Javascript Canvas 텍스트 추가 fillText, strokeText Canvas 에 텍스트를 추가하는 방법에 대해 알아보겠습니다. 우선 Canvas 태그를 생성해줍니다. 그럼 아래와 같이 Canvas가 보이실꺼에요. 324x68 사이.. aljjabaegi.tistory.com 이제 이 추가된 텍스트를 삭제하는 방법에 대해서 알아보겠습니다. Canvas에서 그려진 객체를 삭제한다기 보다.. Programing/JavaScript 2022. 2. 7. Spring Boot Embeded Tomcat 내장 톰캣 application.properties 설정 Spring Boot Embeded Tomcat 내장 톰캣 application.properties 설정 이번 포스팅에서는 Spring Boot 2.x 의 application.properties 에서 설정가능한 내장 톰캣 옵션에 대해서 알아보도록 하겠습니다. Connection 관련 설정 설명 기본값 server.tomcat.connection-timeout 커넥션 타임아웃 설정 server.tomcat.keep-alive-timeout 커넥션 종료 전 다른 HTTP 요청을 기다리는 시간 설정 설정하지 않으면 connection-timeout 이 사용, -1이면 무한 100 server.tomcat.max-connections 서버가 주어진 시간에 처리할 수 있는 최대 커넥션 설정 8192 Thread.. Programing/Springboot 2022. 2. 3. 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. JAVA FTP storeFile 반응 없을 시 해결 방법 Active / passive 모드 정리 JAVA FTP storeFile 반응 없을 시 해결 방법 Active / passive 모드 정리 Java 에서 FTP에 파이일을 업로드 할 때 사용하는 메소드가 storeFile 입니다. 사용하기 위해서는 commons-net 의 의존성을 추가해주셔야 합니다. ex) gradle project implementation group: 'commons-net', name: 'commons-net', version: '3.6' 커넥션이나 워킹 디렉토리 변경에는 아무 문제가 없었습니다. 그런데 sotreFile를 하면 아무 동작을 하지 않는 문제가 발생해습니다. boolean storeResult = ftpClient.storeFile(saveFileNm, inputStream); saveFileNm 은 업.. Programing/JAVA 2022. 1. 19. SpringBoot AOP 활용 / 모든 응답 데이터에 접근 SpringBoot AOP 활용 / 모든 응답 데이터에 접근 이번 포스팅에서는 서버의 응답 데이터 접근하는 방법을 알아보겠습니다. AOP 기능을 활용할건데요, AOP에 대한 설명은 아래의 링크를 확인하세요. Link : https://aljjabaegi.tistory.com/278 AOP 설정을 활용한 세션체크 AOP Session Check AOP 설정을 활용한 세션체크 AOP Session Check /****20170331 update ********/ 세션체크는 AOP를 활용한 방식보다는 Interceptor를 활용하는 방식을 추천합니다. Link : Spring Interceptor 활용 세션 설정 ajax.. aljjabaegi.tistory.com 간단하게 AOP는 Aspect-Oriente.. Programing/Springboot 2021. 12. 15. [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. springboot form, ajax 데이터 타입별 Controller에서 받는 방법 @RequestParam, @RequestBody springboot form, ajax 데이터 타입별 Controller에서 받는 방법 @RequestParam, @RequestBody 이번 포스팅에서는 springboot web project에서 form 과 ajax로 자주 사용되는 데이터타입을 전송하고 받는 방법을 정리해보도록 하겠습니다. 1. Form data request로 받기 [HTML] [Controller - 받을 수는 있지만 Request로 받는 방식은 GET Method에서만 사용합니다.] @RequestMapping(value="sendForm.getRequest", method=RequestMethod.POST) public String getRequest(HttpServletRequest req) { System.out.prin.. Programing/Springboot 2021. 11. 1. 프로그래밍에서의 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 설정 객체 패턴 javascript 설정 객체 패턴 설정객체 패턴은 간단하게 객체화된 매개변수 설정하여 전달하는 방식입니다. 예를들어 학생의 이름을 저장하는 함수가 있습니다. 단순하게 기본형 변수 파라메터를 전달받아 처리하도록 했다고 합시다. const addMember(name){ //name 저장 로직... } 그런데 계속적으로 저장해야되는 정보를 추가해 달라는 요청을 받았습니다. '나이를 추가해주세요.' const addMember(name, age){ //name, age 저장 로직... } '성별을 추가해주세요.' const addMember(name, age, gender){ //name, age, gender 저장 로직... } 이런식으로 계속 추가가 된다면, 코드도 보기 싫어지고 순서도 중요해지게 됩니다... Programing/Design Patterns 2021. 10. 28. 이전 1 ··· 4 5 6 7 8 9 10 ··· 34 다음 💲 추천 글 반응형