반응형 *:;전체보기;:*696 Javascript Array Object 정렬 숫자 한글 키 값 정렬 how to align all object in javascript Javascript Array Object 정렬 숫자 한글 키 값 정렬 how to align all object in javascript Javascript 에서 모든 객체의 정렬 방법을 알아보겠습니다. 기본적으로 배열에서는 sort라는 정렬 메서드를 제공합니다. sort 문법 Array.sort([compareFunction]); sort 메소드는 기준이 되는 배열을 복사해서 정렬하는 것이 아니라 원본 데이터가 변경됩니다. compareFunction은 생략이 가능하며, 생략할 경우 배열의 값의 유니코드 코드 포인트 값에 따라 정렬됩니다. 기본적으로 오름차순으로 정렬되며(ASC) 내림차순으로 정렬할 때는 compareFunction을 활용합니다. 숫자로 이루어진 배열의 오름차순 정렬 const num.. Programing/JavaScript 2022. 3. 16. Javascript Object to Array, Array to Object 모든 키, 값 추출 접근 entries Javascript Object to Array, Array to Object 모든 키, 값 추출 접근 entries Javascript Object는 property name : property value의 쌍으로 구성됩니다. const member = { name: "geon", phone: "010-0000-0000", age: 36 } name, phone, age 가 Object의 Property name 이고 "geon", "010-0000-0000", 36 이 Property value 입니다. 이것을 [property name, property value] 의 배열로 변경 할때는 Object.entries() 메소드를 활용합니다. Object.entries() entries는 Array의 .. Programing/JavaScript 2022. 3. 15. Javascript 다른 객체의 메서드 호출하기 메서드 빌려쓰기 패턴 Javascript 다른 객체의 메서드 호출하기 메서드 빌려쓰기 패턴 어떤 객체에 특정 메소드만 호출해서 쓰고싶은 경우가 있습니다. 물론 상속을 받거나 특정 코드를 ctrl + c, ctrl + v 해서 쓸 수는 있지만 이는 중복코드를 발생시키고 유지보수 측면에서도 좋지 않습니다. 그래서 해당 객체의 메서드에 접근하여 호출하는 방식을 사용하게됩니다. 이를 위해서는 객체의 this를 바인딩 해주는 call, apply, bind 메서드를 활용하게 되는데요. call, apply, bind 메서드의 사용법, 차이점은 아래의 Link를 참고해주세요. Link: https://aljjabaegi.tistory.com/524 javascript call, apply, bind 차이점! 알짜만 빼먹기! javasc.. Programing/Design Patterns 2022. 3. 14. Javascript Mix-In pattern 믹스-인 패턴 여러 객체를 한 객체로 만들기 Javascript Mix-In pattern 믹스-인 패턴 여러 객체를 한 객체로 만들기 Mix-In 패턴은 여러 객체의 정보를 한 객체로 섞는 패턴입니다. 예를들어 복수의 Object들을 하나의 새로운 Object로 만드는 방법이죠. const mix = function(){ const child = {}; for(let arg in arguments){ for(let prop in arguments[arg]){ child[prop] = arguments[arg][prop]; } } return child; } 위의 코드를 보시면 arguments 개수 만큼 반복하면서 arguments의 value값을 child Object에 추가해주어 리턴해줍니다. 그럼 복수개의 오브젝트를 mix 함수의 매개변수로.. Programing/Design Patterns 2022. 3. 13. Javascript 프로퍼티 복사를 통한 상속 패턴 깊은복사 얕은복사 배열 객체 구분 Javascript 프로퍼티 복사를 통한 상속 패턴 깊은복사 얕은복사 배열 객체 구분 부모 객체의 프로퍼티를 자식의 프로퍼티에 추가하는 방법입니다. 예시 코드를 보시죠. const parent = {name: "알짜배기 프로그래머"}; let child = {}; const extend = function(parent, child){ child = child || {}; for(let prop in parent){ child[prop] = parent[prop]; } return child; } child = extend(parent, child); console.log(parent, child) console 창의 결과는 아래와 같습니다. 단순히 반복문을 돌면서 property 값을 추가하기 때문에 같.. Programing/Design Patterns 2022. 3. 11. 뮤료 영상 편집 사이트 추천 gif 변환 화면인녹화 자르기 영역 설정 회전 텍스트 추가 무료 영상 편집 사이트 추천 gif 변환 화면녹화 자르기 영역 설정 회전 텍스트 추가 간단하게 온라인으로 동영상을 편집 할 수 있는 사이트를 추천드리려 합니다. ezgif.com 이라는 사이트인데요. 쉽게 동영상을 자르거나 영역을 설정하거나 gif로 변환 할 수 있습니다. 기능은 아래의 이미지를 참고해주세요! 기능 컴퓨터 화면 녹화 간단하게 화면 인코딩 동영상을 만들어 편집을 해보도록 하죠. 윈도우10 기준 window키 + g키 를 누르게 되면 아래 이미지와 같이 화면을 인코딩할 수 있는 기능이 활성화 됩니다. 여기서 좌측 상단 캡처 동그란 아이콘을 클릭하면 컴퓨터 화면이 녹화가 시작되며 캡처상태라는 창이 뜨게 됩니다. 캡처 상태에 중지 버튼을 클릭하게되면 그때까지의 컴퓨터 화면 녹화 동영상 파일이 자.. 알짜정보 2022. 3. 9. 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. hhkb 해피해킹 Professional Classic BT Hybrid type-s 무각 유각 비교 정리 hhkb 해피해킹 키보드 Professional Classic BT Hybrid type-s 무각 유각 비교 정리 모델 과거 2세대는 일반 모델인 Professional2 (모델명 PD-KB400)와 블루투스 전용 모델인 Professional2 BT (모델명 PD-KB600) 이 있습니다. 현재 해피해킹 3세대의 모델은 영어각인 기준 (일본어 각인 제외) C-Type USB 유선 모델인 Professional Classic (모델명 PD-KB401) 과 C-Type USB 유선과 블루투스 사용이 가능한 Professional Hybrid (모델명 PD-KB800) 가 있습니다. 색상 색상은 White 와 Black 모델이 있습니다. White 모델은 모델명 뒤에 'W'가, Black 모델은 모델명 뒤에.. 아이템 리뷰 2022. 3. 4. 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. 자주 실수하는 시큐어 코딩 이슈 정리 자주 실수하는 시큐어 코딩 이슈 정리 1. SQL 삽입 (Mybatis) 원인 Mybatis를 활용한 쿼리문에 '$'를 사용할 경우 발생 이유 개발자가 의도하지 않은 동적 쿼리 작성으로 SQL Injection 공격 가능 해결방안 '$' 대신 '#' 을 사용, 또는 $ 제거 예시 SELECT A FROM ${TABLE} => SELECT A FROM A_TABLE 2. 부적절한 자원 해제 (Java IO) 원인 Stream 자원을 활용하고 반환하지 않은 경우 발생 이유 Open File Descriptor, Heap Memory, Socket, DB 등 유한 자원을 반환하지 않은 경우 메모리 이슈 발생 가능 해결방안 Reader/Writer, BufferReader/BufferWriter, PipedRe.. 알짜정보 2022. 2. 16. Code-Ray 이클립스 플러그인 설치 방법 Code-Ray 이클립스 플러그인 설치 방법 Code-Ray 는 Trinity Soft 에서 만든 시큐어코딩 점검 솔루션 입니다. 자세한 사용방법은 아래의 링크를 통해 확인하는 것으로 하고, 이번 포스팅에서는 코드레이를 이클립스와 연동하는 방법을 알아보도록 하겠습니다. Link : https://www.trinitysoft.co.kr/ 트리니티소프트 소프트웨어 개발 보안 전문 기업, 시큐어코딩 및 소스코드 보안 약점 진단도구 CODE-RAY XG www.trinitysoft.co.kr 먼저, 코드레이가 설치된 하드웨어의 ip를 브라우져에 입력합니다. 그럼 아래와 같은 페이지로 이동되고 하단 통합 최초 설치 파일 버튼을 클릭합니다. CODE-RAY_XG_All-버전.exe 파일이 다운로드 되면 해당 파일을.. 알짜정보 2022. 2. 15. 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. 이전 1 ··· 5 6 7 8 9 10 11 ··· 47 다음 💲 추천 글 반응형