프로그래밍 공부 노트

제너레이터(Generator) 제너레이터는 중단점이있는 함수이다. 부가적으로 더 말해보면  이터레이터이자 이터러블을 생성하는 함수이다. 이터러블이란 순회 가능한 객체이다. function * gen () { yield 1 ; yield 2 ; yield 3 ; return 100 ; } let iter = gen (); console . log ( iter [ Symbol . iterator ]() === iter ); // true console . log ( iter . next ()); // {value: 1, done: false} console . log ( iter . next ()); // {value: 2, done: false} console . log ( iter . next ()); // {value: 3, done: false} console . log ( iter . next ()); // {value: 100, done: true} function * gen () { yield 1 ; yield 2 ; yield 3 ; return 100 ; } let iter = gen (); for ( const num of iter ) { console . log ( num ) // 1,2,3 } 제너레이터 사용법은 일반함수에서 앞에 *을 붙여서 제너레이터 함수를 만든다.  이렇게 작성한 제너레이터는 이터레이터를 반환한다. (순회 가능한 값?) 이렇게 반환된 이터레이터는 next() 메서드를 호출하여 한 단계식 순회하며 객체를 반환한다. 제너레이터에서는 중단점을 yield로 구분한다. 이러한 yield는 중단점이면서 값을 반환하기도 한다. 제너레이터 함수를통해 반환된 이터레이터는 이터러블이기도 하다. 제너레이터를 통해 반환된 이터레이터는 [Symbol.iterator] 메서드를 가지고있고  ite...

이터러블(Iterable, 순회 가능한 자료구조) 이터러블은 Symbol.iterator 메소드를 구현하거나 프로토타입 체인에 의해 상속한 객체를 말한다. Symbol.iterator 메소드는 이터레이터를 반환한다. 이터러블은 for…of 문으로 순회할 수 있으며 이외에도 spread 문법, 디스트럭쳐링 할당, Map과 Set의 생성자에도 사용된다. 단순하게 '자료구조를 반복할 수 있게 하는 객체' 정도로 이해해 본다. Array, String, Map, Set, DOM이 이터러블이고, 이런 것을 반복할 수 있게 하는 것이 이터레이터다. 이터레이터(Iterator, 반복자) 이터러블/이터레이터 프로토콜은 next 메소드를 사용하여 이터러블을 순회하며 value, done 프로퍼티를 갖는 이터레이터 객체를 반환한다. 이 규약을 준수한 객체가 이터레이터이다. 이터러블/이터레이터 프로토콜을 준수한 이터러블은 Symbol.iterator 메소드를 소유한다. 이 메소드를 호출하면 이터레이터를 반환한다. 반환된 이터레이터를 next 메소드를 사용하여 호출하면 이터러블을 순차적으로 한 단계씩 순회하며 value, done 프로퍼티를 갖는 객체를 반환한다. 순회하는동안 value값과 done: false를 반환하다가 순회가 완료되면 value: undefined, done: true를 반환한다. 여기서 done 프로퍼티는 이터러블의 순회 완료 여부를 반환하는것이다. 과정 iterable[Symbol.iterator]() ---> iterator ---> iterator.next() ---> return { value, done } 이터러블(iterable, 순회 가능한 자료구조)은 Array, String, Map, Set, DOM구조이며, [Symbol.iterator]() 메서드를 사용하여 iterator를 생성하고 next() 메서드로 값을 하나씩 순회할 수 있다. [Symbol.iterator]()를...

