YoonStudyNote

사용자가 유튜브나 페이스북, 네이버에 들어가보면 온갖 영상들, 글들, 사진들을 볼 수 있습니다. 이것은 사용자의 컴퓨터에 들어있는게 아니죠? 다른 어딘가에, 우리가 '서버'라고 부르는 어떤 컴퓨터에 들어있는겁니다. 그렇습니다! 서버도 여러분의 노트북처럼 그냥 컴퓨터입니다. 사실, 서버라는 말은 '역할'의 개념입니다. 즉, 한 컴퓨터가 네트워크로 연결된 다른 하나, 또는 그 이상의 컴퓨터들에게 뭔가를 해주면 이를테면, 저장된 글과 사진들을 보여주거나 반대로, 이것들을 업로드받아와서 보관해주거나 한컴퓨터가 톡을 보내면 다른 컴퓨터에 알림을 보내거나 위치와 목적지를 받아서 가는길과 소요시간을 계산해주거나 여럿이 참여할 수 있는 게임을 열어주거나 해주는 그 serve 해주는 컴퓨터가 server가 되는겁니다. ..

1. HTTPS(Hyper-Text-Transfer-Protocol-Secure)를 사용하는 이유가 뭔가요? 예전에는 HTTP가 많았지만 요즘 공신력 있는 사이트들은 거의 전부 HTTPS를 사용하는걸 보실수 있을거에요. 지금 HTTPS를 사용하는 이유는, 기존의 HTTP 사이트보다 안전하기 때문입니다. 크게 2가지로부터 안전합니다. 첫번째, 내가 어떤 웹사이트에 보내는 정보를 다른 누군가 훔쳐보지 못하게 합니다. 만약 그냥 HTTP로 보내면 이 암호가 입력한 텍스트 그대로, 누구든 알아볼 수 있는 형식으로 보내진다. 그래서 누군가가 이 정보를 중간에 들여다 본다면 그 누군가는 이제 여러분의 아이디와 비밀번호를 알게 되는겁니다. 일반적으로 사이트들, 앱들에 같은 아이디와 비밀번호를 설정하니까 사실상 사용자..

이것들은 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..

동기는 순차적으로 일을끝내는 방식이다. 비동기는 엄청 효율적으로 작동을 한다. 비동기는 쓰레드나 프로세스가 여럿이 돌고 있는거라는 뜻이다. 즉 멀티테스킹을 하는 코드를 짜는것이다. 궁금증: 자바스크립트는 쓰레드가 하나만 돌아간다고 배웠는데 어떻게 그런 비동기 작업이 되는것인가? 자바스크립트는 웹 브라우저나 Node.js의 자바스크립트 엔진에서 실행된다. 이 엔진에는 자바스크립트를 돌리는 하나의 쓰레드, 자바스크립트 함수 전용 특급 선로가 있다. 궁금증: 선로라면 먼저 들어간 게 먼저나오는 큐 형태인데, 함수는 나중에 넣은걸 먼저 꺼내는 스택으로 처리되는거 아닌가? 다른 포함 레벨의 함수들이 처리되는 순서는 역순이다. 하지만 같은 포함 레벨에서의 함수들은 순서대로 처리된다. 그래서 이해하기 쉽도록 같은 레..

ex) fulfilled 되거나 rejected 된 후에 최종적으로 실행할 것이 있다면, .finally()를 설정하고, 함수를 인자로 넣는다. function p(){ return new Promise ((resolve, reject)=>{ /* pending */ setTimeout(()=>{ reject(new Error('bad')); /* fulfilled */ }, 1000); }); } p() .then((message)=>{ console.log('1000ms 후에 fullfiled 된다.', message); }) .catch((error)=>{ console.log('1000ms 후에 rejected 된다.', error); }) .finally(()=>{ console.log('end..

비동기적인 상황에서 코드를 좀 더 명확하게 표현하고 실행하도록 만들 수 있다. 1. ES6 부터 Javascript의 표준 내장 객체로 추가 되었다. ES6 를 지원하는 브라우저나 Node.js 에서 전역에 있는 Promise 를 확인할 수 있다. 2. 생성자를 통해서 프로미스 객체를 만들 수 있다. 생성자의 인자로 executor 라는 함수를 이용한다. 3. executor 함수는 resolve 와 rejcect를 인자로 가진다. (resolve, reject) -> {...} resolve 와 reject는 함수이다. resolve(), reject() 4. 생성자를 통해서 프로미스 객체를 만드는 순간 pending(대기) 상태라고 한다. 5. executor 함수 인자 중 하나인 resolve 함수..