자바라 잡혀라 자바스크립트

Module parse failed: Unexpected character '@' (1:0) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders > @tailwind base; | @tailwind components; | @tailwind utilities;  postcss-loadercss-loaderstyle-loader 셋 다 설치했는데 도대체 왜 안되는 것이냐... 진도가 안나가잖아...

SQL = Structured Query Language 데이터베이스, 주로 관계형 데이터베이스에서 데이터를 관리하기 위해 설계된 특수 목적의 프로그래밍 언어이다. 데이터베이스 시스템에서 데이터를 쿼리하고* 수정하는 데 사용된다. 대부분 관계형 데이터베이스관리시스템(RDBMS)에서 지원된다. *쿼리한다(?) : 데이터를 조작하거나 검색하도록 명령하는 것. (삽입,삭제,수정,검색) SQL문 종류 상암DMC를 생각하고 앞 뒤로 DL을 붙인다. (유튜버 홍달쌤 팁) DDL (Data Definition Language) : 데이터 정의어 - 데이터베이스 구조를 정의한다. ex) 테이블 생성, 테이블 삭제 - CREATE, ALTER, DROP => CAD외우기 DML (Data Manipulation Lang..

이벤트 루프는 비동기 함수를 태스크 큐로 보내고 콜스택이 비워지면 태스크큐에서 콜스택으로 이동한다고 한다. 콜스택에 먼저 스택이된 함수부터 실행이 되고 그 이후에 비동기 함수들이 실행된다는 뜻이다. 함수 실행순서를 1. 비동기 함수 2. 일반 함수 3. 일반 함수 로 실행해도 2->3->1 순으로 실행이 된다. // 지연시키는 함수 function delay(n){ for (let i = 0; i < n; i++) { console.log('delaying...'); } } // 콜스택 함수(일반함수) function a() { delay(1000) console.log('a is activated!'); } // 콜스택 함수(일반함수) function b() { console.log('b is acti..

나는 아직도 함수가 어렵다.. 함수의 호출방식에 따른 차이를 알아보자. a() , b() 함수가 있을 때, 함수의 호출방식에 따라 모두 다른 결과가 나오게 된다. 1. a(b) b가 전달된다, b함수 자체가 a()함수의 인자로 전달된다. a()함수 내에서 b함수가 필요한 시점에 호출해서 사용할 수 있다. // 결과화면 // I say a // undefined : a함수가 반환값이 없기 때문에 undefined가 출력된다. function a(){ console.log("I say a") } function b(){ console.log("You say b") } a(b) // 결과화면 // I say a // You say b : a함수의 결과값으로 b함수를 호출했기에, You say b가 나오게 된다..

차이점 : GPT씨 1. 문법적 차이 ES6 클래스: 클래스 선언은 class 키워드를 사용하여 정의됩니다. 클래스 내부에서 메서드는 화살표 함수가 아니라 일반 함수로 정의됩니다. 클래스는 클래스 몸체 안에 있는 메서드들을 포함하며, 클래스는 constructor 메서드를 통해 초기화됩니다. // ES6 클래스문법 class Person { constructor(name, age){ this.name = name; this.age = age; } introduce() { console.log(`Hello, My name is ${this.name} and I'm ${this.age} years old.`) } } const person = new Person('kim', 100); console.log(..

JavaScript 모듈 시스템은 코드를 여러 파일로 분할하여 관리하고 재사용할 수 있는 기능을 제공합니다. 모듈 시스템을 사용하면 코드의 구조화와 유지 보수가 용이해지며, 복잡한 애플리케이션의 개발 및 확장이 용이해집니다 ESM(ES module) 방식 - 일반적으로 프론트엔드 1. 자주 쓰는 코드(함수)를 module.js 파일에 작성한다. 2. 함수 이름 앞에 export를 작성한다. 3. 해당 함수를 사용할 js파일에 import를 한다. 4. 함수를 사용한다. //module.js 모듈파일 export function 진짜자주씀(a, b, c){ return (a + b + c) / 2; } export function 조금쓰는편(a, b){ return a * b; } // app.js, 모듈..

이벤트 버블링(Event Bubbling) - 버블이 폭발해서 올라간다 생각하자 이벤트 버블링은 이벤트가 발생한 요소에서 시작하여 최상위 요소까지 올라가는 과정을 의미합니다. 즉, 이벤트 버블링 단계에서 이벤트는 발생한 요소로부터 상위 요소로 이동합니다. 이벤트 버블링은 일반적으로 이벤트 리스너의 세 번째 인수로 false를 전달하여 활성화됩니다. // 이곳이 실행된다 여기는 리스트, 이벤트핸들러 // 여기 클릭시 이벤트 캡처링(Event Capturing) - 위에서 포착해서 사로잡는다 생각하자 이벤트 캡처링은 이벤트가 최상위 요소에서 시작하여 실제 대상 요소에 도달할 때까지 내려가는 과정을 의미합니다. 즉, 이벤트 캡처링 단계에서 이벤트는 최상위 요소에서 시작하여 하위 요소로 이동합니다. 이벤트 캡처..

GPT 소환 localStorage와 sessionStorage는 웹 브라우저에서 클라이언트 측 웹 애플리케이션에서 데이터를 저장하는 데 사용되는 웹 스토리지 메커니즘입니다. 이 두 가지는 목적과 수명에 따라 차이가 있습니다 데이터 수명: localStorage: 데이터는 브라우저를 닫아도 영구적으로 보존됩니다. 사용자가 명시적으로 지우거나 데이터를 저장한 웹 사이트가 데이터를 삭제할 때까지 데이터가 유지됩니다. sessionStorage: 데이터는 세션(session)이 유지되는 동안에만 유지됩니다. 브라우저 창이나 탭이 열려 있는 동안에는 데이터가 유지되지만, 브라우저 창이나 탭을 닫으면 데이터가 삭제됩니다. 공유 여부: localStorage: 동일한 도메인 내의 모든 창과 탭에서 공유됩니다. 즉,..

자바스크립트의 프로토타입 기반 상속을 왜 활용하는가? [[Prototype]] GPT상 코드 재사용성: 프로토타입 기반 상속을 사용하면 부모 객체의 속성과 메서드를 자식 객체에서 재사용할 수 있습니다. 이는 코드의 중복을 줄이고 유지보수를 쉽게 만듭니다. 동적인 구조: 자바스크립트의 프로토타입 기반 상속은 클래스 기반 상속보다 동적인 구조를 제공합니다. 객체의 프로토타입은 런타임에 동적으로 변경할 수 있으며, 이를 통해 객체의 동작을 유연하게 조정할 수 있습니다. 가볍고 유연한 객체 생성: 프로토타입 기반 상속은 클래스 기반 상속보다 더 가볍고 유연한 객체 생성을 가능하게 합니다. 객체를 생성하는 데 별도의 클래스 정의가 필요하지 않으며, 필요에 따라 동적으로 프로토타입을 변경할 수 있습니다. let a..

왜 메모리 관리, 성능최적화를 해야할까? 웹사이트를 사용하는 유저에게 답답함을 해소시켜 사용자 이탈을 막기 위함이다. A. 메모리 관리 -- 가비지 컬렉터(Garbage Collecter)에 대한 이해 자바스크립트는 가비지 컬렉터를 사용하여 사용하지 않는 메모리를 자동으로 확보한다. 가비지 컬렉터는 사용하지 않는 객체를 식별하고 제거한다. 메모리 누수의 일반적인 원인 1. 순환참조 순환 참조는 두 개 이상의 객체가 서로를 참조하여 가비지 컬렉터가 끊을 수 없는 순환을 생성할 때 발생 변수나 객체를 더 이상 사용하지 않을 때는 null 또는 undefined로 설정하여 해당 값에 대한 참조를 제거하고 가비지 컬렉터를 통해 메모리를 회수할 수 있다. let person1 = {}; let person2 = ..