javascript를 공부하다보면 javascript를 불러오고 작성할 수 있는 태그인 <script></script>를 html의 head 부분 또는 body 태그 마지막 부분에 작성하는것을 볼 수 있다.  JavaScript를 불러오는 script 태그는 head 태그 안쪽에도 작성할 수 있고, body 태그 안쪽에도 작성할 수 있는데 여러 강의나 예제들 마다 위치를 다르게 작성하여 어디에 선언하는게 좋은것인지 찾아보게 되었다. head 태그 또는 body 태그에 작성해도 되지만 코드가 효율적으로 동작하기 위해서는 defer 키워드를 사용하여 head 태그 안쪽에서  script 태그를 작성하는 것이다. < head > < script defer src = "index.js" ></ script > </ head > 아래에는 그동안 볼 수 있었던 방식의 단점들을 알아보았고 왜 defer 키워드를 사용하여 head 태그 안쪽에 작성해야하는지 알아보았다. 첫번째 : head 태그 안쪽에 script 태그를 작성하는 경우 head 태그안에 작성했을때 문제점을 보면 웹브라우저가 html 문서를 해석할 때 왼쪽에서 오른쪽으로, 위에서 아래로 순차적으로 수행되는데   head 태그에 작성한 script 태그를 만나면 그 안에 작성된 javascript 코드들을 해석하고 처리하게되는데, 이러한 작업이 끝날때까지 아래에 작성된 다른 html 코드들이 수행되지 못해 화면을 출력하는데까지 시간이 느려지게 된다. 추가적으로 js파일 내부 코드 중에 html 태그에 접근하여 태그를 조작하도록하는 함수들이 존재하는경우 head 태그 안에 script 태그를 작성하면  body 안에 작성된 태그들이 생성되기 이전에 즉, DOM트리가 완성되기 이전에 함수를 실행하게되면서 함수안에서 접근하고있는 해당 태그들에 접근하지 못하게 되고 오류가 발생하게 된다. 두번째 :...

프레임워크(Framework) 프레임워크는 뼈대나 기반구조를 뜻하는데, Application 개발 시 필수적인 코드, 알고리즘, 데이터베이스 연동 등과 같은 기능들을 위해 어느정도 뼈대(구조)를 제공해주는 것이다. 요약하면 Framework(프레임워크)는 응용 프로그램 개발을 수월하게 하기 위해 제공된 소프트웨어 환경이다. 대표적인 예) Next.js Spring Framework, Ruby on Rails ... 라이브러리(Library) Library는 특정 기능에 대한 도구 또는 함수들의 집합이다. 요약하면 Library(라이브러리)는 응용 프로그램 개발을 위해 필요한 기능들을 모아 놓은 소프트웨어 이다. 대표적인 예) React, jQuery ... 프레임워크는 틀이 이미 만들어진 상태에서 필요한 기능을 개발자가 구현하는것이고 라이브러리는 가져와서 해당 기능을 편하게 만들 수 있도록 해주는 것이다.

Callback function(콜백함수):  함수(메소드)에 매개변수에 인자값으로 들어가는 함수를 Callback function(콜백함수)라고 한다.  특정 함수의 매개변수에 전달된 인자인 함수를 지칭한다.  콜백함수를 사용하여 오리지널 함수값을 완전히 바꿀 수 있다. 아래 코드에서 콜백함수는 sortfunc이다. sort는 javascript에 내장되어있는 내장 속성(property)  즉 내장메소드인데 이러한 속성에 콜백함수인 sortfunc를 대입하여 기존의 함수값을 완전히 바꿀 수 있다. *정리하면 함수에 값으로 함수를 전달하여 기존의 함수에대한 결과값을 바꿀수있는 함수를 콜백함수라고 한다. ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ var numbers = [20, 10, 9, 8, 7, 6, 5, 4, 3, 2, 1]; var sortfunc = function(a, b){      return b - a; } console.log(numbers.sort(sortfunc)); ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

자바스크립트는 함수가 선언된 시점에서의 유효범위를 갖는다. 이러한 유효범위의 방식을 정적 유효범위(static scoping) = 렉시컬(lexical scoping)이라고 한다. var i = 5; function a(){     var i = 10;     b(); } function b(){     document.write(i); } a(); ->실행 결과 값은 5이다. *자바스크립트는 함수가 호출될때가아닌 선언된 즉 작성된위치에서의 변수를 참조하게되므로 위의 코드에서 전역변수를 참조하게되어 i는 전역변수인 var i = 5;를 참조하여 나타낸다. var i = 5; function a(){     var i = 10;     function b(){         document.write(i);     }     b(); } a(); -> 실행 결과 값은 10이다. b함수가 선언된 시점이 a함수 안이므로, 1차적으로 b함수의 지역변수에 선언된 i를 찾아보고 없을경우 전역변수이자 a함수의 지역변수인 i를 참조하여 결과값 10을 가져오게된다.  만약에 a함수 안에서도 var i = 10;이 선언되지 않았다면 결과값은 전역변수로 선언된 var i = 5;가 결과값으로 된다. 마지막으로 정리하면  함수는 사용될때가아닌 정의될때 참조할 변수가 전역변수인지 지역변수인지 정해지게된다. 이러한것을 정적 유효범위 혹은 렉시컬 스코핑이라고 부른다.

