TypeScript 과제

vite, react, typescript (npm) 기반 프로젝트 시작 

npm create vite@latest 프로젝트폴더명 -- --template react-ts

 

Tailwind css

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

tailwind.config.js파일에 "./src/**/*.{js,jsx,ts,tsx}"를 넣어서 Tailwind CSS를 활성화

src/index.css에 위의 내용 추가

✔️ 노란줄 에러 ( Unknown at rule @tailwindcss(unknownAtRules) 빠른 수정을 사용할 수 없음 ) 문제는

VScode에서-확장- 'PostCSS Language Support' 설치하면 해결됨 ▼

 

// src/types/country.ts

export interface Country {
  name: {
    common: string;
    official: string;
    nativeName: {
      [key: string]: {
        // 객체마다 다른값이여서 - key값으로받고,스트링으로 넣음 ▶︎ '인덱스 시그니처'
        official: string;
        common: string;
      };
    };
  };
  tld: string[];
  cca2: string;
  ccn3: string;
  cca3: string;
  independent: boolean;
  status: string;
  unMember: boolean;
  currencies: {
    [key: string]: {
      name: string;
      symbol: string;
    };
  };
  idd: {
    root: string;
    suffixes: string[];
  };
  capital: string[];
  altSpellings: string[];
  region: string;
  subregion: string;
  languages: {
    [key: string]: string;
  };
  translations: {
    [key: string]: {
      official: string;
      common: string;
    };
  };

  latlng: number[];
  landlocked: boolean;
  area: number;
  demonyms: {
    [key: string]: {
      f: string;
      m: string;
    };
  };

  flag: string;
  maps: {
    googleMaps: string;
    openStreetMaps: string;
  };
  population: number;
  car: {
    signs: string[];
    side: string;
  };
  timezones: string[];
  continents: string[];
  flags: {
    png: string;
    svg: string;
  };
  coatOfArms: {
    png?: string;
    svg?: string;
  };
  startOfWeek: string;
  capitalInfo: {
    latlng: number[];
  };
  postalCode: {
    format: string;
    regex: string;
  };
}

---