a) babel의 개념 babel은 최신 버전 js를 구 버전의 브라우저에서 호환되도록 변환하는데 사용되는 js compiler이다.

js뿐만 아니라 ts, jsx도 현재는 지원

b) 사용

i) 루트 디렉토리에 .babelrc 파일을 생성하고, 다음과 같이 작성

{ "presets": ["next/babel"], "plugins": [["babel-plugin-styled-components", { "fileName": true, "displayName": true, "pure": true }]] }

// plugin : 문법을 버전에 맞게 변환해주는 라이브러리들을 적어준다. 화살표 함수 변환자라던가..

cf) 나는 styled-component를 사용할 예정이므로 이 라이브러리의 작동을 보조하는 babel-plugin-styled-components를 따로 설치하고, 추가해주었음

// presets : 많이 쓰는 플러그인들을 미리 모아둔 프리셋

// fileName: 코드가 포함된 파일명을 알려줌 // displayName : 클래스명에 해당 스타일 정보 추가 // pure : 사용하지 않은 속성 제거 // ssr: server side rendering ( "ssr" : true )

ii) .eslintrc.json에서 코드를 다음과 같이 수정

{ "extends": ["next/babel", "next/core-web-vitals"] }