개발하는 인사담당자

(Vue) - Computed vs Watch

개발하는 인사담당자 — Mon, 16 Mar 2026 13:04:01 +0900

vue 공부 중 watch 랑 computed 가 헷갈려서 정리하게 되었다.

■ computed

: 값 계산 후 그 계산값을 사용

const message = ref('hello')

const reverseMessage = computed(() => {
  return message.value.split('').reverse().join('')
})

거꾸로 글자를 재계산하여 사용

■ watch

: 값을 감지하고, 값이 변경되었다면 변경 된 후 행동 처리

const keyword = ref('')

watch(keyword, (newValue) => {
  fetch(`/api/search?q=${newValue}`)
})

keyword 값 변화를 감지하고

변경이 되었다면 api 를 호출

■ 글자 reverse computed 가 적절한 이유

const message = ref('hello')
const reverseMessage = ref('')

watch(message, (newValue) => {
  reverseMessage.value = newValue.split('').reverse().join('')
})

다음과 같이 watch 로도 가능하다.

하지만 이렇게 되면

코드 길어짐
상태 2개 관리해야함
실수 가능성

따라서 값을 계산해서 사용할 때는 computed 가 적절하다.

■ vuex computed 사용 이유

const store = useStore();

const getChatData = computed(() => store.getters['chat/getChatData']); //챗 데이터 vuex

const store = useStore();

는 Vuex store 인스턴스 가져오는 것이다.

이를 통해

store.state
store.getters
store.commit
store.dispatch

를 사용할 수 있다.

챗데이터 vuex 는 Vuex getter → chat/getChatData 값을 가져온다 는 의미로,

vuex model 은 다음과 같다.

// store/modules/chat.js

const getters = {
  getChatData: (state) => state.chatData
}

computed 로 감싸는 이유는 store 변경 → computed 재계산 → UI 갱신 하기 위해서이다.

그래서 Vue에서는 Vuex 값은 대부분 computed로 가져온다고 한다.

ref 대신 computed 를 사용하는 이유가 궁금했는데

ref 는 store 값 → 한번 복사해서 ref에 넣는다.

ref 는 단순값 저장이기 때문에 computed 와는 다르게 store 값이 바뀌어도 chatData 는 변경되지 않는다.

(TypeScript) - 타입 변수 응용하기

개발하는 인사담당자 — Tue, 26 Aug 2025 15:59:10 +0900

■ 타입 변수 응용하기

function swap<T, U>(a: T, b: U) {
    return [b, a];
}

const [a, b] = swap('string', 2);

다음과 같이 a: T, b; U 와 같이 타입 변수를 여러 개 선언해서 사용하는 것도 가능하다.

function returnFirstValue<T>(data: T) {
    return data[0];
}

이렇게 제네릭을 사용해서 받게 되면 unknown 형식에서 사용할 수 없다는 오류가 뜬다.

왜냐하면 아직 해당 함수 호출 전까지는 해당 인수의 값이 추론 되지 않기 때문이다.

즉, 데이터가 배열이라는 확신도 없을 뿐더라 호출이 되지 않았기 때문에 unknown 인 것이다.

function returnFirstValue<T>(data: T[]) {
    return data[0];
}

그럴 경우 data 의 값을 T[] 로 바꿔주면 된다.

T의 값은 어떤 것인지는 모르지만 unknown 배열 타입이기 때문에 오류가 사라진다.

let str = returnFirstValue([1, 'hello', 'mynameis']);

다음과 같이 지정을 하게 되면 str 는 number | string 유니온 타입으로 나온다.

function returnFirstValue<T>(data: [T, ...unknown[]]) {
    return data[0];
}

그런데 여기서 만약 data[0] 가 number 값이 나오기를 원한다면 튜플 타입으로 지정해주면 된다.

우선 [] 로 튜플로 만들어주고, 첫 번째 요소를 타입 변수로 넣어준다.

다음 요소는 우리가 알 필요가 없기 때문에 rest 파라미터 쓰듯이 ...unknown[] 배열로 넣어주면 된다.

