Typescript란?

TypeScript는 JavaScript의 상위 집합으로, 정적 타입 시스템과 객체지향 프로그래밍 기능을 추가하여 대규모 애플리케이션 개발을 더 안전하고 효율적으로 할 수 있게 만든 언어입니다. 컴파일 시 JavaScript로 변환됩니다.

JavaScript와의 주요 차이점

TypeScript를 사용하면 코드 작성 시 타입 오류를 사전에 잡을 수 있어 런타임 오류를 줄일 수 있습니다. 변수, 함수 매개변수, 반환값 등의 타입을 미리 검사함으로써 코드의 안정성이 높아지고, 예상치 못한 버그를 사전에 방지할 수 있습니다. 또한 타입 시스템은 팀원이 코드를 쉽게 이해할 수 있도록 만들어 주기 때문에 유지보수를 쉽게 만들어 줍니다.

TypeScript는 클래스, 인터페이스, 상속, 추상 클래스 등 객체지향 프로그래밍(OOP) 개념을 지원합니다. 이는 코드 재사용성을 높이고, 구조적인 설계를 가능하게 합니다.

타입 명시 예시

js인 경우

function add(a, b) {
  return a + b;
}

const sum = add(10, 20);
console.log(sum); // 30

ts인 경우

function add(a: number, b: number): number {
  return a + b;
}

const sum: number = add(10, 20);
console.log(sum); // 30

OOP 개념 예시

class Person {
  name: string;
  age: number;

  constructor(name: string, age: number) {
    this.name = name;
    this.age = age;
  }

  greet() {
    console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
  }
}

const alice = new Person("Alice", 30);
alice.greet(); // "Hello, my name is Alice and I am 30 years old."

타입 추론 예시

let message = "Hello, TypeScript!";
// TypeScript는 message 변수가 string 타입임을 자동으로 추론합니다.

message = 123; // 오류: Type 'number' is not assignable to type 'string'.

타입스크립트 적용

tsconfig.json 파일

{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx"
  },
  "include": [
    "src"
  ]
}

React + Ts 앱 생성

npx create-react-app <App-name> --template typescript
=> 새로운 리액트 프로젝트가 생기고 tsconfig.json 파일 생성됩니다.

tsconfig.json 파일의 내용은 아래와 같습니다.

{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx"
  },
  "include": [
    "src"
  ]
}

---

Prettier란?

코드 포맷팅 도구로, 코드의 스타일을 일관되게 유지하게 해줍니다. 탭 너비, 세미콜론 사용 여부, 따옴표 스타일 등을 자동으로 포맷팅해줍니다. 코드의 외형(스타일)을 통일되게 만들어줍니다.

ESLint란?

코드 린팅 도구로, 코드의 문법 오류나 버그가 발생할 가능성이 있는 부분을 찾아냅니다. (스타일 문제도 일부 다룰 수 있습니다.)
예를 들어, 사용하지 않는 변수, 잘못된 사용 방법, 일관되지 않은 스타일 등을 경고하거나 수정합니다.
ESLint는 문법 오류와 코드 스타일을 모두 검사할 수 있지만, 주로 코딩 규칙에 관한 문제를 찾고 수정하는 데 사용됩니다.

Prettier & ESLint 적용

1. Prettier와 ESLint 및 관련 플러그인 설치
   npm install --save-dev prettier eslint eslint-config-prettier eslint-plugin-prettier

2. .prettierrc.json와 .eslintrc.json 파일 생성
   js 또는 json으로 파일을 생성해 원하는 규칙을 정의내리면 된다.

• 코드 예시
  • .prettierrc.json

    {
      "singleQuote": true,
      "semi": true,
      "useTabs": false,
      "tabWidth": 2,
      "trailingComma": "all",
      "printWidth": 80,
      "arrowParens": "avoid",
      "bracketSpacing": true,
      "htmlWhitespaceSensitivity": "css",
      "insertPragma": false,
      "jsxBracketSameLine": false,
      "jsxSingleQuote": false,
      "proseWrap": "preserve",
      "quoteProps": "as-needed",
      "requirePragma": false,
      "endOfLine": "auto"
    }

    
    
  • .eslintrc.json

    {
        "env": {
          "browser": true,
          "es2021": true,
          "jest": true
        },
        "extends": [
          "eslint:recommended",
          "plugin:react/recommended",
          "plugin:@typescript-eslint/recommended",
          "prettier"
        ],
        "settings": {
          "react": {
            "version": "detect"
          }
        },
        "parser": "@typescript-eslint/parser",
        "parserOptions": {
          "ecmaFeatures": {
            "jsx": true
          },
          "ecmaVersion": 12,
          "sourceType": "module"
        },
        "plugins": [
          "react",
          "@typescript-eslint",
          "prettier"
        ],
        "rules": {
          "react/react-in-jsx-scope": "off",
          "indent": ["error", 2],
          "linebreak-style": ["error", "unix"],
          "quotes": ["error", "single"],
          "semi": ["error", "always"],
          "no-extra-semi": "error",
          "no-tabs": ["error", { "allowIndentationTabs": false }],
          "prettier/prettier": ["error"]
        }
      }
      

    
    

