백준 Typescript 알고리즘 프로젝트 세팅하기

오늘부터 백준 알고리즘 문제를 조금씩 풀어보기로 했습니다!

 

1. 먼저 프로젝트 폴더를 생성하세요

mkdir 알고리즘

// 저는 한글로 생성하였지만, 영어로 폴더명 작성하시길 추천 드립니다. 

 

 

2. package.json 설정

// pnpm init으로 설정하시고, 필요한 의존성을 설치 하면 됩니다. 

저는 다음과 같이 설정하였습니다. 

{
  "name": "알고리즘",
  "version": "1.0.0",
  "description": "",
  "type": "module", // ES6 모듈 사용
  "scripts": {
    "ts-node": "node --loader ts-node/esm", // 명령어를 간단히 실행하기 위해서 script 등록을 하였습니다. 
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@types/node": "^20.0.0", // ts-node에 대한 @type
    "ts-node": "^10.9.0", // typescsript를 실행하기 위해서는 ts-node가 필요합니다. 
    "typescript": "^5.0.0" // typescript를 사용할거라서, 설치해주었습니다. 
  }
}

 

 

3. tsconfig.json 설정하기

{
  "compilerOptions": {
    "target": "ES2022",
    "module": "ESNext",
    "moduleResolution": "node",
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "types": ["node"]
  },
  "include": ["**/*.ts"],
  "exclude": ["node_modules"]
}

 

4. 실행 방법

echo "4 6" | pnpm ts-node 01.ts

> 입력은 echo "{입력값}" 실행은 pnpm ts-node {파일명}

 

 5. ts 파일 입력에 대한 처리

import { readFileSync } from "fs";

const input = readFileSync("/dev/stdin").toString().trim().split("\n");

const [A, B] = input[0].split(" ").map(Number);

 

! 출력은 console.log로 하시면 됩니다

 

 

제출시에는 ts 파일의 내용을 복사해서 백준 제출에 제출하시면 됩니다 :)

잘 동작하네요!

 

이렇게만 사용한다면, 단순히 백준 웹에서 직접 코드를 작성하는 것과 크게 다르지 않겠죠!

 

6. Prettier와 ESLint 설정하기

1) 설치하기

npm add -D prettier eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint-config-prettier eslint-plugin-prettier eslint-plugin-import

 

2) 파일 생성

//.prettierrc
{
  "semi": true,                    // 세미콜론 사용
  "trailingComma": "es5",          // ES5 호환 trailing comma
  "singleQuote": true,             // 작은따옴표 사용
  "printWidth": 80,                // 한 줄 최대 80자
  "tabWidth": 2,                   // 탭 크기 2칸
  "useTabs": false,                // 스페이스 사용
  "bracketSpacing": true,          // 객체 괄호 내부 공백
  "arrowParens": "avoid"           // 화살표 함수 괄호 최소화
}

 

//eslint.config.js
import js from '@eslint/js';
import tseslint from '@typescript-eslint/eslint-plugin';
import tsparser from '@typescript-eslint/parser';
import prettier from 'eslint-plugin-prettier';
import prettierConfig from 'eslint-config-prettier';
import importPlugin from 'eslint-plugin-import';

export default [
  js.configs.recommended,
  {
    files: ['**/*.ts'],
    languageOptions: {
      parser: tsparser,
      parserOptions: {
        ecmaVersion: 'latest',
        sourceType: 'module',
      },
      globals: {
        console: 'readonly',
        process: 'readonly',
        Buffer: 'readonly',
        __dirname: 'readonly',
        __filename: 'readonly',
        global: 'readonly',
        module: 'readonly',
        require: 'readonly',
        exports: 'readonly',
      },
    },
    plugins: {
      '@typescript-eslint': tseslint,
      prettier: prettier,
      import: importPlugin,
    },
    rules: {
      ...tseslint.configs.recommended.rules,
      ...prettierConfig.rules,
      'prettier/prettier': 'error',

      // 사용하지 않는 변수 검증 강화
      '@typescript-eslint/no-unused-vars': 'error',
      'no-unused-vars': 'off', // TypeScript 버전 사용

      // any 타입 사용 경고
      '@typescript-eslint/no-explicit-any': 'warn',

      // import 순서 및 정리
      'import/order': [
        'error',
        {
          groups: [
            'builtin',
            'external',
            'internal',
            'parent',
            'sibling',
            'index',
          ],
          'newlines-between': 'always',
          alphabetize: {
            order: 'asc',
            caseInsensitive: true,
          },
        },
      ],
      'import/no-unused-modules': 'error',
      'import/no-duplicates': 'error',

      // 백준 문제 풀이를 위해 console.log 허용
      'no-console': 'off',
    },
  },
  {
    ignores: ['node_modules/**', 'dist/**', 'build/**'],
  },
];