function getLength<T extends { length: number }>(data: T) {
    return data.length;
}

let var1 = getLength([1, 2, 3]);
let var2 = getLength('12345');
let var3 = getLength({ length: 10 }); //10
let var4 = getLength(10); //불가능!

아래 예시처럼 여러 개의 타입에서 길이를 구하고 싶다고 해보자.

우선은 data: T 를 통해 DATA 가 어떤 타입이 오든지 다 받는다.

그러면 data.length 에 오류가 생기는데, 숫자 타입이 아닌 경우 length 함수를 쓰지 못해서 그렇다.

그럴 경우 우리가 반환 타입을 length:number 로 extends(확장) 해서 받으면 된다.

interface InterfaceA {
    length: number;
}

interface InterfaceB extends InterfaceA {}

이해를 돕기 위해 말하자면, 이전에 인터페이스를 했을 때도 InterfaceB 는

InterfaceA 확장 받아서 반드시 length: number 를 포함해야 했다.

마찬가지로 위의 코드도 length가 number 인 것으로 타입을 확장해서 받으면 길이가 숫자에 해당하는 것만 구하게 되는 것이다.

따라서 배열도 length 를 가지고 있기 때문에 허용이 되고, 문자도 , 객체는 length 프로퍼티가 있기 때문에 가능하다.

getLength(10)은 number 타입으로 length 프로퍼티가 없기 때문에 정상적으로 오류 처리가 된다.

(TypeScript) - 제네릭

개발하는 인사담당자 — Tue, 26 Aug 2025 15:05:06 +0900

■ 제네릭 (일반적인, 포괄적인)

: 모든 타입에 두루 두루 쓸 수 있는 범용적 함수이다.

//제네릭 함수
function func<T>(value: T): T {
    return value;
}

<T> 모양을 사용하면 되는데 여기서 T 는 타입을 저장하는 변수, 즉 타입 변수이다.

그리고 나서 매개변수와 반환값도 T 로 바꿔준다.

let num = func(10); //number

let bool = func(true); //boolean

let str = func('string'); //string

그러면 각각의 변수가 우리가 원하는 값으로 추론 되는 것을 확인할 수 있다.

함수를 호출할 때마다 타입이 담기게 되어 그때 그때마다 타입을 지정할 수 있는 것이다.

■ 정리

타입변수와 함께 여러 타입의 값을 인수로 받아서 범용적으로 쓸 수 있는 함수를 제네릭 함수라고 한다.

제네릭 함수는 타입 변수를 꺽쇠와 함께 함수 이름 뒤에 선언하고,

이 타입 변수에 할당되는 타입은 함수 호출할 때 인수에 따라서 결정된다.

즉, func(10) 에서는 인수가 10 이여서 number 로 타입이 지정된 것이다.

* 명시적 타입 지정

let arr = func<[number, number, number]>([1, 2, 3]);

타입을 명시적으로 지정해주고 싶으면 타입을 정해주면 된다.

해당 예시는 넘버 배열 함수를 튜플 함수로 지정하는 방법이다.

(TypeScript) - 인터페이스와 클래스

개발하는 인사담당자 — Tue, 26 Aug 2025 11:46:10 +0900

■ 인터페이스와 클래스

interface CharacterInterface {
    name: string;
    moveSpeed: number;
    move(): void;
}

class Character implements CharacterInterface {
    name: string;
    moveSpeed: number;

    constructor(name: string, moveSpeed: number) {
        this.name = name;
        this.moveSpeed = moveSpeed;
    }

    move(): void {
        console.log(`${this.moveSpeed} 속도로 움직입니다.`);
    }
}

implement (구현) 이다.

즉, 여기서 캐릭터 인터페이스는 설계도 역할을 한다.

따라서 캐릭터라는 클래스가 실제로 캐릭터 인터페이스를 구현하는 것이다.

interface CharacterInterface {
    name: string;
    moveSpeed: number;
    move(): void;
}

