기획자의 성장일지

TS - 타입 추론 (Type Inference)타입 추론(Type Inference)⇒ TypeScript에서 코드를 작성할 때 명시적으로 타입을 지정하지 않아도, 컴파일러가 자동으로 변수나 함수의 타입을 추론하는 기능임. 이는 코드를 더 간결하게 작성할 수 있도록 도와줌.예시let username = "John"; // string으로 추론let age = 30; // number로 추론let isStudent = true; // boolean으로 추론let list = [1, 2, 3]; // number 배열로 추론 함수 반환 타입 추론함수의 반환값도 컴파일러가 자동으로 타입을 추론함.function add(a: number, b: number) { return a + b; // 반환값을 num..

자바스크립트에서 객체를 생성하는 방법은 여러 가지가 있다. 그 중 두 가지 주요 방법은 객체 리터럴과 생성자 함수를 사용하는 방식이다. 각 방식의 특징과 장단점, 그리고 생성자 함수의 동작 방식에 대해 살펴보겠다.  1. 객체 리터럴 방식객체 리터럴({ })은 객체를 생성할 때 가장 간단하고 직관적인 방법이다. 객체 리터럴을 사용하면 코드가 간결해지고, 객체를 정의하는 것이 쉬워진다.const person1 = { name: "WI", getPersonName() { return `Hi, My Name is ${this.name}`; },};console.log(person1.getPersonName()); // "Hi, My Name is WI" 객체 리터럴로 생성한 객체는 하나의 객체만 ..

JavaScript에서 일급 객체(First-Class Object)는 "객체로서 함수와 같은 다른 데이터 타입처럼 취급될 수 있는 객체"를 말한다. 함수나 변수도 일급 객체로 취급된다. 이를 이해하기 위해서는 "객체"라는 개념과 값처럼 다룰 수 있다는 의미를 잘 이해하는 것이 중요하다. 1. 객체란 무엇인가?자바스크립트에서 객체는 프로퍼티(속성)와 메소드(기능)를 가질 수 있는 데이터 구조이다. 객체는 키-값 쌍으로 구성된 데이터 집합이다. const person = { name: 'John', age: 30, greet: function() { console.log('Hello!'); }};이 코드에서 person 객체는 name, age, greet라는 프로퍼티를 가지고 있다. 그리고 ..

1. interface 문법interface는 객체 타입을 정의할 때 사용한다. 객체 자료형의 타입을 보다 편리하게 지정할 수 있다.interface Square { color : string; width : number;}let 네모: Square = { color : 'red', width : 100 };type alias와 유사한 기능을 제공한다.대문자로 시작하며 { } 안에 타입을 명시한다. 1.1 interface의 장점 : extendsinterface는 다른 인터페이스를 확장(상속)할 수 있다.예를 들어, Stundent와 Teacher 인터페이스를 만들 때 중복 속성을 줄이기 위해 extendf 사용interface Student { name : string;}interface Teache..

클래스란?자바스크립트에서 클래스는 객체 지향 프로그래밍(OOP)을 지원하는 중요한 구조로, 객체 생성과 속성 및 메서드 정의를 보다 효율적으로 할 수 있게 해준다. 자바스크립트는 ES6(ECMAScript 2015)에서 class 문법을 도입했으며, 클래스는 객체를 생성하기 위한 템플릿(설계도) 역할을 한다.자바스크립트 클래스의 기본 구성 요소class 키워드: 클래스를 정의하는데 사용된다.constructor: 클래스 인스턴스가 생성될 때 호출되는 메서드로, 객체 초기화에 사용된다.this: 클래스 내에서 자신을 가리키는 키워드로, 클래스 인스턴스의 속성 및 메서드에 접근하는 데 사용된다.1. 클래스 정의하기클래스 선언식클래스를 정의할 때 class 키워드를 사용한다. 클래스 이름은 대문자로 시작하는 ..

