T3ch

객체지향언어를 배울 때 항상 나오는 키워드 중 하나가 class 입니다. 저는 Java와 C++을 배울 때 접하게 되었는데 ES6에서 class의 사용이 가능해졌습니다. 하지만 여기서 짚고 넘어가야할 것이 있습니다. 프로토타입에 관한 개념인데요 MDN의 Class에 관한 글에 이런 말이 나옵니다. JavaScript class는 ECMAScript 6을 통해 소개되었으며, 기존 prototype 기반의 상속 보다 명료하게 사용할 수 있습니다. Class 문법은 새로운 객체지향 상속 모델을 제공하는 것은 아닙니다. JavaScript class는 객체를 생성하고 상속을 다루는데 있어 훨씬 더 단순하고 명확한 문법을 제공합니다. javascript 는 프토로타입 기반의 언어이다. es6에서 지원하는 clas..

화살표 함수의 특징 중 마지막입니다. 이전 포스팅에서는 this가 존재하지 않는다는 주제였는데 마지막으로는 arguments가 존재하지 않는다는 주제입니다. 기본적으로 javascript 에서는 arguments 라는 키워드가 존재하는데요 간단한 정의로는 arguments 객체는 함수에 전달된 인수에 해당하는 Array 형태의 객체입니다.1234567891011function func1() { console.log(arguments[0]); // expected output: 1 console.log(arguments[1]); // expected output: 2 console.log(arguments[2]); // expected output: 3}func1(1, 2, 3);cs(출처 : https:..

이전에는 화살표 함수의 기본적인 선언방법에 대해 알아보았습니다. 이번엔 화살표 함수의 또하나의 특징인 this에 대해서 알아보겠습니다. 기본적으로 this라 하면 다른 프로그래밍 언어를 했던 경험이 있다면 굉장히 많이 들어봤을 키워드입니다. public class Book { private String title; private String author; private int price; private String publisher; public Book(String title, String author, int price, String publisher) { this.title = title; this.author = author; this.price = price; this.publisher = pu..

첫 번째로 화살표 함수에 대해서 알아보고자 합니다. 제가 ES6 문법을 접했을 때 가장 먼저 본 녀석 중에 하나 입니다. 기존의 자바스크립트에서도 그랬고, c언어나 자바에서도 함수라던지 반복문같은 하나의 덩어리의 프로세스는 늘 중괄호로 묶는 방법이었습니다. 그런데 ES6에서 화살표 함수라는 것이 등장하게 되었습니다. ❓어떻게 생겨먹었는가??기존의 함수작성방식과 비교해서 알아보겠습니다. 웹 상에서 크롬 개발자도구를 이용해서 테스트를 진행하겠습니다. html 폼을 하나 만들어서 자바스크립트 파일을 호출해서 작성하셔도 되고 그냥 크롬 페이지에서 직접 작성해도 상관 없습니다. arrow.html123456789101112 Arrow cs 이런 식으로 arrow.js 파일을 호출하는 아무 것도 없는 html 폼을..

(이 글은 http://itstory.tk/entry/JavaScript-ES6-문법-정리 [덕's IT Story] 를 참조하였습니다.)- ECMA란 ? ECMAScript 2015로도 알려져 있는 ECMAScript 6는 ECMAScript 표준의 가장 최신 버전입니다. ES6는 새로운 언어 기능이 포함된 주요 업데이트이며, 2009년도에 표준화된 ES5 이후로 언어 기능에 대한 첫 업데이트이기도 합니다. 현재 주요 JavaScript 엔진들에서 ES6 기능들을 구현 중에 있습니다. (출처 : https://www.sencha.com/blog/ext-js-ecmascript-2015/) ES3는 우리가 일반적으로 사용하는 자바스크립트 이며, ES5의 기능들도 많이 사용 되어지고 있습니다.ES6의 문법..

많은 디자인 패턴들이 있지만 그중에 굉장히 자주 쓰이고 쓰면 편리한 Singleton패턴에 대해 공부해보겠습니다.싱글톤패턴은 보통 특정 객체의 정보를 여러군데에서 사용할 일이 많을 때 그 객체(인스턴스)를 쉽게 사용가능한 디자인 패턴입니다.예를들면 사용자의 로그인정보를 계속해서 사용해야할 때 이러한 패턴이 도움이 될 수 있습니다. 제가 사용한 예시코드입니다. 12345678910111213141516171819202122232425var SingletonClass = (function() { var mName,mNick,mId,mPwd,mIsLogin,instance; function SingletonClass() { } //setter this.__defineSetter__("mName",functio..

챗봇형식을 어설프게 따라한 것인데 보통 채팅할 때 버튼이 있어도 엔터키를 눌러서 전송시키는 동작이 일반적이다.물론 줄바꿈이 반드시 필요한 경우에는 맞진 않겠지만 그 경우를 빼고 생각하였다. 12345textarea#chatBot(class='form-control' style='resize:none; width:340px; height:300px;' name='chatBot' readonly='readonly') bot : 안녕 내가 도와줄게!ptextarea#chatUser(class='form-control' style='resize:none; width:340px; height:50;' name='chatUser')pinput#chatPost(type='button' value='보내기' class..

textarea 을 옵션없이 기본생성하면 Tab키가 먹질 않는다. Tab키를 적용하기 위한 구문이다. 12Colored by Color Scriptercs 기본 html textarea 에 이 구문을 주면 탭키가 적용된다. 참고로 pug 템플릿 엔진에서는 1textarea(onkeydown="if(event.keyCode===9){var v=this.value,s=this.selectionStart,e=this.selectionEnd;this.value=v.substring(0, s)+'\t'+v.substring(e);this.selectionStart=this.selectionEnd=s+1;return false;}")cs 으로 사용해주면 된다.

자바스크립트에서 textarea에 입력받은 문자열 혹은 값들을 똑같이 보여주고 싶을 때 (예를들면 엔터로 줄바꿈을 해서 입력했으면 그 사항까지 똑같이 가져갈 수 있게) 구글링 하다보면 replace를 쓰라는 말이 많았는데 내가 해보니까 딱 한번만 개행되고 그 다음부턴 개행이 먹지 않는다. 그리고 replaceAll이라는 메소드는 아마 js에서 제공을 안해주는 것 같다. 내가 위에 설명한 걸 간단하게 그림으로 보여주자면이런 textarea 창에 저런 식으로 입력하고 전송을 누르면 이런식으로 전송되게 하는 식이고 이 화면을 소스보기를 누르면 #include int main() { printf("ddd"); return 0; } 와 같이 개행처리가 된 상태로 소스가 나오게 된다. html 기본 폼 설명은 생략..