React 개발 시 유용한 것들

리액트로 사이드 프로젝트를 진행하기로 하면서 리서치를 진행하는 과정에서 빼놓지 않을 것이 개발 툴과 주요 라이브러리 인데요. 아무래도 개발 하다보면 항상 시간에 쫓기게 되기 때문에 조금이라도 시간을 줄일 수 있는 방법을 미리 마련해 두는 것이 나중에 그 시간을 더욱 아낄 수 있는 길입니다. 그 중에서 오늘 몇가지를 소개해볼까 합니다.

개발 툴

VSCode : 대세이며 플러그인들도 많고 무료버전이라 선택의 이견이 없다.

https://code.visualstudio.com/download

Download Visual Studio Code - Mac, Linux, Windows

Bash 에서 code 실행

• VSCode 실행한뒤 cmd + shift + P를 치고
• shell command : instrall code in PATH 검색 후 선택
• bash 에서 $code . 을 타이핑 하면 현재 경로 소스 기반에서 vscode가 실행됩니다.

Prettier : 자동으로 코드의 스타일 관리하는 도구

상세한 내용은 아래를 참조하시고, 몇일 코딩하다보니 쌍따옴표를 넣어야하는지 싱글인지, 세미콜론 찍어야할지 말아야할지 탭 간격 등 신경이 쓰였습니다. 우선 간단하게만 설정하시고 점점 필요한 것들을 추가해 보세요!

.prettierrc 파일

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

파일을 만들었다면 에디터에서 Prettier 익스텐션 설치

cmd+, 눌러서 설정 창에 들어간뒤 Format on save로 검색하여 체크

ES Lint : 자바스크립트 문법 확인 도구

자바스크립트 문법에 100% 익숙하지 않기 때문에 이용하면 개발 속도가 올라갈 것으로 예상됩니다. 다만 강력하게 하면 귀찮아 질 수 있으니 처음에는 기본적인 것만 적용해서 써보면 좋겠습니다.

React Typescript 자동완성 snippet

리액트와 typescript의 조합으로 프로젝트 구성도 염두해두고 있으며, 코드자동완성 해주는 부분도 개발속도에 분명한 도움을 줄 수 있습니다.

https://marketplace.visualstudio.com/items?itemName=fulin.react-snippets-typescript 

Simple React Snippets for Typescript - Visual Studio Marketplace

Chrome React Developer Tool

React Component 정보 확인 가능합니다.

https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi

React Developer Tools

• 이 확장 프로그램이 내가 방문하는~~ 읽고 변경하도록 허용 → 모든 사이트에서
• 파일 URL에 대한 액세스 허용 → 사용으로 토글

앞에서 언급했듯이 사이드프로젝트라는 것이 메인의 일이 끝난 뒤 할 수 있는 것이고 그러다보니 시간이 부족할 수 밖에 없어서 이러한 개발 도구들을 잘 활용하면 개발시간을 단축 시킬 수 있고 나아가 본 프로젝트가 되었을때도 좀더 핵심적인 사항을 고민하는데 시간을 더 사용할 수 있으니 한번 써보시는 것을 추천해드립니다. 저도한 이번 프로젝트에서 적용해서 사용할 예정입니다.