입사하고 처음으로 맡게 된 백오피스 작업.
백오피스를 만들기 위해 프로젝트를 react와 typescript로 구성했다.
npx create-react-app projectName --typescript명령어로 react, typescript를 설치했다.
tsconfig 파일이 생성되어있고 기본적으로 세팅도 되어있다.
포트폴리오 프로젝트도 typescript를 적용하기 위해 위 명령어를 사용해서 설치했었던 적이 있다.
그리고 그때의 tsconfig 파일과 현재의 tsconfig 파일은 좀 다르다. (포트폴리오 프로젝트 때 tsconfig 파일을 해당 블로그 글 참조)
{
"rules": {
"no-unused-expression": true
},
"compilerOptions": {
"target": "es5",
"lib": ["dom", "dom.iterable", "esnext"],
"allowJs": true,
"downlevelIteration": false,
"skipLibCheck": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"forceConsistentCasingInFileNames": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "react",
"strict": true,
"strictNullChecks": true,
"noImplicitReturns": false,
"noImplicitAny": true,
"noImplicitThis": true,
"noUnusedLocals": false,
"noUnusedParameters": false,
"baseUrl": "src"
// "typeRoots": ["node_modules/@types"]
},
"parserOptions": {
"ecmaVersion": 5,
"sourceType": "module",
"ecmaFeatures": {
"jsx": true,
"experimentalObjectRestSpread": true
}
},
"include": ["src/*"],
"paths": {
"*": ["*", "src/*"]
}
}.eslintrc.json 파일도 생성하고 설정해줬다.
{
"extends": [
"eslint:recommended",
"plugin:react/recommended",
"plugin:@typescript-eslint/recommended",
"prettier/@typescript-eslint",
"plugin:prettier/recommended"
],
"plugins": ["react", "@typescript-eslint", "prettier"],
"env": {
"browser": true,
"jasmine": true,
"jest": true
},
"rules": {
"prettier/prettier": [
"error",
{
"singleQuote": true,
"semi": true,
"useTabs": false,
"tabWidth": 2,
"trailingComma": "all",
"printWidth": 80
}
]
},
"settings": {
"react": {
"pragma": "React",
"version": "detect"
}
},
"parser": "@typescript-eslint/parser"
}이렇게 완료되어있는 상태만 보면 쉬워보이겠지만 tsconfig와 eslintrc 설정하면서 시행착오도 많았다.
지금도 뭔가 prettier, eslint가 원하는대로 작동하지는 않는다..
추가적인 글은 다음에…