BIBLIYA 개발 노트 LV_1

✔ React ✔ Redux Toolkit ✔ Typescript ✔ Tailwind CSS 1. 기본 세팅 npx create-react-app@latest app이름 --template typescript yarn add @reduxjs/toolkit yarn add react-redux npm install -D tailwindcss postcss autoprefixer npx tailwindcss init -p //tailwind.config.js /** @type {import('tailwindcss').Config} */ module.exports = { content: ["./src/**/*.{js,jsx,ts,tsx}"], theme: { extend: {}, }, plugins: [], ..

interface & type interface는 오로지 object의 모양을 typescript에게 설명해 주기 위해서만 사용된다. type Team = "red" | "blue" | "yellow" // ok // interface Team = "red" | "blue" | "yellow" // X // interface Tema = string //X type Player = { name: string team: Team } interface Player { name: string team: Team } // 상속 type User = { name: string } interface Player extends User { ~~~~ } type Player = User & { ~~~~ } // 인터페..

Classes 1. 기본 Class TypeScript private, public 개념 있음 class Person { constructor( private firstName: string, private lastName: string, public nickname: string ){} } const bibliya = new Person("bibliya", "seo", "비블리야"); bibliya.firstName // Error JavaScript private, public 개념 없음 class Person { constructor(firstName, lastName, nickname) { this.firstName = firstName; this.lastName = lastName; this.n..

Call Signatures type Add = (a: number, b: number) => number; const add: Add = (a, b) => a + b Overloading //overloading은 함수가 여러개의 call signatures를 가지고 있을 때 발생 type Add = { (a: number, b: number) : number (a: number, b: string) : number } const add: Add = (a, b) => a + b; //error const add: Add = (a, b) => { if(typeof b === "string") return a return a + b } // 아무 의미 없는 코드 // Nextjs에서 일어나는 overloa..

숫자(Number) let myNum: number = 6; 문자열(String) let color: string = "pink"; color = 'red'; 불리언(Boolean) let isFinished: boolean = false; 배열(String) let numberList: number[] = [1, 2, 3]; let stringList: string[] = ["1","2","3"]; 튜플(Tuple) let array: [string, number]; array = ["hello", 1]; //ok 열거 (Enum) enum Color {Red, Green, Pink} let myColor: Color = Color.Green; enum Color {Red = 1, Green, Pink..