본문 바로가기
반응형

자바스크립트112

JQuery Wrapper Wrapper jQuery(엘리먼트 오브젝트 | 'CSS스타일 선택자') 맨앞의 jQuery 문자가 레퍼이며, 인자로 전달된 요소들에 jQuery의 기능성을 부가해서 반환시킨다. 레퍼의 안전한 사용 $(엘리먼트) 와 jQuery(엘리먼트)는 같은 의미이지만 $를 사용하는 다른 라이브러리들과의 충돌 때문에 주의해야 한다. 제어 대상을 지정하는 방법 jQuery( selector, [context] ) jQuery( element ) test2 test 2020. 12. 18.
Javascript ES6+ Generator Generator 중간에서 멈췄다가 이어서 실행할 수 있는 함수. function 키워드 뒤에 `*`를 붙여 표현하며, 함수 내부에는 `yield` 키워드를 활용한다. 함수 실행 결과에 대해 `next()` 메소드를 호출할 때마다 순차적으로 제너레이터 함수 내부의 `yield` 키워드를 만나기 전까지 실행하고, `yield` 키워드에서 일시정지한다. 다시 `next()` 메소드를 호출하면 그 다음 `yield` 키워드를 만날 때까지 함수 내부의 내용을 진행하는 식이다. 선언 방식 function* gene () { yield } const gene = function* () { yield } const obj = { gene1: function* () { yield } //메소드 함수 가능 *gene2 .. 2020. 12. 18.
Javascript ES6+ Iterator Iterator 반복을 위해 설계된 특별한 인터페이스를 가진 객체라고 할 수 있다. - 객체 내부에는 `next()` 메소드가 있는데, - 이 메소드는 `value`와 `done` 프로퍼티를 지닌 객체를 반환한다. - `done` 프로퍼티는 boolean값이다. Iterator 구현 예시 코드 객체 내의 프로퍼티를 iterable한 개체로 활성화 시켜주는 것을 확인 할 수 있다. const iter = { items : [10, 20, 30], count: 0, next () { const done = this.count >= this.items.length return{ done, value: !done ?this.items[this.count++]:undefined } } } console.log(i.. 2020. 12. 18.
Javascript ES6+ Iterable Iterable Iterable의 정의 내부 요소들을 공개적으로 탐색(반복)할 수 있는 데이터 구조. [Symbol.iterator] 메소드를 가지고 있다. 아래와 같은 코드들이 iterable한 예이다. const arr = ['a', 'b', 'c'] const set = new Set(['a', 'b', 'c']) const map = new Map([[false, 'no'], [true, 'yes'], ['well', 'soso']]) const str = '문자열도 이터러블하다' ※ Iterable의 의미는 내부 요소들을 공개적으로 반복 및 탐색할 수 있는 데이터 요소를 뜻한다. [Symbol.Iterable] 매소드를 가지고 있는 것이 특징이다. 개체 자신이 iterable한 경우 array,.. 2020. 12. 18.
Javascript ES6+ Map Map Map을 쓰는 이유 중 하나는 객체의 단점을 보안하기 위한 것이다. 객체의 단점 iterable하지 않다. (iterable의 의미는 순서대로 순환 및 반복한다는 흐름이다) 키를 문자열로 취급한다. 키값의 unique함을 완벽히 보장하지 못함. 프로퍼티 개수를 직접 파악할 수 없다. iterable하지 않다. const o = { a: 1, b: 2, c: 3 } for (let key in o) { console.log(key, o[key]) } /결과: // a 1 // b 2 // c 3 Object.prototype.method = function () { } for (let key in o) { console.log(key, o[key]) } //결과: //a 1 //b 2 //c 3 /.. 2020. 12. 16.
Javascript ES6+ Set set Array.prototype.pushUnique = value =>{ if(!this.include(value)){ this.push(value) } }return this const arr = [1, 2, 3] arr.pushUnique(5) arr.pushUnique(4) arr.pushUnique(3) console.log(arr) //결과: arr(5) {1, 2, 3, 5, 4} ///// const set = new Set([1,2,3]) set.add(5) set.add(4) set.add(3) console.log(set) //결과:Set(5) {1, 2, 3, 5, 4} set은 중복이 허용되지 않으며 순서를 보장하는, 값들로만 이루어진 리스트를 만드는 역할을 한다. 위의 결과를 .. 2020. 12. 16.
Javascript ES6+ 심볼(Symbol) 심볼(Symbol) primitive value => 유일무이하고 고유한 존재. 비공개 멤버에 대한 needs에서 탄생. 기본적인 열거대상에서 제외. 암묵적 형변환 불가. `Symbol([string])` : 문자열이 아닌 타입은 자동으로 toString 처리한다. const sb1 = Symbol() const sb2 = Symbol() console.log(sb1,sb2) console.log(sb1 === sb2) //결과: 오류 const sb1 = Symbol('symbol') const sb2 = Symbol('symbol') console.log(sb1, sb2) console.log(sb1 === sb2) //결과: //Symbol(symbol) Symbol(symbol) //false c.. 2020. 12. 15.
Javascript ES6+ Destructuring assignment Destructuring assignment 배열의 해체할당 var colors = ['red', 'white', 'orange'] var first = colors[0] var second = colors[1] var third = colors[2] console.log(first, second, third) //결과: red white orange const colors = ['red', 'white', 'orange'] const [first, second, third] = colors console.log(first, second, third) //결과: red white orange 위의 두 코드의 결과는 똑같다. ES6+부터는 변수 이름을 배열화할 수 있게 되었다. const colors = .. 2020. 12. 14.
Javascript ES6+ Function 함수 Function 함수 name property function a () { } console.log(a.name) //결과: // a 위 코드는 name 프로퍼티가 함수 a에 붙어 문자열로 'a'가 출력된다. 함수가 name 프로퍼티를 가지고 있기 때문에 가능한 일이다. const b = function () { } console.log(b.name) //결과: b const c = function cc () { } console.log(c.name) //결과: cc const d = () => {} console.log(d.name) //결과: d const e = { om1: function () {}, om2 () {}, om3: () => {} } console.log(e.om1.name, e.o.. 2020. 12. 14.
Node.js - Node.js에서 동기와 비동기 Nodejs에서 동기와 비동기 Node.js는 비동기적인 실행에 특화되어있다고 할 수 있다. 여기서 비동기와 동기를 설명하자면 동기는 차례대로 하나씩 하나씩 일을 처리해나가는 것이라면 비동기는 동시에 일을 처리해나가는 더 효율적인 방법이라고 말할 수 있다. 동기 var fs = require('fs') console.log('A'); var result = fs.readFileSync('fileB','utf8'); console.log(result); console.log('C'); 동기를 코드로 표현하였다. readFileSync 메소드는 file을 읽어오는 메소드이다. 여기서 불러올 fileB에는 텍스트 'B'가 저장되어 있다. 코드 결과를 보면 위에서부터 차례대로 결과가 쭉 나열되어 있는 것을 알 .. 2020. 12. 12.
Node.js - 파일 목록 알아내기 파일 목록 알아내기 파일을 한꺼번에 혹은 편리하게 관리하기 위해서는 컴퓨터에 파일 목록을 맡겨야한다. 즉 파일 목록을 알아내어 보내줘야 한다는 것이다. 아래 코드는 특정 폴더안에 있는 파일 리스트를 불러오는 코드이다. var testFolder = './data'; var fs = require('fs'); fs.readdir(testFolder, function(error, filelist){ console.log(filelist); }) data 폴더 안에 있는 파일 리스트들을 프롬프트 명령으로 불러온 것을 확인 할 수 있다. 응용 var http = require('http'); var fs = require('fs'); var url = require('url'); var app = http.cr.. 2020. 12. 12.
Javascript ES6+ Arrow Function Arrow Function var a = function () { return new Date() } var b = function (a) { return a * a } var c = function (a, b) { return a + b } var d = function (a, b) { console.log( a * b ) } const f = funtion () { a: 1, b: 2 } ↓ let a = () => new Date() let b = a => a * a let c = (a, b) => a + b let d = (a, b) => { console.log( a * b ) } const f = () => ({ a: 1, b: 2 }) 위와 같이 function()이라는 함수를 Arrow F.. 2020. 12. 11.
Javascript ES6+ 객체의 향상된 기능들 객체의 향상된 기능들 shorthand property var x = 10 var y = 20 var obj = { x: x, y: y const x = 10 const y = 20 const obj = { x, y 두 코드를 비교해보면 ES6+의 새로운 기능추가로 프로퍼티가 축약된 것을 확인 할 수있다. 또 프로퍼티의 key와 value에 할당할 변수명이 동일한 경우 value 생략 가능하다. const convertExtension = function (fullFileName) { const fullFileNameArr = fullFileName.split('.') const filename = fullFileNameArr[0] const ext = fullFileNameArr[1] && fullFi.. 2020. 12. 11.
Javascript - Drag and Drop 기본 구현하기 마우스로 클릭 후 드래그해서 다른 곳으로 드랍하는 기능을 간단한 자바스크립트 코드로 구현해보았다. HTML 이미지를 드래그와 드랍을 하기 위해서는 html 태그에 드랍할 장소의 태그에 ondrop="drop(event)"을 각각 붙여줘야한다. 그리고 드래그할 이미지 태그에 드래그를 시작하는 요소라는 의미로 ondragstart="drag(event)"을 붙여준다. 또 드랍할 위치 태그에 allowDrop(event)는 다른 이벤트가 발생하는 것을 방지 하기 위한 함수이며 이는 자바스크립트에서 제어한다. CSS 아주 간단한 드랍 드래그 위한 박스를 두 개 만들었다. Javascript 함수 allowDrop()의 안에 preventDefault() 메소드는 다른 이벤트가 발생하는 것을 방지해주는 역할을 한.. 2020. 12. 9.
Javascript ES6+ spread operator (펼치기 연산자) spread operator (펼치기 연산자) var birds = ['eagle', 'pigeon'] var mammals = ['rabbit', 'cat'] var animals = birds.concat('whale').concat(mammals) console.log(animals) const animals2 = [...birds, 'whale', ...mammals] console.log(animals2) //결과: //["eagle", "pigeon", "whale", "rabbit", "cat"] //["eagle", "pigeon", "whale", "rabbit", "cat"] 위와 같이 .concat이라는 메소드를 쓰지 않고도 더 효율적으로 배열을 만들어 낼 수 있다는 것을 볼 수 있다.. 2020. 12. 9.
Javascript ES6+ rest parameter (나머지 매개변수) rest parameter(나머지 매개변수) 구 버전인 ES5에서 썼던 배열을 만들어 주는 argumernt 대신 "...(매개변수)"을 쓴다면 더 쉽게 배열을 만들 수 있다. ...(매개변수) const f = function (x, y, ...rest) { console.log(rest) } f(1, 2, true, null, undefined, 10) //결과; //[true, null, undefined, 10] 위의 결과를 보면 rest 매개변수를 호출한 결과 ...rest만 해줘도 모든 정의된 값들이 배열로서 결과가 나온다는 것을 알 수 있다. const f = function (...rest) { console.log(rest) } f(1, 2, 3, 4, 5, 6, 7, 8, 9, 10) .. 2020. 12. 9.
Javascript ES6+ default parameter (매개변수 기본값) default parameter (매개변수 기본값) 과거 버전인 ES5과 다르게 매개변수의 활용의 기능이 늘었다. //결과: //0 null //결과: //7 0 "" false null 6 위의 코드들의 결과를 보면 알 수 있듯이 함수의 매개변수로 들어가는 값들이 정의되지 않는다면 그 정의되지 않은 매개변수의 함수 인자들이 자신 스스로 변수로 선언하여 변수 값들을 실행하는 것을 볼 수 있다. 하지만 정의되어진 값들이 매개변수로 들어가면 자기 스스로 변수로 설정한 값들은 무시되며 정상적으로 함수 안에서 매개변수로서 활동한다. 값 주고 받기 const f = function (x = 1, y = 3 + x) { console.log(x, y) } f() //결과: //1 4 위와 같이 함수의 인자들은 매개.. 2020. 12. 9.
Javascript ES6+ block scoped variables block scoped variables let var달리 재선언이 불가능하지만 재할당은 가능하다. 블록 스코프로 적용되어 외부에서 접근할 수 없다. let a = 1 a = 2 console.log(a) let은 재할당이 가능하다. let 블록 범위 let a = 1 function f () { console.log(a, b, c) // TZD 존이므로 에러가 발생한다. let b = 2 console.log(a, b, c) // 이미 선언된 let b로 인해 b는 2가 호출되지만 a또한 내부에 있지 않지만 // 외부에 선언되어있어 호출된다. 하지만 c는 아직 선언조차 되지 않았다. if (true) { let c = 3 console.log(a, b, c)// a도 호출되고 let c로 인해 c 또한.. 2020. 12. 7.
Javascript ES6+ Block Scope Block Scope 함수 스코프는 함수의 인해서 생기는 범위, 변수의 유효범위를 뜻하지만 블록 스코프(Block Scope)는 블락 '{}' 에 인해서 생기는 유효범위라고 말할 수 있다. 즉 { }에 인해서 변수의 유효범위가 결정된다. {}의 범위 { let a = 10 { let a = 20 console.log(a) } console.log(a) } console.log(a) 위의 결과를 보면 첫 번째와 두 번째 a의 값은 정의되어있다는 것을 알 수 있다. 즉 첫 번째와 두 번째로 a를 호출한 범위가 {} 블록 안에서 있기 때문에 정의될 수 있다. 하지만 세 번째 a호출은 {}블락 범위 안에 있지 않고 외부에 있기 때문에 a가 정의되지 않아 에러가 발생한다. 이점이 ES5와 ES6+의 다른점이라고 .. 2020. 12. 7.
Node.js - 홈페이지 구현 홈페이지 구현 조건문을 활용해서 홈페이지를 표현하는 방법이 존재한다. 위의 웹의 본문의 WEB의 링크에는 아직 쿼리 스트링의 값이 정의가 되지 않아서 WEB 링크를 클릭하면 정의되지 않았다는 undefined가 변환되어버린다. 그래서 만약 쿼리 스트링 값이 정의되지 않으면 발동되는 조건문을 추가한다면 undefined 표시를 안뜨게 변환 할 수 있다. ↓ var http = require('http'); var fs = require('fs'); var url = require('url'); var app = http.createServer(function(request,response){ var _url = request.url; var queryData = url.parse(_url, true).qu.. 2020. 12. 5.
Node.js - Not found 오류 구현 Not found 오류 구현 존재하지 않는 정보에 대한 요청이 들어왔을 때 Not found 오류 메시지를 전송하는 방법이 있다. 아래는 주어진 URL 정보를 추출한 것을 콘솔로 도출해 본 것이다. 위에서 도출된 URL 정보 중에 pathname이 중요한데 pathname의 '/'은 localhost:3000/' 에서 '/' 기호인데 path(경로)의 시작을 알려준다. 즉 '/폴더/폴더/파일.확장자'를 통틀어 pathname이라고 말할 수 있으며 만약에 사이트가 존재하지 않는다면 '/ '뒤의 모든 값들을 반환시키므로 pathname의 '/'는 false다. pathname의 '/' 정보를 이용하여 Not found 오류 구현 코드를 작성할 수 있다. ↓ var http = require('http'); .. 2020. 12. 5.
Node.js - 콘솔에서의 입력값 콘솔에서의 입력값 콘솔 환경에서 앱을 실행할 때 입력 값을 전달하는 방법이 있다. 예를 들면 배열을 노드에 넣어주는 방법이 있다. 아래 코드는 Argument 즉 배열을 노드에 넣어 실행 할 수 있는 자바스크립트 코드이 var args = process.argv; console.log(args); 노드에서 실행 결과 위와 같이 배열이 노드에 들어 간 것을 확인할 수 있다. 위에서 볼 수 있듯이 규칙적인 것인 노드에 넣어진 배열의 0번과 1번은 노드라는 프로그램과 노드에 배열을 넣게 하는 자바스크립트 코드가 담긴 js파일이 고정적으로 정해져 있어 실질적으로 쓰는 것은 2번 부터 이다. 그래서 js 파일 실행 명령어 오른쪽 끝에 jinseok과 kim이라는 값을 적어 배열 값을 주었는데 배열 2번과 3번에 .. 2020. 12. 5.
Node.js - 파일 읽기 파일 읽기 var fs = require('fs'); fs.readFile('TEST.txt', 'utf8', function(err, data){ console.log(data); }); 위의 코드는 외부 파일을 불러오는 노드에서 실행 할 수 있는 자바스크립트 코드이다. TEST.txt라는 텍스트가 적혀있는 텍스트 파일을 만든다. 그리고 js 파일에 노드에서 실행 할 수 있는 자바스크립트 코드를 적는다. readFile이라는 메소드의 첫 번째 인자가 외부에서 불러올 텍스트 파일 TEXT.txt이다. node fileread.js을 명령 프롬프트에 입력하여 실행하면 TEST.txt 텍스트 파일의 내용이 도출되는 것을 확인 할 수 있다. 응용 data 라는 이름으로 폴더를 만들고 그 안에 순수 텍스트 파일.. 2020. 12. 5.
Node.js - URL와 query string URL 위의 설명은 URL의 기본 구조이다. 여기서 중요한 것은 query string이다. 쿼리 스트링에 따라서 데이터를 출력하고 또 그 데이터들을 바꿀수 있다는 사실을 알아야 한다. query string의 성질 알아보기 예제 실험 var http = require('http'); var fs = require('fs'); var url = require('url'); var app = http.createServer(function(request,response){ var _url = request.url; // 쿼리 데이터를 추출하게끔 3행에서 url이라는 모듈을 사용한다고 변수를 선언해주고 //8,9행의 코드를 추가시켰다. var queryData = url.parse(_url, true).qu.. 2020. 12. 5.
Node.js - javascript 기본 언어 실행 javascript 기본문법 실행 간단한 자바스크립트 언어를 적어 보았다. 숫자 연산, 변수, 문자으로 구성해보았다. js 파일 이름은 node1.js으로 설정하였다. 위의 언어들 말고도 비교연산자 boolean 제어문 조건문 등등 모든 자바스크립트 언어 적용 가능하다. 명령 프롬프트를 켜고 node -v을 입력하여 노드를 실행시키고 코드 파일이 들어있는 폴더와 디렉토리를 연동시킨 후 dir/w을 입력하여 명령한다. (윈도우 기준이다.) 그리고 node node1.js을 입력하면 자바스크립트 언어를 코드로 저장한 js파일에 연결된다. 위와 같이 node1.js 파일의 자바스크립트 코드의 결과들이 나오는 것을 확인 할 수있다. Template Literal 여러줄로 이루어진 문자열의 표현과 문자의 치환을 .. 2020. 12. 5.
Node.js 실행 방법 Node.js 실행 방법 노드 공식 사이트인 https://nodejs.org/ko/ 로 들어가 다운받는다. 다운이 완료되면 명렁 프롬프트를 뛰워 node -v을 입력하여 노드 프로그램이 실행되는지 확인해본다. 간단하게 cosole.log(1+1);을 적어 결과값이 나오면 노드가 제대로 실행되는지 확인할 수있다. 다시 명령어를 입력하고 싶다면 Ctrl+C 키를 두 번 누르거나 .exit을 입력해주면 다시 명령 입력창으로 돌아온다. 그리고 바탕화면에 새 폴더를 만들고 브라켓과 같은 에디터를 이용하여 새 폴더 안에 확장자 .js인 파일을 만들어낸다. 그리고 바탕화면에 만든 새 폴더이자 .js 파일을 저장한 폴더의 경로를 복사하여 다시 명령 프롬프트에 들어가 cd 을 입력해준다. 새 폴더 경로를 입력하면 디렉.. 2020. 12. 5.
Javascript 클래스(class) 이론 클래스(class) 클래스는 계급, 집단, 집합을 뜻 하는데 자바스크립트에서는 뜻 그대로 집단으로 나뉠 수 있다. 왼쪽 그림에서 class 파트는 직접적으로 사용되는 생성된 객체 배열 [1,2,3] 등등이 아니라 이 생성 객체를 만드는 매개가 되는 생성자 범위를 class라고 부른다. 이 class 파트에서 생성자의 메소드들을 정적 메소드, 정적 프로퍼티로 구분할 수 있으며 프로토타입의 메소드는 그냥 메소드 아니면 프로토타입 메소드라고 불린다. 생성자에 인하여 생성된 직접적으로 사용하는 객체 instance는 프로토타입 메소드에 접근이 가능하다. 왜냐하면 __proto__의 매개체를 생략 가능하므로 가능하다. 하지만 생성된 객체 instance가 정적 메소드 및 프로퍼티에 바로 접근은 되지 않는다. 프로.. 2020. 12. 4.
Javascript 프로토타입(prototype) 이론 프로토타입(prototype) 객체는 프로퍼티를 가질 수 있는데 prototype이라는 프로퍼티는 그 용도가 약속되어 있는 특수한 프로퍼티다. prototype에 저장된 속성들은 생성자를 통해서 객체가 만들어질 때 그 객체에 연결된다. new을 이용해 만든 constructor 즉 생성자가 새로운 객체를 만들면 이 새로운 객체에 생성자의 프로토타입이라는 내용이 새로운 객체의 __proto__라는 것을 통해 연결되어 생성자을 참조하게 된다. 즉 생성자.prototype와 객체.__proto__는 같은 객체를 바라본다는 뜻이다. 그리고 __proto__는 생략이 가능하다. 한마디로 프로토타입으로 연결되어 생성된 객체가 생성자의 메소드들을 꺼내서 마음대로 쓸 수 있다는 것이다. 만약 Array 생성자가 새로운.. 2020. 12. 4.
Javascript 클로저(Closure) 이론 클로저(Closure) 함수와 그 함수 선언될 당시의 협동이라고 말할 수 있다. 다르게 말하면 실행 콘택스트 A와 함수B가 콤비가 되어 무언가를 한다라고 볼수 있다. 여기서 눈여겨 봐야할 것은 LexicalEnviroment의 outerEnvironmentReterenced이다. 함수B와 실행 콘텍스트 A가콤비가 되어 무언가를 한다고 했는데 이는 함수 B가 A에서 선언한 무언가로 앤해 A로 접근하려고 할 때 문제가 되는데 이때 함수 B가 A로 접근할 수 있게 도와주는 함수 B의 outerEnvironmentReterenced가 초점을 맞쳐야할 대상이다. 즉 다시 말해 함수 B의 outerEnvironmentReterenced는 컨텍스트 A의 environmentRecord를 참조하므로 "컨텍스트 A에서 .. 2020. 12. 4.
Javascript callback Function이론 callback Function call 호출하다. back은 다시 돌려주다. 라고 생각하면 이해하기 쉽다. 즉 콜백 함수는 호출해서 나한테 돌려줄 함수라고 말할 수있다. 콜백 함수는 함수를 일단 따로 전달하고 호출해서 그 결과를 따로 다시 돌려주라는 의미이다. 주고받는다는 의미이기도 하다. 즉 함수 제어권을 맡긴다는 것이다. 제어권 => 실행 시점 위 코드는 setInterval이라는 메소드의 첫 번째 인자로 콜백 함수가 들어있다. 콜백 함수가 실행 되면 변수 cb의 함수가 발동된다. 1초 주기마다 콜백 함수를 호출하는 코드라고 볼 수 있다. 이때 변수 cb로 선언한 함수를 setInterval이라는 메소드의 첫 번째 인자로 넘겨준 것인데, 즉 호출 결과를 알려달라고 제어권을 setInterval에 넘.. 2020. 12. 3.
반응형

티스토리툴바