짧은코딩

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"; ..

스코프 체인 스코프 체인은 "함수에서 어떤 값에 접근이 가능한가 혹은 어떤 값에 접근이 불가능한가"이다. 블록("{}")이 기준이 된다. 함수 안에도 블록이 존재하며, 함수가 아닌 블록은 if, for, while, swtich 등이 있다. -참고 const a = () => ({}); 이 코드는 객체를 리턴하는 함수이다. 예시 const x = "x"; 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"); b(); } a(); c(); 위 코드는 b가 정의되어 있지 않다는 에러가 나온다..

코드 분석 이 코드에 대해서 호출 스택 분석을 해보겠다. 이렇게 선언을 제외한 함수 호출 할 때마다 호출스택에 넣어주고 함수 끝날 때마다 빼주면 된다. -개발자도구에서 호출 스택 보는 방법 브라우저의 콘솔에다가 내가 원하는 지점에 debugger라고 넣는다. 그러면 이렇게 호출 스택을 볼 수 있다. 또한 오른쪽 창의 "범위"가 스코프 부분이라 이것도 알 수 있다. 처음에 anonymous(익명)이 있는 이유는 파일 전체를 익명 함수로 치기 때문이다. *스코프 체인: 특정 함수에서 어떤 값에 접근할 수 있는지 -참고 const console = { log() { // 콘솔에 글자 적는 기능 }, }; const x = "x"; function c() { const y = "y"; console.log("c..