프로그래밍 & IT 정보30

• 자바스크립트 Base64 이미지 코드 파일로 쓰기 base64로 인코딩 된 이미지를 다시 파일로 변환하고자 할 때 사용하실 수 있습니다. function dataURLtoFile(dataurl, filename) { var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1], bstr = window.atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n); while (n--) { u8arr[n] = bstr.charCodeAt(n); } return new File([u8arr], filename, { type: mime }); } 프로그래밍 & IT 정보/Javascript 2020. 9. 24.

• 자바스크립트 이미지 크기 조정 및 보정 로직 이미지를 축소하여 저장할 필요가 있을 때 유용합니다. 크기를 줄이는 자체는 어렵지 않습니다. 계단 현상이 일어나지 않도록 보정하는 로직이 이 포스팅의 핵심이니 유용하게 사용하시기 바랍니다. function imageResizing(canvas, width, height, resize_canvas) { var width_source = canvas.width; var height_source = canvas.height; width = Math.round(width); height = Math.round(height); var ratio_w = width_source / width; var ratio_h = height_source / height; var ratio_w_half = Math.ceil(ra.. 프로그래밍 & IT 정보/Javascript 2020. 9. 24.

• 자바스크립트 텍스트 길이(바이트) 구하기 문자열의 length 속성은 단순히 숫자, 영문, 한글 모두 1글자씩이라고 판단을 하지만 경우에 따라서 한글을 2자로 인식을 해야 하는 경우가 있습니다. 예를 들어 바이트 계산을 할 때 영문, 숫자, 일반적인 특수 기호들을 1바이트, 한글은 2바이트가 되죠. 단순한 방식으로 함수를 구현해 보겠습니다. function getTextLength(str) { var chk = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ-_0123456789\~!@#$%^&*()_+| "; var length = 0; if (str != null) { for (var i = 0; i < str.length; i++) { if (chk.indexOf(str.charAt(i)) .. 프로그래밍 & IT 정보/Javascript 2020. 9. 24.

• 자바스크립트 아스키 코드 정렬 배열을 인자로 받아서 아스키 코드 순으로 정렬을 한 뒤 리턴하는 함수를 작성해 보겠습니다. function asciiSort(input, reverse) { var output = [], temp; if (input != undefined && input != null) { for (var i = 0; i < input.length; i++) { output.push(input[i]); } for (var i = 0; i < input.length; i++) { for (var j = i + 1; j < input.length; j++) { if (compareTo(output[i], output[j], reverse)) { temp = output[i]; output[i] = output[j]; out.. 프로그래밍 & IT 정보/Javascript 2020. 9. 24.

• 파이썬 조건문 (if, 딕셔너리 활용) 조건문에 대해 간단히 알아 보겠습니다. 1. if 문 test = 5 if test > 참입니다 조건이 하나만 있는 if 문입니다. 10은 5보다 작으므로 조건이 참이 되고 '참입니다' 문구가 출력됩니다. test = 15 if test > 두번째 조건이 참입니다 다음은 조건이 2개가 있는 if/elif 문 입니다. 조건이 2개 이상 있을 경우는 elif 문으로 추가하면 됩니다. 여기서 15는 10보다 작지 않으므로 첫번째 조건이 만족하지 않고 20보다는 작으므로 두번째 조건이 만족하여 '두번째 조건이 참입니다' 가 출력.. 프로그래밍 & IT 정보/Python 2020. 9. 2.

• 파이썬 반복문 (for, while) 자주 쓰이는 반복문에 대해 간단히 알아보겠습니다. 1. for 문 test_list = [1,2,3,4,5] for test in test_list: print(test) # 출력 결과 # 1 # 2 # 3 # 4 # 5 test_list 배열의 데이터 개수만큼 반복하여 수행됩니다. for i in range(5): print(i) # 출력 결과 # 0 # 1 # 2 # 3 # 4 range 메서드를 사용하면 원하는 범위만큼 반복 수행이 가능합니다. 2. while 문 test_list = [1,2,3,4,5] cnt = 0 while cnt != len(test_list): print(test_list[cnt]) cnt += 1 # 출력 결과 # 1 # 2 # 3 # 4 # 5 while문은 조건이 참.. 프로그래밍 & IT 정보/Python 2020. 9. 2.

• 

  파이썬 BeautifulSoup 파싱(Parsing) 다양한 방법 파이썬을 공부하면서 html 문서에서 특정 태그를 가져오는 다양한 방법에 대해 정리를 해 보았습니다. 다음과 같은 HTML 문서가 있다고 가정을 하고 BeautifulSoup 모듈을 이용해서 특정 태그를 파싱해 오는 방법을 하나씩 보도록 할게요. from bs4 import BeautifulSoup html = """ Content1 Content2 Goal Content3 """ soup = BeautifulSoup(html, "html.parser") 목표는 아래 태그입니다. Goal 1. find() 메서드 활용 print(soup.find('div',id='target')) #tag, id print(soup.find('div',attrs={'id':'target'})) #tag, 속성으로서의 i.. 프로그래밍 & IT 정보/Python 2020. 9. 2.

• Flutter 유용한 사이트 모음 저도 플러터를 이용하여 앱을 만들어 보기 위해 공부를 하는 중입니다. 공부하면서 찾은 유용한 사이트를 공유하도록 하겠습니다. 1. Flutter 공식 문서 https://flutter.dev/docs Flutter documentation The landing page for Flutter documentation. flutter.dev 플러터에서 제공하는 모든 기능 설명이 여기 있다고 봐야겠죠. 무조건 알아두어야 할 사이트입니다. 2. Dart 공식 문서 https://dart.dev/guides Dart documentation Learn to use the Dart language and libraries. dart.dev 플러터를 이용하려면 필수로 알아야 할 언어입니다. 3. UI 디자인 툴 ht.. 프로그래밍 & IT 정보/Flutter|Dart 2020. 7. 6.

• [SVG] animateTransform 2가지 동시 적용 Object의 모양 및 위치를 동시에 조정해야 할 경우 활용할 수 있습니다. 모양 및 위치 변경 후 그 상태 그대로 유지하도록 구현한 코드입니다. 결과는 다음과 같습니다. 왼쪽에서 오른쪽으로 이동하면서 크기는 줄어드는 타원입니다. 프로그래밍 & IT 정보/Etc. 2020. 7. 4.

• [Ionic4] ion-select customizing(커스터마이징) 방법 Ionic4에서 기본으로 제공하는 select component가 마음에 들지 않아서 변경해 보았습니다. 기존에 적용되어 있던 select icon을 제거하고 새로운 icon으로 대체했습니다. const ionSelects = document.querySelectorAll('ion-select'); let img = null; ionSelects.forEach((ionSelect) => { const selectIconInner = ionSelect.shadowRoot.querySelector('.select-icon').querySelector('.select-icon-inner'); if (selectIconInner) { selectIconInner.attributes.removeNamedItem(.. 프로그래밍 & IT 정보/Etc. 2020. 7. 4.

• [Ionic4] Scroll Event를 활용한 데이터 추가 로딩 방법 Scroll을 맨 아래까지 이동했을 경우 자동으로 데이터가 로딩되도록 하는 방법입니다. Ionic4에서 ion-infinite-scroll 태그를 제공하지만 원하는대로 동작하지 않는 경우가 있어서 직접 구현했습니다. 1. Scroll Event를 받아 처리하는 코드를 작성합니다. private scrollDepthTriggered = false; async scrollingToBottom($event: any) { if (this.scrollDepthTriggered) { return; } if ($event.target.localName != "ion-content") { return; } const scrollElement = await $event.target.getScrollElement(); c.. 프로그래밍 & IT 정보/Etc. 2020. 7. 3.

• [Ionic4] Android MainActivity.java 변경 필요 시 적용 방법 제공되는 Plugin이 없거나 불가피하게 Android의 MainActivity.java 변경이 필요할 경우 적용 가능한 방법으로 별도의 java 파일을 만들어 build 전 덮어 씌울 수 있습니다. 1. ~/scripts 경로에 적용하고자 하는 MainActivity.java 파일을 작성합니다. 보통은 기존 파일에 내용을 추가하거나 일부 제거하는 목적이므로 android로 build 후 해당 위치(~/platforms/android/app/src/main/java/~)로 가서 MainActivity.java 파일을 가져와서 수정합니다. 2. ~/scripts 경로에 updateMainActivity.sh의 이름으로 shell 파일을 생성합니다. #!/bin/bash cp scripts/MainActiv.. 프로그래밍 & IT 정보/Etc. 2020. 7. 3.