인트로실행 컨텍스트 내용 본 지도 오래됐고 스터디 발표 준비를 하기 위해서 실행 컨텍스트를 다시 한번 펴봅니다표라던가.. 뭐가 좀 많네요...실행 컨텍스트를 알면...실행 컨텍스트를 한 번 알면 자바스크립트가 왜 그렇게 동작하는 이해할 수 있습니다.식별자 바인딩, 호이스팅이 발생하는 이유, 클로저 동작방식, 비동기 처리 동작 방식... 등실행 컨텍스트에 대해 알고 나면 실행 컨텍스트를 몰랐을 때는 예측할 수 없었던 동작들을 예측할 수 있게 됩니다. 처음 읽었을 때는 정말 어지러웠지만 알고 나니 매우 유용한 친구였습니다.소스코드 타입에 따른 실행 컨텍스트 생성전역 코드- 전역에 정의된 함수, 클래스 등의 내부 코드는 포함X전역 실행 컨텍스트함수 코드- 함수 내부에 중첩된 함수, 클래스 등의 내부코드 포함X..

인트로Date를 생각보다 자주 사용하는데 로컬 시간대로 나타내는 걸 자꾸 까먹어서 아예 정리를 해버렸습니다.Date에 시간 뺏기는게 싫어요...앞으로 기억 안 날 때마다 바로 블로그로 달려와야겠어요.Date란?Date는 생성자 함수로 Date 객체를 생성합니다. 이 객체는 날짜와 시간을 나타내는 정수값을 가지게 되는데 이 값은 1970년 1월 1일 00:00:00(UTC) 기점으로 밀리초를 나타냅니다.  왜 1970년 1월 1일 기점이냐? 에 대한 재미있는 기사가 있으니 확인해 보세요.결론은 "응 그게 편할 것 같아서"라고 합니다. Unix Tick Tocks to a BillionIn the wee hours Sunday morning, Greenwich Mean Time, the Unix operat..

인트로클론 강의에서 jsconfig.json 파일을 사용하여 경로를 설정하는 내용이 나왔는데 두고두고 사용할 것 같아서 따로 포스팅을 결정했습니다. jsconfig.json란?우선 jsconfig.json 파일은 프로젝트의 루트에 있어야 합니다. package.json이랑 같은 디렉터리에 있어야 해요.디렉터리에 jsconfig.json 파일이 있으면 해당 디렉터리가 js프로젝트의 루트를 나타냅니다. 복잡한 프로젝트에서 workspace에 jsconfig.json을 한 개 이상 사용할 경우 하나의 프로젝트 코드가 다른 프로젝트의 IntelliSense(vscode 코드 편집 기능)로 사용되지 않게 할 수 있습니다.JS 언어 서비스는 JS 프로젝트의 모든 파일을 분석하여 그것에 대한 IntelliSense를..

인트로리액트 코드를 보는데 디스트럭처링 할당이 빗발치더라고요.빠르게 이해하려면 디스트럭처링 할당에 대해서도 조금 더 살펴볼 필요가 있겠다는 생각이 들었습니다. 바로 시작하겠습니다.디스트럭처링 할당이란?디스트럭처링 할당 즉 구조 분해 할당은 이터러블 또는 객체를 1개 이상의 변수에 개별적으로 할당하는 것을 말합니다.배열 디스트럭처링배열 디스트럭처링 할당의 경우 할당문의 우변이 이터러블이어야 하며 인덱스 순서대로 할당됩니다.const arr =['a', 'b', 2, 1];const [ one, two, ,numberOne] = arr;console.log(one); //aconsole.log(two); //bconsole.log(numberOne); //1심플한 코드로 변수에 배열 요소를 할당할 수 있습니..

인트로이 부분을 이해하려면 실행 컨텍스트를 알아야 합니다.클로저의 문지기가 실행 컨텍스트이기 때문에 저는 그때 실행 컨텍스트 공부를 했습니다.싱글스레드란 한 번에 하나의 태스크만 실행할 수 있는 방식을 말합니다. 자바스크립트 엔진은 단 하나의 실행 컨텍스트 스펙을 가집니다.이는 두 개 이상의 함수를 동시에 실행할 수 없다는 말과 같습니다. 현재 실행 중인 실행 컨텍스트를 제외한 모든 실행 컨텍스트는 대기 중인 테스크들입니다. 즉 , 자바스크립트 엔진은 싱글 스레드 방식으로 동작하는 것이죠. 따라서 오래 걸리는 태스크를 실행할 경우 블로킹(작업 중단)이 발생하게 됩니다. (바로 무한 존버 타이밍) function sleep(func, delay) { const delayUntil = Date.now(..

인트로프로토타입을 읽을 때는 노션에 살짝 쿵 정리하고 넘어갔는데 마침 부트캠프에서 프로토타입 내용을 다뤄 블로그에 써보려고 합니다. 프로토타입 교체 부분에서 머리를 한번 깬 경험이 있는데요 지금은 괜찮지 않을까요?객체지향프로그래밍부터자바스크립트는 객체 기반 프로그래밍 언어입니다.원시 타입을 제외한 나머지 값들이 모두 객체이니까.. 객체의 비중이 크죠. 객제지향 프로그래밍은 말 그대로 객체의 집합으로 프로그램을 표현하려는 것을 말합니다.현생에서 사물과 같은 실체는 특징이나 성질을 나타내는 속성을 가집니다.우린 이를 통해 실체를 인식하거나 구별합니다.사람은 이름, 성별, 나이, 생년월일 등 다양한 속성을 가집니다. 이러한 속성들로 다른 사람과 구별하여 인식할 수 있죠. 다양한 속성 중에서 프로그램에 필요한 ..

인트로고차 함수 map, filter, reduce에 대해서 공부했는데 그걸론 좀 부족한 것 같아 나머지 고차 함수들도 좀 알아보려고 합니다.  고차 함수란?함수를 인수로 전달받거나 함수를 반환하는 함수를 말합니다.자바스크립트에는 고차 함수가 많습니다. 특히 배열에 유용한 고차 함수가 정말 많습니다. 그럼 몇 가지를 살펴보죠. 참고로 제가 몰랐던 내용이 있거나 헷갈리는 고차 함수 위주로 정리하였기 때문에 빠진 함수가 있을 수 있습니다.Array.prototype.Sortsort 메서드는 배열의 요소를 정렬합니다. 이때 원본 배열을 직접 변경하며 정렬된 배열을 반환합니다.기본적으로 오름차순으로 요소를 정렬합니다. 한글도 마찬가지입니다.const abc = ['b', 'a', 'c'];abc.sort();c..

인트로오늘은 최근에 바빠서(?) 약 일주일간 열지 못한 딥다이브를 폈습니다.ES6 함수에 대한 내용입니다. 오랜만에 보니까 나쁘지 않네요. (당연함 저번에 DOM, Class 봤음) 바로 시작하겠습니다.ES6 이전의 모든 함수는 일반함수와 생성자 함수로서 호출이 가능했습니다.즉 모든 함수가 callable이며 constructor입니다. 이는 메서드(객체에 바인딩된 함수)도 마찬가지입니다.var obj = { x: 10, f: function () { return this.x;}};//메서드로 호출console.log(obj.f()); //10//일반 함수로 호출var bar = obj.f;console.log(bar()); //undefined//생성자 함수로 호출console.log(new obj.f..