*함수안의 변수를 지역변수라고하며 함수밖의 변수를 전역변수라고한다 . 1번 var로 지역변수 전역변수를 지정한경우(함수밖에서 호출한경우) ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ var vscope = 'global'; function fscope(){     var vscope = 'local'; } fscope(); alert(vscope); ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ -> 전역변수 global을 값으로 가져온다. 2번 var로 지역변수 전역변수를 지정한경우(함수안에서 호출한경우) ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ var vscope = 'global'; function fscope(){     var vscope = 'local';     alert(vscope); } fscope(); ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ -> 지역변수 local을 값으로 가져온다. 1차적으로 호출한값을 지역변수를 찾고 없을경우 전역변수에서 가져온다. 만약에 지역변수로 var vscope = 'local';이 없었다면 전역변수 global을 값을 경고창에 띄운다. 지역변수를 var을 빼고 지정하면 전역변수로 취급한경우 ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ var vscope = 'global'; function fscope(){      vscope = 'local';     alert(vscope); } fscope(); alert(vscope); ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ -> 지역변수 local을 값으로 가져온다. 함수안에서 var를 사용하지않고 변수를 지정해줄경우 지역변수로 취급되지않고 전역변수에 선언...

정규표현식은 문자열에서 특정 내용을 찾거나 대체 또는 발췌하는데 사용한다. 예를 들어 회원가입시 사용자로 부터 입력 받는 전화번호가 유효한지 체크할 필요가 있다면 이때 정규표현식을 사용하면 간단히 처리할 수 있다. 반복문과 조건문을 사용한 복잡한 코드도 정규표현식을 이용하면 매우 간단하게 표현할 수 있다. 정규 표현식 사용 방법 1. 생성자 함수 방식 ( RegExp 생성자 함수 호출 ) const regexp1 = new RegExp("^abc"); // new RegExg(표현식) const regexp2 = new RegExp("^abc", "gi"); // new RegExg(표현식, 플래그) 2. 리터럴 방식 ( / / 사이에 패턴을 작성 ) const regexp1 = /^abc/; // /표현식/ const regexp2 = /^abc/gi; // /표현식/플래그 정규표현식에서 사용되는 메소드 1. exec : 정규식.exec(문자열) 일치하는 하나의 정보(Array) 반환 2. test : 정규식.test(문자열) 일치 여부(Boolean) 반환 3. match : 문자열.match(정규식) 일치하는 문자열의 배열(Array) 반환 4. search : 문자열.search(정규식) 일치하는 문자열의 인덱스(Number) 반환 5. replace : 문자열.replace(정규식,대체문자) 일치하는 문자열을 대체하고 대체된 문자열(String) 반환 6. split : 문자열.split(정규식) 일치하는 문자열을 분할하여 배열(Array)로 반환 7. toString : 생성자_정규식.toString() 생성자 함수 방식의 정규식을 리터럴 방식의 문자열(String)로 반환 Flags (플래그) 플래그는 표현식의 옵션이다. 정규식 패턴에 추가적인 옵션을 넣어 원하는 문자 검색 결과를 반환할 수 있게 해준다. 일반적으로 /^abc/gi; 와 같이 리터럴 바로 뒤에 오거나, ne...

객체 지향 프로그래밍이란 객체를 사용하여 개체를 표현하는 방식을 객체 지향 프로그래밍(OOP)라고 말한다. 객체란  같은 취지의 서로 연관된 변수와 함수들을 grouping 하여 이름을 붙인것이다. prototype 프로토타입은 생성자함수와같이 재사용성을 높히기위한것이다. function Person ( name , first , second ) { this . name = name ; this . first = first ; this . second = second ; } Person . prototype . sum = function () { return "prototype : " + ( this . first + this . second ); }; let kim = new Person ( "kim" , 10 , 20 ); kim . sum = function () { return "this : " + ( this . first + this . second ); }; let lee = new Person ( "lee" , 10 , 10 ); console . log ( kim . sum ()); //this : 30 console . log ( lee . sum ()); //prototype : 20 일단 코드가 동작하는 순서를 설명해보면 맨밑에 console.log를 통해 kim과 lee객체에있는 sum()함수를 호출한다. 이 경우 생성자 함수안에 sum()함수를 일단 찾아보고 없는경우 해당 객체의 생성자인 Person의 prototype에 정의되어있는 sum()메소드를 통해 값을 가져온다. 하지만 kim의 경우 kim객체안에 따로 sum()함수를 지정해주었기 때문에 따로 prototype을 참조하지않고 자신이 소유하고있는 sum()함수를 실행한다. 그러므로 kim객체의 경우 결과값으로 30을 반환하며 lee객체의 경...

