javascript27 Canvas 기초 한번사용해보자 HTML Canvas 오늘은 HTML 표준으로 채택되어 요즈음에는 대부분의 브라우저에서 지원하는 캔버스에 대해 살펴보도록 하겠습니다 :) 제가 Canvas 공부하게 된 이유는 바로 웹에서 자유로운 GUI(그래픽 유저 인터페이스)를 지원하는 기술이기도 하기 때문입니다. canvas 기초 사용법 html 문서에 canvas 엘리먼트를 선언한다. canvas 엘리먼트에 id 속성을 설정한다. canvas 태그 내부에 width, height를 설정한다. canvas 내장 '그리기 객체'를 취득한다. 그리기 객체에 '채우기색, 선색, 그림자, 그라데이션' 등을 설정한다. 그리기 객체를 통해 선, 사각형, 원, 텍스트 등을 그린다. 자바스크립트를 통해 다양한 효과를 구현한다. 캔버스 사이즈 설정 캔버스 사이즈 설.. 2022. 2. 5. JavaScript, React 텍스트 입력시 줄바꿈 적용 없이 작성되는 이유? 자바스크립트 텍스트 입력시 줄바꿈 적용 없이 작성되는 이유? 자바스크립트 input 또는 textarea로 텍스트를 작성하고 데이터를 보낼떄 줄바꿈 없이 하나의 이어지는 텍스트로 가게된다. 이 현상을 해결하기 위해서 줄바꿈 하는 부분에 특정 문구를 넣어주면 해결될수있다. 텍스트 줄바꿈하는 부분에 특정 문구 추가하는 코드 (텍스트 입력받을떄) // React const onChangeContent = useCallback((e) => { setContent(e.target.value.replace(/(?:\r\n|\r|\n)/g, "\n")); }, []); // javascript const text = document.querySelector('textarea'); const result = text... 2021. 12. 29. javascript 코드 리팩토링의 중요성 1. javascript 코드 리팩토링의 중요성 코드 리팩토링을 해야하는 이유와 중요성을 인지하지 못하고 지금 까지 그냥 생각대로 코딩을 하고있엇다. 하지만 프로젝트를 진행하던중 코드들을보면 코드들이 막 만들어지게 되는 모습들과 많은 중복되는 코드들이 우후죽순 생겨나기 시작했다. 시간이 지날수록 코드 유지보수도 힘들어지는 내 모습을보고 프로젝트 규모가 커질수록 리팩토링의 중요성을 인지하고 리팩토링에 알아보기로 했다 2. 리팩토링은 언제할까? 1. Rule of Three 삼진 아웃제와 비슷합니다. 비슷하거나 동일 코드가 두번 이상 발생하게 되면 세번째에는 리팩토링을 해야할 때인 겁니다. 2. 새로운 기능을 추가할 때 리팩토링은 다른 사람의 코드를 이해하는데 도움을 줄 뿐만 아니라 새로운 기능을 추가, 수.. 2021. 11. 15. 표준 내장 객체의 확장 표준 내장 객체의 확장 표준 내장 객체(Standard Built-in Object)는 자바스크립트가 기본적으로 가지고 있는 객체들을 의미한다. 내장 객체가 중요한 이유는 프로그래밍을 하는데 기본적으로 필요한 도구들이기 때문에다. 결국 프로그래밍이라는 것은 언어와 호스트 환경에 제공하는 기능들을 통해서 새로운 소프트웨어를 만들어내는 것이기 때문에 내장 객체에 대한 이해는 프로그래밍의 기본이라고 할 수 있다. 자바스크립트는 아래와 같은 내장 객체를 가지고 있다. Object Function Array String Boolean Number Math Date RegExp 이제 우리는 내장객체라는 하늘에서 뚝떨어진 이것들이 무엇인지를 보다 잘 이해할 수 있게 되었다. new가 무엇인지, 함수가 객체를 어떻게 .. 2021. 7. 19. prototype prototype prototype이란 무엇인가? 한국어로는 원형정도로 번역되는 prototype은 말 그대로 객체의 원형이라고 할 수 있다. 함수는 객체다. 그러므로 생성자로 사용될 함수도 객체다. 객체는 프로퍼티를 가질 수 있는데 prototype이라는 프로퍼티는 그 용도가 약속되어 있는 특수한 프로퍼티다. prototype에 저장된 속성들은 생성자를 통해서 객체가 만들어질 때 그 객체에 연결된다. function Ultra() {} Ultra.prototype.ultraProp = true; function Super() {} Super.prototype = new Ultra(); function Sub() {} Sub.prototype = new Super(); var o = new Sub(); .. 2021. 7. 19. 상속 상속 function person(name){ this.name = name; this.interduce = function(){ return 'My name is' + this.name; } } let p1 = new person("honey") console.log(p1) // My name is honey function person() { this.name = name; } person.prototype.name = null; person.prototype.intorduce = function () { return "My name is" + this.name; }; let p1 = new person("honey"); console.log(p1); 상속의 사용방법 function person() .. 2021. 7. 19. 이전 1 2 3 4 5 다음
