개발 성장 일ブl

리액트를 하다가 너무 기본적인 문법이 헷갈렸다...예시로, onClick={handleClick} vs onClick={handleClick()} 함수 참조onClick={handleClick}버튼을 클릭할 때 실행할 함수를 넘기는 것쉽게하면, 이 함수는 나중에 필요할 때 사용할 거야~소괄호 없이 써야 버튼을 누를 때만 실행되도록 할 수 있음!함수 호출onClick={handleClick()}버튼을 클릭하기도 전에 실행하라는 것쉽게하면, 이 함수를 지금 바로 실행하라! function handleClick() { console.log("Button clicked!");}// 올바른 사용Click Me// 잘못된 사용Click Me // 즉시 실행돼버림

실행 컨텍스트 🛠️실행할 코드에 제공할 환경 정보들을 모아놓은 객체=>  쉬운말로, 자바스크립트가 코드를 잘 이해하고 실행할 수 있도록 도와주는 중요한 도구 실행 컨텍스트 구성요소1. Variable Environment현재 컨텍스트 내의 식별자들에 대한 정보 + 외부 환경 정보초기값을 유지구성 : environmentRecord + outer-EnvironmentReference2. Lexical Environment처음엔 Variable Environment와 같지만 변경 사항이 실시간으로 반영됨구성 : environmentRecord + outer-EnvironmentReference3. ThisBinding식별자가 바라봐야 할 대상 객체this로 지정된 객체가 저장(지정되지 않은 경우 : 전역 ..

✅17장 생성자 함수에 의한 객체 생성객체 리터럴에 의한 객체 생성 방식을 배웠다!(참고)👉가장 일반적이고 간단한 객체 생성 방식 [DeepDive]10~12장 객체 리터럴/원시 값과 객체의 비교/함수✅10장 객체 리터럴자바스크립트는 객체 기반의 언어이며, 자바스크립트를 이루고 있는 거의 모든것이 객체!객체란🤔 키(key)과 값(value)으로 구성된 프로퍼티(Property)들의 집합 *메서드 : 프로퍼bom-na.tistory.com이번엔 생성자 함수를 사용하여 객체를 생성하는 방식을 알아보쟈! Object 생성자 함수new 연산자와 함께 Object 생성자 함수를 호출하면 빈 객체를 생성하여 반환빈 객체를 생성한 이후 프로퍼티 또는 메서드를 추가하여 객체를 완성// 빈 객체의 생성var pers..

정규 표현식이란🤔 정규 표현식, 또는 정규식은 문자열에서 특정 문자 조합을 찾기 위한 패턴  자바스크립트에서는 정규 표현식도 객체로서 밑에 메서드 가능RegExp의 exec() , test()String의 match(), matchAll(), replace(), replaceAll(), search(), split()정규 표현식 만들기💫정규 표현식 리터럴 (주로 사용)정규 표현식이 코드가 실행될 때 바로 컴파일됨👉즉, 정규 표현식이 고정된 경우 성능이 더 좋음bbb가독성 굿특수 문자를 그 자체로 사용가능ex : \dconst regex = /pattern/;RegExp객체 생성자패턴을 동적으로 생성해야 할 때 유용👉예를 들어, 변수에 따라 정규 표현식을 생성해야 하는 경우에 사용문자열로 입력받기 ..

✅13장 스코프스코프란🤔식별자가 유효한 범위또는자바스크립트 엔진이 식별자를 검색할 때 사용하는 규칙*식별자 : 변수, 함수, 클래스의 이름 스코프는 자바스크립트를 포함한 모든 프로그래밍 언어의 기본적이며 🌟중요한 개념🌟👻 자바스크립트의 스코프는 다른 언어의 스코프와 구별되는 특징이 있음변수, 함수와 깊은 관련이 있음function add(x,y) { //매개변수는 함수 몸체 내부에서만 참조할 수 있다. //즉, 매개변수의 스코프(유효범위)는 함수 몸체 내부다. console.log(x,y); // 2 5 return x + y;}add(2,5);//매개변수는 함수 몸체 내부에서만 참조할 수 있다.console.log(x, y) // ReferenceError : x is not d..

✅10장 객체 리터럴자바스크립트는 객체 기반의 언어이며, 자바스크립트를 이루고 있는 거의 모든것이 객체!객체란🤔 키(key)과 값(value)으로 구성된 프로퍼티(Property)들의 집합 *메서드 : 프로퍼티를 참조하고 조작 할 수 있는 동작객체생성➕객체 리터럴중괄호를 사용하여 객체를 생성let person = { name: 'Lee', gender: 'male', sayHello: function () { console.log('Hi! My name is ' + this.name); }};Object 생성자 함수object 생성자를 사용하여 객체를 생성// 빈 객체의 생성let person = new Object();// 프로퍼티 추가person.name = 'Lee';person.ge..

✅7장 연산자🔸단항 산술 연산자x++; // 선할당 후증가 x--; // 선할당 후감소 ++x; // 선증가 후할당 --x; // 선감소 후할당🔸할당 연산자let x; x += 5 // x = x + 5 x -= 5 // x = x - 5🔸비교 연산자== 동등 비교 : 값이 같음=== 일치 비교 : 값,타입이 같음🔸삼항 조건 연산자🔸논리 연산자//논리합 연산자true || true; // truetrue || false; // truefalse || true; // truefalse || false; // false//논리곱 연산자true && true; // truetrue && false; // falsefalse && true; // falsefase && false // false//논리..

일반 함수에서의 this : 함수를 호출한 객체arrow함수에서의 this : 함수를 감싸는 상위 스코프//전역 thisconsole.log(this) // window{...}//엄격모드에서의 thisfunction f1() { "use strict"; return console.log(this);}f1(); // undefined//일반 함수에서의 thisfunction f2() { return console.log(this);}f2(); // window{...}//객체 메서드에서의 thisconst f3 = { name : "test", main : function(){ console.log(this) }}f3.main(); // {name: 'test', main: ƒ} , 함..

클로저란🤔MDN에서는 다음과 같이 정의했다A closure is the combination of a function bundled together (enclosed) with references to its surrounding state (the lexical environment).(클로저는 주변상태(렉시컬 환경)에 대한 참조와 함께 묶인(포함된) 함수의 조합이다.) 사실 말이 어려워서, 코어 자바스크립트에서 정의한 말이 더 쉽게 와닿는다.어떤 함수에서 선언한 변수를 참조하는 내부함수를 외부로 전달할 경우,함수의 실행 컨텍스트가 종료된 후에도 해당 변수가 사라지지 않는 현상 function outerFunc() { var x = 10; var innerFunc = function () { co..

자바스크립트는 명령형, 함수형, 프로토타입 기반 객체지향 프로그래밍을 지원하는 멀티 패러다임 프로그래밍 언어자바스크립트는 객체 기반의 프로그래밍 언어이며 자바스크립트를 이루고 있는 거의 "모든 것"이 객체(원시 타입을 제외한 나머지)Prototype 객체는 생성자 함수에 의해 생성된 각각의 객체에 공유 프로퍼티를 제공하기 위해 사용함모든 객체는 내부에 숨겨진 프로토타입을 갖음외부에서 직접 접근할 수 없지만, 생성자 함수의 prototype을 통해 접근 가능부모 객체의 프로토타입을 통해 자식 객체에 속성을 상속객체 간의 상속은 프로토타입 체인을 통해 연결메서드를 프로토타입에 정의하면, 모든 인스턴스가 공유하여 메모리를 절약프로토타입은 런타임에 수정할 수 있어, 객체의 메서드나 속성을 동적으로 추가하거나 변..