code를 헤엄치는 인어공쭈

자바스크립트는 객체지향적 성격과 함수형 프로그래밍의 요소를 모두 담고 있는 언어다. 이러한 특징을 이해하려면 자바스크립트의 객체, 프로토타입 기반 상속, 클래스, 그리고 비동기 처리의 작동 방식을 잘 알아야 한다. 이 포스트에서는 객체, 프로토타입, 클래스 기반 객체지향 프로그래밍, 비동기 처리, 이터러블, 이벤트의 핵심 개념들을 통합적으로 설명해보겠다. 객체와 인스턴스: 객체지향의 출발점객체는 자바스크립트에서 데이터와 함수의 집합으로, 프로퍼티(속성)와 메서드(동작)를 포함하는 독립적인 엔티티다. 객체는 단순한 키-값 쌍으로 표현될 수 있으며, 함수처럼 더 복잡한 구조를 가질 수도 있다. 객체가 생성자 함수나 클래스를 통해 만들어진 경우, 그 결과로 생성된 개별 객체를 인스턴스라고 부른다.   프로토타..

자바스크립트의 함수와 실행 컨텍스트: 핵심 개념들자바스크립트에서 함수는 매우 중요한 개념이다. 함수는 코드의 재사용성을 높이고, 복잡한 작업을 단순하게 처리할 수 있도록 도와준다. 자바스크립트는 고유의 실행 방식과 스코프 개념을 가지고 있어서, 함수의 동작을 제대로 이해하는 것이 매우 중요하다. 이번 포스트에서는 함수의 개념에서부터 실행 컨텍스트, 스코프, 클로저까지 핵심적인 자바스크립트 개념들을 통합적으로 설명하겠다. 함수란 무엇일까?함수는 특정 작업을 수행하거나 값을 계산하는 코드의 모음이다. 자바스크립트에서는 함수가 **일급 객체(First-Class Object)**로 취급되기 때문에, 값처럼 다룰 수 있다. 즉, 함수를 변수에 할당하거나, 다른 함수의 인자로 전달하거나, 함수에서 반환할 수 있다..

자바스크립트의 타입과 깊은 개념들자바스크립트는 동적 타입(dynamic typing)을 사용하는 언어로, 변수에 다양한 타입의 값을 할당할 수 있다. 이를 이해하면 자바스크립트의 독특한 동작과 그 안에서 발생할 수 있는 문제들을 해결하는 데 중요한 개념들을 파악할 수 있다. 이번 포스트에서는 자바스크립트의 타입과 관련된 여러 개념들을 하나의 흐름으로 살펴보자. 자바스크립트의 타입자바스크립트의 데이터 타입은 크게 두 가지로 나눌 수 있다: **기본형(Primitive Type)**과 **참조형(Reference Type)**이다.기본형(Primitive Type):Number: 숫자를 표현하는 타입이다. 자바스크립트에서는 정수와 실수를 구분하지 않고 모두 Number로 취급한다.String: 문자열을 나타..

자바스크립트(JavaScript)는 웹 개발에서 주로 사용되는 프로그래밍 언어로, 동적이고 상호작용이 가능한 웹 페이지를 만들기 위해 사용된다. 자바스크립트는 클라이언트 측에서 실행되는 언어로 시작했지만, 현재는 서버 측에서도 Node.js와 같은 환경에서 사용될 수 있어, 프론트엔드와 백엔드를 모두 다룰 수 있는 다재다능한 언어로 자리 잡았다.자바스크립트는 ECMAScript 표준에 기반을 두고 있으며, 객체 지향(OOP), 함수형 프로그래밍(FP) 및 이벤트 기반 프로그래밍을 지원하는 멀티 패러다임 언어이다. 이러한 특성 덕분에 자바스크립트는 간단한 스크립트부터 대규모 애플리케이션까지 다양한 개발 환경에 적합하다.자바스크립트는 HTML, CSS와 함께 웹의 3대 구성 요소 중 하나로, HTML은 구조..

