typescript9 [ React ] Json server을 사용한 Heroku & Vercel로 배포 웹 애플리케이션을 개발하다 보면 간단한 백엔드가 필요할 때가 있습니다. 이때, 간단한 JSON 파일을 데이터베이스처럼 활용할 수 있는 JSON Server와 이를 Heroku 및 Vercel에 배포하는 방법을 사용했습니다. Heroku에 db.json 배포하기먼저, Heroku에 가입한 후 새로운 프로젝트를 생성합니다. Heroku는 무료로 제공되는 클라우드 플랫폼으로, 간단한 프로젝트를 배포하기에 적합합니다. 1. Heroku에 가입하고 새로운 프로젝트를 만든다.https://dashboard.heroku.com/ 2. 데이터 저장용 db.json 파일 생성루트 디렉터리(src 밖)에 db.json 파일을 생성해 데이터를 저장합니다. 예전에는 여러 개의 JSON 파일로 데이터를 나눠 저장했지만, 하.. 2023. 2. 28. [ TypeScript ] js 파일 ts로 변환 using-ts.js 파일을 using-ts.ts 파일로 바꾸니 아래와 같이 VScode에서 빨간 줄이 생겼다. const button = document.querySelector("button"); const input1 = document.getElementById("num1"); const input2 = document.getElementById("num2"); function add(num1, num2) { return num1 + num2; } button.addEventListener("click", function() { console.log(add(input1.value, input2.value)); }); ! 와 HTMLInputElement 추가 const button = docume.. 2023. 2. 2. [ TypeScript ] 제네릭 & 타입 추론 제네릭 제네릭이란 타입을 마치 함수의 파라미터처럼 사용하는 것 아래 코드는 text라는 파라미터를 받아 그대로 text를 반환한다. 아래의 코드에서는 string이 들어와도 타입은 any로 반환하고 숫자가 들어와도 any를 반환한다. 반환을 할 때 그에 맞는 타입을 반환하고 싶을 때 제네릭을 사용하면 된다. function getText(text: any): any { return text; } getText('hi'); // 'hi' getText(10); // 10 getText(true); // true 를 사용한 아래 코드가 제네릭의 기본 문법이다. function getText(text: T): T { return text; } getText('hi'); getText(10); getText(t.. 2023. 1. 17. [ TypeScript ] Union 타입 & Type Alias (사용자 정의 타입) OR 연산자 ( A || B ) printOut함수는 input 파라미터를 받아서 해당 파라미터를 출력해 준다. const printOut = (input: string | number) => { // 문자열 또는 숫자형이 올수있다. console.log(input); } printOut('문자열'); // 문자열 printOut(20); // 20 printOut(true); // Error typeof toFiexed()는 소수에 사용된다. typeof을 사용하여 number일 경우와 string일 경우를 조절해 줄 수 있다. function getAge(age: number | string) { if (typeof age === 'number') { age.toFixed(); return age; .. 2023. 1. 16. [ TypeScript ] 타입 표기 (Type Anotation) String let str: string = 'TypeScript'; //str 변수 선언 str = 123 // Error str = true // Error str = undefined // Error Number let num: number = 6; //num 변수 선언 let hex: number = 0x288; // 0x는 16진수로 만들어준다 let binary: number = 0b1010; // 0b는 2진수로 만들어준다. let octal: number = 0o288 // 0ㅐdms 8진수로 만들어준다. Boolean let isTrue: boolean = true; Array (배열) let arrNum : number[] = [1,2,3]; let arrStr : string[] = .. 2023. 1. 16. [ TypeScript ] TypeScript 기초 다지기 및 파일 생성 TypeScript VS JavaScript Time TypeScript는 변수의 타입이 컴파일타임에 결정된다. JavaScript는 변수의 타입이 런타임에 결정된다. 컴파일타임? 런타임? 컴파일 타임 (Compile time): 작성한 소스코드가 어떠한 것(js, binary 등)으로 변환되는 과정 런타임(Runtime): 프로그램이 실행되는 과정 TypeScript를 왜 쓸까? 장점 단점 TypeScript 1. Microsoft에서 만들었고 꾸준히 업데이트를 한다. 2. 생태계가 크다. 3. Microsoft에서 개발한 VScode와 잘 맞는다. 4. 대부분의 Library에서 타입 정의 파일을 제공한다. 5. 유지보수가 JS보다 유리하다. 1. JavaScript에 비해 어렵다. JavaScrip.. 2023. 1. 16. [ TypeScript ] TypeScript+React TODO 리스트 만들기 (2) 앞에서 TypeScript+React를 사용한 정적인 리스트를 만들어 보았습니다. [ TypeScript ] TypeScript+React TODO 리스트 만들기 (1) React와 TypeScript를 사용하여 TODO 리스트를 만들기에 앞서 차근차근 코드를 이해하고자 정적인 리스트 페이지를 먼저 만들어 보려고 합니다. 목차 1. package.json 파일 생성 2. typescript 설치 명령어 3. T codesign.tistory.com 이번에는 리스트에 데이터 모델을 추가해보았습니다. 파일 전체 아웃라인 > react-ts 파일 > node_modules > public > src > src > components > Todos.tsx > models > todo.ts (이 파일 만들 예정입.. 2022. 10. 22. [ TypeScript ] TypeScript+React TODO 리스트 만들기 (1) React와 TypeScript를 사용하여 TODO 리스트를 만들기에 앞서 차근차근 코드를 이해하고자 정적인 리스트 페이지를 먼저 만들어 보려고 합니다. 목차 1. package.json 파일 생성 2. typescript 설치 명령어 3. Todos.tsx 파일 만들기 4. App.tsx 파일 만들기 5. 결과물 1. package.json 파일 생성 종속 라이브러리를 설치하는데 이 파일이 필요합니다. npm init -y 2. typescript 설치 명령어 npx create-react-app react-ts --template typescript 파일을 만들어준 뒤 밑의 명령어로 프로젝트를 실행시켜 주세요. npm start 파일 전체 아웃라인 > react-ts 파일 > node_modules .. 2022. 10. 21. [ TypeScript ] TypeScript설치 및 실행 & 작동 방법 1. package.json 파일 생성 종속 라이브러리를 설치하는데 이 파일이 필요합니다. npm init -y 2. TypeScript 파일 설치 npm install typescript 이제 타입스크립트 컴파일을 사용할 수 있게 됩니다. 3. TypeScript 실행 Extra 타입스크립트는 자바스크립트와 달리 코드가 브라우저에서 코드를 실행하지 않습니다. 그래서 타입스크립트를 자바스크립트 형태로 컴파일해야 합니다. 컴파일이 진행되는 동안 타입 표기는 모두 삭제됩니다. 왜냐하면 자바스크립트는 타입 표기를 이해하지 못하기 때문입니다. 컴파일 단계에서는 우리가 코드를 작성하면서 미처 발견하지 못했던 오류들을 찾아 알려줍니다. 컴파일된 코드는 브라우저에서 실행이 됩니다. 컴파일러를 사용하려면 아래 명령어를.. 2022. 10. 20. 이전 1 다음 728x90
