FrontEnd

1.SymbolSymbol은 ECMAScript 2015 (ES6)에서 도입된 새로운 원시 데이터 타입 중 하나입니다.Symbol은 주로 객체 속성의 고유한 식별자를 만들기 위해 사용됩니다. Symbol은 다른 데이터 타입과 달리 고유하고 변경 불가능한 값이며, 동일한 설명(문자열)을 사용해 생성된 Symbol이라도 서로 다른 고유 값을 가집니다.const mySymbol = Symbol();   2.Symbol 특징2-1.고유성Symbol은 항상 고유한 값을 가지므로, 같은 설명을 사용하여 생성된 Symbol도 서로 다릅니다.const sym1 = Symbol('description');const sym2 = Symbol('description');console.log(sym1 === sym2); //..

1.모듈JavaScript 모듈은 코드의 특정 기능을 독립된 단위로 캡슐화한 파일 또는 파일의 일부를 의미합니다. 모듈은 다른 코드와 독립적으로 작성되고 테스트되며, 필요에 따라 가져와서 사용할 수 있습니다. 이를 통해 코드의 재사용성과 유지 보수성을 높이고, 코드의 구조를 체계적으로 관리할 수 있습니다.   2. 사용이유2-1.독립성모듈은 독립된 파일로 존재하며, 각 모듈은 자체적인 스코프를 가집니다. 따라서 변수 이름이나 함수 이름이 겹치더라도 충돌이 발생하지 않습니다.  2-2.재사용성한 번 작성한 모듈은 여러 프로젝트에서 재사용할 수 있습니다. 2-3.캡슐화모듈 내의 구현 세부 사항은 외부에 노출되지 않으며, 오직 필요한 인터페이스만 공개됩니다.  2-4.의존성 관리모듈은 다른 모듈을 가져와서 사..

1. 클래스class Person { // constructor(생성자) constructor(name) { this._name = name; } //메소드 sayHi() { console.log(`Hi! ${this._name}`); }}    2.인스턴스 생성new 연산자와 함께 클래스 이름을 호출한다.// 인스턴스 생성const human = new Person('Park');human.sayHi();    3.생성자this는 클래스가 생성할 인스턴스, _name은 클래스 필드입니다.constructor(name) { this._name = name;}  4.클래스 필드클래스 몸체에는 메소드만 선언할 수 있다. constructor 내부에서..

1. 프로퍼티 축약프로퍼티 값으로 변수를 사용하는 경우, 프로퍼티 이름을 생략할 수 있다.let x = 1, y = 2;// ES5var obj = { x: x, y: y};// ES6const obj = { x, y };   2.프로퍼티 키 동적 생성 객체 리터럴 내부에서 프로퍼티 키를 동적으로 생성할 수 있다.let i = 0;// ES5obj2[++i] = i;obj2[++i] = i;obj2[++i] = i;// ES6const obj1 ={ [`${++i}`]:i, [`${++i}`]:i, [`${++i}`]:i,}    3.메소드 축약 표현메소드를 선언할 때, function 키워드를 생략한 축약 표현을 사용할 수 있다.var obj4 = { // ES5 ..

1.완성 미리보기https://asa9874.github.io/Animation-quiz-game/    2.HTML 요소.introduce: 페이지의 소개 섹션을 포함하는 컨테이너입니다. 퀴즈의 기본 정보를 제공합니다..introducetitle: 퀴즈의 제목을 표시하는 요소로, "애니메이션 퀴즈!"라는 텍스트를 보여줍니다..introducecontent: 퀴즈에 대한 설명을 포함하는 요소입니다. 퀴즈의 목적이나 규칙을 안내합니다..introduceimage: 애니메이션과 관련된 이미지를 표시하는 요소입니다. 소개 이미지로 사용됩니다..startbutton: 퀴즈를 시작하는 버튼입니다. 사용자가 클릭하여 게임을 시작할 수 있도록 합니다..backgroundimg: 배경 이미지를 표시할 수 있는 빈 컨테..

vite.config.js프로젝트 루트 폴더에 vite.config.js파일을 생성하여 다음과같이 작성하면 바닐라 Javascript도 React처럼 base 주소를 설정할수있다.  import { defineConfig } from 'vite';export default defineConfig({base: '/vite-project/', // GitHub Pages의 서브 디렉토리 경로});

1.리액트 설치Node.js의 패키지 매니저인 npm을 사용하여 create-react-app이라는 도구를 전역(global)으로 설치한다.$npm install -g create-react-app      2.리액트 앱 만들기리액트 앱을 만든다. $create-react-app '앱이름'      3.실행하기리액트 앱을 실행한다.npm start

1.React란?오픈 소스 자바스크립트 라이브러리로, 사용자 인터페이스(UI)를 구축하기 위해 사용됩니다. 리액트는 컴포넌트 기반 구조를 통해 복잡한 UI를 효율적으로 구성하고 관리할 수 있게 해줍니다.      2.React 특징2-1.컴포넌트 기반 구조리액트는 애플리케이션을 작은, 재사용 가능한 컴포넌트로 나누어 개발할 수 있게 합니다.각 컴포넌트는 독립적이고, 자신만의 상태(state)와 생명 주기(lifecycle)를 가집니다.   2-2.가상 DOM(Virtual DOM)리액트는 실제 DOM 대신 가상 DOM을 사용하여 빠른 UI 업데이트를 제공합니다. 변경 사항이 발생하면 가상 DOM이 변경된 부분을 찾아 실제 DOM에 최소한의 업데이트를 적용합니다.이는 성능 향상에 큰 도움을 줍니다.  2-..