[React] VS Code 설정하고 가기

🤢 : 리액트로 개발하려고 하는데, 일일이 타자를 치다보니 너무 오래걸려요😥 개발 속도를 높일 수 있는 꿀팁 어디 없나요?
😎 : 편하고 빠르게 코딩에만 집중할 수 있도록 도와주는 Shortcut 방식, 여기서 더 알아봅시다!

Prettier : VScode Extension

Prettier는 자동으로 코드 스타일을 관리해주는 도구입니다.

문자열을 표현하는 ‘str’ “str”같이 동일한 포맷을 여러형태로 작성할 수 있는 경우, 협업 진행 시 코드 스타일로 인한 트러블이 발생할 수 있는데, 이 경우에 Prettier를 사용하는 것이 좋은 해결책이 될 수 있습니다.

Prettier는 다른 코드 포멧터들과 달리, Prettier에서 디폴트로 정해놓은 코딩 스타일에서 크게 벗어나기 어렵습니다. Prettier에서 강요하는 스타일이 불편할 수 있으나, 가장 인기있는 코드 포맷터이니만큼 많은 개발자들의 의견을 수렴하여 만들어진 도구입니다. 또한, 기존 코드를 단순히 수정해준다기 보다는 구문 분석 후 완전히 재작성을 하는 방식이기 때문에, 기존 코드와 동일한 동작을 하면서 코드의 스타일만 정돈할 수 있다.

👉 설정방법 #1 : CRA > 에디터에서 프로젝트 최상위 폴더로 이동
👉 설정방법 #2 : .prettierrc 파일 생성하기

	{
	"trailingComma": "all",
	"tabWidth": 2,
	"semi": true,
	"singleQuote": true
    }

👉 설정방법 #3 : Extension [Prettier] 설치하기

👉 설정방법 #4 : VS Code 환경설정에서 ‘Format On Save’ 설정 활성화 하기

• 해당 설정은 선택사항으로, 활성화 시 저장할때마다 포맷팅이 이루어집니다.
• 수동으로 포맷팅을 실행하고 싶은 경우, 해당 설정은 비활성화 상태로 유지하고 포맷팅이 필요할때 [Ctrl + Shift + P] 를 누르고 Format Document를 입력해보세요.
  

ESLint

• ESLint 는 자바스크립트 문법 검사기입니다. CRA로 만든 프로젝트에는 내장되어있으므로 문법을 잘못 작성했을때, 터미널에서 오류메시지를 확인할 수 있습니다.
• 🤔CRA로 프로젝트를 만들지 않으셨다구요?
  Extension [ESLint]를 설치해보세요!
  

Snippet

• 스니펫은 에디터 자체에 내장된 기능입니다. 자주 사용되는 코드에 단축어를 생성해서 코드를 빠르게 작성할 수 있도록 활용할 수 있습니다.
  

🤢 : 다른 사람들은 주로 어떤 단축어를 이용하나요?
😎 : 확장 프로그램도 나와있습니다.
Extension에서 ‘React Snippet’을 검색해보세요!

✅ 추천 확장프로그램

ES7 React/Redux/GraphQL/React Native snippets

👉 직접 스니펫을 생성해보기

아래 내용을 복사해서 Snippet Generator 웹서비스에서 새로운 스니펫을 생성해봅시다.

import React from 'react';
        
        function ${TM_FILENAME_BASE}() {
          return (
            <div>
              ${1}
            </div>
          );
        
        export default ${TM_FILENAME_BASE};

1️⃣ Description : 설명, Tab Trigger : 단축어 를 작성하고 우측에 생성된 코드 스니펫 복사하기

2️⃣ VS Code 로 돌아와서 [Ctrl + Shift + P] 를 누르고 ‘Configure Snippet’ 검색

3️⃣ javascriptreact.json 선택해서 방금 복사한 코드 스니펫 붙여넣기😎

위와 같은 방법으로 스니펫을 직접 생성해서 사용할 수도 있습니다.

 ${TM_FILENAME_BASE} : 이 값은 스니펫에서 사용하는 변수로 파일명을 그대로 받아와요!

Emmet

🤢 : 리액트는 js 로만 이루어진게 아니잖아요! html, css는 일일이 타자쳐야하나요?
😎 : html, css도 단축키로 쉽고 빠르게 작성할 수 있어요 Emmet을 이용해봅시다!

• Emmet이란 HTML과 CSS 작성 시간을 단축시킬 수 있는 에디터 확장 기능입니다.
• 특별한 Extension 앱 설치 없이 바로 사용이 가능합니다.
  

Emmet 사용 예시 보기

• ! ✚TAB : HTML 표준 DTD 문서
• div>ul>li ✚TAB : 자식 요소 생성
  

<div>
  <ul>
    <li></li>
  </ul>
</div>

• div>ul+ol+div ✚TAB : 형제 요소 생성

<div>
    <ul></ul>
	<ol></ol>
    <div></div>
</div>

• div>li*3 ✚TAB : 반복생성

<div>
    <li></li>
    <li></li>
    <li></li>
</div>

• .item ✚TAB : css에서 작성하듯, 클래스 선택자를 사용하면 div로 생성됩니다.

<div class="item"></div>

• #item ✚TAB : css에서 작성하듯, 아이디 선택자를 사용하면 div로 생성됩니다.
  

<div id="item"></div>

JSX에서도 Emmet 사용하기

🤢 : 선생님 이건 html 파일에서만 사용가능한데, 저희는 jsx 로 작성할건데요?
😎 : 이제 설정을 해봅시다!

1️⃣ 파일 > 기본 설정 > 설정 > [작업영역(WorkSpace setting)]

2️⃣ Include Languages > setting.json 편집 클릭
3️⃣ 아래 코드 스니펫을 붙여넣어주세요!

{
  "emmet.includeLanguages": {
    "javascript": "javascriptreact"
  }
}