[One Bite React] 1. 개발 환경 세팅 - VSCode 설치(Mac), 유용한 Extensions 추천

🖥️ 한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지 (이정환, 인프런)

요즘 핫한 리액트 네이티브를 공부해보고 싶어서 먼저 리액트 강의부터 결제해서 듣게 되었다.

인프런에서 가장 인기가 많아 보이는 강의를 선택했는데 듣다보니 강사님이 JavaScript 기초부터 Node.js, React.js 그리고 리액트 기반 프로젝트를 만들고 배포하는 과정까지 자세하게 알려주셔서 많은 것을 배울 수 있을 것 같다는 생각이 든다.

오늘은 강의를 듣고 실습하기 위해 개발 환경을 세팅하는 과정을 정리해서 올려보겠다.

그리고 VSCode로 개발할 때 유용하게 사용할 수 있는 Extensions도 몇 가지 소개하겠다.

1. 개발 환경 세팅 - VSCode 설치(Mac), 유용한 Extensions 추천

1.1. VSCode 설치(Mac) 및 프로젝트 생성

1.1.1. VSCode 다운로드

다운로드 url : https://code.visualstudio.com/download

Download Visual Studio Code - Mac, Linux, Windows

Visual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows. Download Visual Studio Code to experience a redefined code editor, optimized for building and debugging modern web and cloud applications.

code.visualstudio.com

기존에 쓰던 인텔칩 맥북이 고장나는 바람에 M4 맥북 프로를 구매했다.

이제 나도 Apple silicon칩이자냐💕 헬리콥터🚁 소리 안나자나🥰

위의 zip 파일을 더블클릭하면 알아서 Visual Studio Code가 설치된다.

1.1.2. 프로젝트 생성

먼저 원하는 디렉토리에 프로젝트용 폴더를 생성한다.

나는 문서 > Study 경로 아래에 onebite-react라는 이름의 폴더를 생성해주었다.

1.1.3. VSCode 실행

VSCode를 실행하고 Welcome 페이지에서 Open 버튼을 클릭한다.
(또는 File > Open Folder 메뉴 선택)

아까 만들어둔 폴더(문서 > Study> onebite-react)를 선택하고 열기 버튼을 클릭한다.

만약 Do you trust the authors of these files? 라는 창이 뜨면 Open 버튼을 클릭한다.

(Rememer my decision... 을 체크하면 지금 선택한 설정이 저장된다.)

1.2. Visual Studio Code의 유용한 Extensions 추천

VSCode에서 개발할 때 유용한 확장 플러그인을 몇 가지 소개한다.

Extensions 단축키 : Command + Shift + X

1.2.1. Prettier - Code formatter

Prettier - Code formatter는 파일을 저장할 때 자동으로 포맷을 예쁘게 맞춰주는 기능을 가진 플러그인이다.

Extensions 검색창에 'prettier'를 검색한 뒤 Prettier - Code formatter의 Install 버튼을 클릭하여 설치한다.

Prettier 플러그인이 적용되게 하려면 Settings에서 몇 가지 설정을 더 해주어야 한다.

Settings 단축키 : Command + ,

먼저 Settings에서 'Format On Save'를 검색하고, Editor: Format On Save 옵션이 활성화(체크)되어 있는지 확인한다.

그리고 'Default Formatter'를 검색하고 해당 옵션이 None으로 설정되어 있을 경우 'Prettier - Code formatter'로 바꿔준다.

이제 아래와 같이 코드를 지저분하게 작성해도 Prettier 플러그인이 파일을 저장할 때 자동으로 코드의 포맷을 예쁘게 정리해준다.

1.2.2. Material Icon Theme

Material Icon Theme은 자동으로 파일 아이콘을 설정해주는 플러그인이다.

Extensions 검색창에 'material'을 검색한 뒤 Material Icon Theme의 Install 버튼을 클릭해 설치한다.

설치를 완료하면 화면 상단에 Select File Icon Theme 문구가 나오는데 이때 Material Icon Theme을 선택해주면 된다.

이렇게 파일 아이콘이 예쁘게 표시된다.

1.2.3. Error Lens

Error Lens는 에러가 발생한 경우 해당 부분에 Highlight 표시와 함께 에러의 원인을 친절하게 설명해주는 기능을 가진 플러그인이다.

Extensions에 Error Lens를 검색한 뒤 Install 버튼을 클릭해 설치한다.

아래와 같이 Error Lens 플러그인의 publisher를 신뢰하냐는 팝업창이 뜨면 Trust Publisher & Install을 선택한다.

아래와 같이 상수를 선언하고 초기화하지 않은 경우 Error Lens가 해당 부분을 하이라이트 표시하면서 에러의 원인을 설명해준다.

1.2.4. Live Server

Live Server는 실시간 서버로 개발 중인 내용을 확인해볼 수 있는 기능을 제공하는 플러그인이다.

Extensions에 'live server'를 검색하고 Install 버튼을 클릭해 설치한다.

Liver Server를 테스트해보기 위해 아래와 같이 'section01'이라는 새 폴더를 만들고 그 아래 두 개의 파일을 만들어준다.

chapter03.js

console.log("Hello. This is chapter03.");

index.html

<html>
  <head>
    <script src="./chapter03.js" ;></script>
  </head>
  <body>
    Hello World
  </body>
</html>

참고로 위의 html 파일은 <script> 태그를 이용해 브라우저가 chapter03.js 파일을 불러올 수 있도록 연결해주는 역할을 한다.

js 경로를 써줄 때 .은 현재 경로를 의미한다.

index.html 파일을 열어둔 상태에서 Command + Shift + P 단축키를 통해 검색창을 연다.

검색창에 'live server'를 입력한 뒤 'Live Server: Open with Live Server'를 선택한다.

검색창 단축키 : Command + Shift + P
Live Server: Open with Live Server 단축키 : Command + L 입력 후 Command + O

혹은 VSCode 오른쪽 아래의 Go Live 버튼을 클릭한다.

그럼 아래와 같이 개발중인 소스코드가 웹 브라우저에서 실행된다.

개발자 도구에서 Console탭의 로그를 확인할 수도 있다.

크롬 개발자 도구 단축키 : Command + Option + I

VSCode에도 아래와 같이 포트 번호 5500에서 서버가 시작되었다는 창이 표시된다.

이제 파일을 수정한 후에 저장하기만 하면 자동으로 변경사항이 반영되어 웹 브라우저에서 바로 확인할 수 있다.

만약 Liver Server를 종료하려면 다시 오른쪽 아래의 Port : 5500을 클릭하면 된다.

블로그의 정보

Claire's Study Note

Hi.Claire

[One Bite React] 1. 개발 환경 세팅 - VSCode 설치(Mac), 유용한 Extensions 추천

🖥️ 한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지 (이정환, 인프런)