드림코딩_by엘리/유투브강의_JavaScript 10

드림코딩 by 엘리_JavaScript JSON

서버통신의 시작_JSON 브라우저 위에서 동작하고 있는 웹사이트나 웹 어플리케이션과 같은 클라이언트들이 어떻게 서버와 통신할 수 있는지 정의한 것이 바로 http 이다. http는 hypertext transfer protocal 약자로서 어떻게 hypertext 를 서로 주고 받을수 있는지를 규약한 프로토콜의 하나이다. http는 클라이언트가 서버에게 데이터를 request 요청할 수 있고, 서버는 클라이언트가 요청한 것에 따라서 그에 맞는 response 응답을 클라이언트에 보내주는 이런 방식으로 진행되는 것을 의미한다. hypertext는 웹사이트에서 이용되어지고 있는 hypertext 링크들만 이야기 하는것이 아니라 전반적으로 쓰여지고 있는 리소스들... 문서나 이미지 파일들 이런 아이들을 다 포..

드림코딩 by 엘리_ Array APIs & Array Function

Array APIs & Array Function 'use strict' // Q1. make a string out of an array // 구분자 전달 가능 /** * Adds all the elements of an array into a string, separated by the specified separator string. * @param separator A string used to separate one element of the array from the next in the resulting string. If omitted, the array elements are separated with a comma. */ // join(separator?: string): string;..

드림코딩 by 엘리_Array

Array 자료구조 중 하나인 array 자료구조란? 프로그래밍 언어에서도 비슷한 종류의 데이터들을 묶어서 한 데다가 보관해 놓고 이런것들을 자료구조 라고 한다. 자료구조에는 어떤 방식으로 어떤 형식으로 데이터를 담느냐에 따라서 굉장히 다양한 타입들이 있다. 자료구조와 object의 차이점 비슷한 종류의 데이터를 묶어놓은 것은 오브젝트라고 했다. 그렇다면 오브젝트와 자료구조의 차이점은 무엇일까? 오브젝트는 토끼와 당근이 될 수 있다. 토끼는 동물이고 귀가 2개인 properties가 들어 있을 수 있고 먹는다, 뛴다 라는 함수들 메소드가 들어 있을 수 있다. 당근은 주황색이고 비타민A가 있는 properties가 있을 수 있지만, 당근 자체로는 어떤 행동을 할 수 없기때문에 메소드가 없을 수 있다. 이렇..

드림코딩 by 엘리_Object

Object object 생성방법 obj를 만드는 방법은 {}을 사용해서 만들 수 도있고, 이 방법을 object literal 문법 이라 한다. 클래스를 이용해서 new라는 키워드를 이용해서 class를 template를 이용해서 obj를 만들 수 도있다. 이 방법을 object constructor 문법 이라 한다. 우리가 obj를 new 라는 키워드를 통해서 생성하면 Object()에 정의된 constructor가 호출이된다. 그래서 이름이 지어진 것이다. 자바스크립트 에서는 클래스가 없어도 {} 괄호를 이용해서 obj 생성이 가능하다. 자바스크립트는 동적으로 런타임일때 결정되는 언어인데 (Runtime : 프로그램이 동작하고 있을 때) 그래서 뒤늦게 하나의 properties가 추가 가능하다. 이..

드림코딩 by 엘리_ 클래스와 오브젝트의 차이점(class vs object), 객체지향 언어 클래스 정리

class vs object, 객체지향 언어 클래스 정리 class와 object는 무엇인지? 이 두가지의 개념은 무엇인지? if 자바스크립트에 class나 object가 없다면? 내가 정의한 변수들이 둥둥 떠다니면서 규모있는 프로젝트 만들기가 힘들다. 클래스는 조금더 연관있는 데이터를 한데 묶어놓는 contaniner 같은 개념이다. person이라는 class안에는 name, age 라는 properties가 들어있고 speak() 라는 함수가 들어있다. 이렇게 class에는 name, age 같은 속성 field가 들어있고, 그리고 speak() 즉 말하는 행동 method가 들어있다. 그래서 class는 조금더 연관있는 데이터들을 묶어놓은 fields와 methods가 종합적으로 묶여있는 것을 말..

드림코딩 by 엘리_ Arrow Function은 무엇인가? 함수의 선언과 표현

