일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |
- npm에러
- app.post
- 스크롤이벤트
- mainapplication.kt
- err_connection_refused
- 타입스크립트
- javascript
- Next.js
- 슬라이딩윈도우
- 리액트네이티브아이콘
- interface
- reactnative
- async
- extends
- reactnative error
- TS
- generic
- set
- 안드로이드빌드에러
- 이진탐색
- 상속
- array
- Filter
- Spring
- map
- 배열중복요소제거
- materialicons
- app:compiledebugkotlin
- react
- forwardref type
- Today
- Total
목록Html_css_js (55)
rhanziy
const id = document.getElementById('id').value; const pwd = document.getElementById('pwd').value; $('form').on('submit', function(e){ if(id == ""){ alert('아이디를 입력해주세요.'); return false; } if(pwd == "") { alert('비밀번호를 입력해주세요.'); return false; } if(pwd.length
interface SStorage { [key:string] : T } class LocalStorage { private storage: SStorage = {} set(key:string, value:T){ this.storage[key] = value; } remove(key:string){ delete this.storage[key] } get(key:string):T { return this.storage[key] } clear(){ this.storage = {} } } const stringsStorage = new LocalStorage() stringsStorage.get("key") stringsStorage.set("hello", "how are you") const booleanSt..
abstract class User { constructor( protected firstName: string, protected lastName:string ){} abstract sayHi(name:string):string abstract fullName():string } class Player2 extends User { sayHi(name:string){ return `Hello ${name}. My name is ${this.fullName()}` } fullName(){ return `#{this.firstName} ${this.lastName}` } } 타입스크립트에서 추상클래스를 구현하면 자바스크립트에서 컴파일했을 때 일반적인 클래스로 바뀌어버림. class User { constru..
flexbox를 사용하면 특히 그리드의 마지막 행에서 항상 예상되는 정렬이 생성되는 것은 아닙니다. justify-content: space- between 을 사용하면 항목 수가 정사각형이 아닌 한 마지막 행에 큰 간격이 생깁니다. 항목 모음이 있다고 가정해 보겠습니다. One Two Three Four Five 각 항목에는 고정된 높이와 너비가 있습니다. .item { width: 100px; height: 100px; border: solid; } 그리드에 정렬하려면 flexbox를 사용할 수 있습니다. .container { width: 450px; display: flex; flex-wrap: wrap; gap: 20px; } 이것은 실제로 우리가 달성하려는 효과를 제공합니다. 그러나 각 행이 ..
유튜브에서 바닐라 자바스크립트 canvas를 이용해 장애물을 피해 달리면서 점수를 얻는 게임 프로젝트 영상을 봤다. https://youtu.be/7JtLHJbm0kA = (this.gameHeight - this.height) - 40; } 이미 코드에 땅에 있는 상태를 리턴하는 함수가 있어서 2번을 이용해 코드를 짰다! class InputHandler { constructor(){ this.keys = []; window.addEventListener('keydown', e => { if(!this.keys.includes(e.key)){ this.keys.push(e.key); } }); window.addEventListener('keyup', e => { if(this.keys.includes..
일반 함수는 함수를 선언할 때 this에 바인딩할 객체가 정적으로 결정되는 것이 아니고, 어떻게 호출 되었는지에 따라 this 에 바인딩할 객체가 동적으로 결정되었다. 하지만 ES6의 Arrow Function은 함수를 선언할 때 this에 바인딩할 객체가 정적으로 결정된다. 화살표 함수는 자신의 this가 없다. 대신 화살표 함수가 둘러싸는 렉시컬 범위(lexical scope)의 this가 사용된다. 즉, 언제나 화살표 함수의 상위 스코프, 화살표 함수가 선언된 스코프의 this를 가리킨다. const name = 'rhan'; const rhanyi = { name: 'yi', getName: function () { console.log(this.name); }, }; rhanyi.getName(..
HTML 삽입 미리보기할 수 없는 소스 버튼을 누르면 colors 배열의 색을 랜덤으로 left, right 변수에 담아 그라데이션 배경으로 채운다. 같은 색이 채워지는걸 방지하고자 left와 right색이 같으면 컬러를 뽑는 함수를 다시 실행한다. 기능을 1. 색 랜덤 뽑기, 2. 색을 비교하여 배경색 바꾸기로 총 2개로 분리해봤는데 굳이 안그래도 될 것 같다. indexOf()함수를 사용해보자. indexOf 함수는, 문자열(string)에서 특정 문자열(searchvalue)을 찾고, 검색된 문자열이 '첫번째'로 나타나는 위치 index를 리턴합니다. 파라미터 searchvalue : 필수 입력값, 찾을 문자열 position : optional, 기본값은 0, string에서 searchvalue..