공부 자료 : 드림코딩 by 엘리 개발 환경 : visual studio code 언어 : js 이전에 공부한 콜백과 프로미스를 이용해서 콜백 지옥을 프로미스를 이용해서 간략하게 바꾸는 연습을 하고 메모한다. 콜백함수 원본 바꾸게 되면 다음과 같다. 살짝만 보아도 간결해진것을 알 수 있다. promise에서는 상태가 중요하다고 하였다. 콜백함수에서 성공case와 실패시 case를 각각 resolve와 reject로 이해하고 해당 부분을 적용시키면 된다. 우선 Promise는 생성자로 생성을 해줘야 하며, 해당 함수가 선언되고 resolve든 reject든 반환해줘야 하기 때문에 return을 사용해준다. yoon이라는 이름 또는 coder 라는 이름이 각각 id와 password가 지정된 값이 맞으면 r..

공부 자료 : 드림코딩 by 엘리 개발 환경 : visual studio code 언어 : js 1. Promise 이론 자바스크립트 안에 내장되어 있는 object 비동기적인 함수를 구현할 때 사용하게 된다. 무자비한 콜백 지옥대신 간결하게 사용할 수 있다. 프로미스는 주로 서버에서 받아온 데이터를 화면에 표시할 때 사용하게 된다. 시간이 걸리는 것들은 동기식 방법을 사용하게 되면 시작과 함께 로딩시간이 길어질 것이기 때문이 이러한 네트워크 처리, 파일 다운로드 ,Api 처리등은 프로미스를 많이 사용하게 된다. 만약 사용자가 요청했을 때만 해야 하는 경우라면 자칫하다가는 불필요한 함수가 실행 될 수 있다. 그 이유는 promise 가 만들어지는 순간 전달한 executor 함수가 바로 실행이 된다. 이..

공부 자료 : 드림코딩 by 엘리 개발 환경 : visual studio code 언어 : js 1. 콜백함수의 개념 자바스크립트 언어는 동기적 언어이다. 순차적 언어이지만 뒤에 서술하여도 hoisting 되는 부분이 먼저 맨 위로 자동적으로 올라가고 그 뒤 순차적을 진행한다. hoisting의 대표적 예로는 var 변수나 함수선언이 있다. 다음과 같은 setTimeout 이라는 함수가 있다 이 함수는 파라미터로 함수를 받아올수 있다. 자바스크립트는 위에서부터 아래로 읽는다. 1을 바로 출력하고 setTimeout 를 만나면 브라우저에게 다음과 같은 function을 해당하는 2000(2초) 뒤에 실행해달라는 메시지를 남기고 그다음줄로 이동하여 3,4를 출력한다. 2초뒤 2를 출력하여 로그는 1 ,3 ,..

공부 자료 : 드림코딩 by 엘리 개발 환경 : visual studio code 언어 : js 자료구조 : Array 1. 배열 선언 위와 같이 선언할 수 있다. 배열은 안에 들어간 값을 index로 참조할 수 있다. 2. Array APIs lib.es5.d.ts 에 정의되어 있는 함수를 알아보았다. 2-1 반복문 배열 안에 있는 value 들 마다 내가 전달할 함수를 출력하는데 용이하다. 2-2 Addtion, Deletion, copy pop 과 push 의 경우 마지막 인덱스를 조작하기 때문에 빠르게 실행된다. 하지만 shift나 unshift 의 경우 앞을 조작하다보니 뒤의 index를 당기거나 밀어야 한다. 배열이 커질수록 걸리는 시간이 증가한다. 2-3 splice : index 번호로 추..

공부 자료 : 드림코딩 by 엘리 개발 환경 : visual studio code 언어 : js 1.Object 오브젝트란 저번에 말한 것처럼 틀이 정해져 있다면 그안에 값을 지정해서 메모리에 올라가 동작하는 것을 말한다. {} 안에 직접 지정하는 object literal 문법이 있고 생성자를 이용해서 만드는 object constructor 문법이 있다. 이처럼 yoon 이라는 object를 {}를 사용하여 생성하고 이를 Function 의 파라미터로 전달 할 수 있다. 자바스크립트는 동적으로 (Runtime) 동작하는 언어인데. 뒤늦게 하나의 property를 추가 할 수 있다. 이렇게 생성하고 지울 수 있지만 필드에서 유지보수를 할 때 힘들고 오류발생을 야기한다. 이 개념에서 가장 중요한 것은 O..

공부 자료 : 드림코딩 by 엘리 개발 환경 : visual studio code 언어 : js 클래스란 무엇인가? 클래스는 모양이 정해진 틀과 같다. 붕어빵 틀 혹은 청사진이라고도 부를 수 있다. 데이터가 들어가 있지 않고 한번만 선언된다. 메모리에 올라가지 않는다. 오브젝트란? 클래스에서 틀을 만들었다면 값 (붕어빵에서는 팥붕어빵, 슈크림 붕어빵) 과 같이 테이타를 넣어서 instance를 생성했을 때 Object가 된다. 데이터가 들어가 있고, 여러번 선언될 수 있다. 또한 메모리에 올라가게 된다. JS에서는 es6 전까지는 class 라는게 정의되어 있지 않고 object로 만들었었다. 클래스는 prototype-based 로 만들어진 것이며 의미는 같다. 1. 기본 형식 위에서 Person 이라..

공부 자료 : 드림코딩 by 엘리 개발 환경 : visual studio code 언어 : js 함수 하나의 함수는 한가지의 일만 하도록 만들어야 효과가 좋다. 함수의 이름은 무엇인가 동작하는 것 으로 만들어야한다 => 동사 자바스크립트에서의 함수 func = object 이다. 변수에 할당 할 수도 있고 파라미터로 전달 할 수도 있다. 문법 function printHello(){ console.log('hello'); } printHello(); function log(message){ console.log(message); } log('hello@'); log(1234); 파라미터 값에 의한 전달 (Passed by value) Premitive 파라미터 : value 가 전달 [원시 타입] : B..

공부 자료 : 드림코딩 by 엘리 개발 환경 : visual studio code 언어 : js String 연산 Js에서도 + 사용 가능. 연산자 console.log(2**3); // 2의 3승 ++/-- 순서 다른 언어와 같다. 증감 연산자 x += y; // x = x + y x -= y // x = x - y 논리 연산자 || 와 && 를 사용한다. 여기서 코드적으로 중요한 부분은 || 의 경우 앞에서부터 검사하게 되는데 앞이 true가 나와버리면 어차피 전체 결과는 true로 반환된다. 즉 뒤의 2가지 검사는 하지 않고 반환하기 때문에 시간적으로 걸리는( 함수 등..) 을 앞에 넣어버리는 것 보다 빠르게 결과가 나오는 것을 앞에 두는 것이 효율적인 코드라고 할 수 있다. &&도 마찬가지로 한가..