본문 바로가기

개발(Development)273

HTML Canvas(캔버스) 선 그리기 방법 총정리: 7가지 샘플 예제 코드 # HTML Canvas 선 그리기 방법 1. 새로운 선 그리기 설정: ctx.beginPath() 2. 선의 출발점 지정 : ctx.moveTo(x, y) 3. 선의 도착점 지정 : ctx.lineTo(x, y) 4. 선 그리기 : ctx.stoke() * 여러개의 선을 그릴 때는 매번 beginPath() 호출 필요 * beginPath()를 호출하지 않으면, 도착점들을 계속 잇는 선이 그려진다. # 선 디자인 설정 방법 1. 선 디자인 설정 1) 색상 설정: ctx.strokeStyle = '색상'; 2) 두께 설정: ctx.lineWidth = 숫자; * 선 색상/두께는 그리기(ctx.stoke()) 전에 설정 2. 선 끝부분 설정: ctx.lineCap = "butt/square/round" 1.. 2021. 6. 1.
HTML Canvas(캔버스) 기초: 기본 사용 방법 & 샘플 예제 코드 # HTML Canvas란? 1. canvas는 html문서 내부에 그림을 그릴 수 있는 일종의 '컨테이너' 엘리먼트다. 2. 자바스크립트를 통해 그림을 그리고 애니메이션과 이벤트 처리 등을 구현할 수 있다. # canvas 사용 방법 1. html 문서에 canvas 엘리먼트를 선언한다. 2. canvas 엘리먼트에 id 속성을 설정한다. 3. canvas 태그 내부에 width, height를 설정한다. 4. canvas 내장 '그리기 객체'를 취득한다. 5. 그리기 객체에 '채우기색, 선색, 그림자, 그라데이션' 등을 설정한다. 6. 그리기 객체를 통해 선, 사각형, 원, 텍스트 등을 그린다. 7. 자바스크립트를 통해 다양한 효과를 구현한다. # canvas 기초 샘플 코드 캔버스 태그를 생성하고,.. 2021. 6. 1.
VS CODE: JS 함수 주석 문서화하는 방법(자동완성 툴팁 노출) 자바스크립트 작업을 할 때, 함수에 주석을 달아서 문서화(Doc?)해두면, 함수를 호출할 때 아래처럼 자동완성 툴팁이 노출되어 아주 편하다. 즉, 함수의 파라미터 타입, 반환값에 대한 정보를 보면서 프로그래밍할 수 있게 된다. (작업 환경: VSCode 자바스크립트 개발) # JS 함수의 문서화 주석 만드는 방법 1. 함수 선언 ▶︎ 평소처럼 함수를 만들어준다. ▶︎ 여기서는 id, name을 파라미터로 받아서 반환하는 getInfo 함수를 선언했다. 2. 주석 생성 ▶︎ 함수의 바로 윗부분에서 /** 까지만 입력한다. ▶︎ 아래와 같은 자동완성이 노출되면 엔터를 쳐준다. 3. 파라미터 타입 ▶︎ @param {*} 파라미터 형식의 주석이 자동완성 되면, ▶︎ 대괄호 { } 사이에 number, stri.. 2021. 5. 9.
[GCP] node.js 웹 서버 배포 방법(Compute Engine VM인스턴스/구글클라우드플랫폼) # GCP Compute Engine에 node.js 서버 배포 방법 정리 Google Cloud Platform(GCP)의 Compute Engine - VM인스턴스 상에서 node.js 웹 서버를 배포하고 기동하는 방법을 정리합니다. 간단하게 웹 콘솔로 접근하는 방식을 사용합니다. GCP가입 및 Compute Engine-VM인스턴스를 생성 방법은 아래 글 참고. [GCP] Compute Engine에 VM인스턴스 생성하는 방법(구글클라우드플랫폼) 1. SSH 접속 1) GCP > Compute Engine > VM인스턴스 접속 > SSH 클릭 브라우저 웹 콘솔에 연결되면, 아래과 같은 화면이 뜬다. 2. 루트 계정으로 변경 명령어: sudo su 원활한 서버 배포 및 구동을 위해 루트 계정으로 변경.. 2021. 4. 25.
[GCP] Compute Engine에 VM인스턴스 생성하는 방법(구글클라우드플랫폼) # GCP Compute Engine의 VM 인스턴스 생성 방법 정리 Google Cloud Platform(GCP)에 가입하고 VM인스턴스를 만드는 법을 정리해봅니다. (환경에 따라 구글클라우드플랫폼의 화면은 조금씩 다를 수 있음.) 1. GCP 접속, 가입/로그인, 각종 정보 입력 (가입 및 정보 입력 과정은 캡처 화면 생략) 접속 URL: console.cloud.google.com 중간에 아래의 과정이 나오면 착실히 진행해준다. 1) 휴대폰 인증 화면 2) 결제수단(신용 카드 정보) 입력 3) 프로젝트 만들기: 원하는 이름으로 만들어주면 된다. 처음 가입 시에는 $300달러의 무료 크레딧이 제공되어, 3개월 정도 300달러 한도 내에서 GCP의 서비스를 무료로 이용해볼 수 있다.(21년 4월 기준.. 2021. 4. 25.
[자바스크립트] 코드 실행 2단계와 변수/함수 생성 과정 자바스크립트는 소스 코드를 2단계로 실행합니다. 1 단계: 실행 컨텍스트 생성하고, 변수 등을 등록하는 단계 2 단계: 소스 코드를 한 줄씩 실행하는 단계 이 글은 각각의 과정을 최대한 단순화하여 정리해봅니다. (세부적인 과정은 엔진마다 다르고, 훨씬 더 복잡할 것입니다.) 자바스크립트의 메모리 구조 및 콜스택/메모리힙에 대해서는 아래 글을 먼저 참고하시면 좋을듯 합니다. [자바스크립트] 메모리 구조, 원시타입 변수 생성 원리, 가비지컬렉터 [자바스크립트] 콜스택/메모리힙 구조, 데이터 저장/참조 원리 먼저 아래 코드를 실행한다고 가정하자. // 변수 선언문 var a = 10; let b = 20; const c = 30; // 함수 선언문 function func_1(arg){ return arg; .. 2021. 4. 8.
[자바스크립트] 콜스택/메모리힙 구조, 데이터 저장/참조 원리 이 글은 자바스크립트의 콜스택/메모리힙에서 데이터가 어떤 방식으로 저장되고 참조되는지를 정리한다. 기본적인 메모리 구조와 변수 생성 원리에 대해서는 아래 글을 꼭 참고(필수) [자바스크립트] 메모리 구조, 원시타입 변수 생성 원리, 가비지컬렉터 # 콜스택, 메모리힙이란? 자바스크립트는 콜스택과 메모리힙이라는 메모리 구조를 통해 데이터 및 코드 실행을 관리한다. 1. 콜스택(Call Stack) : 원시타입(숫자 등) 데이터가 저장된다. : 실행컨텍스트(Execution Context)를 통해 1) 변수 식별자(이름) 저장, 2) 스코프 체인 및 this 관리, 3) 코드 실행 순서 관리 등을 수행. * 실행 컨텍스트의 상세 구조 및 원리는 이 글의 범위를 넘어가므로 다루지 않습니다. 2. 메모리힙(Mem.. 2021. 4. 7.
[자바스크립트] 메모리 구조, 원시타입 변수 생성 원리, 가비지컬렉터 자바스크립트가 기본 타입 데이터를 저장, 참조하는 과정을 메모리의 관점에서 아주 단순화하여 정리해 본다. # 메모리 구조, 데이터 저장/참조 원리 컴퓨터의 메모리는 1Byte(8bit)크기의 메모리셀 여러개로 구성된다. 각 메모리셀은 본인만의 고유한 주소값을 가지며, 8개의 비트(2진수: 0, 1)로 데이터를 저장한다. 1. 메모리 구성 : 컴퓨터 메모리는 1byte(8bit) 크기의 메모리셀 여러개로 구성된다. 2. 메모리 셀 : 각 메모리셀은 고유한 주소값을 갖으며, 메모리셀(1byte) 단위로 데이터를 저장하고 읽는다. 3. CPU와 메모리 역할 : CPU는 메모리에 저장된 값을 꺼내와 연산을 하고, 연산 결과를 다시 메모리에 저장한다. 4. 데이터 저장 방식 : 용량이 큰 데이터는 메모리셀(1by.. 2021. 4. 7.
HTML Canvas 왜곡현상(선 두께 불일치, 비대칭, 비율 불균형 등) 해결 방법 HTML에서는 아래와 같이 canvas태그를 이용하면, 쉽게 그림을 그릴 수 있다. 오른쪽으로 갔다가 아래로 내려가는 선을 그리는 코드다. (나름대로 상세하게 주석을 달았다) 그런데 웹페이지에 띄워보면... 가로 세로 선 두께가 다른 것을 알 수 있다. 아주 기초적인 내용이지만, 모르고 있으면 난감한 내용이다. 이 현상은 그래픽적인 요소를 CSS로 별도 처리하는 좋은(?) 습관으로 인해 발생하는 문제다. (내가 그랬다.... ㅋㅋㅋ) MDN사이트 canvas 튜토리얼을 보면 이런 문장이 있다. Note: If your renderings seem distorted, try specifying your width and height attributes explicitly in the attributes, .. 2021. 3. 28.

티스토리툴바