짧은코딩

await을 남용한 것과 최적화한 예시 // setTimeout을 Promise로 만드는 법 function delayP(ms) { return new Promise((resolve, reject) => { setTimeout(resolve, ms); }); } async function a() { await delayP(3000); await delayP(6000); await delayP(9000); } // 토탈 18초 async function b() { const p1 = delayP(3000); // 3초 const p2 = delayP(6000); //6초 await Promise.allSettled([p1,p2]); // 6초 await delayP(9000); // 9초 } //토탈 15..

then, catch 반복하기 === try, catch 분리하기 Promise - catch는 앞부분을 다 책임진다! const p = new Promise( // 여기부터 (resolve, reject) => { console.log("제일 먼저"); setTimeout(() => { a = 5; console.log(a); resolve(a); }, 0); } // 여기까지 동기 ); console.log("딴짓"); p.then((result) => { console.log("result", result); }) .then(() => { //여기서 에러나면 }) .then(() => {}) .then(() => {}) .catch(() => { // 나머지 then 다 건너 뛰고 여기로 이동 })..

Promise 코드 let a = 2; const p = new Promise( // 여기부터 (resolve, reject) => { console.log("제일 먼저"); setTimeout(() => { a = 5; console.log(a); resolve(a); }, 0); } // 여기까지 동기 ); console.log("딴짓"); p.then((result) => { console.log("result", result); }); 출력 결과 코드 분석 -step1 let a = 2; const p = new Promise( // 여기부터 (resolve, reject) => { console.log("제일 먼저"); setTimeout(() => { a = 5; console.log(a); ..

비동기 비동기는 동시에 돌아가는 것이 아니다! 순서의 문제이다. 동기 코드 동기 코드는 "위 -> 아래", "왼쪽 -> 오른쪽"으로 실행 따라서 예측이 쉽다 비동기 코드 보이는 코드대로 실행되지 않음 다만 정해진 순서는 있다 한 번 비동기는 영원한 비동기 async/await, promise 등을 써도 동기로 만들 수 없다. 비동기를 동기로 바꾸려는 노력을 하지 말자 비동기 코드 분석 setTimeout(() => { console.log("a"); }, 0); setTimeout(() => { console.log("b"); }, 1000); setTimeout(() => { console.log("c"); }, 2000); (아래 글은 정확한 JS 스펙은 아니지만 99% 맞다, 스펙을 다 공부하려면 ..

Promise 프로미스는 내용이 실행은 되었지만 결과를 아직 반환하지 않은 객체 => 나중에 사용 가능 const condition = true; const promise = new Promise(()=> { // 이 if 문은 동기로 실행 if (condition){ resolve('성공'); } else { reject('실패'); } }); promise .then((message) => { console.log(message); }) .catch((error) => { console.error(error); }); new Promise() 안의 if 문은 동기로 실행 성공하든 실패하든 값을 promise에서 값을 가지고 있음 then, catch에서 값을 원할 때 꺼낼 수 있다. callback과..

분석 const x = true; let y = false; function a() { let a = 4; y = true; if (x) { let a = 3; for (let i = 0; i { return a + b; }; z(3, 5); -a()까지 호출된 호출 스택과 선언 지도 호출 스택 우선 anonymous(this=window)가 호출 스택에 들어감 a(this=window)가 호출 스택에 들어감 선언 지도 우선 a(fn)가 호이스팅 되어서 들어가고, 그다음으로 x(true), y(false) 선언 a(fn) 안에 a(4)가 선언, 이게..

zerocho.com 사이트에 들어가서 공지사항을 클릭했을 때 2번째 인자의 function이 아니라 addEventListener이 호출 됨 2번째 인자 function은 함수의 선언이지 호출된 적이 없다 그러면 function은 귀신이 와서 호출해주냐? 그렇다고 봐도 됨. 왜냐면 내가 모르는 코드가 호출해주기 때문 이런 경우의 this는 외워야한다. 왜냐하면 저 함수는 호출하는 부분을 우리가 볼 수 없기에 경험적으로 외워야 한다. 결국 저걸 만든 사람만이 알 수 있다. addEventListener를 구현해보면(추론) 실제 addEventListener는 아마 C++로 구현되어 있을 것이다. const header = { addEventListener: function(eventName, callba..

JS의 this는 다른 언어와 좀 다르다. console.log(this)를 하면 window가 나온다. 기본적으로 this는 window라고 생각하면된다. -함수 function a() { console.log(this); } a(); 함수에서도 this는 window가 나온다. globalThis JS에서는 window, Node에서는 global => 최근 스팩에서는 globalThis로 합쳐짐 window의 2가지 역할 브라우저 안의 모든 요소들이 소속된 객체로, 최상위에 있기에 어디서든 접근이 가능해서 '전역 객체'라고도 부른다. 일반적으로 우리가 열고 있는 브라우저의 창을 의미하고, 이 창을 제어하는 다양한 메서드를 제공한다. ex) window.innerWidth, window.innerHe..

Next는 브라우저에서 기본적으로 pre-rendering(사전 렌더링)을 한다. => pre-rendering은 Server에서 DOM 요소들을 Build 하여 HTML 문서를 렌더링 하는 것을 말한다. SSG SSG는 Static Site Generation 빌드 시 html에 데이터를 미리 담아서 파일을 만들고 접속하는 유저들에게 보여주는 방식 장점 이미 만들어진 html를 여러 사람들에게 보여주는 것 서버 부담이 적고 응답 시간이 빠름 보통 마케팅 페이지, 블로그 글 등 한번 만들고 변화가 적은 페이지에 적합함 단점 데이터가 바뀌면 다시 빌드해줘야 함 동적 컨텐츠를 사용하면 SSG는 좋지 않음 SSR이나 CSR을 사용하면 되는 거 아님? -SSR 서버 부하가 높아짐 -CSR 초기 로딩 느림 seo..

좋은 개발을 하려면 호이스팅을 하지 않는 것이 가장 좋다! 분석 코드 const x = "x"; console.log(z); var y = "hehe"; const z = () => {}; function c() { const y = "y"; console.log("c"); function b() { const z = "z"; console.log("b"); c(); } } function a() { const x = "x"; console.log("a"); } a(); c(); 이런 코드가 있을 때, 호이스팅 상황에서 어떻게 되는지 분석해보겠다. var const x = "x"; console.log(z); var y = "hehe"; 이런 코드가 호이스팅 되면 var y; const x = "x"; ..