class Character implements CharacterInterface {
    constructor(public name: string, public moveSpeed: number) {}

    move(): void {
        console.log(`${this.moveSpeed} 속도로 움직입니다.`);
    }
}

다음과 같이 접근제어자를 생성자에 넣어 깔끔하게 코드를 정리할 수도 있다.

그런데 인터페이스의 접근제어자는 무조건 public 이다.

따라서 생성자에 public 이외의 접근제어자를 넣었을 경우 오류가 발생한다.

만약 다른 접근제어자가 필요하는 프로퍼티가 잇을 경우에는 별도로 생성자에 정의해서 넣어주면 된다.

(TypeScript) - 접근 제어자

개발하는 인사담당자 — Tue, 26 Aug 2025 11:27:42 +0900

■ 접근 제어자 (access modifier)

: 타입스크립트 클래스에서만 제공하며, 특정 클래스를 만들 때 특정 필드나 메서드에 접근할 수 있는 범위를 설정해준다.

ex) public / private / protected

const employee = new Employee('송송', 27, 'developer');
employee.name = '히히';
employee.age = 17;
employee.position = 'designer';

인스턴스를 생성하고 값을 세팅할 수 있는 이유는 기본적으로 클래스의 접근제어자가 public 으로 설정돼

아무 제약 없이 누구나 접근이 가능하기 때문이다.

만약 접근 프로퍼티를 private 으로 바꾸면

해당 클래스 내에서만 엑세스 할 수 있게 바뀐다.

따라서 클래스 밖에서는 점표기법으로 접근도 읽을 수도 없게 된다.

    //메서드
    work() {
        console.log(`${this.name} working`);
    }

만약 접근을 원한다면, 클래스 내부의 메서드를 통해서만 접근이 가능하다.

class ExecutiveOfficer extends Employee {
    // 필드
    officeNumber: number;

    constructor(name: string, age: number, position: string, officeNumber: number) {
        super(name, age, position);
        this.officeNumber = officeNumber;
    }

    //메서드
    func() {
        console.log(`${this.name} working`); //파생클래스에선는 접근 불가!
    }
}

private 은 해당클래스에서만 접근이 가능하므로 아무리 파생클래스여도 접근이 불가능하다.

    protected age: number;

    //메서드
    func() {
        console.log(`${this.age}`);
    }

외부에서는 접근을 막지만 파생클래스에는 접근을 허용하고 싶을 때 사용하는 것이 바로 protected 이다.

protected 를 사용하면 private 와는 다르게 파생클래스에서는 사용이 가능하게 된다.

class Employee {
    //필드 (<-생성자 접근제어자 작성 시 해당 부분 제거 필요!)
    private name: string;
    protected age: number;
    position: string;

    constructor(private name: string, protected age: number, public position: string) { //값 초기화도 자동으로 해줌
        this.name = name;
        this.age = age;
        this.position = position;
    }

생성자에 접근제어자를 달아줄 수 있는데,

그렇게 되면 생성자가 알아서 필드를 생성하므로 기존에 정의했던 필드를 지워줘야 한다.

더불어 생성자에 접근제어자 작성 시, 초기화도 알아서 해준다.

따라서 하단에 this.name = name 을 별도로 적어주지 않아도 된다.

클래스로 만든 객체의 프로퍼티를 함부로 외부에서 수정할 수 없도록 해야한다. (=정보의 은닉화)

이를 접근제어자를 통해 할 수 있는 것이다.

(TypeScript) - 타입스크립트 클래스

개발하는 인사담당자 — Tue, 26 Aug 2025 10:32:07 +0900

■ 타입스크립트 클래스 사용하기

class Employee {
    //필드
    name: string;
    age: number;
    position: string;

    constructor(name: string, age: number, position: string) {
        this.name = name;
        this.age = age;
        this.position = position;
    }

