Rust개발로그

var myObj = { 
  myText: "hi!",
  myFunc: function(){
    setTimeout(function(){
      console.log(this.myText);
    }, 1000)
  },
  myFunc2: function(){
    setTimeout(()=>console.log(this.myText), 1000);
  }
};

myObj.myFunc(); // undefined
myObj.myFunc2(); // "hi!"

myFunc2의 화살표 함수 () => 는 this가 바인딩되지 않기 때문에 상위 스코프인 myObj의 this를 바라본다.

반면 myFunc는 익명함수를 사용하여 undefined.

참조 : https://www.a-mean-blog.com/ko/blog/%ED%86%A0%EB%A7%89%EA%B8%80/_/Javascript-%ED%99%94%EC%82%B4%ED%91%9C-%ED%95%A8%EC%88%98-Arrow-Functions

1. 콤마( . )
. 는 어떤 문자 1개를 가리킨다. ( "줄바꿈 문자(\n)"는 제외)
====================================
표현식 h.t
문자열 hat halt hitheat hot
====================================
표현식 h..t
문자열 hathalt hit heathot
====================================

2. 대괄호 [ ]
[ ] 는 안에 있는 문자중 하나를 가리킨다.
[abc] a,b,c 중 하나
[a-z] 알파벳 소문자 중 하나
[0-9] 숫자 중 하나
[a-zA-Z] 알파벳 소문자나 대문자 중 하나
====================================
표현식 h[aiu]t
문자열 hat het hithot hut
====================================

3. 대괄호와 캐럿 [^ ]
[^ ] 은 안에 있는 문자를 제외한 문자중 하나를 가리킨다.
[^abc] a,b,c 이외의 문자 중 하나
[^a-z] 알파벳 소문자 이외의 문자 중 하나
[^0-9] 숫자 이외의 문자 중 하나
[^a-zA-Z] 알파벳 소문자나 대문자 이외의 문자 중 하나
====================================
표현식 h[^aiu]t
문자열 hathet hit hothut
====================================

3. 별표( * )
* 는 바로 앞에 있는 문자가 0또는 그 이상 반복되는 것을 가리킨다.
====================================
표현식 ha*t
문자열 ht hit hathot haat hut haaaaat
====================================

4. 플러스(+)
+ 는 바로 앞에 있는 문자가 1 또는 그 이상 반복되는 것을 가리킨다.
====================================
표현식 ha+t
문자열 ht hit hat hot haathut haaaaat
====================================

5. 물음표( ?)
? 는 바로 앞에 있는 문자가 0또는 1번 반복되는 것을 가리킨다.
====================================
표현식 ha?t
문자열 ht hit hathot haat hut haaaaat
====================================

6. {n}
{n} 은 바로 앞에 있는 문자가 n번 반복되는 것을 가리킨다.
====================================
표현식 ha{2}t
문자열 ht hit hat hot haat hut haaaaat
====================================

7. {n,}
{n,} 은 바로 앞에 있는 문자가 n번 이상 반복되는 것을 가리킨다.
{0,}는 별표(*)와 같은 의미이다.
{1,}는 더하기(+)와 같은 의미이다.
{0,1}는 물음표(?)와 같은 의미이다.
====================================
표현식 ha{2,}t
문자열 ht hit hat hot haat hut haaaaat
====================================

8. {n,m}
{n,m} 은 바로 앞에 있는 문자가 n번 이상, m번 이하 반복되는 것을 가리킨다.
====================================
표현식 ha{2,4}t
문자열 ht hat haat haaat haaaat haaaaat
====================================

9. 캐럿( ^)
^ 은 줄의 제일 처음(시작위치)을 가리킨다.
====================================
표현식 ^h.t
문자열 hat hit hot
====================================

10. 달러( $)
$ 는 줄의 제일 마지막(끝 위치)을 가리킨다.
====================================
표현식 h.t$
문자열 hat hit hot
====================================

11. Group ( )
특정 패턴을 묶어서 반복 기호등과 함께 사용.

여러 문자 중 하나만 선택적으로 매칭하고자 할 때 사용.
====================================
표현식 ba(na)*
문자열 ba na banabanana nana bananana
====================================
====================================
표현식 ba(na)+

문자열 ba na bana banana nana bananana
결 과 ba na wow wow nana wow
====================================

12. 선택 지정 ( | )
괄호로 묶인 그룹 내에서 | 으로 나뉘어진 여러 개의 패턴 중 하나와 일치하는 것을 가리킨다.
====================================
표현식 (eg|sa|be)g
문자열 egg eng sag sig beg bag
====================================

13. Group 참조 \숫자
Group으로 지정된 내용을 뒤에 ‘\숫자’의 형식으로 재 사용하는데 사용.
====================================
표현식 (h.t)\1
문자열 hathat hitbit hothot hutcut
====================================

14. 반복 문자 탐지 – Greedy, Lazy
반복 문자 개수를 지정하는 방법은 크게 Greedy방식과 Lazy방식으로 나뉘어진다.
Greedy 방식은 가능한 최대의 것을 선택하고, Lazy방식은 가능한 최소의 것을 선택한다.
Greedy 방식뒤에 ?을 붙이면 Lazy방식이 된다.

-Greey 방식
====================================
표현식 <.*>
문자열 Regex <b>Greedy</b> Style
====================================
-Lazy방식

====================================
표현식 <.*?>
문자열 Regex<i>Lazy</i> Style
====================================
- 사용 예

==================
Greedy | Lazy
==================
* | *?
+ | +?
? | ??
{n} | {n}?
{n,} | {n,}?
{n,m} | {n,m}?
==================

