개발노트

Interface interface Person { firstName: string; lastName: string; fullName(): string; } class Employee implements Person { constructor(public firstName: string, public lastName: string) {} fullName(): string { return `${this.firstName} ${this.lastName}`; } } const emp = new Employee("John", "Doe"); console.log(emp.fullName()); // 출력: John Doe Type으로 했을 때 동일한 소스 type Person = { firstName: string;..

class (클래스) class MyClass { private name: string; private age: number; constructor(name: string, age: number) { // 클래스의 인스턴스 변수에 값을 할당 this.name = name; this.age = age; // 생성자에서 추가적인 초기화 로직 수행 가능 console.log(`${this.name} 객체가 생성되었습니다.`); } // 클래스의 메서드 sayHello() { console.log(`안녕하세요, 저는 ${this.name}이고, ${this.age}살입니다.`); } } // 클래스의 객체 생성 const myObject = new MyClass("Alice", 30); myObject.sayH..

Array를 역순으로 재배치 시키는 Function 만들기 Call Signature 방식1. //Generic을 사용한 Signature type Reverse = { (array: T[]): T[]; }; 여기서 T는 데이터 형식을 나타내는 Generic으로 어떠한 형식이 오더라도 TypeScript가 알아서 그 데이터 형식에 맞춰줌 (따라서 아래와 같이 올 수 있는 데이터형식을 전부 작성해줄 필요없음) 데이터 형식 T의 Array로 매개변수를 받았다면 return 되는 Array도 T형식의 배열로 Return 해야하기 때문에 동일하게 T로 작성해줌 방식2. //Generic을 사용하지않은 Call Signature type Reverse = { (array: string[] | number[] | ..

Call Signatures Call Signatures는 TypeScript에서 함수 타입을 정의하는데 사용되는 방법 중 하나입니다. 함수는 객체와 마찬가지로 일급 객체로서, 변수에 할당하거나 매개변수로 전달할 수 있습니다. 따라서 TypeScript에서 함수의 타입을 명시적으로 정의하고 사용하고자 할 때 Call Signatures를 활용합니다 함수의 매개변수와 반환 타입을 명시하며, 함수의 매개변수와 반환 타입 사이에 => 기호를 사용하여 표현합니다. type NumFunc = (a:number,b:number)=> number; const add:NumFunc = (a,b) => a+b const sub:NumFunc = (a,b) => a-b const divide:NumFunc = (a,b) ..

any any는 모든 타입을 허용하는 동적 타입으로, 컴파일러가 해당 값에 대해 타입 검사를 수행하지 않습니다. any를 사용하면 타입 체크를 우회할 수 있지만, 타입 안정성을 잃을 수 있으므로 사용을 최소화하는 것이 좋습니다. let anyValue: any = 10; anyValue = "Hello"; anyValue = true; console.log(anyValue); // Output: true unknown unknown은 any와 비슷하지만, any보다 타입 안정성을 유지할 수 있는 타입입니다. unknown은 타입이 무엇인지 모를 때 사용하며, 타입 체크를 거쳐야만 사용할 수 있습니다. function processValue(value: unknown) { if (typeof value =..

TypeScript TypeScript는 정적 타입을 지원하는 프로그래밍 언어로서, 자바스크립트의 상위 집합(superset)입니다. 마이크로소프트에서 개발한 오픈소스 언어로, JavaScript 코드를 TypeScript로 변환하여 사용할 수 있습니다. TypeScript는 JavaScript의 기능을 모두 포함하면서 타입 시스템과 몇 가지 새로운 기능을 추가하여 개발자들이 안정적이고 유지보수하기 쉬운 코드를 작성할 수 있도록 돕습니다. 사용이유 개발자의 의도와 다르게 실행되거나, JavaScript 특성상 컴파일을 하기전에 오류를 잡지 못하기 때문에(JS는 컴파일 후에 오류가 발생 했음을 알려주는 Runtime 오류만 나옴) TypeScript를 사용하여 Type을 정해주고 오류를 컴파일 전에 미리 ..

※React App 배포를 시작하기 전, 아래 링크에 들어가셔서 순서대로 진행 부탁드리겠습니다. https://mroh1226.tistory.com/84 GitHub Page 무료 호스팅 이용하기 1. GitHub Repository에 Web 프로젝트를 커밋, 푸시합니다. (리포짓토리를 Public으로 설정) 2. 설정에서 Repository의 Name을 설정합니다(Name이 도메인 뒷 주소가 될 예정) 3. Pages로 이동하여 위에서 생성한 Rep mroh1226.tistory.com React App GithubPage 설정하기. 1. 위 준비가 끝났다면 터미널로 돌아가서 아래와 같이 명령어를 작성하여 패키지를 설치해줍니다. npm install gh-pages 2. 설치가 완료되었다면, packa..

React Router React v6부터는 문법 변동 사항이 있습니다. - 참고링크: https://reactrouter.com/en/6.12.1 Home v6.12.1 I'm on v5 The migration guide will help you migrate incrementally and keep shipping along the way. Or, do it all in one yolo commit! Either way, we've got you covered to start using the new features right away. reactrouter.com React Router 패키지 설치하기. React Router는 react-router-dom이라는 패키지로 제공되므로, 프로젝트 디..

map() map()은 JavaScript 배열에서 사용되는 메서드로, 배열의 각 요소를 순회하면서 각 요소에 대해 지정된 동작을 수행하고 그 결과를 새로운 배열로 반환합니다. map()은 원본 배열을 변경하지 않고 새로운 배열을 생성합니다. array.map((currentValue, index, array) => { // 동작 수행 return transformedValue; }); map()은 주어진 함수를 배열의 각 요소에 대해 순차적으로 호출하고, 각 요소에 대해 함수의 반환 값을 새로운 배열에 저장합니다. 그리고 최종적으로 새로운 배열을 반환합니다. array: map()을 호출하는 배열 자체입니다. currentValue: 배열의 현재 요소 값입니다. index (선택 사항): 배열의 현재 ..

fetch fetch() 함수는 JavaScript에서 네트워크 요청을 보내고 응답을 받을 수 있는 기능을 제공하는 웹 API입니다. fetch() 함수를 사용하여 서버와 데이터를 주고받을 수 있습니다. fetch(url) .then(response => { // 응답을 처리하는 코드 }) .catch(error => { // 에러 처리 코드 }); fetch() 함수는 첫 번째 인수로 요청을 보낼 URL을 받습니다. 요청을 보내면 Promise 객체가 반환됩니다. 이후 then() 메서드를 사용하여 응답을 처리하거나 catch() 메서드를 사용하여 에러를 처리할 수 있습니다. Fetch()로 JSON 데이터 받기 fetch('https://api.example.com/data') .then(respon..