자급자족 공장장

이번에는 그림판에 정해진 색상을 보기로 제공하여 그 안에서 변경할 수 있도록 하는 기능이다. 무슨 말인지 헷갈리다면 아래 첨부된 그림판 만들기 이전글을 참고한다. 그림판 만들기 이전글 2022.11.02 - [IT/javascript] - [javascript] 바닐라JS로 그림 앱 만들기 #1.2 Paths / canvas에서 사각형 그리는 순서 2022.11.03 - [IT/javascript] - [자바스크립트] moveTo() lineTo()란? 사각형, 삼각형, 집 그리기 / 바닐라JS 그림 앱 만들기 / #1.3 #1.4 2022.11.03 - [IT/javascript] - [자바스크립트] canvas 그림판 선 긋기, 점 찍기, 색상변경 / offsetX, offsetY, lineWidth..

선 색상을 변경하는 기능으로 다양한 색상을 직접 선택하거나 스포이드로 원하는 색상을 따서 변경할 수 있다. 그림판 만들기 이전글 2022.11.02 - [IT/javascript] - [javascript] 바닐라JS로 그림 앱 만들기 #1.2 Paths / canvas에서 사각형 그리는 순서 2022.11.03 - [IT/javascript] - [자바스크립트] moveTo() lineTo()란? 사각형, 삼각형, 집 그리기 / 바닐라JS 그림 앱 만들기 / #1.3 #1.4 2022.11.03 - [IT/javascript] - [자바스크립트] canvas 그림판 선 긋기, 점 찍기, 색상변경 / offsetX, offsetY, lineWidth, strokeStyle, stroke() 2022.11..

이제 드디어 그림판의 가장 기본인 기능. 마우스 왼쪽 클릭시 선이 그어지는 기능을 구현한다. 이전글 2022.11.02 - [IT/javascript] - [javascript] 바닐라JS로 그림 앱 만들기 #1.2 Paths / canvas에서 사각형 그리는 순서 2022.11.03 - [IT/javascript] - [자바스크립트] moveTo() lineTo()란? 사각형, 삼각형, 집 그리기 / 바닐라JS 그림 앱 만들기 / #1.3 #1.4 2022.11.03 - [IT/javascript] - [자바스크립트] canvas 그림판 선 긋기, 점 찍기, 색상변경 / offsetX, offsetY, lineWidth, strokeStyle, stroke() html과 css는 이전글과 동일. app..

이전단계 2022.11.02 - [IT/javascript] - [javascript] 바닐라JS로 그림 앱 만들기 #1.2 Paths / canvas에서 사각형 그리는 순서 [javascript] 바닐라JS로 그림 앱 만들기 #1.2 Paths / canvas에서 사각형 그리는 순서 canvas 엘리먼트는 javascript에 그래픽을 그릴 수 있는 API다. 사용방법은 간단하다. html에는 라고 작성하는 게 끝. 그 다음 그래픽을 그리기 위한 모든 작업은 javascript에서 canvas 엘리먼트에 접근한 rootingforme.tistory.com 2022.11.03 - [IT/javascript] - [자바스크립트] moveTo() lineTo()란? 사각형, 삼각형, 집 그리기 / 바닐라JS..

ctx.rect()도 shorcut function 이었다. rect보다 더 기본적인 기능인 moveTo와 lineTo를 활용해서 사각형을 그릴 수 있다. 그림판으로 그림을 만들려면 가장 작은 단위의 함수를 사용해야한다. moveTo(x, y): 브러쉬를 단순 이동 시켜준다. lineTo(x, y): 선을 그으며 이동한다. *다만 stroke()나 fill()을 사용해야만 선이 나타나거나 윤곽이 보인다. html과 css 코드는 이전 글과 같다. 아래 링크참조. 2022.11.02 - [IT/javascript] - [javascript] 바닐라JS로 그림 앱 만들기 #1.2 Paths / canvas에서 사각형 그리는 순서 [javascript] 바닐라JS로 그림 앱 만들기 #1.2 Paths / ca..

