본문 바로가기
반응형

dev218

[javascript] 자바스크립트 classList 사용 방법 참고: https://www.javascripttutorial.net/javascript-dom/javascript-classlist/ 이 튜토리얼에서는 javascript classList 속성을 사용하여 element의 class를 사용하는 방법을 보입니다. classList는 element의 읽기전용 속성으로 css class의 현재 값을 반환합니다. const classes = element.classList; classList는 DOMTokenList 객체로 element의 class 속성을 보여줍니다. classList가 읽기전용이어도 다양한 메소드를 통해 class 목록을 조작할 수 있습니다. 이제 classList의 인터페이스를 통해 css class를 조작하는 예제를 보겠습니다. elem.. 2022. 4. 27.
[javascript] 자바스크립트 Promise 사용 방법 참고: https://www.geeksforgeeks.org/javascript-promises/ Promise 는 javascript에서 비동기 작업을 처리하는 데 사용됩니다. 기존 코드만으로는 콜백의 콜백을 만들어 점점 관리가 어려워지는 콜백 지옥을 해결하고 다수의 비동기 작업을 처리할 때 관리하기 쉽도록 만들어줍니다. Promise 이전에는 이벤트와 콜백 함수가 사용되었지만 기능이 제한적이고 다루기 힘들었습니다. 여러번 중첩된 콜백함수를 계속 사용하는 것은 점점 프로젝트를 관리하기 힘들게 하고 사용자가 동시에 여러개의 콜백을 처리하는 것도 쉬운일은 아닙니다. 이벤트 역시 비동기 작업 처리에 적합하지는 않습니다. Promise는 간편하게 비동기 작업을 처리하기 위한 이상적인 선택입니다. 이는 여러 비.. 2022. 4. 26.
[javascript] 자바스크립트 및 캔버스를 이용한 그림판 만들기 참고: https://dev.to/javascriptacademy/create-a-drawing-app-using-javascript-and-canvas-2an1 이 튜토리얼에서는 브라우저에서 간단히 그림을 그릴 수 있도록 하는 스크립트를 만들 것입니다. 이를 위해 기본 javascript와 canvas API를 사용할 것입니다. 이 튜토리얼을 마치고 나면 canvas API와 javascript의 이벤트 처리에 대한 대략적인 흐름을 알게 될 것입니다. HTML markup 전체 앱을 section으로 래핑하고 class 이름을 container로 해서 시작하겠습니다. 이는 툴바와 드로잉 보드를 정렬하는데 사용합니다. 이 안쪽에 툴바를 위치시킬 div를 넣고 javascript 작업을 수월하게 하기위해 .. 2022. 4. 26.
[javascript] 자바스크립트 createElement 사용방법 참고: https://www.javatpoint.com/javascript-create-element 이 글은 javascript를 통해 HTML element를 만드는 방법에 대해 설명합니다. 그리고 생성된 element를 document에 삽입하는 예제도 함께 소개합니다. HTML 코드는 element를 만드는 유일한 방법은 아닙니다. 간단하기 때문에 대부분 HTML document에서 바로 element를 생성하곤 했지만 javascript로도 element를 생성하는 것이 가능합니다. document.createElement()는 javascript를 통해 동적으로 특정한 이름의 HTML element를 생성하는데 사용됩니다. 이 메소드는 element의 이름을 매개변수로 받아서 해당 노드를 생성.. 2022. 4. 21.
[javascript] 자바스크립트 setInterval 사용방법 참고: https://www.javatpoint.com/javascript-setinterval-method javascript의 setInterval() 메소드는 지정된 시간 간격마다 지정된 기능을 반복하고자 할 때 사용합니다. 이는 특정 코드나 주어진 함수를 지정된 간격으로 호출합니다. 이 메소드는 윈도우가 닫히거나 clearInterval() 메소드가 호출될 때 까지 계속 실행되고 리턴값으로 0이 아닌 숫자인 타이머 id를 반환합니다. setTimeout() 메소드와는 달리 setInterval() 매소드는 함수를 여러번 호출하고 또한 window. 구문을 생략할 수 있습니다. setInterval() 메소드의 일반적인 사용방법은 다음과 같습니다. 문법 window.setInterval(functi.. 2022. 4. 21.
[javascript] 자바스크립트 setTimeout 사용방법 참고: https://www.freecodecamp.org/news/javascript-settimeout-how-to-set-a-timer-in-javascript-or-sleep-for-n-seconds/ 이 튜토리얼은 javascript 내장 메소드인 setTimeout()을 사용한 코드 예제를 보여주고 이 메소드가 작동하는 방식을 이해하는데 도움을 줄 것입니다. javascript에서 setTimeout()을 사용하는 방법 setTimeout() 메소드의 기능은 일정 시간이 지난 후 정해진 코드를 실행하게 합니다. 특정 시간에 javascript 코드를 실행하도록 타이머를 설정하는 것이라고 생각할 수 있습니다. 예를 들어 아래 코드는 2초가 지난 후 javascript 콘솔에 "Hello Worl.. 2022. 4. 20.
[javascript] 자바스크립트 audio 사용방법 참고: https://www.developerdrive.com/manipulating-html5s-native-audio-with-javascript/ 타사 플러그인을 사용하지 않고 음원을 재생하려면 HTML5의 기본 오디오 요소를 사용하면 됩니다. Chrome 10+ 및 Firefox 3.6+와 같은 최신 웹 브라우저에는 이미 요소와 이를 조작할 메소드, 속성이 라이브러리 형태로 내장되어 있습니다. 여기서는 몇 가지 사용법을 알아보고 javascript를 사용하여 오디오 파일을 실행하는 방법을 알아보겠습니다. AUDIO METHOD .load() 재생을 위해 오디오 요소를 로드하거나 리로드합니다. audioElement.load(); .play() 오디오 파일의 재생을 시작합니다. audioElemen.. 2022. 4. 12.
[linux] 리눅스 ifconfig 명령어 사용법 참고: https://www.tecmint.com/ifconfig-command-examples/ ifconfig는 리눅스 운영체제의 커맨드라인 인터페이스나 시스템 구성 스크립트를 통해 네트워크 인터페이스의 매개변수를 구성, 관리 및 쿼리하기 위한 간단한 인터페이스 설정 유틸리티입니다. ifconfig 명령어는 현재 네트워크 구성 정보를 표시하고, 네트워크 인터페이스에 대한 IP 주소, 넷마스크 또는 브로드캐스트 주소를 설정하고, 네트워크 인터페이스에 대한 별칭을 만들고, 하드웨어 주소를 설정하고, 네트워크 인터페이스를 활성화 또는 비활성화하는데 사용합니다. 1. 모든 네트워크 인터페이스 설정 보기 인수 없이 ifconfig 명령어를 사용하면 모든 활성 인터페이스 세부 정보를 표시합니다. 또한 ifcon.. 2022. 1. 18.
[linux] 리눅스 CMD에서 OS 버전 확인하는 방법 참고: https://www.cyberciti.biz/faq/how-to-check-os-version-in-linux-command-line/ 참고: https://sisiblog.tistory.com/277 리눅스는 자유오픈소스 운영체제입니다. 이는 다양한 변종이 있는데 일반적으로 리눅스 배포판으로 부릅니다. Suse, OpenSUSE, Debian, Ubuntu, CentOS, Arch, Fedora, RHEL 모두 일반적인 리눅스 배포판 이름입니다. 이 리눅스 서버를 운영할 때 운영체제 버전을 알면 보안패치에 아주 유용하게 쓸 수 있습니다. 운영체제 버전 확인 일반적인 리눅스의 버전을 확인하는 과정은 다음과 같습니다. 터미널 프로그램을 실행 (bash shell) 원격 서버인 경우 ssh 로그인 .. 2022. 1. 13.
[linux] 리눅스 10가지 wget 명령어 사용법 참고: https://www.fastwebhost.in/blog/10-examples-of-linux-wget-command/ wget 명령어는 웹에서 파일 다운로드를 도와주는 리눅스 커맨드라인 유틸리티입니다. 이 명령어는 HTTP, HTTPS, FTP 프로토콜을 이용해 웹서버에서 파일을 다운로드 받습니다. 그리고 스크립트나 cronjob에서도 실행시킬 수 있습니다. wget은 백그라운드에서 실행되는 비인터랙티브 프로그램으로서 쓸만한 기능으로는 미러링이 있습니다. 이 기능으로 웹에서 전체 웹 사이트를 다운로드 할 수 있습니다. wget 명령어의 몇 가지 예를 살펴보겠습니다. 1. 웹페이지 다운로드 다음은 웹에서 파일을 다운로드하는 기본 형식입니다. $ wget http://example.org/file... 2022. 1. 13.
[python] 파이썬 디지털 숫자 그리기 파이썬 콘솔에 디지털 숫자를 출력하기 - 7 Segment Display 스타일의 숫자 출력 - 출력할 영역의 크기 조절 가능 - 숫자의 크기 조절 가능 - 숫자의 모양에 대한 정의는 코드 주석에 설명 import math # # # --- # a # | | # f b # --- # g # | | # e c # --- # d # # numbers = [ # [a, b, c, d, e, f, g] [1, 1, 1, 1, 1, 1, 0], # 0 [0, 1, 1, 0, 0, 0, 0], # 1 [1, 1, 0, 1, 1, 0, 1], # 2 [1, 1, 1, 1, 0, 0, 1], # 3 [0, 1, 1, 0, 0, 1, 1], # 4 [1, 0, 1, 1, 0, 1, 1], # 5 [1, 0, 1, 1, .. 2020. 12. 10.
[python] 파이썬 구구단 간단 버전 2차원 배열을 이용해 단순 곱셈 출력 1 2 3 4 for i in range(2, 10): for j in range(1, 10): print(f'{i} x {j} = {i * j}') print() cs 화면가득 채우기 버전 각각의 구구단을 화면에 꽉 채우기 위해 화면 크기와 구구단 크기를 계산, 위에서 아래로 한꺼번에 출력하도록 작성 Python 3은 변수명을 유니코드로도 작성할 수 있음 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 import math def print_elem.. 2020. 12. 4.
[python] 파이썬 랜덤함수 사용하기 (randrange, choice, shuffle) 더 자세한 내용은 문서에 있습니다. 특정 범위의 랜덤 숫자 뽑기 1 부터 45 까지 숫자 중 아무거나 하나 뽑으려면 랜덤함수 randrange(1, 46)으로 얻을 수 있습니다. randrange 함수는 첫번째 파라미터 이상이고 두번째 파라미터 미만인 숫자를 리턴해줍니다. 간단히 등호로 표시하면 다음과 같습니다. (1 > import random >>> random.randrange(1, 46) >>> random.randrange(1, 101) 목록 중에서 하나 뽑기 이미 정해놓은 목록이 있고 그 중에서 하나를 뽑으려면 choice() 함수를 사용합니다. 예를 들어 여러 친구들 중 한명을 뽑으려면 random.choice(['철수', '영희', '길동', '둘리'])와 같이 입력하면 됩니다. 만일 둘중.. 2020. 12. 4.
[python] 파이썬 자판기 (Vending Machine) C언어 자판기 v1.3 파이썬으로 자판기 만들기 import time import json from typing import Dict config_item_list = [ { 'id': 1, 'name': '참깨라면', 'price': 1000 }, { 'id': 2, 'name': '햄버거', 'price': 1500 }, { 'id': 3, 'name': '콜라', 'price': 800 }, { 'id': 4, 'name': '핫바', 'price': 1200 }, { 'id': 5, 'name': '초코우유', 'price': 1500 }, { 'id': 0, 'name': '종료' } ] class VendingMachine: def __init__(self): self.items = json... 2020. 12. 4.
[python] 파이썬 파일 존재여부 확인 (exists, isfile, isdir) >>> from os import path >>> path.exists('/bin') True >>> path.exists('/bin/cat') True >>> path.isfile('/bin') False >>> path.isfile('/bin/cat') True >>> path.isdir('/bin') True >>> path.isdir('/bin/cat') False os.path.exists(path) 파일이나 경로가 존재하는지 확인하고 존재한다면 결과 값으로 True를 그렇지 않다면 False를 리턴한다 심볼릭 링크가 깨진 경우, 접근 권한이 없는 경우에도 False를 리턴한다 os.path.isfile(path) path가 파일인 경우 True를 리턴하고 디렉토리이거나 파일이 존재하지 않으면 .. 2020. 12. 1.
[python] 파이썬 날짜/시간 형식 맞춰 출력하기 (date, time) 날짜와 시간을 일정한 포맷의 문자열로 변환하려면 strftime 함수를 사용하면 됩니다. date, datetime 및 time 객체는 모두 strftime(format) 메서드를 지원합니다. >>> date.today().strftime('%Y%m%d') '20201130' >>> date.today().strftime('%y-%m-%d %H:%M:%S') '20-11-30 00:00:00' >>> time.strftime('%c', time.localtime(time.time())) 'Mon Nov 30 14:59:35 2020' time.localtime 함수는 에포크(epoch)시간을 반환합니다. 에포크(epoch)시간은 시간이 시작되는 시점을 말하며 플랫폼에 따라 다릅니다. 유닉스의 에포크는 1.. 2020. 11. 30.
[linux] 리눅스 tail 명령어 사용 예제 (실시간 로그 보기) 참고: https://shapeshed.com/unix-tail/ 리눅스 같은 시스템에서는 cat 명령어로 파일 내용을 볼 때 유용하게 사용할 수 있습니다. 그런데 어떨 때는 파일의 일부분만 보고 싶을 때가 있습니다. 이 때 tail 명령어를 사용하면 됩니다. tail 명령어란 tail 명령어는 리눅스 계열 시스템의 유틸리티로 입력받은 파일의 마지막 부분을 출력하는 프로그램입니다. 기본적으로 tail은 입력파일의 마지막 10줄을 출력하는데 로그파일의 모니터링 용도로 사용할 수도 있습니다. 파일의 마지막 10줄 보는 방법 파일의 마지막 10줄을 보기 위해선 tail 명령어에 읽고 싶은 파일의 이름을 입력하면 됩니다. 그러면 표준 출력으로 파일의 마지막 10줄을 출력합니다. $ tail [파일 명] 2020.. 2019. 12. 10.
[javascript] 자바스크립트 forEach, map, filter, find 배열 메소드 사용 예제 자바스크립트에는 배열을 돌며 값을 처리할 수 있도록 도와주는 기능이 있습니다. 단순히 for 루프를 사용하여 각각의 배열 값을 처리할 수도 있지만 사용 목적에 따라 적절한 배열 메소드를 사용하는게 좋습니다. [].forEach() 가장 기본적인 배열 메소드로써 for 루프와 동일한 기능을 합니다. 파라미터로 현재 배열값과 인덱스를 받을 수 있습니다. const numberList = [1, 2, 3, 4, 5, 6, 7, 8, 9]; numberList.forEach((item, index) => { console.log(item, index); }); for 루프보다 깔끔하게 배열 값을 처리할 수 있습니다. [].map() map 메소드는 모든 요소를 돌며 일괄적으로 요소들을 변경하는 기능을 합니다. .. 2019. 12. 6.
[javascript] 자바스크립트 JSON.parse() JSON.stringify() 사용 예제 요즘 브라우저들은 JSON 오브젝트를 만지기 위해 parse와 stringify 같은 매우 유용한 메소드를 제공하고 있습니다. JSON.parse()는 JSON 문자열을 받아 자바스크립트 객체로 변환해 주고, JSON.stringify()는 자바스크립트 객체를 JSON 형식의 문자열로 바꿔줍니다. 상호 변환을 통해 쉽게 JSON 객체를 다룰 수 있습니다. JSON.stringify() const myObject = { name: 'dog', age: 2 }; const myString = JSON.stringify(myObject); myObject는 자바스크립트 객체입니다. 이를 JSON.stringify()를 통해 문자열로 바꾸는 코드 예제입니다. 위의 그림에서 보이는 것 처럼 myObject를 ty.. 2019. 12. 5.
[javascript] 자바스크립트 타이머 (setTimeout, setInterval) 자바스크립트를 짜다보면 함수를 바로 실행하지 않고 일정시간 뒤에 실행하도록 하고싶을 때가 있습니다. 이런 기능을 구현할 수 있도록 자바스크립트에서는 setTimeout과 setInterval 함수를 지원합니다. setTimeout 일정 시간(밀리세컨드) 이후 함수 실행 setTimeout(() => { // do something console.log('javascript'); }, 1000); 위 코드는 첫번째 인자의 함수를 1000 밀리세컨드 이후에 실행하도록 하는 코드입니다. 1000 밀리세컨드는 1초 입니다. 만약 주어진 시간이 지나기 전에 타이머를 취소하고 싶으면 clearTimeout을 사용합니다. const timer = setTimeout(() => { // do something cons.. 2019. 12. 5.
반응형