    //메서드
    work() {
        console.log('working');
    }
}

타입스크립트 클래스 생성에는 필드에 타입을 지정해주면 된다.

그런데 타입 지정에서 끝나는 것이 아니라 초기값과 할당이 되지 않아 오류가 난다.

따라서 생성자를 만들어서 값을 할당해준다.

메서드는 동일하게 넣어주면 된다.

타입스크립트에서 클래스는 자바스크립트이면서 동시에 타입으로도 취급된다.

따라서 employee 변수가 Employee 타입으로 인식된 것을 볼 수 있다.

const employeeC: Employee = {
    name: '',
    age: 0,
    position: '',
    work() {},
};

타입 지정을 해주면 다음과 같이 해당 클래스에서 요구했던 프로퍼티를 넣어주면 된다.

class ExecutiveOfficer extends Employee {
    // 필드
    officeNumber: number;

    constructor(name: string, age: number, position: string, officeNumber: number) {
        super(name, age, position);
        this.officeNumber = officeNumber;
    }
}

다음과 같이 세부적인 클래스를 만들고 상속 받을수도 있다.

※ any 허용 config 설정 처리

"noImplicitAny": false

noImplicitAny : 암시적 애니 허용하지 않을 것이냐? -> false (허용) -> 타입스크립트 타입 설정 안해도 오류 안뜸

-> 그러나 해당 설정 사항은 비권장

(TypeScript) - 자바스크립트 클래스

개발하는 인사담당자 — Mon, 25 Aug 2025 14:27:42 +0900

■ 자바스크립트 클래스 사용하기

{
    "compilerOptions": {
        "target": "ESNext",
        "module": "ESNext",
        "skipLibCheck": true,
        "outDir": "dist",
        "strict": true,
        "moduleDetection": "force",
        "allowJs": true
    },

    "include": ["src"]
}

타입스크립트에서 자바스크립트를 사용하고자 한다면

allowJs : true 설정을 하면 include 안에 있는 src 에서 JavaScript 도 허용한다는 뜻이다.

필드

class Student {
    // 필드 : 클래스가 만들어낼 객체의 프로퍼티
    name;
    grade;
    age;
}

클래스는 붕어빵 틀, 객체는 붕어빵이다.

클래스에서 필드는 클래스가 만들어낼 객체의 프로퍼티이다.

생성자

: 클래스 호출 시 실제로 객체를 만들어 내는 역할을 하는 메서드이다.

    //생성자 : 클래스 호출 시 실제로 객체를 만들어내는 역할(=메서드)
    constructor(name, grade, age) {
        this.name = name
        this.grade = grade
        this.age = age
    }

매개변수로 받은 값들을 실제 만들 객체의 프로퍼티 값으로 설정해준다.

let studentB = new Student('이이', 5, 17);

객체 생성하기 위해서는 new 클래스 이름(매개변수) 형식으로 만들어준다.

클래스의 생성자가 호출되면 인수들이 매개변수로 전달되는데,

this.name 객체의 프로퍼티에 전달된 매개변수가 저장된다.

이렇게 클래스를 통해 만들어진 객체를 인스턴스 라 부르고,

여기서는 Student 객체를 통해 만들어진 객체이므로 Student 인스턴스라 할 수 있다.

클래스에 메서드 만들기

class Student {
    // 필드 : 클래스가 만들어낼 객체의 프로퍼티
    name;
    grade;
    age;

    //생성자 : 클래스 호출 시 실제로 객체를 만들어내는 역할(=메서드)
    constructor(name, grade, age) {
        this.name = name;
        this.grade = grade;
        this.age = age;
    }

    // 메서드
    study() {
        console.log('공부');
    }
    introduce() {
        console.log('안녕');
    }
}

메서드도 간단하게 클래스 안에 우리가 넣어줄 메서드를 넣어주면 된다.

studentB.study();

그러면 이렇게 메서드도 인스턴스를 통해 호출이 가능한 것이다.