Function 프로그램 안에서도 각각 저마다의 기능을 수행하는 함수들이 있다. 절차적인 언어같은 경우 함수가 프로그램에서 굉장히 중요한 기능을 담당한다. 자바스크립트에서 function은 굉장히 중요한 기능을 하기때문에 sub-program 이라고 부른다. 프로그램 안에서 각각의 작은 단위의 기능들을 수행하는 것이 바로 function 이다. input prameter를 받아서이것들을 잘 처리한 담에 output return을 하는것이 function 이다. 함수의 이름을 보고 '이 함수는 이런일을 하겠구나' 하고 생각가능하고 그리고 전달해야 될 parameters이 무엇인지? 어떤 값들이 return 되기를 기대가능한지? 이런 interface들을 보고서 이런 일들이 수행가능 하겠구나 하고 예상 가능..

드림코딩 by 엘리_ 코딩의 기본 operator, if, for loop

코딩의 기본 operator, if, for loop variable은 메모리에 값을 읽고 쓰는것이 가능하다. 내가 ellie라고 값을 할당한 다음에 hello로 변경이 가능한 것이 바로 variable이 메모리에 읽고 쓰는 것이 가능하기 때문이다. const는 읽기만 가능하다. 그래서 const를 선언함과 값을 할당한 뒤로는 자물쇠가 생겨버려서 읽기만 가능하고 다시 다른값으로 쓰는것이 불가능하다. 그래서 자바스크립트 에서는 앞으로 변수 값이 바껴야될 좋을 이유가 없다면 왠만하면 const 키워드를 이용해서 constant로 작성하는것이 더 바람직하고 좋은 습관이다. 메모리에 값이 저장되는 방법은 2가지가 있는데 바로 primitive 타입인지 object 타입인지에 따라서 메모리에 값이 다른 방식으로 ..

드림코딩 by 엘리_데이터타입

프로그래밍 언어에서 가장 중요한것은? → 입력, 연산, 출력 사용자에게 console이나 UI에서 입력받은 데이터를 잘 처리하고 연산해서 알맞게 다시 사용자에게 출력해주는 것이 중요하다. 물론 그 데이터를 전송을 이용해서 서버로 보내서 다시 받아오는 것도 포함될 수 있다. 이런 연산을 하면서 CPU를 효율적으로 사용할 수 있도록 CPU에 최적화된 로직을 작성하는 것도 중요하고, 메모리의 사용을 최소화 하는것도 중요하다. 변수(Variable) 변경될 수 있는 값을 의미함 자바스크립트에서 변수 선언 시 let 이라는 키워드 이용 let, class etc 좀 더 현대적으로 쓰인 속성들은 ES 6에서 추가되었다. let name = 'ray'; - let이라는 키워드를 이용해서 name이라는 변수를 선언했다..

드림코딩 by 엘리_HelloWorld 출력

Visual Studio Code 를 통해 HelloWorld 출력 1. Hello world를 화면에 출력 2. 자바스크립트 preparation(환경설정) 3. script를 html에 포함 시 어떤 방식으로 포함해야 가장 효율적인지?(async와 defer의 차이점??) node.js에는 자바스크립트 엔진이 있어서 브라우저 없이도 자바스크립트가 실행 가능하다. Console APIs에서 그중에 log라는 함수를 이용해서 내가 원하는 메세지를 Console창에 출력하는 것이 확인 가능하다. *** 여기서 API란? Application Programming Interface 의 약자로 Web APIs는 자바스크립트 언어자체가 포함되어 있는것이 아니라 브라우저가 제공하는 즉 브라우저가 이해가능한 함수들..

드림코딩 by 엘리_자바스크립트의 역사와 현재 그리고 미래 (JavaScript, ECMAScript, JQuery, Babel, Node.js)

새로운 언어를 배울때 바로 문법 공부에 전념하는 것보다 그 언어의 탄생배경에 대해 이해하는 것이 매우 중요하다. 이 언어를 배웠을 때 어느 분야에서 활용가능하고, 나에게 어떤 이득이 생길 수 있는지에 대한 이해가 필수 이다. 당시에는 HTML과 CSS로 간단하게 웹페이지를 만들었는데, HTML의 약자인 text에 link를 걸어서 페이지와 페이지 사이에 이동만 가능한 웹페이지 였다. 이미 사용자들에게 보여지고 있는 웹사이트 안에서 DOM 요소들을 조작하면서 다이다믹한 웹사이트를 만들기 위해서 새로운 언어를 추가하기로 한다. 브랜든은 짧은 시간안에 프로토타입을 베이스로한 유연한 언어를 개발하게 된다. (프로토타입(prototype)은 원래의 형태 또는 전형적인 예, 기초 또는 표준이다. 시제품이 나오기 전..