객체는 서로 연관된 변수와 함수를 그룹핑하는 것이다. 객체는  몇 가지 특수한 기능을 가진 연관 배열이다. 객체는 프로퍼티(키-값 쌍)를 저장한다. 프로퍼티의 키는 문자열이나 심볼이어야 한다. 값은 어떤 자료형도 가능하다. 객체의 프로퍼티에 접근하는방법 - 점 표기법 : obj.key - 대괄호 표기법 : obj[key]               대괄호 표기법을 사용하면 key값에 공백(띄어쓰기)이 있어도 key값으로 사용이 가능하다. 객체를 작성할때  let 변수명 = { key : 'value'} 를 넣어서 작성하게되며 여러개의 key value를 작성할때 ,(쉼표)로 구분을해준다. 기존에 작성한 객체에 추가적으로 key와 value값을 넣고자할때는 두가지 방법으로 객체를 추가할 수 있다.  *첫번째 방법: 변수명.원하는key값 *두번째 방법: 변수명[원하는 key값] 첫번째 방식으로 작성할경우 key값을 작성할때 공백을 포함할 수 없다.  하지만 key값으로 공백을 포함한 key값을 추가하고싶을때 [ ] 괄호를 사용하면 띄어쓰기가 있더라도 오류없이 객체에 새로운 key와 value값을 추가할 수 있다. 프로퍼티를 삭제하고 싶을때: delete obj[key] 객체내에 찾고자하는 프로퍼티가 있는지 확인하고자 할 때: "key" in obj 없다면 undefined를 반환한다. 프로퍼티를 나열하고자 할 때 (객체안의 데이터를 나열하고자 할 때) : for ( let key in obj ) 객체 정렬 방식 for..in 으로 일반 객체를 순회하면서 나열할때 객체는 특별한 방식으로 정렬된다. 프로퍼티를 작성한 순서대로 출력될것이라고 생각할 수 잇지만 정수 프로퍼티의 경우 순서가 뒤죽박죽이어도 자동으로 오름차순으로 값을 정렬하여 출력한다. 그 외의 프로퍼티는 객체에 추가한 순서대로 정렬되어 출력된다. ex) key값이 정수인...

알아두면 좋은 IT용어 https://webclub.tistory.com/451 추상화 : 간단하게 만드는것 index(색인): 배열안에 들어있는 원소들의 순서를 고유한 숫자로 매기는것 0, 1, 2, 3 등의 순서를 매긴것을 index(색인)라고한다. element(요소): 요소라고도하며 태그라고도 한다. attribute(속성): 태그안에서의 속성을 의미한다. property(속성): 객체안에서 변수의 역할 {key : value} key = 변수 value = 값 method(메소드): 객체안에 정의되어있는 함수 ex) number.sort(); 여기서 number는 객체, sort();는 메소드라고한다. 이러한메소드는 javascript내에 기본적으로 저장되어있는 기능이기때문에 이러한 기능을 내장메소드, 빌트인메소드라고도 부른다. function(함수): 변수로도 저장가능하고 함수는 값으로도 정의가능하며 그렇기 때문에 다른함수의 인자로도 사용가능하다. 위의 메소드와달리 우리가 변수를 지정하여 만든 함수는 사용자정의객체, 사용자정의함수 라고한다. First-class object (일급 객체):  일급 객체(first-class object)란 생성, 대입, 연산, 인자 또는 반환값으로서의 전달 등 프로그래밍 언어의 기본적 조작을 제한없이 사용할 수 있는 대상을 의미한다. 유니코드(Unicode): 전 세계의 모든 문자를 컴퓨터에서 일관되게 표현하고 다룰 수 있도록 설계된 산업 표준 마크업 언어(markup 言語, markup language):  태그 등을 이용하여 문서나 데이터의 구조를 명기하는 언어의 한 가지이다. 인터넷 서비스 제공자(Internet service provider; ISP):  인터넷에 접속하는 수단을 제공하는 주체를 가리키는 말이다.(ex/ 통신사) 그 주체는 영리를 목적으로 하는 사기업인 경우가 대다수이나 비영리 공동체가 주체인 경우도 있다....