javascript

자바스크립트는 프런트엔드(Front-End) 개발 언어이며 정적인 웹 문서에 동작을 부여한다. 그러면 자바스크립트의 탄생 배경과 표준화가 어떻게 진행되었는지 알아보자. 탄생 배경 1995년 인터넷 브라우저의 점유율은 넷스케이프의 내비게이터(Navigator)가 가

아래의 사진은 TIOBE에서 발표한 2023년 8월 현재 사용되는 프로그래밍 언어의 순위 목록이다. 현대의 IT 기술 발전에 따라 프로그래밍 언어도 끊임없이 발전되고 있다. 이에 맞춰 개발자들은 빠르게 변화하는 IT 환경속에서 지속적으로 개발 언어와 관련된 트렌드를

개요 브라우저에 내장된 객체를 ‘브라우저 객체(BOM)’라고 한다. window는 브라우저 객체의 최상위 객체이 며, window 객체에는 하위 객체가 포함되어 있습니다. 즉, 계층적 구조로 이루어져 있으며, 이를 브라우저 객체 모델이라고 한다. 이들은 js 초기 때

실행 컨텍스트 (Execution Context) 실행 컨텍스트(Execution Context)는 자바스크립트 코드의 실행 정보를 추상화한 개념으로, 코드가 실행되기 위해 필요한 모든 정보를 담고 있는 환경을 뜻한다. 실행 컨텍스트는 코드의 실행에 필요한 변수,

스코프 체인은 프로그래밍 언어에서 변수의 유효 범위(scope)를 결정하는 메커니즘 중 하나이다. 이는 어떤 변수가 어떤 범위에서 참조되는지를 나타내는 개념이다. 스코프 체인은 변수가 해당 범위에 존재하지 않을 경우, 상위 범위에서 변수를 찾아나가는 방식으로 작동한다.

this Java와 C# 등의 객체지향 언어에서의 this는 현재 객체나 인스턴스 자신을 나타낸다. 이들은 객체 내에서 this를 씀으로써 자신의 인스턴스 변수나 함수에 접근을 할 수 있다. 하지만 js에서의 this는 다른 언어들과는 다른 특징을 갖고 있다. js에

정규 표현식 or 정규식- 문자열에서 특정 문자 조합을 찾기 위한 패턴이다. js에서는 정규 표현식도 객체로서, RegExp의 exec()와 test() 메서드를 사용할 수 있다. String 형태의 match(), matchAll(), replace(), repla

Generator 함수는 함수 실행을 중간에 멈추고 다시 시작할 수 있는 특별한 종류의 함수이다. 일반적인 함수는 호출되면 처음부터 끝까지 실행되고 결과값을 반환하며 종료되지만, Generator 함수는 실행 중간에 값을 반환하고 함수를 일시 중단한 다음, 다시 재개할

ECMA 라는 국제 기구에서 만든 ECMAScript는, 프로그래밍 언어 자바스크립트의 규격을 정의하는 스크립팅 언어의 표준이다. ECMAScript의 역사적인 배경을 보면, 웹 브라우저의 발전과 함께 자바스크립트 역시 발전해왔다. 그 과정에서 브라우저 간 호환성 문제

Map은 키-값 쌍을 저장하는 자료구조이다. 키와 값을 연결하여 데이터를 저장하고 조회할 수 있다. 각 키는 유일해야 하며, 순서가 보장된다.Map은 키가 있는 데이터를 저장한다는 점에서 객체와 유사하다. 다만, 다음의 차이점이 있다.키의 다양한 데이터 타입Map은 키

padStart()와 padEnd()는 js 문자열의 메서드로, ES8(ES2017)에 추가된 신규 기능이다. 문자열을 특정 길이로 채우는 데 사용된다.이 함수들은 주로 문자열을 특정 길이만큼 왼쪽이나 오른쪽으로 채울 때 유용하다.padStart()는 원래 문자열의 시

일반적으로 프로그래밍 언어 문법의 큰 틀은 비슷하다. 그래서 한 언어에 익숙해지면 다른 언어도 쉽게 배울 수 있다. 예를 들어, 프로그래밍을 하면서 변수 값의 같음을 비교하려면 `==` 연산자를 이용해서 같음을 비교할 수 있다. 대부분의 언어에서 사용하는 것이기도 하다

localStorage와 sessionStorage는 웹 브라우저에서 데이터를 클라이언트 측에 저장하는 데 사용되는 일종의 웹 전용 저장소이다. 이 두가지 개념은 프론트엔드 웹 개발에 있어서 기본적인 사항이므로 보다 자세히 짚고 넘어가자. localStorage lo

모듈 번들러 (Module Bundler) 모듈 번들러란 웹 개발에서 여러 개의 모듈(기능)을 하나 이상의 번들(파일)로 묶어주는 도구를 뜻한다. 현대 웹 개발에서는 여러 개의 파일로 분리된 코드를 한 개의 파일로 번들링하여 웹 애플리케이션의 성능을 최적화하고 유지 보

배열의 빈 상태를 판별할 때, array.length ? true : false의 방식은 문제가 있다. 그 이유는, 만약 배열이 JSON 형식이나 혹은 예상하지 못한 데이터를 얻으면 undefined 혹은 null을 얻을 수 있고, 이는 타입 에러를 일으킬 수 있다.

Event Loop는 자바스크립트의 실행 모델 중 하나로, 자바스크립트에서 비동기 로직이 어떻게 다루는지를 설명하는 중요한 메커니즘이다.호출 스택(Call Stack)코드 실행에 따라 함수 호출이 스택에 쌓이고 실행이 끝나면 스택에서 제거된다. 이 스택은 단일 쓰레드

