방문해 주셔서 감사합니다! 항상 행복하세요! - 문의사항은 메일 또는 댓글로 언제든 연락주세요. - "해줘","답 내놔" 같은 질문은 답변드리지 않습니다. - 메일주소 : lts06069@naver.com 전체 글674 #1. 타입스크립트 믹스인(Typescript mixin) 타입스크립트(Typescript) 공부를 처음부터 다시 하면서 개념과 원리를 정리하고 있습니다. 타입스크립트(Typescript)에서의 클래스는 자바스크립트처럼 상속기능을 제공 합니다. 클래스, 인터페이스, 추상클래스 등을 상속을 받아서 기존에 정의된 함수 및 변수등을 사용 할 수 있습니다. 그러나 타입스크립트에서 인터페이스(interface)를 제외한 나머지 클래스(class), 추상클래스(abstract class)는 extends 라는 명령어를 통해서 단 한번만 상속이 가능 합니다. 자바처럼 다중상속을 제한하기 때문에 이를 해결하기 위해서는 인터페이스(interface)를 통해 여러개의 대상을 상속받는(implements)을 수 있으나 인터페이스 특성 상 머리만 존재하고 내용이 없기 때문에 상속받은.. 2022. 5. 18. 새로운 자바스크립트(타입스크립트) 런타임 환경, 디노(Deno) node.js에서 자바스크립트(타입스크립트)는 v8기반의 엔진을 통해 실행 합니다. 그리고 패키지 관리는 npm을 통해 관리를 합니다. 그런데 요 디노(deno)라는 녀석이 이러한 개발 및 런타임 환경을 좀 더 편리하게 해 줄수 있다고 하였습니다. 구글링한 디노의 특징은 대략 아래와 같았습니다. - 타입스크립트(TypeScript)를 바로 실행할 수 있습니다. - 의존성 검사기(dependency inspector)와 코드 포매터(code formatter)를 가지고 있습니다. - 실행할 수 있는 파일 1개로 만들어 줍니다. 역시 머리보다 몸이 먼저인 사람은 한번 해봐야 뭔말인지 알 수 있을 것 같습니다. 백문이 불여일견! 먼저 디노(deno)를 설치하도록 합니다. 윈도우 기반이면 아래 명령어를 통해 쉽.. 2022. 5. 16. 영어 끝말잇기 (프로그래머스, Level 2) 최근 지친마음(?)을 회복하고자 간단한 코테문제를 풀기 시작하였습니다. 프로그래머스에서 제공되는 "영어 끝말잇기" 라는 문제를 풀어 보았습니다. 문제 내용은 아래와 같습니다. * 문제 설명 1부터 n까지 번호가 붙어있는 n명의 사람이 영어 끝말잇기를 하고 있습니다. 영어 끝말잇기는 다음과 같은 규칙으로 진행됩니다. 1번부터 번호 순서대로 한 사람씩 차례대로 단어를 말합니다. 마지막 사람이 단어를 말한 다음에는 다시 1번부터 시작합니다. 앞사람이 말한 단어의 마지막 문자로 시작하는 단어를 말해야 합니다. 이전에 등장했던 단어는 사용할 수 없습니다. 한 글자인 단어는 인정되지 않습니다. 다음은 3명이 끝말잇기를 하는 상황을 나타냅니다. tank → kick → know → wheel → land → drea.. 2022. 5. 16. Javascript 간단한 알림 기능(Alert, alarm, toast) 핸드폰을 사용하면 간단한 알림메시지를 볼 수 있습니다. 이러한 기능을 Toast라고 불리는데(아이폰은 토스트라 불리우지 않을 수도 있습니다..ㅎ) 웹에서 간단하게 구현하기 위해 만들어 보았습니다. 구동모습은 아래와 같습니다. flex 속성을 부여하였기 때문에 브라우저 크기에 맞추어서 알아서 가운데로 이동하여 줍니다. 물..론 익스플로러 사용자라면 동작을 안할 수도 있습니다..ㅠ 위 내용에 사용된 소스코드 입니다. 딱히 어려운 코드는 아니므로 기능을 수정하시는 데 어렵지는 않을 것 같습니다. 굳이 부모 노드에서 자식 노드를 다시 생성하지 않아도 되는데.. 브라우저의 돔 접근을 최소화 하기 위해서는 조금 고민할 필요는 있겠습니다. 궁금한점이나 문의사항은 언제든지 연락주세요! 👻 2022. 4. 29. HTML Canvas Path2D(쉬운 이벤트제어를 위한 Path2D) 캔버스에서 이벤트를 제어하기 위해서는 그려진 데이터를 기준으로 사각형, 원, 다각형 등으로 구분하여 수학적인 계산 방법을 통하여 달아주고는 합니다. 사각형은 시작점과 종료점 사이에 클릭한 좌표값이 존재하는지를 확인하며 원은 클릭한 지점부터 원의 중심점의 반지름보다 작은지 큰지 등을 통하여 확인하고 다각형은 다각형 내부의 접점의 개수를 판별하여(홀수) 이벤트를 부여합니다. 이러한 계산방법이 어렵고 적용하기 힘든 경우에는 Path2D 객체를 사용하면 조금 더 쉽게 적용 할 수 있습니다. Path2D의 기본 사용법은 어렵지 않습니다. let canvas = document.getElementById('canvas') as HTMLCanvasElement; const ctx = canvas.getContext(.. 2022. 4. 22. HTML Canvas video webcam(캔버스 비디오 웹캠) 캔버스(canvas)를 활용하여 웹캠 정보를 재생하는 내용 입니다. 웹에서의 웹캡 비디오 스트림은 navigator 객체에서 useMedia 함수를 사용하면 가져올 수 있습니다. navigator.mediaDevices.getUserMedia({ video: true }) 이렇게 getUserMedia를 통하여 콜백으로 받은 스트림 객체는 비디오(vedio) 엘리먼트의 srcObject의 값으로 대입할 수 있습니다. getUserMedia 함수가 프로미스(Promise) 형식으로 되어 있어 then 함수를 호출하여 만나볼 수 있습니다. navigator.mediaDevices.getUserMedia({ video: true }).then( stream=>{ //비디오 스트림 : stream }) 여기까지.. 2022. 4. 15. 이전 1 ··· 15 16 17 18 19 20 21 ··· 113 다음