1. 콜백 함수 (Callback Function)콜백 함수란 다른 함수의 인자로 전달되어, 그 함수 내부에서 호출되는 함수를 의미한다. 주로 비동기 처리나 이벤트 기반 프로그래밍에서 자주 사용되며, 코드의 실행 흐름을 제어하는 데 유용하다.function fetchData(callback) { // 데이터를 가져오는 비동기 작업 (예: 서버 요청) setTimeout(function() { let data = "Fetched Data"; callback(data); // 작업 완료 후 콜백 함수 호출 }, 1000);}function displayData(data) { console.log("Data: " + data);}fetchData(displayD..

프론트엔드 개발을 하다 보면 UI 컴포넌트를 반복해서 만들고, 테스트하고, 유지보수해야 하는 일이 많다. 이때 Storybook은 UI 컴포넌트 개발을 더 쉽고 체계적으로 할 수 있도록 도와주는 훌륭한 도구이다. 특히, React, Vue, Angular와 같은 다양한 프레임워크에서 사용이 가능하다.즉 컴포넌트 기반 개발(Component-Driven Development)(CDD) 방법론에 따라 만들어진다.Storybook이란?Storybook은 UI 컴포넌트를 독립적으로 개발하고 테스트할 수 있는 환경을 제공하는 오픈 소스 도구이다. 보통 웹 애플리케이션을 개발할 때, UI 컴포넌트는 애플리케이션의 나머지 부분들과 결합된 상태에서 작동한다. 하지만 Storybook을 사용하면, 애플리케이션의 나머지 ..

기본을 다시 다지는 의미로 코어 자바스트립트책을 읽고 정리해보았다.  이미 대부분 아는 내용이라 복습하는 느낌으로 간단하게 적어보았다. 디테일한 상세 설명은 다른글을 참고! 아래부터는 1장부터 3장까지의 내용이다.1. 변수와 데이터 타입변수변수는 데이터를 저장하는 공간이다. 자바스크립트에서는 변수 선언을 위해 var, let, const를 사용한다. 각 키워드는 다음과 같은 차이점을 가진다.var: 함수 스코프를 갖고, 중복 선언이 가능하다. 하지만 블록 스코프를 무시하기 때문에 예기치 않은 문제를 일으킬 수 있다.let: 블록 스코프를 가진다. 같은 스코프 내에서 중복 선언이 불가능하고, 선언되기 전에는 사용할 수 없다(Temporal Dead Zone).const: 상수를 선언하는데 사용된다. 값이 ..

자바스크립트는 동적 언어이기 때문에 변수의 할당과 해제가 자동으로 이루어진다. 자바스크립트는 가비지 컬렉터(Garbage Collector)가 자동으로 메모리를 관리하지만, 기본적인 개념을 이해하고 최적화하면 더 나은 성능을 유지할 수 있다.  1. 자바스크립트 메모리 관리의 기본 개념자바스크립트의 메모리 관리는 크게 아래에 과정으로 나눌 수 있다:메모리 할당: 프로그램이 데이터를 생성하거나 객체를 생성할 때 메모리를 할당받는 과정이다.메모리 사용: 메모리 사용은 변수나 객체를 참조할 때 발생한다.메모리 회수: 더 이상 필요하지 않은 메모리를 자동으로 회수하는 과정이다. 이를 가비지 컬렉션(Garbage Collection)이라고 한다.프로그래머가 직접 메모리 해제를 명시적으로 처리하는 언어(C, C++..

개념 설명 HTTP (Hypertext Transfer Protocol)는 클라이언트와 서버 간의 통신을 위한 프로토콜이다. 웹 브라우저를 통해 웹 페이지를 요청하고, 서버는 해당 요청에 대한 응답을 제공하는데 사용된다. HTTP는 클라이언트와 서버 간의 데이터 전송 방식, 헤더와 본문의 구조, 요청 및 응답의 상태 코드 등을 정의하고 있다. HTTPS (Hypertext Transfer Protocol Secure)는 HTTP의 보안 버전으로, 클라이언트와 서버 간의 통신을 암호화하여 보안성을 강화한 프로토콜이다. HTTPS는 HTTP와 동일한 구조와 기능을 가지고 있지만, 데이터의 안전한 전송을 해 SSL(Secure Sockets Layer) 또는 TLS(Transport Layer Security..

이벤트 루프1) 비동기 작업과 호출 스케줄링 자바스크립트는 싱글 쓰레드 환경에서 동작하는 언어이다. 즉, 한 번에 하나의 작업만 처리할 수 있다. 하지만 브라우저 환경이나 Node.js에서 비동기 작업(예: 파일 읽기, 네트워크 요청)을 처리해야 할 때, 자바스크립트는 이벤트 루프(Event Loop)를 이용해 동시성(Concurrency)을 지원한다.이벤트 루프는 자바스크립트의 비동기 처리에서 핵심 역할을 하는 메커니즘으로, 자바스크립트가 멈추지 않고 여러 작업을 처리할 수 있도록 도와준다. 콜스택(Call Stack), 태스크 큐(Task Queue), 그리고 이벤트 루프가 함께 협력하여 이러한 비동기 작업들을 효율적으로 처리한다.흐름을 간단하게 살펴보자면:싱글 쓰레드로 동작하는 자바스크립트는 하나의..