내가해냄

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

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

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

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

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

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

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

인트로 오늘은 최근에 바빠서(?) 약 일주일간 열지 못한 딥다이브를 폈습니다. 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...