Ordinary Day

JavaScript _ 다차원 배열

JavaScript 배열은 다차원 배열(Multidimensional Array)을 지원합니다. 다차원 배열이란 배열 안에 배열이 요소로 포함된 구조를 의미합니다. 가장 흔히 사용되는 형태는 2차원 배열과 3차원 배열입니다. 이러한 배열은 데이터를 행렬, 표, 그래프 등으로 표현할 때 자주 사용됩니다.  2차원 배열 (2D Array)배열의 요소가 배열인 구조입니다.행(Row)과 열(Column) 형태로 데이터를 저장합니다.주로 테이블, 행렬, 게임 보드, 지도 등을 표현할 때 사용합니다.const matrix = [    [1, 2, 3],    [4, 5, 6],    [7, 8, 9]];console.log(matrix[0][0]);    // 1 (첫번째 행, 첫번째 열)console.log(ma..

JavaScript _ 프로토타입 (Prototype)

JavaScript는 프로토타입 기반(Prototype-based) 언어입니다. 객체 지향 언어이지만, 클래스 기반 언어인 Java, C++ 등과 다르게 프로토타입 체인(Prototype chain)을 통해 상속을 구현합니다. 모든 객체는 자신의 부모 역할을 하는 프로토타입 객체(Prototype object)를 참조하며, 이 프로토타입 객체를 통해 다른 객체로부터 속성과 메서드를 상속받습니다.  프로토타입의 기본 개념JavaScript의 모든 객체는 __proto__라는 숨겨진 링크를 가지고 있으며, 이를 통해 다른 객체의 프로토타입을 참조합니다.객체의 프로토타입은 prototype이라는 특수한 속성을 통해 상속 메서드를 제공합니다.  객체 생성과 프로토타입 연결function Player(name, ..

export default는 JavaScript ES6 모듈 시스템의 문법으로, 모듈에서 기본적으로 하나의 값만 내보낼 수 있도록 하는 방식입니다. React에서는 컴포넌트, 함수, 클래스 등을 export default를 통해 외부 모듈로 내보내고 import 키워드를 통해 다른 파일에서 불러와 사용할 수 있습니다. React 프로젝트에서는 주로 기본 컴포넌트를 내보낼 때 export default를 사용하여 직관적이고 간단한 import 문법을 제공합니다.  export default의 기본 사용법export default를 사용하면 모듈을 가져올 때 임의의 이름으로 import 할 수 있습니다.// Button.jsfunction Button() {    return Click here;}expor..

React 앱에서 특정 커스텀 폰트를 앱 전반에 걸쳐 기본 폰트(Default Font)로 설정하기 위해서는 @font-face를 사용하여 폰트를 등록하고, body, html, *를 사용하여 모든 요소에 일괄적으로 적용하면 됩니다.  폰트 파일 준비src 폴더 내에 fonts 라는 폴더를 생성fonts 폴더에 추가하고자 하는 폰트 파일을 저장 (.ttf) @font-face 설정index.css 파일에 @font-face 규칙을 추가하여 폰트 등록html, body, * 선택자를 사용하여 모든 요소에 기본 폰트로 적용 가능sans-serif는 폰트가 로드되지 않았을 때 대체될 폰트/* index.css */// 폰트 파일명이 custom.ttf 라고 가정@font-face {    font-family..

JavaScript에서는 배열에 새로운 항목을 추가하면서 기존 배열의 내용을 유지하려면 스프레드 연산자(...)를 사용하는 것이 가장 간단하고 직관적입니다. 이 연산자는 배열이나 객체를 복사하거나, 결합하거나, 새로운 배열을 생성하는 데 자주 사용됩니다. 배열 조작 시 불변성(immutability)을 유지하며 새로운 배열을 만들어 작업할 수 있습니다.  스프레드 연산자(...)란?스프레드 연산자는 배열이나 객체의 모든 항목 또는 속성을 확장하여 새로운 배열이나 객체를 만드는 문법입니다.배열의 모든 요소를 펼칩니다.새로운 요소를 추가하거나 기존 요소를 조합하여 새로운 배열을 생성할 수 있습니다. 배열에 새로운 항목을 추가하기const originalArray = [1, 2, 3];// 배열의 시작에 항목..

JavaScript에서 배열은 기본적으로 단일 타입 배열(single type array)을 요구하지 않으며, 다양한 데이터 타입을 동시에 저장할 수 있는 배열입니다. 배열은 몇 가지 특수 형태로 구분하거나 활용 할 수 있습니다.  표준 배열(Standard Array)JavaScript의 표준 배열은 순서가 있는 컬렉션입니다.배열의 크기는 동적으로 조정되며, 숫자, 문자열, 객체 등 모든 타입의 데이터를 저장 할 수 있습니다.const standardArray = [1, "Hello", true, { key: "value" }];console.log(standardArray);// [1, "Hello", true, { key: "value" } ]// 위 배열에는 number, string, boole..

Vanilla JavaScript는 특별한 라이브러리나 프레임워크 없이 순수한 JavaScript만을 사용하는 방식을 지칭하는 용어입니다. 개발자들 사이에서 "가장 기본적인 JavaScript로 구현한다"는 의미로 사용되며, 보통 React, Vue.js, jQuery 등의 라이브러리 없이 JavaScript 기본 기능으로 웹 애플리케이션이나 기능을 작성할 때 이를 Vanilla JS로 부릅니다. 바닐라 JS는 JavaScript의 핵심 동작 원리를 배우고 이해하는 데 도움을 주며, 작은 프로젝트나 간단한 작업을 위해 적합합니다. Vanilla JS의 특징순수 JavaScript 사용DOM 조작, 이벤트 처리, Ajax 호출 등 모든 기능을 기본 JavaScript로 수행가벼움외부 라이브러리 없이 Jav..

NaN은 Not a Number의 줄임말로, 숫자가 아님을 나타내는 특수한 숫자 값입니다. JavaScript에서 연산 결과가 숫자가 아니거나 계산할 수 없는 경우 NaN이 반환됩니다. NaN은 숫자형(Number Type)에 속하지만, 그 값 자체는 유효한 숫자가 아님을 의미합니다.  NaN의 특징NaN은 typeof 연산자로 확인하면 number로 반환됩니다.NaN은 자기 자신과도 같지 않은 유일한 값입니다. 즉, NaN === NaN은 항상 false를 반환합니다.console.log(typeof NaN);        // numberconsole.log(NaN === NaN);   // false  NaN이 발생하는 경우숫자가 아닌 문자열을 수치 연산에 사용한 경우잘못된 수학 연산parseInt..

JavaScript는 동적 타입 언어로, 변수에 저장되는 데이터의 타입을 명시적으로 선언할 필요가 없습니다. 즉, 같은 변수에 다른 타입의 데이터를 할당 할 수 있습니다. JavaScript에서 데이터 타입을 이해하는 것은 값의 처리를 올바르게 수행하는데 필수적입니다. 기본적으로 JavaScript의 데이터 타입은 원시 타입(Primitive Type)과 참조 타입(Reference Type)으로 나뉩니다. 이번 글에서는 숫자(int), 문자열(string) 등의 주요 원시 타입을 중심으로 정리해보겠습니다.  원시 타입(Primitive Type)이란?원시 타입은 한 번 생성되면 변경할 수 없는 값입니다. 하지만 변수 자체는 다른 값으로 재할당 할 수 있습니다. 1. 숫자형(Number)let intNu..

JavaScript를 배우다 보면 null이라는 값을 자주 접하게 됩니다. null은 프로그래밍에서 중요한 개념으로, 의도적으로 [ 값이 없음 ]을 나타내기 위해 사용됩니다. 그러나 undefined와 null의 차이점에 대해 혼란스러워하는 경우가 많습니다. 이번 글에서는 JavaScript에서 null의 개념과 사용 사례를 정리해보겠습니다. null이란?null은 값이 없음을 명시적으로 표현하기 위한 값으로, 변수나 객체에 의도적으로 할당하는 값입니다. typeof null을 실행하면 object가 반환되지만, 이는 JavaScript의 초기 설계 오류로 인한 결과입니다.let user = null;console.log(user);// nulltypeof null;// object  null과 unde..