DOM (Document Object Model)DOM은 웹 페이지를 프로그래밍적으로 다룰 수 있도록 문서를 구조화한 객체 모델.HTML이나 XML 문서를 브라우저가 읽어들이면, 브라우저는 이를 DOM으로 변환하여 JavaScript로 조작할 수 있도록 만든다.DOM의 핵심 개념1. DOM은 문서 구조를 트리 형태로 표현HTML 문서를 로드하면 브라우저는 트리 구조로 변환한다.이 트리를 DOM 트리라고 하며, 각각의 HTML 요소는 노드(Node)로 표현된다.예: HTML 구조 Hello World This is a paragraph. DOM 트리 구조Document └─ html ├─ head │ └─ title └─ body ├─ h..

클로저란?클로저는 함수와 그 함수가 참조하는 변수들이 함수 외부에서 호출되더라도 그 변수들을 여전히 기억하고 접근할 수 있게 해주는 특성을 의미한다.쉽게 말해, 함수가 실행될 때 만들어지는 환경(스코프)을 기억해서 나중에 그 스코프에 있는 변수들에 접근할 수 있는 것이다.예시 코드function outer() { let outerVar = "I am from outer scope!"; function inner() { console.log(outerVar); // 외부 함수의 변수에 접근 } return inner; // inner 함수를 반환}const closureFunction = outer(); // outer 함수 실행 후, inner 함수가 반환됨closureFunction()..

1. strict mode란?JavaScript에서 strict mode는 JavaScript 코드에 대해 좀 더 엄격한 규칙을 적용하는 모드이다. 이를 사용하면 변수 선언을 하지 않고 사용하는 등의 오류를 미리 발견할 수 있다. 쉽게 말해, 코드에서 잘못된 부분이나 위험한 부분을 강제로 제한해서 실수를 줄이고, 에러를 미리 감지할 수 있도록 도와준다.일반 모드에서는 실수로 잘못된 코드를 작성해도 에러가 발생하지 않을 수 있지만, strict mode에서는 에러를 즉시 발생시킨다.예를 들어, 미리 선언되지 않은 변수를 사용하는 경우, strict mode에서는 오류가 발생한다.2. strict mode 활성화 방법strict mode는 코드의 첫 번째 줄에 "use strict"; 를 추가하여 활성화할 ..

Vue.js의 컴포넌트 시스템은 애플리케이션을 독립적이고 재사용 가능한 단위로 분리하여 관리하는 데 중요한 역할을 한다. 컴포넌트는 부모-자식 관계를 형성하며, 데이터를 효율적으로 전달하고 이벤트를 처리하는 다양한 방법이 있다. 이번 글에서는 Vue 컴포넌트 심화 개념인 props, emit, v-model, slot, provide/inject, teleport에 대해 알아볼 예정이다. 1. Props : 부모 → 자식 간 데이터 전달props는 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달하는 방법이다. Vue에서는 단방향 데이터 흐름을 유지하며, 부모에서 자식으로 전달된 데이터는 자식에서 수정할 수 없다. 자식은 부모로부터 받은 값을 읽기만 할 수 있고, 수정은 부모 컴포넌트에서만 가능하다.주요 ..

Vue.js의 반응형 API는 데이터가 변경될 때 UI를 자동으로 업데이트하는 시스템이다. 이 API는 애플리케이션의 상태 관리와 UI 업데이트를 효율적으로 처리할 수 있게 해준다. Vue의 주요 반응형 API인 ref(), reactive(), computed(), watch(), watchEffect()에 대해 다루고자 한다.  1. ref() - 기본 타입의 반응형 데이터ref()는 숫자, 문자열, 불리언 등 기본 타입을 반응형으로 만드는 API이다. ref()로 생성된 값은 .value를 통해 접근하고 수정해야 한다. 카운트: {{ count }} 증가 count는 ref()를 사용하여 반응형으로 선언된 값이다. .value를 통해 값에 접근하고 수정할 수 있다. 2. reactive() - ..