TypeScript 적용3 - 절대경로 / Prettier 소개

 

C:\Users\xxx\Documents\react>npx create-react-app root-import --template=typescript

tsconfig.json 소스추가

  "compilerOptions": {
 	...
	"baseUrl" : "src"
  },

 

Component 폴더 생성후 아래 4개 파일을 이동시켜보자

 

이제 index.ts를 일부수정해보자

import App from 'Component/App';

 

npm run test

import React from 'react';
import { render, screen } from '@testing-library/react';
import App from './App';

describe('<App />', () => {
  it('renders component correctly', () => {
    const { container } = render(<App />);

    const linkElement = screen.getByText(/learn react/i);
    expect(linkElement).toBeInTheDocument();

    expect(container.getElementsByClassName('App-logo')).toHaveLength(1);
    expect(container.getElementsByClassName('App-logo')[0]).toHaveAttribute(
      'src',
      'logo.svg'
    );

    expect(container.getElementsByTagName('p')).toHaveLength(1);
    expect(container.getElementsByTagName('p')[0]).toHaveTextContent(
      'Edit src/App.tsx and save to reload.'
    );

    expect(container).toMatchSnapshot();
  });
});

 

---

Prettier : JavaScript, CSS, JSON 등을 지원하는 코드 포맷터이다. 미리 정의한 코드 스타일에 맞춰 자동으로 코드의 형식을 수정해주는 도구

 

* 자동수정이 좋을때도 있지만 아닐때도 있어서 실습은 따로하지않겠습니다.

 

Prettier · Opinionated Code Formatter

Prettier · Opinionated Code Formatter

Prettier v2.5.1

Prettier