    // 메서드
    study() {
        console.log('공부');
    }
    introduce() {
        console.log(`안녕 ${this.name}`);
    }

this 는 현재 객체를 나타내므로 객체를 통해서 생성된 인스턴스의 this 를 호출하면 해당 이름 호출도 가능하다.

상속 이용하기

class StudentDeveloper extends Student {
    //필드
    favoriteSkill;

    //생성자
    constructor(name, grade, age, favoriteSkill) {
        super(name, grade, age);
        this.favoriteSkill = favoriteSkill;
    }

    programming() {
        console.log(`${this.favoriteSkill}로 프로그래밍 함`);
    }
}

extends 를 사용하면 부모 클래스의 필드와 메서드를 그대로 사용 가능하다.

super 함수 호출하면 부모 클래스의 생성자가 호출돼서

우리가 전달받은 매개변수가 부모 클래스의 생성자 메서드에서 호출돼서 세팅이 된다.

따라서 우리는 그대로 값 세팅이 가능한 것이다.

(TypeScript) - 인터페이스 선언 합치기

개발하는 인사담당자 — Mon, 25 Aug 2025 11:46:03 +0900

■ 인터페이스 선언 합치기 (declaration merging)

interface Person {
    name: string
}

interface Person {
    age: number
}

인터페이스는 타입과는 다르게 동일한 이름으로 두 개의 인터페이스를 선언해도 문제가 되지 않는다.

동일한 이름으로 정의한 인터페이스들이 결국 합쳐지고, 이를 선언 합침이라 한다.

const person: Person = {
    name: '',
    age: 13,
};

따라서 인터페이스를 따라 만든 객체도 2개의 프로퍼티를 가지게 되는 것이다.

interface Person {
    name: string;
}

interface Person {
    name: number; //충돌!
    age: number;
}

동일한 프로퍼티를 재정의하는데 타입을 달리하면 충돌이 일어나 오류가 발생한다.

interface Person {
    name: string;
}

interface Person {
    name: 'string'; // 스트링 리터럴 불가! string 만 가능
    age: number;
}

선언 합침에서는 이전 인터페이스 확장과 다르게 재정의할때 타입이 일치해야 한다.

모듈 보강 (예시)

interface Lib {
    a: number;
    b: number;
}

const lib: Lib = {
    a: 1,
    b: 2,
    c: 3,
};

이런 선언 합침은 보통 모듈을 보강할 때 많이 사용한다.

다음 코드에서처럼 라이브러리에 새로운 프로퍼티 추가가 필요한 경우 보통 라이브러리 자체에 추가가 어렵다.

따라서 선언 합침을 통해 다시 재정의 해줌으로써 우리가 필요한 c 프로퍼티를 넣을 수 있다.

(TypeScript) - 인터페이스 확장

개발하는 인사담당자 — Mon, 25 Aug 2025 11:33:05 +0900

■ 인터페이스 확장

interface Animal {
    name: string;
    color: string;
}

const dog:Dog = {
    name: '',
    color: '',
    isBark: true,
};

const cat:Cat {
    name: '',
    color: '',
    isScratch: boolean,
}

const chicken:Chicken {
    name: '',
    color: '',
    isFly: boolean,
}

다음과 같이 서브타입을 정의할 때 중복된 프로퍼티가 많은 것을 확인 가능하다.

이를 해결할 수 있는 게 인터페이스 확장 기능이다.

interface Dog extends Animal {
    isBark: boolean;
}

extends(=확장하다) 를 통해 Animal 받아준다.

기존의 Animal 이 가진 모든 프로퍼티를 가질 수 있는 것이다.

이를 상속이라고도 하는데 부모 타입으로부터 자식 타입이 물려받는 것이다.

interface Dog extends Animal {
    isBark: boolean;
}

이렇게 상속 받은 인터페이스에서 다시

name: 'hello' 와 같이 스트링 리터럴 타입 프로퍼티를 재정의 할 수 있다.

그러나 무조건 다시 재정의 가능한 건 아니다.

다시 정의하려고 하는 타입이 원본 타입의 서브 타입이여만 가능하다.

여기서도 name 원본 타입이 string 이고,

서브타입이 스트링 리터럴 타입이여서 이렇게 재정의가 가능하다.

type Animal = {
    name: string;
    color: string;
}

interface Dog extends Animal {
    isBark: boolean;
}

또 만약 Animal 이 type 별칭이였다고 해도 확장할 수 있다.

인터페이스는 객체 타입이면 다 확장 가능하다.

다중확장

interface DogCat extends Dog, Cat {}

const dogCat: DogCat = {
    name: '',
    color: '',
    isBark: true,
    isScratch: false,
};

Dog 와 Cat 둘 다 확장하도록 받을 수도 있다.

이렇게 되면 Dog 와 Cat 이 가진 모든 프로퍼티를 가질 수 있다.

(TypeScript) - 인터페이스

개발하는 인사담당자 — Mon, 25 Aug 2025 10:59:09 +0900

■ 인터페이스

: 상호간에 약속된 규칙

객체 구조 정의하는데 특화된 문법 (상속, 합침 등)

interface Person {
    readonly name: string;
    age?: number;
    sayHi: () => void;
}

const person: Person = {
    name: '송송송',
    sayHi: function () {
        console.log('hi');
    },
};

인터페이스는 타입별칭과 타입 정의하는 것은 비슷하다.

? 를 사용하여 선택적 프로퍼티도 받을 수 있으며,

함수형으로 sayHi: () => void; 처럼 화살표 함수로 받거나

또는 sayHi(): void; 처럼 호출 시그니처로 받을 수 있다.

인터페이스로 받을때는 기본적인 호출 시그니처와 다르게 메서드 이름이 sayHi() 처럼 변수 앞에 붙는다.

그렇다면 왜 다를까?

type Func = {
    (): void;
};

const func: Func = () => {
    console.log('func');
};

이전에 우리가 배운 호출 시그니처는 다음과 같이

함수 매개변수와 반환값을 정해주는 말 그대로 함수 타입을 정의하는 타입이다.

즉 () 매개변수 아무것도 안받고, 반환값이 void 아무것도 반환하지 않은 것이다.

interface Person {
    readonly name: string;
    age?: number;
    (): void;
}

const person: Person = {
    name: '송송송',
    sayHi: function () {
        console.log('hi');
    },
};

근데 만약 여기 코드를 ():void 로 받아서 호출 시그니처 처럼 () 만 사용하면

두 번째 Person 자체가 함수값을 정의하는 것이 된다.

따라서 해당 person은 함수가 아니라 오류가 난다.

즉, 인터페이스 프로퍼티를 정의할 때는 앞에 함수에 해당하는 변수명을 적어주면 된다.

person.sayHi();
person.sayHi(1, 2);

    sayHi(): void;
    sayHi(a:number, b:number): void;

다음과 같이 인터페이스에 오버로드 프로퍼티 설정을 위해서는

함수 타입 표현식이 아니라 호출 시그니처를 사용해주면 된다.

함수 타입 표현식은 두 개의 프로퍼티 작성하면 동일 변수명으로 오류가 뜨기 때문이다.

type Type1 = number | string;
type Type2 = number & string

const person: Person | number = {
    name: '송송송',
    sayHi: function () {
        console.log('hi');
    },
};

인터페이스는 기존 객체 정의와는 다르게

유니온 타입(합집합)과 인터섹션(교집합)이 불가능하다.

따라서 type 으로 유니온, 인터섹션을 이용하거나

Person | number 와 같이 인터페이스 말고 타입 자체를 유니온 또는 인터섹션 타입으로 받아야 한다.

※ 참고

인터페이스를 정할 때 변수명에 I를 붙이는 경우도 종종 있다. = 헝가리안 표기법 (팀 표기법을 따르는 걸 추천!)
JavaScript 는 _ 를 쓰는 스네이크 표기법이나,
userName 과 같은 카멜 표기법,
UserName 모두 대문자 표시인 파스칼 표기법을 한다.