기록

https://youtu.be/QME8w1zV82g memo 조금 더 복잡한 코드를 가지고 콜 스택 & 선언 맵을 그리면서 코드 분석하기

https://jh-7.tistory.com/9 CommonJS와 ES6의 모듈(module) 시스템 먼저 자바스크립트의 모듈시스템에 대해 설명하자면 기존에는 html 파일에서 태그를 이용하여 필요한 자바스크립트 파일들을 불러왔다. 이러한 방식에는 큰 문제가 있었는데 html 파일에서 불러 jh-7.tistory.com 추가 정리 필요

2-1 프로미스의 최고 장점을 아십니까 https://youtu.be/0f-jNhnN0Qc "프로미스는 결과값을 나중에 쓸 수 있다" call back setTimeout(() => { console.log('a'); }, 1000); 위 코드는 1초만 지나면 () => {console.log('a');}가 반드시 즉시 실행됨 (코드 분리 불가능. 강제적으로 즉시 실행) 콜백함수의 단점 결과값을 바로 받아야 한다. 코드 가독성이 떨어진다. 콜백이라고 꼭 비동기가 아니다. 비동기콜백/동기콜백 비동기콜백의 대표적인 것 setTimeout Promise const promise = new Promise((resolve, reject) => { setTimeout(() => { resolve(); }, 1000..

this this는 함수가 호출될 때 결정된다! -> 비동기에서도 마찬가지 this는 함수가 호출될 때 호출 방식에 따라 정해진다.(동적) 1. JS에서 this는 기본적으로 window이다.(브라우저에서) - window가 아닌 경우는 다음 2~4번과 같다. - Node.js에서는 global - 최근에는 브라우저, 노드 모두 globalThis로 통합됨 console.log(this); // window function a() { 'use strict'; console.log(this); } a(); // undefined 'use strict'; 가 있으면 window가 아닌 undefined 2. 객체의 메서드가 호출될 때, 해당 메서드를 호출한 객체에 바인딩 - 단, 반드시 .앞 객체에 바인딩된..

호출과 선언을 구분하라 호출스택 참고로 console.log()는 다음과 같은 코드가 있다고 생각하면 됨 const console = { log() { // 콘솔에 글자 적는 기능 }, }; 호출스택: 함수의 호출과 동시에 스택에 쌓임 스코프체인: 함수의 선언으로 생기는 것. 블록 안에서 어떠한 값에 접근이 가능한지/불가능한지 const x = 'x'; function c() { const y = 'y'; console.log('c'); } function a() { const x = 'x'; console.log('a'); function b() { const z = 'z'; console.log('b'); c(); } b(); } a(); // a b c c(); // c // a b c c 여기서 ..

코드가 실행되기 전에 어떻게 돌아갈지 정확하게 알기 위해 다음 강의를 듣고 정리한 내용 출처: https://youtu.be/NS1cIsWlFGI 1. 함수와 함수 호출 // 함수 선언 const add = (a, b) => a + b; console.log(add(3, 5)); // 8 function calculator(func, a, b) { return func(a, b); } console.log(calculator(add, 3, 5)); // 8 // func 파라미터 자리에 함수 호출이 아니라 함수를 넣어야 함 // 만약 헷갈린다면, 머릿 속으로 함수 호출을 넣었을 때, 그 함수 호출 넣은 자리에 그 함수 리턴값을 넣어보면 됨 // 그 함수의 리턴값이 없으면 함수 호출 자리에 undefine..

JSON 데이터를 주고 받을 때 쓸 수 있는 간단한 파일 포맷 프로그래밍 언어, 플랫폼에 관계없이 쓸 수 있음 데이터를 서버와 주고 받을 때 직렬화 함. serialization 대부분 언어들이 JSON으로 serialize된 object를 다시 그 언어의 특징에 맞게 object로 변환하고, object를 다시 JSON으로 serialize하는 것을 지원해줌. 혹은 외부 라이브러리를 통해 변환함. 직렬화 JSON.stringify(): object -> string(JSON) 역직렬화 JSON.parse(): string(JSON) -> object web api 브라우저 api에서 제공하는 web api 브라우저 api의 종류 DOM API Network API Graphics API Storage ..

import 할 때 { } 붙는 것과 안 붙는 것의 차이? export default 인 것은 {} 없이 import 할 수 있음 default 아닌 것들은 {} 해서 import 해야 함

그냥 공부 집중용 필사... 프로젝트에 들어가기 앞서 관련 개념 정리. 5.32 동기식 처리 모델 vs 비동기식 처리 모델 동기식 처리 모델은 태스크를 직렬적으로 수행함. 순차적으로! 그래서 어떤 작업이 수행 중이면 그 작업이 끝날 때까지 블로킹(작업중단) 됨 비동기식 처리 모델은 병렬적으로 태스크를 수행함. 태스크가 종료되지 않은 상태라도 대기하지 않고 다음 태스크를 실행함! 논 블로킹!! 자바스크립트의 대부분 DOM 이벤트 핸들러와 Timer 함수, Ajax 요청은 비동기식 처리 모델로 동작함. function func1() { console.log('func1'); func2(); } function func2() { setTimeout(function() { console.log('func2');..

드림코딩 쇼핑몰 미니게임 클론코딩을 다시 정리해보자. 1. data.json은 기본적으로 객체형이지! 그리고 그 객체 안에서 각 속성들은 속성값을 배열로 갖는다.(이 속성값이 데이터임) 그리고 그 배열 안에 담긴 데이터들은 객체형태이다. 즉, 객체 -> 배열 -> 객체 그러니까 { 데이터명 : [ {"name": "Mike"}, {"name": "Jane"}, ... ] } 이렇게!!! JSON.stringify()를 해서 서버로 보내고, JSON.parse() 해서 받아옴. function loadItems() { return fetch("./data/data.json") .then((response) => response.json()) .then((json) => json.items); } 2. fe..