canvas 엘리먼트는 javascript에 그래픽을 그릴 수 있는 API다. 사용방법은 간단하다. html에는 라고 작성하는 게 끝. 그 다음 그래픽을 그리기 위한 모든 작업은 javascript에서 canvas 엘리먼트에 접근한 후 이루어진다. index.html styles.css body { display: flex; justify-content: center; align-items: center; } canvas { width: 800px; height: 800px; border: 5px solid black; display: flex; justify-content: end; } #1.2 사각형을 그리기 위한 단계 사각형 테두리 그리기: ctx.rec(x, y, with, height); ctx..

어도비사의 프로그램을 7일간 무료로 사용할 수 있는 서비스가 있는데 잊지말고 구독취소를 해야 이용료를 내지 않는다! 일주일이 넘어가면 한달이든 일년이든 설정한 이용료가 지불된다. 내 경우엔 아이 돌잔치 영상을 셀프로 제작중인데 원하는 효과가 프리미어에 없고 애프터이팩트에서만 구현가능하여 7일 무료체험하게 되었다. 어도비 프로그램 무료체험 7일전 취소하기 1. 7일 무료체험하고있는 어도비 프로그램실행 > 도움말 > 내 계정 관리 2. 어도비 웹 화면이 열린다 > 플랜관리 클릭 플랜 취소 클릭 3. 계정 비밀번호 입력 4. 플랜 취소 과정 진행 플랜 취소하지말고 변경하라고 해택을 보여주면서 꼬신다. 역시 마케팅 꼬임에 넘어가지 않고 다음으로 진행하면 플랜 취소를 위한 마지막 페이지가 나온다. 확인 버튼 클릭..

가계부 어플에 들어갔는데 나도 모르는 129,000원 거금이 앱스토어에 결제된 것을 발견했다!!! 어제 12시 26분에 저 금액을 결제한 기억이 아예 없다. 아니 앱스토어에서 결제를 최근에 한적이 없는데.. 헐레벌떡 이메일에 들어가 결제내역을 확인했다. 확인해보니 작년쯤에 영어 어플 구독 결제를 했는데 자동으로 갱신되면서 똑같이 1년치 결제가 진행된 것 이었다. 애플 결제 환불 과정 1. 앱스토어 결제내역 영수증 확인 -> 2. [문제신고] 버튼 -> 3. [문제 선택 - 환불요청] -> 4. [세부 내용 선택] -> 5. 환불요청 제출 -> 6. 요청상태확인 1. 앱스토어 결제내역 영수증 확인하기 -> 2. [문제신고] 버튼 클릭 결제내역은 카드사가 연결된 각메부어플에서 확인하기 어렵고 애플아이디 이메..

Schema 스키마 Mongoose v6.6.1: Schemas If you haven't yet done so, please take a minute to read the quickstart to get an idea of how Mongoose works. If you are migrating from 5.x to 6.x please take a moment to read the migration guide. Everything in Mongoose starts with a Schema. Each schema ma mongoosejs.com 데이터베이스를 매핑하는데 사용되는 정보(문서)의 형식을 정의한다. 몽구스의 모든 것은 스키마로 시작한다. Model 스키마 정의에서 컴파일된 생성자. 모델은 기본..

mongoose란 javascript 언어로 mongodb를 사용할 수 있도록 javascript를 변환해 주는 라이브러리다. 몽고DB와 Express.js 웹 애플리케이션 프레임워크 간 연결을 생성한다. 결론은 mongodb를 좀더 편하게 사용하려면 설치해줘야한다. 이전단계 > MongoDB 를 아직 설치하지 않았다면. 2022.09.16 - [IT/개발] - [macOS] MongoDB 설치하기 (유튜브 클론 6.7) [macOS] MongoDB 설치하기 (유튜브 클론 6.7) MongoDB document - based 문서기반 데이터베이스 일반적인 데이터베이스는 문서기반이 아닌 sql베이스 (엑셀같은 열과 행) 문서기반 데이터베이스는 데이터베이스를 object처럼 생각함. Json-like-doc..