햇깔리기도 하고 최근에 강의도 다른걸 듣다보니 정리의 필요성을 느껴서 한번 다시 정리해본다.
eslint -> 코드 오류 및 룰을 정하고 잡아서 오류 발생시켜서 잡아줌
pritter -> 코드를 일정한 룰 규칙으로 정렬시킴
저 둘은 기본적인 생성 옵션만 따라가도 됀다
{
"compilerOptions":{
"esModuleInterop": true
}
}
해당 옵션은 정말 새롭게 배운 개념이라 써본다.
원래
import React from 'react';라는 코드는 실질적으로 해당 형태로 선언되어야 한다.
import * as React from 'react';기본적으로 기본 형태를 사용하기 때문에 잘 모르는 부분이지만, config에서 잡아주는 영역이다.
{
"compilerOptions":{
"sourceMap": true
}
}
오류가 발생했을때 오류가 발생한 소스코드를 찾아갈 수 있게 설정해주는 옵션이다
{
"compilerOptions":{
"lib":["ES2020","DOM"],
"jsx":"react"
}
}
라이브러리는 최신 문법을 사용하고, JSX를 react에 사용한다는 지정해주는 작업이다.
{
"compilerOptions":{
"module":"exnext",
"moduleResolution":"Node"
}
}
모듈을 최신 모듈을 쓰겠다는 형태로 선언된 것이다.
놀랍게도 예전에 만들어진 CommonJS나 AMD, SystemJS 와 같은 예전 모듈을 사용해야한다.
그 다음 옵션은 import-export도 Node가 해석할 수 있게 해달라는 추가적인 설명 옵션이다.
{
"compilerOptions":{
"target":"es5"
}
}
ES2020으로 작성해도 얘를 ES5형태로 변환하겠다는 옵션이다.
{
"compilerOptions":{
"strict":true
}
}
Type Checking을 엄격하게 하겠다는 옵션이다.
자바스크립트는 기본적으로 타입 선언에 후하지만 오류가 발생할 상황은 엄격하게 구분해야하기 떄문에 기본적으로 옵션 설정이 필요하다
{
"compilerOptions":{
"resolveJsonModule":true
}
}
Json은 Import Json 파일을 허용하겠다는 이야기인데, 이 부분이 굉장이 특이했다.
내가 항상 Json파일을 import 하다가 오류가 발생하고 실수해서 계속 JSON to js 로 포팅해서 작업했는데, 옵션이 존재했다.
{
"compilerOptions":{
"baseUrl":".",
"paths":{
"@components/*":["@components/*"],
}
}
}
길어지는 import를 간편하게 줄이기 위한 선언이다.
../../../../test.jsx -> @components/test.jsx
형태로 깔끔하게 정리할 수 있어서 반드시 필요하며 설정해줘야하는 옵션이다.
마지막으로 해당 config에 추가적으로 babel 관련된것들이 있을 수 있다.
타입스크립트는 자체적으로 자바스크립트 변환 작업이 있다.
다만 그것을 바벨이 자바스크립트로 변환된것을 받아서 이어받아 다시 변환하는 작업을 거치게 할 수 있는데
바벨의 장점은 이미지 파일이나 css,html을 모두 자바스크립트로 변환해준다.
그 과정을 통해 타입스크립트가 더 안정적으로 자바스크립트로 변환되서 실행되는 과정을 거칠 수 있게 작업해주는것이 babel의 작업이다.
