VS Code에서 리액트를 쓸 때 확장 프로그램 마켓플레이스에서 다운받아야 할 것들

오늘은 VS Code 안에서 리액트를 이용 할 때 마켓플레이스에서 다운받아야 할 툴들에 대해서 적어보겠다.

오늘부터 리액트를 제대로 공부하고자 하여 VS코드를 오랜만에 열어서 작업하였다.

 

1. Babel ES6/ES7

바벨은 무엇인가?

자바스크림트 컴파일러라도고 불리는데 자바스크립트 트랜스파일러이다. 트랜프라일은 다른 실행 환경에서도 실행될 수 있도록 소스코드의 형태만 바꾸는 것을 의미한다. ES6, Type Script, JSX 로 만든 코드를 변환할 때 많이 이용되는데 리액트는 JSX를 이용하기 때문에 개발을 할 때 원문코드가 브라우저에서 실행이 되지 않을 수 있다. 그래서 웹팩과 바벨을 이용해서 프로젝트를 빌드한다.

 

2. Beautify

포매터, 코드를 정리해준다. Prettier 보다 좀 더 사용자가 자유롭게 쓸 수 있다.

 

3. Bracket Pair Colorizer

 

 

4. ES7 React/Redux/GraphQL

리액트를 쓸 때는 필수로 설치해야하는 것 코드 편집기에 키워드로 구조를 만들 수 있는 것 제공한다.

 

5. JavaScript code snippets

요것도 필수 설치, 편집기에 키워드로 구조 만들 수 있다. 자바스크립트용

 

6. Live Server

html파일 안에서 수정하면 따로 버튼을 누를 필요 없이 브라우저에서 바로 적용이 되서

실시간으로 브라우저를 보면서 개발 할 수 있다. 설치를 하게 되면 맨 밑 오른쪽쪽에 Go Live 라고 있는데 이걸 클릭하면 라이브서버를 이용해서 브라우저가 실행된다.

 

7. Prettier

포매터인데 Beautify 보다 좀 더 강력해서 자유롭게 코드 쓰는 사람에게는 비추천이라는 평이 있다.

 

8. Node.js Modules Intellisenct