Blob Blob은 이진 데이터를 나타내는 클래스이자 객체이다. Blob은 'Binary Large Object'의 약자로, 이진 형태의 대용량 데이터를 나타내는 용어이다. Blob 객체는 텍스트나 이미지, 오디오, 비디오 등의 다양한 종류의 데이터를 다룰 수 있다.

IIFE는 "Immediately Invoked Function Expression"의 약어로, 즉시 호출되는 함수 표현식을 나타낸다. 이것은 JavaScript에서 함수를 정의하고 즉시 실행하는 패턴 중 하나이다. IIFE를 사용하면 함수를 정의하자마자 바로 실행하여

자바스크립트에서 데이터 유형은 크게 "원시 타입(Primitive Types)"과 "참조 타입(Reference Types)"으로 나눌 수 있다. 원시 타입은 데이터를 단순하게 나타내는 기본적인 데이터 타입으로, 변수에 직접 값을 할당한다. 원시 타입은 불변(Immut

얕은 복사(Shallow Copy)를 수행하는 여러 방법을 자세히 살펴보자 얕은 복사는 주로 배열과 객체에 대한 복사 시에 사용되며, 중첩된 객체 혹은 배열은 참조 복사를 유지 한 체, 중첩되지 않은 최상위 수준의 요소 값을 복사하는 방법을 뜻한다.

깊은 복사법 얕은 복사는 원본 객체의 프로퍼티들을 새로운 객체에 복사하지만, 프로퍼티 값이 객체나 배열인 경우에는 참조가 복사되므로 내부 객체는 동일한 참조를 공유한다. 반면에 깊은 복사는 원본 객체 및 모든 중첩된 객체와 배열까지 모두 새로운 객체에 복사하는 방식이다

`navigator.clipboard` 객체는 웹 브라우저에서 제공되는 클립보드 API로, 클라이언트 측에서 클립보드에 접근하고 텍스트 데이터를 읽거나 쓸 수 있도록 하는 몇 가지 함수를 제공한다.

html 렌더링 중 javascript가 실행되면, 브라우저는 html 파싱을 멈추고 자바스크립트를 먼저 실행한다. 이는 javascript가 DOM 조작이나 스타일 변경을 하면 렌더 트리를 재구성해야 하기 때문에 발생한다. 이러한 이유와 목적에 대해서 자세히 살펴보자

웹 표준(Web Standards)을 준수하는 것은 웹 개발에서 중요한 원칙 중 하나이다. 웹 표준을 따르면 웹 페이지는 다양한 브라우저와 기기에서 일관된 방식으로 렌더링되며, 웹 접근성이 향상되고 검색 엔진 최적화(SEO)에도 도움이 된다.웹 표준을 준수하는 것은 브

null 은 해당 데이터는 명시적으로 값이 없음을 나타내기 위해 사용된다.변수를 초기화할 때, null 을 할당하여 명시적으로 비워둘 수 있다.null은 객체가 어떠한 값을 가지고 있지 않음을 나타내는데 종종 사용된다. 예를 들어, 어떤 객체의 특정 속성이 없을 때 그

npm은 Node.js 환경에서 사용되는 패키지 관리 도구로, JavaScript 프로젝트에서 필요한 패키지들을 쉽게 설치하고 관리할 수 있도록 도와주는 툴이다.

Yarn Yarn은 npm과 마찬가지로 자바스크립트 프로젝트의 종속성을 관리하는 오픈소스 패키지 관리자이다. 페이스북, 구글, 엑소스케일, 틸드 등 여러 회사의 협력으로 개발된 Yarn은 2016년에 처음 출시된 이후로, 그 성능, 보안성, 사용 편의성으로 인해 널리

자바스크립트의 모든 Object(객체)는 자신의 부모 역할을 하는 개체와 연결되어있다. 그리고 이는 마치 객체지향의 상속 개념과 같이 부모 객체의 프로퍼티를 자신의 것처럼 쓸 수 있는 특징이 있다. 이렇게 자바스크립트에서 객체간의 상속 관계를 나타낸 것을 Prototy

Internationalization(다국어 지원)을 담당하는 JavaScript의 Internationalization API, 일명 INTL은 다양한 언어와 지역 설정에서 일관된 방식으로 텍스트, 날짜, 숫자 등을 처리하고 표시하는 기능을 제공하는 API이다.

pnpm pnpm은 자바스크립트 프로젝트를 위한 또 다른 현대적인 패키지 관리 도구로, npm과 Yarn의 대안으로 등장한 패키지 매니저이다. pnpm의 가장 큰 특징은 효율적인 디스크 사용과 빠른 성능입니다. 이 도구는 특히 패키지 설치 시 디스크 공간을 절약하고자

forEach js의 forEach는 배열에서 사용할 수 있는 함수로, 배열의 각 요소를 순회하는 콜백함수를 전달하여 실행시키는 함수이다. forEach에는 다음과 같은 특징이 있다. forEach는 원본 배열을 변경하지 않으며 콜백 함수 내에서 배열을 변경할 수는

JavaScript에서 console 객체는 디버깅과 로깅에 매우 유용한 도구이다. 이 객체는 다양한 메서드를 제공하여 개발자가 코드 실행 중에 값을 출력하거나, 경고 메시지를 표시하거나, 타이밍을 측정하는 등의 작업을 수행할 수 있게 해준다. 개발자들이 가장 많이 사용하는 기능은 아마도 백이면 백 console.log() 일것이다. 이제 console의 ...

이벤트 최적화 웹 애플리케이션에서 사용자에 의해 발생하는 이벤트는 매우 빠른 속도로, 대량으로 발생할 수 있다. 예를 들어, 창 크기를 조절하거나, 입력 창에 글자를 입력하거나, 스크롤바를 움직이는 경우 등이 있다. 이러한 상황에서 이벤트를 최적화하지 않고 그대로 처리