본문 바로가기

programming study/JavaScript

 (186)
[드림코딩 by 엘리] JavaScript 기초 강의(10) (ES5+) 본 내용은 해당 강의 토대로 작성 callback 나중에 다시 불릴 전달되는 함수 arrow function으로 간단하게 전달 1. 동기와 비동기 동기 JavaScript is synchronous. 자바스크립트는 동기적이다. hoisting된 이후부터 코드가 순서에 맞춰 동기적으로 실행된다. hoisting: var, function decalaration이 자동으로 제일 위로 올라감 비동기 언제 코드가 실행될 지 예측할 수 없는 것 setTimeout: web API 브라우저에서 제공 지정된 시간이 지나면 callback 함수를 실행 console.log('1'); setTimeout(() => console.log('2'), 1000 ); console.log('3'); // 1 3 2의 순서로 출..
[드림코딩 by 엘리] JavaScript 기초 강의(9) (ES5+) 본 내용은 해당 강의 토대로 작성 HTTP Hyprertext Transfer Protocall Hypertext: 문서, 이미지 등을 포함 브라우저 위에서 동작하고 있는 클라이언트와 서버가 어떻게 통신할 지를 정한 것 request: 클라이언트가 서버에게 요청 response: 서버가 클라이언트에게 응답 AJAX Asynchronous JavaScript And XML HTTP를 이용해서 서버에게 데이터를 요청하여 받아오는 방법 웹페이지에서 동적으로 서버에게 데이터를 주고 받을 수 있다. XHR XMLHttpRequest 브라우저 API에서 제공하는 Object 중 하나 fetch API: 최근 추가된 브라우저 API, 브라우저와 서버가 통신할 수 있다. 간단하게 서버에게 데이터를 요청하고 받아올 수 ..
[드림코딩 by 엘리] JavaScript 기초 강의(8) (ES5+) 본 내용은 해당 강의 토대로 작성 Array APIs join array를 구분자를 넣어 문자열로 바꿀 수 있다. 구분자를 생략시, 콤마(,)가 기본값 split 문자열을 구분자를 기준으로 array로 변환 구분자는 문자열 또는 정규표현식 두번째 optional parameter는 array의 size를 지정 가능 reverse array의 item 순서를 거꾸로한다. array 자체의 순서를 바꾸고 그 값을 return splice 첫번째 parameter: start index 두번째 parameter: 지울 item의 개수 배열 자체는 삭제를 적용하고 return으로는 삭제된 item이 나온다. slice array의 일정 부분을 return 두 개의 optional parameter 시작 inde..
[드림코딩 by 엘리] JavaScript 기초 강의(7) (ES5+) 본 내용은 해당 강의 토대로 작성 자료구조 비슷한 종류의 데이터들을 묶어서 한데다가 보관하는 것 방식, 형식에따라 다양한 자료구조가 있음 cf) Object 서로 연관된 특징과 행동들을 묶어놓는 것 JavaScript는 다양한 종류의 데이터를 담을 수 있다. Array 0부터 시작하는 인덱스 번호가 있는 자료구조 한 배열에는 동일한 배열을 넣어야 한다. 인덱스로 접근할 수 있다. 삽입과 삭제가 편함 1. Declaration const arr1 = new Array(); const arr2 = [1, 2]; 2. Index position const fruits = ['apple', 'banana']; console.log(fruits.length); // 2 console.log(fruits[0]); ..
[드림코딩 by 엘리] JavaScript 기초 강의(6) (ES5+) 본 내용은 해당 강의 토대로 작성 Objects JavaScript의 데이터 타입 중 하나 관련된 데이터 또는 함수의 모음 JavaScript에서 거의 모든 Object는 Object의 instance 간편하게 데이터를 관리할 수 있다. key(property)와 value의 집합체 Literals and properties // object literal syntax const obj1 = {}; // object constructor syntax const obj2 = new Object(); // class가 없어도 바로 중괄호로 초기화 가능 const obj3 = { name: 'siru', age: 4}; // 아래와 같이 property를 추가할 수 있다. obj3.hasJob = true; ..
[드림코딩 by 엘리] JavaScript 기초 강의(5) (ES5+) 본 내용은 해당 강의 토대로 작성 class와 object class 연관있는 데이터(변수, 함수)를 한 곳에 묶어놓는 컨테이너 속성(filed), 행동(method)로 이루어져 있다. class person { // filed name; age; // method speak(); } data class: filed만 들어있는 클래스 클래스 안에서 내부적으로 보여지는 변수와 밖에서 보일 수 있는 변수를 나누어 캡슐화 클래스를 이용하여 상속과 다양성이 일어날 수 있음 이런 모든 것이 일어나는 언어를 객체 지향 언어라고 한다. 사물과 물체를 class(object)로 정의해서 프로그래밍 하는 것이 편하고 유연하게 할 수 있다. class와 object class 붕어빵 틀과 같다. template decla..
[드림코딩 by 엘리] JavaScript 기초 강의(4) (ES5+) 본 내용은 해당 강의 토대로 작성 Procedual language 절차지향 언어 함수가 프로그램에서 중요한 기능을 담당 JavaScript는 class가 있지만, prototype을 베이스로하여서 객체지향 언어가 아니라 절차지향 언어이다. Function sub-program이라고도 부름 프로그램안에서 각각의 작은 단위의 기능을 실행 여러번 재사용이 가능 일을 수행하거나 값을 계산 프로그램을 구성하는 fundamental building block Input -> Output 함수의 이름을 보고 어떤 일을 할 지 추론할 수 있다. 전달하는 파라미터, 기대되는 리턴값을 보면서 어떤 수행을 하는지 알 수 있다. Function Declaration function name (param1, param2) {..
[드림코딩 by 엘리] JavaScript 기초 강의(3) (ES5+) 본 내용은 해당 강의 토대로 작성 variable rw(read/write) 읽고 쓰기가 가능한 것 값을 할당 변경 let Constant r(read only) 읽기만 가능 다른 값으로 바꾸기 불가능 const(Constant) Primitive vs. Object Primitive: 값 자체가 메모리에 저장 Object: 메모리에 저장되지 않고 reference를 가리킴(포인터) reference는 실제로 object가 담겨있는 메모리를 가리킴 const로 선언한 경우, 포인터가 잠기지만 object는 변경이 가능 Immutable vs. Mutable Immutable: 데이터 자체를 바꿀 수 없음 primitive types, frozen objects primitive의 경우, 특정한 문자열을 ..

티스토리툴바