[패스트캠퍼스 수강 후기] 프론트엔드 인강 100% 환급 챌린지 32회차 미션 - 30강 리액트와 함께쓰면 좋은 도구들 Prettier, ESLint, Snippet. 입문 끝!

Prettier

Prettier는 코드를 자동으로 깨끗하게 정리해주는 도구이다. 설치 및 사용법은 30강 33번 영상을 참고하도록 하자.

ESLint

자바스크립트의 문법을 체크해주는 도구이다. Prettier이 그냥 보이는 부분만 정리해줬다면 ESLint는 기능적으로 props를 안써준 부분이라던지 그런걸 자동으로 체크해서 넣어주는 기능이다. (근데 나는 적용이 안됨.. 이유를 모르겠음.)

Snippet

대부분의 에디터마다 내장되어있는 기능이다. 자주사용되는 코드를 단축어로 저장하여 빠르게 쓸 수 있게 해주는 기능이다. 먼저 리액트에서 Sample.js를 하나 만든다.
그리고 스니펫으로 만들어 줄 함수형 컴포넌트의 기본형을 써준다.

import React from "react";

function Sample() {
  return <div>Hello!</div>;
}

export default Sample;

그리고 Sample부분은 ${TM_FILENAME_BASE}로 대체해준다. 그러면 새로 컴포넌트를 만들때 파일명을 이름 부분에 자동으로 넣어서 생성해주게 할 수 있다. 또 자동으로 커서를 어느곳으로 이동하게 하고 싶다면 그부분을 ${1:}로 감싸준다.
이제 스니펫생성기로 이동해서 스니펫의 설명과 약어를 설정해주고 위의 코드를 복붙해준다. 그러면 오른쪽에 자동으로 변형된 코드가 생성될 것이다. 그것을 복사한다.

이제 다시 vsc로 돌아와서 하단에 javascript로 된 부분을 javascript react로 바꿔준다.

그리고 VSC에서 상단의 Code > Preference > User Snippet으로 들어가서 변환한 코드(아래 코드 참고)를 붙여넣어준다.

{
    "React Function Component": {
        "prefix": "fc",
        "body": [
            "import React from 'react';",
            "",
            "function ${TM_FILENAME_BASE}() {",
            "  return (",
            "    <>",
            "      hello!",
            "    </>",
            "  );",
            "}",
            "",
            "export default ${TM_FILENAME_BASE};",
            ""
        ],
        "description": "React Function Component"
    }
}

저장하고 리액트 컴포넌트에 가서 약자로 지정한 fc를 입력해보자. 잘 나오는 것을 볼 수 있다.
자 여기까지 리액트 입문은 마쳤다. 내일부터는 리액트 컴포넌트의 스타일링 with Sass를 함께 해볼 것이다! 기대기대!!

오늘은 여기까지..
시청 영상 30강 33~37까지

프론트엔드 개발 올인원 패키지 with React Online. 👉 https://bit.ly/31Cf1hp