본문 바로가기
높이 자동조절 textarea 구현 (auto-resizing textarea) [textarea 리사이징] 사용자의 입력값에 따라 textarea 크기가 자동으로 조정되는 auto-resizing 기능이 있는 아래와 같은 textarea를 구현해보자. 1. 유저가 값을 입력했을 때 textarea 영역의 높이를 자동으로 증가/축소시킨다 2. 입력 가능한 라인 수(textarea 높이)는 제한한다 3. 입력시엔 textarea를 사용하고, 노출(읽기모드)시엔 textarea 대신 border가 없는 다른 tag를 사용한다 [구현에 필요한 사전지식] 1. HTML DOM element 와 jQuery Object this 사용시 this가 jQuery Object 인지 DOM element 인지 명확히 구분해야 한다. (참고1, 참고2) 1. $(): jQuery Object 2. $.. 2020. 12. 15.
[vue.js] vue 사용하기 vue 사용하기 1. HTML 내에 script src 추가 2. vue cli 설치하여 사용 1) node 설치 2) vue 설치 > npm install -g @vue/cli > vue create test https://www.youtube.com/watch?v=5lDEee-Ur34&list=PLB7CpjPWqHOtYP7P_0Ls9XNed0NLvmkAh&index=13 3. vue cli 설치 없이 사용 > npx @vue/cli create test * babel, router, vuex, linter/formatter 옵션 체크(space bar) 나머지는 전부 Y(엔터) 프로젝트 생성된 후, 서버 실행 > npm run serve 2020. 5. 15.
[javascript] promise 를 사용한 비동기 후처리 1. callback을 사용한 비동기 후처리 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 var callApi = function(successCallback, failCallback){ $.post('/user.do', $("#parameter").serialize()) .done(function(response){ successCallback(response); }) .fail(function(xhr, status, err){ failCallback(err); }); } //on button click callApi(function(data){ alert("this is successCallback!"); if(data.alertMssage !.. 2020. 5. 4.
[javascript] 자바스크립트의 객체 - 자바스크립트에서 원시 타입을 제외한 모든 나머지 값들(함수 배열 정규표현식 등)은 객체. - 객체는 key 와 value 로 구성된 property 의 집합 - 프로퍼티 값이 함수인 경우 일반 함수와 구분하기 위해 메소드라 부름 (자바스크립트의 함수는 일급객체(참고)이므로 값으로 취급 가능) - 객체는 데이터를 의미하는 프로퍼티와 데이터를 참조하고 조작할 수 있는 동작(메소드)로 구성된 집합 - 프로퍼티 및 메소드를 모두 포함할 수 있어 하나의 단위로 구조화하기 유용 - 프로토타입을 상속받아 객체지향의 상속을 구현한다 [프로퍼티] - 프로퍼티 키를 중복 선언시 나중에 선언한 프로퍼티가 먼저 선언한 프로퍼티를 덮어씀 - 프로퍼티간 순서를 보장하지 않음 [메소드] - 프로퍼티 값이 함수인 경우 메소드라 .. 2019. 12. 2.
[jQuery] radio에 onchange 적용하기(선택받지 못한 radio 값 지우기) 이상하게 라디오 관련 처리는 매번 할 때마다 바로바로 기억이 안나 정리해둔다. [HTML] 1 2 3 4 5 6 7 8 9 10 11 12 13 14 radio1 radio2 radio3 Colored by Color Scripter cs [script] 1 2 3 4 5 6 7 8 9 $('input[type=radio][name=type]').change(function(){ var arr = $('input[type=radio][name=type]'); console.log($(this).val()) for(var i=0; i 2019. 11. 15.
[javascript] strict mode(엄격모드) 란? javascript 는 일부 에러를 무시하고 실행이 가능하다. 에러가 존재해도 동작한다는 이점이 있으나, 개발자의 디버깅을 더 힘들게 한다는 단점도 존재한다. [ strict mode ? ] ECMAScript5 에 추가된 기능으로써 에러를 더 엄격히 제한하는 기능. 사용법은 어렵지 않지만, strict 사용시 기존에 묵인되던 에러들이 에러를 뿜게되니 관련부분은 나중에 정리. 참고 : https://www.geeksforgeeks.org/strict-mode-javascript/ 2019. 11. 15.
[javascript] 자바스크립트 this 정리 1. 메소드 안 : 메소드를 소유한 object this : object person 1 2 3 4 5 6 7 8 var person = { firstName: "John", lastName : "Doe", id : 5566, fullName : function() { return this.firstName + " " + this.lastName; } }; Colored by Color Scripter cs 2. alone(어디에도 속하지 않을 때?) : 전역 객체 (window) 1 2 3 4 var x = this; document.getElementById("demo").innerHTML = x; Colored by Color Scripter cs 3. 함수 안 : 전역 객체 (window) 1 2.. 2019. 11. 15.
[javascript] 자바스크립트의 Scope 정리 [scope란?] 참조대상 식별자를 찾아내기 위한 규칙. 특정 변수가 선언되어 있을 때, 해당 변수를 소스 내 어디에서 찾아서 사용할 지를 규정하는 규칙. [전역스코프 vs 지역스코프] 전역스코프 : 코드 내 모든 곳에서 참조 가능. 지역스코프 : 함수 코드 블록 내에서 만들어진 스코프로 함수 자기 자신과 하위 함수에서만 참조 할 수 있다. ※ 최상위 스코프는 window [블록레벨스코프 vs 함수레벨스코프] 블록레벨스코프 block-level scope : if문, for문 과 같은 블록 내에 선언된 변수는 블록 밖에서는 참조가 불가하다. (대부분의 C언어, 자바언어) 함수레벨스코프 function-level-scope : 함수 코드 블록 내에서 선언된 변수는 함수 코드 블록 내에서만 참조가 가능하다... 2019. 11. 12.
[javascript] 호이스팅(hoisting)이란? javascript 에서 hoisting 이란 단어 뜻 그대로 끌어올리기라는 의미로써, 변수를 최상단으로 끌어올리는 것을 뜻한다. 이와 같은 자바스크립트에서의 호이스팅이란 특징으로 인해, javascript에서 변수는 사용된 이후 선언 될 수 있다. (==변수를 사용한 후 선언 할 수 있다) [case 1] 1 2 3 4 5 $(document).ready(function(){ var x; x = 5; console.log(x); }); cs 변수를 선언 후 변수에 값을 저장한 케이스. 보기에도 문제가 없어보이고 실행 결과도 문제가 없다. [case 2] 1 2 3 4 5 $(document).ready(function(){ x = 5; console.log(x); var x; }); cs 변수에 값을 .. 2019. 11. 11.
[javascript] typeof typeof 는 js에서 타입을 반환하는 연산자(operator)로써 변수의 타입을 확인할 때 사용한다. typeof 로 아래와 같이 number, string, object, boolean, function 타입을 확인 할 수 있다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 console.log(typeof 123); //number console.log(typeof "str"); //string console.log(typeof new Object()); //object console.log(typeof {test : "test"}); //object console.log(typeof true); //boolean console.log(typeof Symbol()); //sym.. 2019. 11. 11.