🥕 나머지 매개변수 함수 정의 방법과 상관없이 함수에 넘겨주는 인수의 개수엔 제약이 없다. 여분의 매개변수는 그 값들을 담을 배열 이름을 마침표 세 개 ... 뒤에 붙여주면 함수 선언부에 포함시킬 수 있습니다. 이때 마침표 세 개 ...는 남아있는 매개변수들을 한데 모아 배열에 집어넣어라. 는 것을 의미합니다. function myFun(a, b, ...manyMoreArgs) { console.log("a", a); console.log("b", b); console.log("manyMoreArgs", manyMoreArgs); } myFun("one", "two", "three", "four", "five", "six"); // 콘솔 출력: // a, one // b, two // manyMoreAr..
Programming
🥕 클로저 사전적 의미 Closure = 폐쇄 함수가 선언될 당시의 주변 환경과 같이 갇히는 것. -> 또 다른 말로, 함수가 속한 렉시컬 스코프를 기억하며, 함수가 렉시컬 스코프 밖에서 실행될 때도 이 스코프에 접근할 수 있게 해주는 기능 렉시컬 스코프: 함수를 어디서 호출하는지가 아니라 *어디에 선언하였는지에 따라 결정되는 것**을 말한다. 즉, 함수를 어디서 선언하였는지에 따라 상위 스코프를 결정한다는 뜻이며, 가장 중요한 점은 함수의 호출이 아니라 함수의 선언에 따라 결정된다는 점이다. 다른 말로, 정적 스코프(Static scope)라 부르기도 한다. function makeFunc() { const word = "Hello" const name = "Elice"; function display..
🥕 SPA Single Page Application (싱글 페이지 어플리케이션) 의 약자로써, 말 그대로, 페이지가 1개인 어플리케이션을 의미합니다. SPA는 브라우저에 최초에 한번 페이지 전체를 로드하고, 이후부터는 특정 부분만 Ajax를 통해 데이터를 바인딩하는 방식이며, 웹 사이트의 전체 페이지를 하나의 페이지에 담아 동적으로 화면을 바꿔가며 표현합니다. 주로 React-router에서 Routing시에 필수적으로 사용되는 기능입니다. 🥕 과거의 웹 사이트 전통적인 웹 사이트는 지금보다 문서 하나에 전달되는 파일의 용량이 적었습니다. 그래서 어떤 요소를 한번 클릭하면 완전히 새로운 페이지를 서버에서 전송해 주곤 했습니다. 그래도 상관 없었지만 현대에 이르러 점차 웹 사이트가 고도화됨에 따라 한 페..
🥕 Prototype 자바스크립트는 프로토타입기반의 객체지향언어입니다. 클래스 기반 객체지향 프로그래밍 언어는 객체 생성 이전에 클래스를 정의하고 이를 통해 객체(인스턴스)를 생성합니다. 하지만 프로토타입 기반 객체지향 프로그래밍 언어는 클래스 없이도 객체를 생성할 수 있습니다. 객체의 생성 객체를 생성하는 방법은 2가지가 있습니다. var object1 = { }; // 리터럴 이용 var object2 = new Object(); // 생성자 이용 프로토타입 객체 생성자 함수 정의 function Person(first, last, age, gender, interests) { // 속성과 메소드 정의 this.first = first; this.last = last; //... } 인스턴스 생성 v..
🥕 Hello React React는 UI를 만들기 위한 JavaScript 라이브러리입니다. React는 스스로 상태를 관리하는 캡슐화된 컴포넌트를 조합해 복잡한 UI를 만들 수 있도록 지원하며, 데이터가 변경됨에 따라 적절한 컴포넌트만 효율적으로 갱신하고 렌더링합니다. 🥕 React의 원리, 특징이 무엇인가요? React는 상태 변화에 따른 UI 변경점을 결정하기 위해 재조정(Reconciliation)이라는 알고리즘을 사용하며, 이를 구현하기 위해 Virtual DOM이라는 패턴을 사용하였습니다. 또한 React 16부터 React Fiber엔진을 사용하여, 리액트의 Reconciler를 정비하였습니다. React의 큰 특징으로는 Virtual DOM 개념과, 단방향 데이터 바인딩이 있습니다. Vi..
🥕 스코프 현재 실행되는 컨텍스트를 말한다. 여기서 컨텍스트는 값과 표현식이 **"표현"**되거나 참조 될 수 있음을 의미한다. 만약 변수 또는 다른 표현식이 "해당 스코프"내에 있지 않다면 사용할 수 없다. 스코프는 또한 계층적인 구조를 가지기 때문에 하위 스코프는 상위 스코프에 접근할 수 있지만 반대는 불가하다. 코드에서의 스코프는 변수에 접근할 수 있는 범위라고 보면 된다. 자바스크립트의 스코프는 크게 전역 스코프(Global Scope)와 지역 스코프(Local Scope)로 나눌 수 있다. 함수 는 JavaScript 에서 클로저 역할을 하기 때문에 스코프를 생성하므로 함수 내에 정의된 변수는 외부 함수나 다른 함수 내에서는 접근 할 수 없다. 예를 들어 다음과 같은 상황은 유효하지 않다. 지역..
🥕 동기 처리와 비동기 처리 자바스크립트 엔진은 단 하나의 실행 컨텍스트 스택을 갖는다. 즉, 자바스크립트 엔진은 한 번에 하나의 테스크만 실행할 수 있는 싱글 스레드방식으로 동작한다. 싱글 스레드 방식은 한 번에 하나의 테스크만 실행할 수 있기에 시간이 걸리는 테스크를 실행하는 경우 블로킹(blocking, 작업 중단)이 발생한다. 싱글 스레드는 프로세스 내에서 하나의 메인스레드만으로 작업을 처리한다 // sleep 함수는 일정 시간(delay)이 경과한 이후에 콜백 함수(func)를 호출한다. function sleep(func, delay) { // Date.now()는 현재 시간을 숫자(ms)로 반환한다. const delayUntil = Date.now() + delay; // 현재 시간에 de..
🥕 class 자바스크립트에서 클래스는함수의 한 종류입니다. 혹자는 자바스크립트의 클래스를 문법 설탕에 불과하다고 말하지만 함수와는 중요한 차이가 몇 가지 있습니다. 클래스는 상속을 지원하는extends와 super 키워드를 제공합니다. 하지만 생성자 함수는 extends와 super 키워드를 지원하지 않습니다. 클래스는호이스팅이 발생하지 않는 것처럼 동작합니다. 하지만 함수 선언문으로 정의된 생성자 함수는 함수 호이스팅이, 함수 표현식으로 정의한 생성자 함수는 변수 호이스팅이 발생합니다. class로 만든 함수에는 특수 내부 프로퍼티인 [[IsClassConstructor]]: true가 붙습니다. 따라서new와 함께 호출하지 않으면 에러가 발생합니다. 또한 클래스에 정의된 메서드는 열거할 수 없으며,..