15.주요 Escape 문자 목록
\t 탭 문자, Tab, \u0009
\r 줄 바꿈 문자, Carriage Return, \u000D
\n 줄 바꿈 문자, Line Feed, \u000A
\s 공백 문자, White-Space Character, \t \r \n 스페이스 포함
\S \s 이외의 문자
\d 숫자, [0-9] 과 같은 의미
\D \d 이외의 문자, [^0-9] 과 같은 의미
\w Word Character, [a-zA-Z0-9_] 과 한글 일본어 중국어 등의 유니코드 문자 포함
\W \w 이외의 문자
\b [ ] 안에서 사용될 때는 백스페이스 문자, Backspace, \u0008
[ ] 밖에서 사용될 때는 \w 과 \W 사이의 경계, Word Boundary
치 환 Pattern에서 사용될 때는 항상 백스페이스 문자
\\ \ 문자 자체를 가리킬 때 사용
비슷한 사용법 \. \* \+ \? \^ \$ \( \) \{ \} \[ \]
\u0020 16진수 Unicode 문자, 항상 4자리로 사용
\x20 16진수 ASCII 문자, 항상 2자리로 사용

tr마다 동일 데이터 값이 있을 경우 아래, 위 셀병합. 

<tr class="link dataRow" >
	<td class="t1">홍길동</td>
	<td class="t2">테스트</td>
	<td class="t3">테스트2</td>
	<td class="t4">테스트3</td>
	<td class="t5_abcd_01">5</td>
	<td class="t6_abcd_02">3</td>
</tr>

$(document).ready(function(){
	genRowspan("t1");
	genRowspan("t2");
	genRowspanT5T6("t3_");
	genRowspanT5T6("t4_");
	genRowspanT5T6("t5_");
	genRowspanT5T6("t6_");
});

function genRowspan(className){
	$("."+className).each(function(){
		var rows = $("."+className+":contains('"+$(this).text()+"')");
		if(rows.length > 1){
			rows.eq(0).attr("rowspan", rows.length);//중복되는 첫번째 td에 rowspan값 세팅
			rows.not(":eq(0)").remove();//중복되는 td를 삭제
		}
	});
}

function genRowspanT5T6(preClassName){
	var rows = $("td[class^="+preClassName+"]");
	
	rows.each(function(index, item){
		var csName = $(item).attr("class");
		var dupRows = $("."+csName);
		
		if(dupRows.length > 1){
			dupRows.eq(0).attr("rowspan", dupRows.length); //중복되는 첫번째 td에 rowspan값 세팅
			dupRows.not(":eq(0)").remove(); //중복되는 td를 삭제
		}
	})
}

https://zero-gravity.tistory.com/311여기를 참조함.

for ~ of 를 사용하여 배열이나 문자열을 순회합니다.

아래 코드 참조.

var data = [1,2,undefined,NaN,null,""];
for(var i=0;i<data.length;i++){
  console.log(i);
}

data.forEach(function(value){
  console.log("valueis",value);
});

//오브젝트 순회용
//but, 상위객체를 포함하는 경우가 있음. prototype
for(let idx in data){
  console.log(data[idx]);
}

// for of 사용 (문자열 순회나 배열)
for(let value of data){
  console.log(value);
}

var str = "hello world!!";
for(let value of str){
  console.log(value);
}

인프런 "모던 자바스크립트(javascript) 개발을 위한 ES6 강좌"를 정리한 내용입니다.

ES6 === ES2015 입니다.

ES6는 바벨(babel)을 이용해 ES5로 변환 가능합니다.

let은 블록스코프를 가집니다. 블록안에서만 유효합니다. 예를 들면 for문 안에서만 유효.

var i=0 의 경우 이벤트 리스너 콜백에서 i를 찍어보면 전부 4로 찍힘.(마지막 순번). let을 쓰면 각각 지역변수화 되어 0,1,2,3 이 찍힘.

const는 재할당이 불가합니다.

let과 const의 사용전략은 이렇습니다.

1. const를 기본으로 사용한다.

2. 그런데 변경이 발생 할 수 있는 변수는 let을 사용한다.

3. var는 사용하지 않는다.

4. const를 사용하더라도 배열과 오브젝트의 값을 변경하는 것은 가능하다. (push 등 가능 .. 재할당이 안된다는 것임)

추가 된 string 메소드.

str.startWith()

str.endsWith()

str.includes("world")

인프런 "모던 자바스크립트(javascript) 개발을 위한 ES6 강좌"를 정리한 내용입니다.

ES6에서 배열과 관련해서 유용한 오퍼레이터와 메소드가 있습니다.

아래 코드로 확인하시죠.

//spread operator 배열 복사
let data1 = ["aa","bb", 123];
let data2 = [...data1];
console.log(data1,data2);
console.log(data1 === data2); //false. 데이터를 복사한것뿐.

//활용
function sum(a,b,c){
  return a+b+c;
}

let pre = [100,200,300];
console.log(sum(...pre));

//ES2015 from method
function addMark(){
  let newArray = Array.from(arguments); //arguments는 내부 객체. 가변 인자를 받음.
  let newData = newArray.map(function(value){
    return value + "!";
  });
  
  console.log(newData);
}

addMark(1,2,3,4,5,6,7);

인프런 "모던 자바스크립트(javascript) 개발을 위한 ES6 강좌"를 정리한 내용입니다.

자바스크립트로 알고리즘 짜는 연습을 하다보니 array를 많이 사용했었는데, 가만있어보자,, 아하!! JSON이 있었자너!!

var json = {NAME: "tomy", AGE: 35, SEX: "male"};

//add item (key, value)
json.BIRTHDAY = '1988-03-01';

//delete item (key)
delete json.SEX;

console.clear();
console.log(json);

json을 이용하면 알고리즘 코딩이 조금 더 수월해 질 수 있습니다.