본문 바로가기
반응형

JavaScript33

드림코딩 엘리 - 자바스크립트 기초 강의(ES5+) (10편) JSON HTTP (Hypertext Transfer Protocol) - 웹사이트, 웹 어플리케이션과 같은 클라이언트가 어떻게 서버와 통신할 것인지 정해놓은 규약 - 클라이언트가 서버에게 데이터를 요청 (request), 서버는 클라이언트 요청에 맞게 응답(response) Hypertext - HyperLink, 문서, 이미지 파일 등을 포함한 것들을 말함 AJAX (Asynchronous JavaScript And XML) - 웹 페이지에서 동적으로 서버와 데이터를 주고 받을 수 있는 기능을 말함 - 대표적으로 XHR(XMLHttpRequest)라는 Object가 있음, 브라우저 오픈 API에서 제공하는 것들 중의 하나 - 최근에는 새로 추가된 fetch() API를 통해서 데이터를 쉽게 주고 받을.. 2021. 11. 16.
드림코딩 엘리 - 자바스크립트 기초 강의(ES5+) (9편) 강의 시작 전 Quiz 내 답안 // Q1. make a string out of an array const fruits = ['apple', 'banana', 'orange']; let toString = fruits.toString(); console.log(toString); // Q2. make an array out of a string const fruits2 = '🍎, 🥝, 🍌, 🍒'; let toArray = fruits2.split(', '); console.log(toArray); // Q3. make this array look like this: [5, 4, 3, 2, 1] const array = [1, 2, 3, 4, 5]; console.log(array.reverse()); .. 2021. 11. 15.
드림코딩 엘리 - 자바스크립트 기초 강의(ES5+) (8편) 배열에 관한 내용 간단한 개념 정리 - 비슷한 종류의 데이터를 묶어 놓는 것 = 자료구조 - Object : 서로 연관된 것들끼리 묶어 놓는 것 - 비슷한 타입의 Object들을 묶어 놓는 것을 자료구조라고 이해하면 된다. 배열을 정의하는 방법과 인덱스를 활용하는 법 // 1. Declaration const arr1 = new Array(); const arr2 = [1, 2]; // 2. Index position const fruits = ['apple', 'banana']; console.log(fruits); console.log(fruits.length); console.log(fruits[0]); // 배열의 인덱스에 해당하는 값을 출력한다. console.log(fruits[fruits.l.. 2021. 11. 15.
드림코딩 엘리 - 자바스크립트 기초 강의(ES5+) (7편) Object // Objects // one of the JavaScript's data types. // a collection of related data and/or functionality. // Nearly all objects in JavaScript are instances of Object // object = { key : value };, object는 key와 value의 집합체이다 // 1. Literals and properties // Object를 만드는 방법 const obj1 = {}; // 'object literal' syntax const obj2 = new Object(); // 'object constructor' syntax function print(person.. 2021. 11. 15.
드림코딩 엘리 - 자바스크립트 기초 강의(ES5+) (6편) 간단한 개념 정리 클래스 : 연관된 속성(fields), 메소드(methods)가 포함된 것을 말함 간혹 메소드가 없이 데이터만 들어 있는 클래스도 존재하는데 이를 데이터 클래스라고 말한다. 클래스의 내부적으로 보여주는 변수, 밖에서 보이는 변수를 구분 짓는 것을 '캡슐화(encapsulation)'라고 한다. 클래스를 이용해서 상속, 다형성이 일어날 수 있음. 이런 모든 것들을 말해서 객체지향이라고 한다. 클래스 (= 템플릿) - 한번만 선언할 수 있음 - 어떤 종류의 데이터만 들어올 수 있다라는 틀만 정의해 놓는다고 볼 수 있음 ex) 붕어빵 틀 오브젝트 - 클래스를 이용해서 새로운 인스턴스를 생성하면 오브젝트가 된다 - 오브젝트는 클래스를 이용해서 많이 만들 수 있다 - 클래스는 틀만 정의해놓은 것.. 2021. 11. 11.
드림코딩 엘리 - 자바스크립트 기초 강의(ES5+) (5편) 앞으로 강의를 들으면서 필기는 코드와 함께 작성할 예정. 필요하다면 블로그 글작성 란에도 추가할 것이다. :) 함수 (Function) // 자바스크립트는 procedural programming language (절차적 프로그래밍 언어) // function은 sub-program이라고도 함 // Function // - fundamental building block in the program (함수는 다음과 같이 불리기도 함) // - subprogram can be used multiple times (여러번 재사용이 가능함) // - performs a task or calculates a value (일을 처리하거나 계산할 때 사용됨) // 1. Function declaration // fu.. 2021. 11. 11.
드림코딩 엘리 - 자바스크립트 기초 강의(ES5+) (4편) 3편에 관한 보충 설명 (변수, 객체에 관해서) // Variable, rw(read/write) // Constant, r(read only) // primitive type : 메모리에 값이 그대로 저장됨 // object type : 객체를 가리키는 reference 값이 메모리에 저장됨 // Note! // Immutable data types : primitive types, frozen objects ( i.e. ojbect.freeze()) // Mutable data types : all object by default are mutable in JS // 기본적으로 JS의 모든 객체는 값이 변경될 수 있는 mutable data type으로 본다. Operators, Numeric Ope.. 2021. 11. 11.
드림코딩 엘리 - 자바스크립트 기초 강의(ES5+) (3편) 3. 데이터타입, data types, let vs var, hoisting 변수 : 변경될 수 있는 값 let name = "JungAh"; console.log(name); name = 'hello'; console.log(name); 여기서 name은 저장소를 가리키는 포인터의 역할, name이라는 이름의 저장소에 저장된 값은 변경될 수 있다. Block Scope vs Global Scope {} bracket 안에 정의된 변수는 이 안에서만 사용될 수 있다. 어느 곳에서나 접근이 가능한 변수의 영역을 global scope라고 한다. let vs var var를 사용하면 안되는 이유 1) var hoisting (변수를 선언한 내용을 맨 위로 끌어올려주는 역할을 하는 것) 2) block sco.. 2021. 11. 10.
드림코딩 엘리 - 자바스크립트 기초 강의(ES5+) (1~2편) 1. 배우기 전 영상 내용 ECMAScript 5, 6 -> 모던 자바스크립트 브라우저마다 자바스크립트가 잘 돌아갈 수 있도록 해주는 엔진들이 있음 -> 대표적으로 크롬에서는 V8, 이는 node나 electron에서도 이용되고 있음 BABEL : 개발자들이 개발할 때는 최신 버전의 자바스크립트로 하고, 배포 시에는 ECMAScript 5나 6로 변환해주는 자바스크립트 트랜스컴파일러 SPA(Single Page Application)를 자바스크립트로 구현하기 위해서 만들어진 프레임 워크들이 대표적으로 리액트, 뷰, 앵귤러 등이 있다. 자바스크립트를 활용해서 node로 백엔드, react-native로 모바일, electron으로 데스크탑 어플리케이션을 만들 수 있다. 웹 어셈블리로 자바스크립트 이외의 언.. 2021. 11. 10.
반응형

티스토리툴바