YoonStudyNote

1. 한 배열안에 다른종류의 자료형이 들어가도 됩니다. const array = [1,'blabla', {}, [13]]; console.log(array); //출력값 [ 1, 'blabla', {}, [ 13 ] ] 2. 객체로 이루어진 배열을 만들 수 있습니다. const object = [ {name: '멍멍이'}, {name: '야옹이'} ]; console.log(object); //출력값 [ { name: '멍멍이' }, { name: '야옹이' } ] 3. 새로운항목 추가할때 push를 이용합니다.(내장함수입니다.) const object = [ {name: '멍멍이'}, {name: '야옹이'} ]; object.push({ name:'멍뭉이' }); console.log(object);..

1. Get 함수 const numbers = { a: 1, b: 2, get sum() { console.log("sum 함수가 실행됩니다!"); return this.a + this.b; } }; console.log(numbers.sum); numbers.b = 5; console.log(numbers.sum); //출력값 sum 함수가 실행됩니다! 3 sum 함수가 실행됩니다! 6 2. Set함수 변수앞에 언더바를 붙힌 이유는 set함수와 겹치지 않기 위해서 만들었습니다. const dog = { _name: "멍멍이", set name(value) { console.log("이름이 바뀝니다."); this._name = value; } }; console.log(dog._name); dog.na..

총 3가지 방법이 있습니다. 1. say: function say() const dog = { name: "멍멍이", sound: "멍멍!", say: function say() { console.log(this.sound); } }; dog.say(); 2. say: function () const dog = { name: "멍멍이", sound: "멍멍!", say: function() { console.log(this.sound); } }; dog.say(); 3. say() const dog = { name: "멍멍이", sound: "멍멍!", say() { console.log(this.sound); } }; dog.say(); **주의점!** 화살표함수를 사용하면 작동이 되지 않습니다. co..

==의 특징 타입을 비교하지 않는다. const a = 1; const b = '1'; const equals = a==b; console.log(equals) /*결과값*/ true const a = flase; const b = 0; const equals = a==b; console.log(equals) /*결과값*/ true const a = true; const b = 1; const equals = a==b; console.log(equals) /*결과값*/ true const a = null; const b = undefined; const equals = a==b; console.log(equals) /*결과값*/ true 이와같이 값이 다른데 타입을 검사하지 않기 때문에 결과가 true로..

null이란? 아무것도 없다는 뜻이다. undefined란? 아직 정해진것이 없다. 즉, 선언된것은 있는데 아직 값이 설정되지 않았다는 뜻이다.

이것들은 SPA 프론트엔드 프레임워크입니다. 질문: 왜 Augular, React, Vue가 나오게 되었나요? 강력한 MVC 웹 프레임워크들이 등장하고 발전하면서 우리는 편리하고 빠르게 웹사이트를 개발할 수 있게 되었습니다. 하지만 기술이 발달해서 어떤 필요를 충족하고 나면 또 다른 수요와 해결과제가 생기기 마련입니다. 기존 MVC 웹이 가졌던 아쉬움들 중에 두가지를 살펴보겠습니다. 첫번째, 오래된 웹사이트일수록 이런 사용자 경험이 많을거에요. 이것저것 많이 있는 웹사이트에서 한 게시글을 읽고 내용이 마음에 들어서 '좋아요'를 눌렀는데 '좋아요' 하나 업데이트 한다고 화면이 깜빡하면서 화면전체가 새로 로딩되는 현상을 많이 보셨을 겁니다. 이런 현상이 일어나는 이유는 일단 서버입장을 봐야합니다. 사용자가 ..

우선 프로젝트를 하려면 서버로부터 데이터를 가져올 수 있어야한다. Login할때 POST = https://api,marktube.tv/v1.me Body -{ email, password } 내정보 가져오기 GET = https://api.marktube.tv/v1/me Request Headers -Authorization: 로그인할때 받았던 토큰 책 목록 가져오기 Get Request Headers Authorization: 토큰값 책 정보 가져오기 Get Request Headers Authorization: 토큰값 책 추가하기 POST Request Headers Authorization: 토큰값 책 수정하기 PATCH = 북아이디를 추가해서 처리한다 Request Headers Authoriz..

1. 연속되는 Promise function p(ms) { return new Promise((resolve, reject) => { setTimeout(() => { resolve(ms); //reject(new Error('reason')) }, ms) }); } p(1000) .then(()=>p(1000)) .then(()=>p(1000)) .then(()=>{ console.log('3000ms 후에 실행'); }); 다음소스코드와 같이 체인 형식으로 되어있다. 2. 연속되는 async await function p(ms) { return new Promise((resolve, reject) => { setTimeout(() => { resolve(ms); //reject(new Error('r..

Async-Await는 Promise를 기반으로 작동이 된다. 그러기 때문에 Promise를 확실히 공부하고 돌아오는걸 추천한다. ex) Promise 객체를 리턴하는 함수 function p(ms) { return new Promise((resolve, reject) => { setTimeout(() => { resolve(ms); }, ms) }); } ex) Promise 객체를 이용해서 비동기 로직을 수행할 때 p(1000).then(ms=>{ console.log(`${ms} ms후에 실행 된다.`); }); ex) Promise 객체를 리턴하는 함수를 await로 호출하는 방법 const ms = await p(1000); console.log(`${ms} ms후에 실행 된다.`); --> a..

ex) value가 프로미스 객체인지 아닌지 알 수 없는 경우, 사용하면 연결된 then 메서드를 실행한다. value가 프로미스 객체면, resolve된 then 메서드를 실행한다. value가 프로미스 객체가 아니면, value 를 인자로 보내면서 then 메서드를 실행한다. Promise.resolve(new Promise((resolve, reject) => { setTimeout(() => { resolve('haha'); }, 1000); }), ).then((data) => { console.log('프로미스 객체인 경우, resolve 된 결과를 받아 then이 실행된다.', data); }); Promise.resolve('bar').then(data => { console.log('th..