3. vs code에서 prettier, eslint 익스텐션 설치

4. vs code명령줄(cmd+shift+p)에 .vscode/settings.json 파일에 아래 내용 추가

{
  "editor.formatOnSave": true, // 저장할 때 자동으로 코드 포맷팅을 실행
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true // 저장할 때 자동으로 ESLint 규칙에 따라 가능한 모든 문제를 수정
  }
}

---

Tailwind CSS

개념

Tailwind CSS는 유틸리티 퍼스트(utility-first) CSS 프레임워크로, 빠르고 쉽게 스타일을 적용할 수 있는 도구입니다. CSS를 별도로 작성할 필요 없이 HTML 태그의 className 안에 스타일을 정의내리는 인라인 스타일로, 정의된 클래스를 사용해서 빠르게 화면을 구현할 수 있습니다. 또 자주 쓰이는 스타일은 config 파일 안에 정의내림으로써 프로젝트 전반에 쉽게 적용할 수 있습니다.

사전에 정의된 클래스는 여기에서 확인할 수 있습니다.

장점

1. 완만한 학습 곡선
   공식 문서가 굉장히 잘 정리되어 있고, 기본적으로 스타일에 대한 것은 css3와 유사하기 때문에 쉽게 적응할 수 있습니다.

   
   

2. 클래스 이름을 고민할 필요 ❌

   Tailwind CSS는 미리 정의된 유틸리티 클래스 이름을 사용하기 때문에, 개발자가 직접 클래스 이름을 고민할 필요가 없습니다.

   
   

3. 빌드 최적화

   Tailwind CSS는 사용된 클래스만을 포함하도록 빌드를 최적화할 수 있습니다. 이를 통해 최종 CSS 파일의 크기를 최소화할 수 있으며, 페이지 로딩 속도를 개선할 수 있습니다. 사용하지 않는 CSS를 제거하여 빌드 파일 크기를 줄이는 퍼지 기능이 내장되어 있어, 프로덕션 환경에서 최적화된 CSS를 제공합니다.

   
   

클래스 이름을 고민하지 않아도 되고 스타일 변경사항을 빠르게 반영할 수 있다는 점이 좋습니다 👍

단점

1. HTML 코드가 길어져 복잡성 ⬆️

2. 재사용성이 떨어지는 문제

   스타일을 개별 요소에 직접 적용하는 유틸리티 클래스를 사용합니다. 이는 동일한 스타일을 여러 곳에서 반복해서 사용할 때, 일관된 변경을 적용하기 어려울 수 있습니다.

3. 동적 클래스 이름 생성이 어려움

• Tailwind CSS는 컴파일 시점에 사용된 모든 클래스 이름을 분석하여 최종 CSS 파일을 생성합니다. 그러나 클래스 이름이 문자열로 동적으로 생성되거나 조합되면, Tailwind는 이러한 클래스를 미리 알 수 없으므로, 해당 클래스에 대한 스타일을 포함하지 못합니다.
• 예를 들어 text-${size} 와 같은 코드는 동작하지 않습니다. 삼항 연산자를 쓰거나 size를 미리 정의내려야 합니다.

Tailwind CSS 적용

1. 플러그인 설치

npm install -D tailwindcss postcss autoprefixer

postCSS를 사용하면 autoprefixer 플러그인으로 밴더프리픽스를 쉽게 적용할 수 있습니다.

2. tailwind.config.js 파일 생성

npx tailwindcss init -p 명령어를 통해 init 파일을 생성합니다.

3. App.css에 아래 내용 추가

@tailwind base;
@tailwind components;
@tailwind utilities;

4. vsCode Tailwind CSS IntelliSense 익스텐션 설치

위와 같이 태그 안에 className을 선언하고 고정된 클래스 이름을 입력했을 때 값이 자동완성 된다면, 적용 완료!