본문 바로가기

자바스크립트47

[자바스크립트] ES6 - arrow function [arrow function]- function 표현에 비해 구문이 짧음- 익명함수 : 함수 호출을 위해 함수 표현식을 사용- 예시 let func1 = (val1, var2) => { return va1 + var2; } let func2 = (var1,var2) => var1 + var2; - 블록을 지정할 때에는 return을 명시, 블록 지정하지않을 때 암묵적 return [arrow function 특징]1) 파라미터가 없을 때는 () 가 필수, 1개만 있을 때는 생략 가능let func = var1 => { return va1; } 2) 객체 반환 시 소괄호 사용해서 짧게 작성해도됨() => ({ a: 1 }); 3) argements 객체 바인딩X : 함수 호출 시 인수를 담은 유사 배열 객.. 2017. 6. 21.
[node.js] AJAX API 서버 만들기 [먼저 읽어봐야할 게시글]- API 서버, JSON에 대한 개념 필요1) [자바스크립트] JSON 객체 : http://jinbroing.tistory.com/1562) [node.js] express로 REST API 서버 개발 : http://jinbroing.tistory.com/1453) [자바스크립트] Ajax 통신: http://jinbroing.tistory.com/99 [AJAX란]- 자바스크립트 XMLHttpRequest 객체를 사용해서 서버와 비동기적으로 통신하는 것을 말함- 비동기 통신의 결과로 XML을 받았으나 데이터가 많아지면 그만큼 태그가 많아져 용량이 무거워져 경량 데이터 포멧 JSON을 사용함 [XMLHttpRequest 객체]- 자바스크립트 코드에서 HTTP 통신을 쉽게하고.. 2017. 6. 17.
[자바스크립트] JSON 객체 [JSON이란]- Javascript Object Notion의 줄임말- 자바스크립트 Object 형태의 경량의 데이터 포멧 :자바스크립트로 파생되었지만 독립형 데이터 포멧- 서로 다른 시스템 간 객체를 교환할 수 있음 : 자바스크립트 - 서버 간 통신할 때 유용(AJAX)- 사람, 기계 모두 이해하기 쉽고 용량이 작음- key - value 형식 : { key: value } : 문자열은 ""로 묶어야하며, 배열은 [ ]{ "name": "jinbro", "age": 26, "major": "digital media" } [자바스크립트 JSON 객체]- JSON 객체 : JSON을 다루는 메서드 포함- IE6 이하 버젼부터는 JSON 객체를 지원하지않음 : 따로 코드를 삽입해야함- 메서드1) JSON... 2017. 6. 17.
[자바스크립트] ECMA6 - let, const 블록 레벨 스코프 [자바스크립트 스코프]- 자바스크립트의 변수 범위는 블록( { …. } )이 아닌 function level scope- 함수 바깥에 정의된 변수와 함수는 전역 객체(window)의 멤버- 함수 내부에서 var 키워드로 변수를 선언하지않으면 전역객체의 멤버로 정의됨- 전역변수의 남발 [블록 레벨 스코프]- ES6부터 추가된 문법을 통해 블록 레벨 스코프 변수를 선언할 수 있음 - 기존 함수 레벨 스코프를 가지는 var로 변수를 선언하면 전역변수 or 함수의 변수 [let]1) 블록 레벨 스코프 변수 선언 키워드var test = function(a, b, start){ if(start){ let result = a + b; } return result; } test(1, 2, true); // undef.. 2017. 6. 16.
[자바스크립트 자료구조] List [List]- 목록, 순서가 있는 일련의 집합체(몇번째 항목)- 리스트에 저장된 각 데이터 항목을 요소라 함, 프로그램의 가용메모리가 리스트에 저장할 수 있는 최대 요소 수- Array의 index 버림(빠른 검색X), 요소간의 순서가 중요, 빈 엘리먼트 허용X : 리스트 탐색을 통해 요소 추출- 빈틈없는 데이터 적재의 장점을 취한 자료구조 : Array는 index 자리에 value가 삭제되면 뻥 떠버림 - 메우기위한 로직 필요=> Array 단점 보완 : 크기 고정X(새로 빈 배열을 만들고 깊은 복사를 해서 만드는 방식이 아님) [List ADT]- ADT란? Abstract Data Type을 말함, 리스트 자료구조가 어떤 구현부를 가져야하는가를 인터페이스 제시하는 것- 예시 : 전기밥솥 ADT :.. 2017. 6. 13.
[자바스크립트] 비동기처리 Promise [자바스크립트 단일스레드 비동기처리]- 제목 그대로다- 자세히 알아보기 : http://jinbroing.tistory.com/98=> 비동기함수와 콜백함수 처리 구별 1234567try{ setTimeout(function(){ throw 'Error!'; }, 1000);} catch(e){ console.log(e);}cs- 위의 코드는 에러를 캐치할까 못할까? : 하지 못함, setTimeout과 파라미터로 전달되는 콜백함수 처리를 구별할 줄 알아야함- 위와 같은 문제를 해결하기위해 Promise가 제안됨 [Promise란]- 비동기처리(콜백함수) 계산을 위해 사용됨 : ES6 정식 채택- window(전역객체)의 멤버 : Promise [Promise state]- 앞서 살펴본 에러처리는 set.. 2017. 5. 30.
[자바스크립트] 객체지향 프로그래밍하기 [프로토타입 기반 객체지향]- 자바스크립트는 클래스가 존재하지않음- 객체지향 프로그래밍을 할 수 있음 : 객체, 인스턴스 변수/메서드, 정보은닉(클로저), 상속(prototype, __proto__)- 자바스크립트 객체지향 핵심 : 프로토타입 객체(체인)- 해당 포스팅을 통해 단계별로 상속, 정보은닉 하는 방법을 알아볼 것 : 자바스크립트는 어떻게 구현하나 [자바스크립트로 객체지향 프로그래밍하기]1) 기본적인 인스턴스 생성 구조12345function Person(name){ this.name = name;} var jinbro = new Person("jinbro");cs- Person 함수 : 클래스 역할이자 생성자(객체 생성 시 처음 호출 : 인스턴스 변수 값 및 메서드 설정을 위해) 역할- new.. 2017. 5. 26.
[자바스크립트 자료구조] 배열 [배열이란]- 보통 배열을 사용하는 용도는 묶음 단위로 데이터를 구분할 때 사용함- 기본적인 자료구조 [자바스크립트 배열]- 자바스크립트 배열은 객체 : 내장 객체(미리 만들어져있고, 사용하면 되는 객체)- 객체지만 내부적으로 배열로서 특화된 객체 : 배열 관련 프로퍼티- 자바스크립트 배열은 한 배열 내 다양한 타입의 요소를 포함시킬 수 있음 : 스크립트 언어가 대부분 그럼- 배열은 레퍼런스 타입 [자바스크립트 배열 생성 방법]1) [ ]를 이용한 배열 선언123456var numbers = []; /* for문을 통해 numbers 배열에 요소 추가 */for(var i = 0; i 2017. 5. 22.
[자바스크립트] this 바인딩 포스팅 AS - 바인딩 종류 [자바스크립트 this]- 자바스크립트 this는 다른 언어들과 다름 : 컴파일 때 this가 정해지지만, 자바스크립트는 실행하면서 정해짐(동적)- 자바스크립트 코드 실행 가능 영역 분류 : global(전역), function, eval- this 는 현재 실행 코드의 환경(변수객체)을 지칭함 : 기본적으로 전역객체(브라우저 : window, nodejs : global)를 가리킴- 쉽게 말해 어떤 변수객체로 호출하고 있는가에 따라 this가 다름- this를 명시적으로 변경 가능함 [자바스크립트 this 결정조건]1) 어떤 영역에서 수행되는가 : global / function / eval2) 호출자(호출 객체)가 누구인가 : 가장 가까이에 있는 객체 - 첫번째 조건에서 같은 function 영역이라.. 2017. 5. 20.
[자바스크립트] 잠깐 쉬어가기 : 자바스크립트 특징 [자바스크립트 특징]1) 스크립트 언어 - 자바스크립트는 웹페이지 동작을 역동적으로 만들기위해 만들어짐- 다시 말하자면 프로그래밍 언어와 같이 쓸 수 있도록 만들어진 언어- 간결하게 코딩하는 것이 특징 2) 프로그래밍 언어- 웹에서 벗어나 독립적으로 하나의 프로그램을 만들 수 있게됨 : 엔진의 속도 향상, nodejs이라는 새로운 환경(런타임 환경) 3) 동적 바인딩, 동적 언어 : 처음에 익히기가 까다로움- 컴파일 시에 자료형, this, 변수 scope 등이 정해지는 것이 아니라 실행 중에 정해지고, 변경됨- 동적이기때문에 갖는 장점과 단점이 있음- 전역 객체(window), 함수 객체(VO 혹은 AO), 실행 컨텍스트, this, scope 정확하게 알고 있어야 예측 가능 4) 표준이 있지만 브라우.. 2017. 5. 18.