Frontend/Javascript
-
[HTML5] Canvas API 기초 2 - 마우스로 선 제어하기Frontend/Javascript 2023. 8. 5. 16:47
지난 포스팅에서는 캔버스 기초로 선을 캔버스에서 원하는 위치에 그리고, 선의 스타일을 조절했다. 이번에는 마우스를 통해 캔버스에 그림을 그리고 다양한 옵션을 적용해보자! (0, 0)에서 시작해 마우스 움직임에 따라 직선그리기 마우스가 움직일 때 mousemove 이벤트 리스너만 추가해서 만들 수 있다. beginPath()를 해주는 이유는 매번 마우스가 움직일 때마다 path에 다른 색상을 적용하기 위해서다. See the Pen Untitled by 이지혜Leejihye (@Leejihye-the-reactor) on CodePen. 마우스 눌렀을 때 움직임에 따라 선 그리기 일반적으로 그림판에 그림을 그릴 때처럼 마우스를 누르고 움직였을 때 선이 그려지도록 했고, 마우스에서 손을 떼고 마우스가 캔버스..
-
[HTML5] Canvas API 기초 1 - 선그리기Frontend/Javascript 2023. 8. 4. 23:02
HTML5 기본 태그인 Canvas API에 대해 알아보자. 서점에 나와있는 캔버스 관련 책은 굉장히 두껍게 나와있는데 그만큼 파면 팔수록 어려운 분야이다! 캔버스는 javascript를 통해 제어할 수 있으며 애니메이션, 게임 그래픽, 데이터 시각화 등 다양한 방면으로 활용할 수 있다. 오늘은 캔버스의 기초 사용 방법을 알아보자! 2d로그릴지, 3d로 그릴지 선택하기 보통은 2d로 많이 활용하지만 3d로도 활용할 수 있다. HTMLCanvasElement.getContext(contextType) contextType 2d webgl, bitmaprenderer (3d) 채워진 정사각형 그리기 여기서 중요한 것은 사각형을 그리기 전에 캔버스의 가로, 세로 넓이를 지정해줘야 한다. fillRect(x,..
-
[Javascript] 오늘 날짜 구하기, 오늘 날짜 전까지 조회하기Frontend/Javascript 2023. 7. 27. 10:17
오늘 날짜 구하기 자바스크립트의 Date 객체를 통해 오늘 날짜 구하기 const today = new Date() // console.log(today); // Thu Jul 27 2023 09:27:40 GMT+0900 (한국 표준시) 오늘 날짜를 쉽게 구할 수 있지만, 원하는 형식으로 포맷팅이 필요해보인다. 오늘 날짜 전까지 조회하기 🌟 생년월일은 과거 날짜만 유효하기 때문에 생년월일 유효성 검사에 적합하다. 생년월일을 YYYYMMDD 형식으로 받아 이 날짜가 오늘 날짜 전인지 확인하는 함수를 만들어보자! const isDateBeforeToday = (dateString: string) => { const today = new Date(); const year = parseInt(dateStrin..
-
[Javascript] Map 정렬하기Frontend/Javascript 2022. 6. 27. 16:36
Map 객체는 key-value 쌍으로 이루어져 있다. Map을 key값을 기준으로 정렬하거나 value값을 기준으로 정렬할 수 있다. const map1 = new Map(); map1.set('a', 1); map1.set('b', 2); map1.set('c', 3); // map1 얕은 복사 let newMap = [...map1]; console.log(newMap.sort((a, b) => a[0] - b[0])) // [Array ["a", 1], Array ["b", 2], Array ["c", 3]] key값의 오름차순 정렬 console.log(newMap.sort((a, b) => b[0] - a[0])) // [Array ["c", 3], Array ["b", 2], Array ["..
-
[TypeScript] Class에 대해 알아보자Frontend/Javascript 2022. 6. 14. 11:33
TypeScript는 ES6에서 도입된 클래스 문법을 지원하며 보다 강력한 기능을 제공한다. 클래스 문법에서 타입스크립트 적용하기 class BadGreeter { // error: Property 'name' has no initializer and is not definitely assigned in the constructor. name: string; } class GoodGreeter { name: string; // 생성자에서 클래스 필드 초기화하기 constructor() { this.name = "hello"; } } class OKGreeter { // Not initialized, but no error name!: string; } 접근 제어자 접근 제어자를 통해 접근 가능한 범위를 ..
-
[TypeScript] Type & Interface에 대해 알아보자Frontend/Javascript 2022. 5. 23. 23:54
타입스크립트의 핵심인 타입을 명시하는 여러 유형을 정리했다. 다음과 같이 명시적으로 변수에 type 할당할 수 있다. const player(name: string, age: number) { name: "jelly", age: 13 } 매번 타입을 재설정하는 것은 복잡하기 때문에 type 키워드를 사용해 type alias(타입 별칭) 정의할 수 있다. // type은 대문자로 정의한다. type Player = { name: string, age?: number } const jelly: Player = { name: "jelly" } const sophie: Player = { name: "sophie", age: 13 } 또한 interface로 객체의 유형을 지정할 수 있다. interface ..
-
[Javascript] Object vs. MapFrontend/Javascript 2022. 4. 16. 01:38
Map Map은 key-value 쌍을 보유하고 키의 원래 삽입 순서를 기억한다. 어떠한 값이든 key 값으로 사용할 수 있다. const map1 = new Map(); map1.set('a', 1); map1.set('b', 2); map1.set('c', 3); console.log(map1.get('a')); // expected output: 1 map1.set('a', 97); console.log(map1.get('a')); // expected output: 97 console.log(map1.size); // expected output: 3 map1.delete('b'); console.log(map1.size); // expected output: 2 Map은 삽입 순서로 요소를 반복..
-
[Javascript] 고차함수(Higher-Order Function)에 대하여Frontend/Javascript 2022. 4. 5. 13:09
자바스크립트에서 함수 자바스크립트에서 함수는 문법 구조일 뿐만 아니라 값으로써 변수에 할당될 수도 있고, 객체 프로퍼티나 배열 요소에 저장될 수도 있으며, 다른 함수에 인자로 전달될 수도 있고 여러 가지로 기능한다. 함수는 특별한 종류의 자바스크립트 객체이다. 함수는 객체이므로 다른 객체와 마찬가지로 프로퍼티와 메서드를 가질 수 있다. 고차 함수 고차 함수는 하나 이상의 함수를 인자로 받아 새 함수를 반환하는 함수이다. 이 때 다른 함수의 인자로 전달되는 함수를 콜백 함수라고 한다. 또한 함수를 리턴하는 함수는 커리 함수라고 한다. // 이 고차 함수는 인자를 f에 전달하고 f의 반환 값의 논리 부정을 반환하는 새 함수를 반환한다. function not(f) { return function(...arg..