반응형 전체 글386 [javascript] 자바스크립트 이미지를 base64로 변환 참고: https://levelup.gitconnected.com/how-to-convert-image-to-base64-by-javascript-d110556de37f 이 포스트에서는 이미지를 base64로 변환하는 방법에 대해 알아보겠습니다. 먼저 자주 접할 수 있는 다음의 세 가지 시나리오에 대해 설명하겠습니다: url에서 가져온 이미지를 base64로 변환 로컬에서 선택한 이미지를 base64로 변환 클립보드의 이미지를 base64로 변환 url의 이미지를 base64로 변환 url 이미지를 base64로 변환하려면 먼저 이미지를 다운로드해야 합니다. 이미지가 로드되면 canvas 요소를 사용하여 캔버스에 이미지를 그리고 toDataURL() 메소드를 사용하여 이미지를 base64로 변환할 수 있.. 2023. 7. 4. [javascript] 자바스크립트 객체 루프 돌기 (for...in) 참고: https://flexiple.com/javascript/loop-through-object-javascript/ 코드를 작성하다 보면 나열 가능한 데이터 세트에서 루프 도는 작업을 해야할 때가 있습니다. 이 데이터 세트에는 배열, 리스트, 맵, 기타 객체 등이 있을 수 있습니다. 이 포스트에서는 자바스크립트를 사용하여 객체의 key/value 쌍에 대해 루프를 도는 4 가지 방법에 대해 알아보겠습니다. 객체 루프 방법 자바스크립트 객체의 루프를 도는 방법은 다양합니다: for...in loop 사용 Object.keys 메소드 Object.values 메소드 Object.entries 메소드 자바스크립트를 사용하여 객체의 루프를 도는 방법 자바스크립트에서 객체는 map(), forEach(), .. 2023. 6. 30. [javascript] 자바스크립트 Picture in Picture (PiP, 플로팅 동영상) 참고: https://www.educative.io/answers/what-is-picture-in-picture-in-javascript Picture-in-Picture(PiP)를 사용하면 동영상을 브라우저 외부 플로팅 창에서 볼 수 있으므로 다른 사이트나 프로그램을 실행하는 동안에도 영상을 계속 볼 수 있게됩니다. Picture-in-Picture 지원 확인 const isPiPSupported = 'pictureInPictureEnabled' in document; const isPiPEnabled = document.pictureInPictureEnabled; if (!isPiPSupported) { console.log('The Picture-in-Picture Web API is not av.. 2023. 6. 30. [javascript] 자바스크립트 첫글자 대문자로 (charAt, toUpperCase, slice) 참고: https://flexiple.com/javascript/javascript-capitalize-first-letter/ 이 포스트에서는 자바스크립트에서 문자열의 첫 글자를 대문자로 바꾸는 방법을 알아보겠습니다. 문자열의 첫 글자를 대문자로 자바스크립트에서 주어진 문자열의 첫 번째 글자를 대문자로 변경하려면 다음의 세 가지 함수를 사용해야 합니다: charAt() toUpperCase() slice() charAt(): charAt() 메소드는 문자열의 특정위치에 해당하는 문자를 리턴합니다. 문법: string.charAt(index) 예제: const str = 'sisiblog'; const str2 = str.charAt(0); console.log(str2); toUpperCase(): t.. 2023. 6. 30. [javascript] 자바스크립트 특정 위치의 문자 얻기 (charAt) 참고: https://www.scaler.com/topics/charat-in-javascript/ 자바스크립트 String 클래스의 charAt() 메소드는 문자열에서 지정된 인덱스의 특정 문자를 가져옵니다. String.charAt() 문법 자바스크립트의 charAt() 메소드의 문법은 다음과 같습니다: stringName.charAt(indexValue); 다른 메소드와 마찬가지로 위 구문에서 보이는 바와 같이 .(dot)을 사용하여 원하는 문자열에서 이 메소드를 실행해야 합니다. String.charAt() 매개변수 charAt() 메소드는 하나의 매개변수를 받습니다: indexValue: 원하는 문자의 인덱스로서 number 타입입니다. String.charAt() 리턴 값 자바스크립트 char.. 2023. 6. 29. [javascript] 자바스크립트 배열 초기화 참고: https://flexiple.com/javascript/clear-javascript-array/ 이 포스트에서는 자바스크립트를 사용하여 배열을 비우거나 지우는 여러 방법을 알아보겠습니다. 빈 배열로 대체 arry = [1, 2, 3, 4]; arry = []; console.log(arry); 이 방법은 지우려는 배열에 대한 참조가 없을 경우 잘 작동합니다. 또한 이 방법은 배열을 초기화하는 가장 빠르고 쉬운 방법입니다. 배열의 길이를 0으로 지정 arry = [1, 2, 3, 4]; arry.length = 0; console.log(arry); 배열의 길이를 나타내는 length 속성이 0으로 설정되면 모든 배열 요소는 자동으로 삭제됩니다. splice() 메소드 사용 splice()는 배.. 2023. 6. 27. [javascript] 자바스크립트 현재 시간 가져오기 (Date) 참고: https://flexiple.com/javascript/javascript-current-time/ 이 포스트에서는 자바스크립트에서 현재 시간을 가져오는 다양한 방법을 알아보겠습니다. Date 객체 자바스크립트에는 Date라는 내장 객체가 있습니다. 이를 사용하여 원하는 날짜와 시간을 얻을 수 있습니다. 먼저 Date 객체를 만드는 다양한 방법을 알아보겠습니다. Date 객체는 다음의 4 가지 방법으로 만들 수 있습니다: new Date() new Date(year, month, day, hours, minutes, seconds, milliseconds) new Date(milliseconds) new Date(date string) new Date() new Date() 구문은 현재 날짜와 .. 2023. 6. 27. [javascript] HTML에서 함수 호출 참고: https://flexiple.com/javascript/call-javascript-from-html/ 이 포스트에서는 HTML 파일에서 자바스크립트 함수를 호출하는 방법을 알아보겠습니다. 프로젝트에 따라 여러 방법 중 하나를 사용할 수 있습니다. HTML에서 자바스크립트를 사용하는 이유 HTML과 CSS는 웹 페이지에 정적 정보를 표시하기에 좋지만 자바스크립트를 사용하면 페이지를 대화형으로 만들 수 있습니다. 자바스크립트를 사용하면 사용자가 대화형 지도, 애니메이션 2D/3D 그래픽, 스크롤링 비디오 주크박스 등과 같은 복잡한 기능을 웹 페이지에 구현할 수 있습니다. 이제 HTML 페이지에서 자바스크립트 함수를 호출하는 여러 방법을 알아보겠습니다. script 태그 사용 HTML 코드에 바로 .. 2023. 6. 26. [javascript] 자바스크립트 instanceof 연산자 참고: https://flexiple.com/javascript/instanceof-javascript/ 이 포스트에서는 instanceof 연산자를 알아보고 예제를 통해 실제로 수행되는 작업을 확인해 보겠습니다. instanceof 란? 자바스크립트의 instanceof 연산자는 런타임에서 객체의 타입을 확인하기 위해 사용합니다. 이는 불린 값(true 또는 false)을 리턴합니다. 리턴된 값이 true면 객체가 특정 클래스의 인스턴스임을 나타내고, 리턴된 값이 false면 특정 클래스의 인스턴스가 아님을 나타냅니다. 문법과 설명 문법: var myVar = objectName instanceof objectType 매개변수: objectName: 객체의 변수명을 나타냅니다. 예제: var fruit.. 2023. 6. 26. [javascript] 자바스크립트 onmouseout 이벤트 참고: https://www.educba.com/javascript-onmouseout/ 자바스크립트의 onmouseout 이벤트는 요소의 영역에서 마우스 커서가 나가면 특정 작업을 수행하고, 특정 구문을 실행하고, 함수를 호출하는 자바스크립트 이벤트입니다. 해당 이벤트를 사용 중인 요소의 자식 요소는 상위 요소에 정의된 이 이벤트의 영향을 받지 않습니다. 이 이벤트는 마우스 커서가 요소 영역안쪽으로 이동할 때 호출되는 onmouseover 이벤트와 함께 자주 사용됩니다. onmouseout 이벤트는 mouseout 이벤트를 실행하는 GlobalEventHandlers mixing에서 제공하는 이벤트 핸들러 속성입니다. onmouseout 문법 다음 구문은 onmouseout 이벤트를 호출하는 방법과 전.. 2023. 6. 23. [javascript] 자바스크립트 onmouseover 이벤트 참고: https://www.scaler.com/topics/javascript-mouseover/ 자바스크립트의 onmouseover 이벤트는 마우스 커서가 HTML 요소 위로 이동하면 활성화됩니다. onmouseover 이벤트는 사용자가 요소를 클릭하거나 커서가 요소를 벗어나면 활성화되지 않습니다. 예를 들어 onmouseover 이벤트는 사용자가 링크 위로 마우스를 가져갈 때마다 하이퍼링크를 강조 표시하는 데 사용할 수 있습니다. 자바스크립트 onmouseover 이벤트 문법 onmouseover 이벤트의 문법은 세 가지 종류가 있습니다: 1. HTML 에서 HTML에서 onmouseover 이벤트를 정의하려면 요소의 속성에 [onmouseover="function_name"] 구문을 추가하면 됩니.. 2023. 6. 23. [javascript] 자바스크립트 문자열을 JSON으로 변환 (JSON.parse) 참고: https://www.udacity.com/blog/2021/02/javascript-json-parse.html JSON 파싱은 문자열 형태의 JSON을 프로그램 내에서 사용할 수 있는 자바스크립트 객체로 변환하는 프로세스입니다. 자바스크립트에서 이를 수행하는 방법은 JavaScript standard에서 지정한 JSON.parse() 메소드를 사용하는 것 입니다. JSON.parse()는 JSON 객체를 자바스크립트 문자열로 변환하는 JSON.stringify()의 반대 메소드 입니다. JSON.parse() 사용 방법 자바스크립트 프로그램은 다양한 소스에서 JSON 객체를 읽을 수 있지만 가장 일반적인 소스는 데이터베이스 또는 REST API입니다. 이러한 소스에서 읽은 JSON 객체는 객체.. 2023. 6. 22. [javascript] 자바스크립트 JSON을 문자열로 변환 (JSON.stringify) 참고: https://www.udacity.com/blog/2021/04/javascript-json-stringify.html JSON stringify는 자바스크립트 객체를 코드 내에서 사용할 수 있는 일반 문자열로 변환하는 프로세스입니다. 자바스크립트에서 이를 수행하는 방법은 JavaScript standard에서 지정한 대로 JSON.stringify() 메소드를 사용하는 것 입니다. JSON.stringify()는 JSON 문자열을 자바스크립트 객체로 변환하는 JSON.parse()의 반대 메소드 입니다. JSON.stringify() 사용 방법 데이터베이스, REST API 및 기타 데이터 저장소에는 일반적으로 자바스크립트를 해석하는 기능이 없습니다. 따라서 해당 자바스크립트 객체를 다른 프로.. 2023. 6. 22. [javascript] 자바스크립트 페이지 인쇄 (window.print) 참고: https://www.codexworld.com/print-page-area-javascript/ 브라우저의 인쇄 메뉴는 웹 페이지의 콘텐츠를 인쇄하는 데 사용합니다. 이는 기본적으로 전체 페이지 콘텐츠가 선택되어 브라우저에서 인쇄됩니다. 브라우저의 인쇄 메뉴에서는 인쇄를 하기 위해 웹 페이지의 특정 섹션을 선택할 수 없습니다. 웹 페이지의 특정 영역을 인쇄하려면 클라이언트 측 또는 서버 측 코드의 도움을 받아야 합니다. 웹 애플리케이션의 인쇄 기능을 통해 오프라인에서 사용하기 위한 웹 페이지의 내용을 인쇄할 수 있습니다. 웹 페이지 콘텐츠를 인쇄할 수 있는 다양한 jQuery 플러그인도 있지만 외부 플러그인을 사용하지 않으려면 JavaScript로 이 기능을 구현할 수 있습니다. JavaScri.. 2023. 6. 22. [javascript] CSS 이미지 필터 (image filters) 참고: https://levelup.gitconnected.com/css-image-filters-e549271864f7 "필터" 라는 단어를 들으면 가장 먼저 떠오르는 것은 인스타그램 필터일 것 입니다. 아니면 당신을 코첼라 가는 강아지로 바꿔주는 스냅쳇 필터일 것 입니다. 이 포스트에서는 CSS를 사용하여 앱의 이미지에 매혹적이고 세련된 효과를 줄 수 있는 filter 속성에 대해 알아보겠습니다. 사용할 수 있는 필터는 다음 10 가지 입니다: grayscale() sepia() blur() invert() opacity() saturate() contrast() brightness() hue-rotate() drop-shadow() 위의 모든 메소드에서 Chrome 이나 Safari의 경우 -web.. 2023. 6. 21. [linux] 리눅스 포트 스캔 방법 (nmap port scan) 참고: https://phoenixnap.com/kb/nmap-scan-open-ports nmap은 전세계에서 유명한 네트워크 스캐너입니다. nmap 호스트 보안 도구를 사용하면 방화벽 및 보안 구성이 얼마나 잘 작동하는지 확인할 수 있습니다. 이 포스트에서는 리눅스 시스템에서 nmap을 사용하여 열려 있는 모든 포트를 스캔하는 방법을 알아보겠습니다. 포트 란? 운영체제에서 포트란 네트워크 트래픽에 대해 번호가 매겨진 주소입니다. 기본적으로 서비스 마다 다른 포트를 사용합니다. 예를 들어 일반 웹 트래픽은 포트 80을 사용하고 POP3 이메일은 포트 110을 사용합니다. 여기서 방화벽은 특정 포트를 통한 트래픽을 허용하거나 제한하는 방법으로 작동합니다. 포트 구성에 따라 보안 위험을 유발할 수 있으므로.. 2023. 6. 20. [네트워크] 포트 스캔 이란? (port scanning) 참고: https://www.avast.com/en-us/business/resources/what-is-port-scanning#mac 포트 스캔(port scan)은 네트워크에 어떤 포트가 열려 있고 데이터를 주고 받을 수 있는지 확인하는 방법입니다. 또는 호스트의 특정 포트에 패킷을 보내고 응답을 분석하여 취약점을 식별하는 과정이기도 합니다. 포트 스캔은 먼저 액티브 호스트 목록을 식별하고 해당 호스트와 해당 IP 주소를 매핑하여 수행합니다. 이는 네트워크 스캔인 호스트 검색(host discovery)이라고 하는 작업을 수행하는 것으로 부터 시작합니다. 포트 및 네트워크 스캔의 목표는 IP 주소, 호스트 및 포트를 식별하여 오픈되었거나 취약한 서버 위치를 파악하고 보안 수준을 진단하는 것입니다. .. 2023. 6. 19. [네트워크] 포트 설명 및 작동방법 (port) 참고: https://www.cloudflare.com/learning/network-layer/what-is-a-computer-port/ 포트는 네트워크 연결이 시작되고 끝나는 가상의 지점입니다. 이는 소프트웨어 기반이고 컴퓨터의 운영체제에서 관리합니다. 각 포트는 특정 프로세스 또는 서비스와 연결됩니다. 이 포트를 사용하면 컴퓨터가 서로 다른 종류의 트래픽을 구분할 수 있습니다. 예를 들어 이메일과 웹 페이지가 동일한 인터넷을 통해 컴퓨터에 도착하더라도 이메일과 웹 페이지는 다른 포트로 이동됩니다. 포트 번호(port number)란? 포트는 네트워크에 연결되는 모든 장치에 표준화되어 있으며 각 포트는 번호를 할당받습니다. 대부분의 포트는 특정 프로토콜 용도로 예약되어 있습니다. 예를 들어, 모든 .. 2023. 6. 16. [javascript] 자바스크립트 배열 생성 (array) 참고: https://www.freecodecamp.org/news/how-to-create-an-array-in-javascript/ 배열은 정렬된 요소의 목록을 저장하는 데이터 구조입니다. 이 포스트에서는 JavaScript를 사용하여 배열을 생성하는 세 가지 방법을 알아보겠습니다. 또한 split() 메소드를 사용하여 문자열에서 배열을 만드는 방법도 알아보겠습니다. 할당 연산자를 사용하여 자바스크립트 배열을 만드는 방법 자바스크립트로 배열을 만드는 가장 일반적인 방법은 다음과 같이 해당 배열을 변수에 할당하는 것 입니다: const books = ["The Great Gatsby", "War and Peace", "Hamlet", "Moby Dick"]; 배열을 console.log()로 출력해보면.. 2023. 6. 15. [python] 파이썬 입력받기 (input) 참고: https://www.programiz.com/python-programming/methods/built-in/input 이 포스트에서는 파이썬 input() 함수에 대해 예제와 함께 알아보겠습니다. 파이썬의 input() 함수는 사용자에게서 값을 입력받고 그 값을 리턴해줍니다. name = input("Enter your name: ") print(name) input() 문법 input() 함수의 문법은 다음과 같습니다: input([prompt]) input() 매개변수 input() 함수는 하나의 옵셔널 매개변수를 받습니다: prompt (옵션) - 개행 문자 없이 표준 출력(화면)에 표시할 문자열 input() 리턴 값 input() 함수는 입력(일반적으로 사용자) 값을 받아 개행 문자를.. 2023. 6. 15. 이전 1 2 3 4 ··· 20 다음 반응형
