🔸 Babel
- Babel은 무엇이고 왜 사용하는가?
: Babel은 최신 사양의 Javascript 코드를 최신 사양을 지원하지 않는 하위 버전의 브라우저에서도 정상적으로 동작할 수 있도록 트랜스파일링을 도와주는 Node.js 패키지
: 즉 브라우저간의 호환, 크로스 브라우징을 도와주는 툴
- Babel의 주요 기능 중 하나인 폴리필이란 무엇인가?
: 폴리필을 직역하면 충전솜, Babel에서는 하위 버전에서 지원하지 않는 Javascript 기능을 채워 넣어준다는 의미로 이해 가능
- Babel에서 폴리필을 어떻게 사용할 수 있는가?
: 기존에는 폴리필 관련 플러그인이 따로 존재했으나, 현재는
corejs패키지에 폴리필 기능이 포함되어 있으므로 폴리필 기능을 사용하기 위해서는corejs패키지도 함께 설치해야 함
- Babel 사용 시 필수적으로 설치해야 하는 종속성 패키지에는 무엇이 있는가?
: Babel의 기본 기능을 포함하고 있는
@babel/core, 빌트인 시스템이 따로 존재하지 않는 경우 설치해야 하는@babel/cli, 추가적인 기능을 사용하기 위해 설치하는@babel/preset-env
: 다만 사용 환경에 따라 React나 Typescript 등을 사용한다면@babel/preset-react,@babel/preset-typescript등으로 설치해야 하는preset-env패키지가 달라질 수 있음
- Babel 관련 스크립트 명령어를 작성할 때
-o,-d는 각각 무엇을 의미하는가?: 파일을 컴파일할 때는
-o옵션 사용, 폴더를 컴파일할 때는-d옵션 사용
- Babel의 preset 옵션 중
targets는 어떤 경우에, 왜 사용하는가?:
targets로 지정한 환경에 적합하게 Babel이 컴파일 과정을 수행함
: 만약.browserslistrc파일을 자체적으로 구성하여 관리한다면targets옵션을 굳이 지정해줄 필요는 없음
ex)targets: '> 0.5% in KR, ie 9-11, not dead'
corejs패키지의 폴리필 기능 사용 시 주의해야 할 점은 무엇인가?:
corejs단독으로 사용할 수 없고,useBuiltIns옵션을babel.config.js파일에 설정해야 함
:useBuiltIns옵션은 폴리필을 처리하는 방법을 설정하는 옵션, 그 값을usage로 설정하면 사용한 폴리필만 삽입됨
corejs패키지를import할 때 주의해야 할 점은 무엇인가?: 진입점 파일, 즉 Entry point에서 한 번만
import해야 함, 두 번 이상 호출하게 되면 오류 발생
- 브라우저 환경에서 Babel을 사용하려면 어떻게 해야 하는가?
: 브라우저 환경에서는
require메서드를 사용할 수 없기 때문에babel.config.js파일에modules의 값을false로 설정해야 함
- Babel 사용 시 주석은 포함하지 않은 채로 컴파일하려면 어떻게 해야 하는가?
:
bable.config.js파일에comments옵션의 값을false로 설정해서 추가하면 됨
- Babel 사용 시 파일을 변경하여 저장할 때마다 자동으로 컴파일을 하도록 설정하는 방법은 무엇인가?
: 스크립트 명령어 작성 시
watch옵션을 추가하면 됨
🔸 Jest
- Jest는 무엇이고 왜 사용하는가?
: Javascript 코드를 TDD(테스트 주도 개발) 기반으로 작성하는 데 도움을 주는 테스팅 라이브러리
- Jest로 테스트 코드 작성 시 자동 완성 기능을 사용하려면 어떻게 해야 하는가?
:
@types/jest패키지를 추가로 설치해야 함
- Jest 사용 시 초기 환경 설정은 어떻게 할 수 있는가?
:
npx jest --init명령어를 사용하여 환경 설정 완료하면 환경 설정 정보를 담고 있는jest.config.js파일 생성
- Jest 사용 시 파일이 변경될 때마다 테스트를 수행할 수 있는 방법은 무엇인가?
:
test스크립트 명령어 작성 시watch옵션을 추가하면 됨
ex)"test": "jest --watch"
- Jest의 기본 설정으로 테스트 파일을 검색하는 방법에는 무엇이 있는가?
:
__tests__가 제목인 폴더의 하위 파일 중 확장자 명이.js이거나.ts인 경우
:.js나.ts확장자 앞에 접미사로spec이나test가 붙는 경우
- Jest 사용시 ES Lint를 함께 사용하고 싶다면 어떻게 해야 하는가?
:
eslint-plugin-jest패키지를 함께 설치한 후 ES Lint 환경 설정 파일에 Jest 관련 옵션을 추가해야 함
- Jest 사용 시 Babel을 함께 사용하고 싶다면 어떻게 해야 하는가?
:
babel-jest패키지를 함께 설치한 후 Jest 환경 설정 파일에 Babel 관련 옵션을 추가해야 함
- Jest를 브라우저 환경(ES Module)에서 사용하고 싶다면 어떻게 해야 하는가?
:
regenerator-runtime패키지를 설치해야 하고 Jest 환경 설정 파일의testEnvironment옵션의 값을jsdom으로 설정해야 함
: 추가적으로 Jest 환경 설정 파일이 존재하는 경로와 동일한 위치에jest.setup.js파일 생성 후 설치한regenerator-runtime패키지를import시켜주어야 함
ex)import 'regenerator-runtime';
- Jest로 DOM을 테스트하는 코드를 작성하려면 어떻게 해야 하는가?
:
@testing-library/jest-dom패키지를 설치하고, 생성한jest.setup.js파일에 설치한 패키지를import시켜주어야 함
ex)import '@testing-library/jest-dom';
- Jest로 테스트 코드 작성은 어떻게 할 수 있는가?
: 기본적으로
test메서드 내부에 테스트하고 싶은 내용을 작성하면 됨
:expect메서드의 인자로 테스트하고 싶은 값을 전달한 후, 체이닝하여toBe,toEqual등 Jest에 내장된 다양한 테스트 메서드를 사용할 수 있음
- Jest의 테스트 메서드 중
toBe와toEqual의 차이는 무엇인가?: 둘 다
expect메서드에 매개변수로 전달한 값과 일치하는지를 판단하는 메서드
: 차이점이 있다면toBe는 원시값을 테스트할 때만 사용할 수 있고,toEqual은 원시값뿐만 아니라 객체를 테스트할 때도 사용할 수 있음
- Jest의 테스트 메서드 중
toThrow는 무엇이고 어떻게 사용할 수 있는가?: 예외 상황이 제대로 발생하는지를 판단하기 위해 사용하는 메서드
: 주의할 점은 체이닝 하여 사용하기 전expect에 테스트할 값을 인수로 전달할 때 함수로 한 번 감싸서 실행해야 함
- Jest로 테스트 진행 중 초기값을 관리할 수 있는 메서드는 무엇이 있는가?
:
beforeEach,beforeAll,afterEach,afterAll
:before이 들어간 메서드는 테스트 실행 전에 초기값을 설정할 필요가 있을 때 사용하는 메서드
:after가 들어간 메서드는 테스트 실행 후에 초기값을 초기화할 필요가 있을 때 사용하는 메서드
:each가 들어간 메서드는 테스트가 실행될 때마다 호출되지만,all이 등러간 메서드는 테스트 맨 처음이나 맨 끝에 딱 한 번만 호출됨
