개발하는 인사담당자 개발하는 인사담당자

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 comput..

■ 타입 변수 응용하기function swap(a: T, b: U) { return [b, a];}const [a, b] = swap('string', 2); 다음과 같이 a: T, b; U 와 같이 타입 변수를 여러 개 선언해서 사용하는 것도 가능하다. function returnFirstValue(data: T) { return data[0];} 이렇게 제네릭을 사용해서 받게 되면 unknown 형식에서 사용할 수 없다는 오류가 뜬다.왜냐하면 아직 해당 함수 호출 전까지는 해당 인수의 값이 추론 되지 않기 때문이다. 즉, 데이터가 배열이라는 확신도 없을 뿐더라 호출이 되지 않았기 때문에 unknown 인 것이다. function returnFirstValue(data: T[]) { ..

■ 제네릭 (일반적인, 포괄적인): 모든 타입에 두루 두루 쓸 수 있는 범용적 함수이다. //제네릭 함수function func(value: T): T { return value;} 모양을 사용하면 되는데 여기서 T 는 타입을 저장하는 변수, 즉 타입 변수이다.그리고 나서 매개변수와 반환값도 T 로 바꿔준다. let num = func(10); //numberlet bool = func(true); //booleanlet str = func('string'); //string 그러면 각각의 변수가 우리가 원하는 값으로 추론 되는 것을 확인할 수 있다.함수를 호출할 때마다 타입이 담기게 되어 그때 그때마다 타입을 지정할 수 있는 것이다. ■ 정리타입변수와 함께 여러 타입의 값을 인수로 받아서 범용적..

■ 인터페이스와 클래스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 (구현) 이다. 즉,..

■ 접근 제어자 (access modifier) : 타입스크립트 클래스에서만 제공하며, 특정 클래스를 만들 때 특정 필드나 메서드에 접근할 수 있는 범위를 설정해준다.ex) public / private / protectedconst employee = new Employee('송송', 27, 'developer');employee.name = '히히';employee.age = 17;employee.position = 'designer'; 인스턴스를 생성하고 값을 세팅할 수 있는 이유는 기본적으로 클래스의 접근제어자가 public 으로 설정돼아무 제약 없이 누구나 접근이 가능하기 때문이다. 만약 접근 프로퍼티를 private 으로 바꾸면해당 클래스 내에서만 엑세스 할 수 있게 바뀐다.따라서 클래스 밖..

■ 타입스크립트 클래스 사용하기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'); }} 타입스크립트 클래스 생성에는 필드에 타입을 지정해주면 된다.그런데 타입 지정에서 끝나는 것이 아니라 초기값과 할당이 되지 않아 오류가 난다.따라서 생성자를 만들어서 값을 할..

■ 자바스크립트 클래스 사용하기{ "compilerOptions": { "target": "ESNext", "module": "ESNext", "skipLibCheck": true, "outDir": "dist", "strict": true, "moduleDetection": "force", "allowJs": true }, "include": ["src"]} 타입스크립트에서 자바스크립트를 사용하고자 한다면allowJs : true 설정을 하면 include 안에 있는 src 에서 JavaScript 도 허용한다는 뜻이다. 필드class Student { // 필드 : 클래스가 만들어낼 객체의 프..

■ 인터페이스 선언 합치기 (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;} 동일한 프..