1. VSCode

Visual Studio Code(VSCode)는 개발자들 사이에서 가장 인기 있는 소스 코드 편집기 중 하나입니다. 가볍고 빠른 성능, 그리고 다양한 확장 기능을 제공하여 React 개발에 특히 적합합니다. 전세계 IDE(Integrated Development Environment, 통합 개발 환경) 사용 순위를 살펴보면 VSCode가 전세계 1위를 차지하고 있습니다.

10 TOP IDE

1.1 VSCode 설치

1. Visual Studio Code 공식 웹사이트에 접속합니다.

code.visualstudio.com

2. 'Download' 버튼을 클릭하여 운영 체제에 맞는 버전을 다운로드합니다.

3. 다운로드된 설치 파일을 실행하고 안내에 따라 설치를 완료합니다.

1.2 VSCode 확장 프로그램 설치

VSCode의 강점 중 하나는 다양한 확장 프로그램을 통해 기능을 확장할 수 있다는 점입니다. React 개발에 유용한 확장 프로그램들을 소개하고 설치 해보겠습니다.

1. VSC를 설치 완료 및 실행하면 다음과 같은 화면이 나오게 됩니다. 왼쪽 사이드바에서 확장 프로그램 아이콘을 클릭합니다.

2. 검색창에 확장 프로그램 이름을 입력합니다.

3. 원하는 확장 프로그램을 찾아 'Install' 버튼을 클릭합니다.

1.2.1 필수 확장 프로그램

1. ES7 React/Redux/GraphQL/React-Native snippets

   React 코드 작성을 빠르게 도와주는 코드 스니펫 모음입니다.

2. Live Server

   실시간으로 변경 사항을 브라우저에 반영해주는 도구입니다.

1.2.2 선택적 확장 프로그램

1. vscode-styled-components

   styled-components를 사용할 때 구문 강조를 제공합니다.

2. Auto Import - ES6, TS, JSX, TSX

   자동으로 import 문을 추가해주는 도구입니다.

2. Chrome 브라우저 확장 프로그램 - React Developer Tools

React Developer Tools는 Chrome 브라우저 확장 프로그램으로, React 애플리케이션 디버깅에 매우 유용합니다.

1. Chrome 웹 스토어에서 React Developer Tools를 검색합니다.

React Developer Tools

2. 'Chrome에 추가' 버튼을 클릭하여 설치합니다.

3. 설치 후, 브라우저 우상단의 확장 프로그램 관리를 클릭해 주세요.

4. 하단의 확장 프로그램 관리 클릭 후, React Developer Tools의 세부정보 클릭해 주세요.

4. 메뉴 목록 중, 다음 설정을 변경합니다.

• '사이트 액세스'를 모든 사이트에서로 설정

• 시크릿 모드에서 허용 활성화

• 파일 URL에 대한 액세스 허용 활성화

3. 유용한 VSCode 단축키

4. 유용한 터미널 명령어

# 1. 상위 폴더로 이동
> cd ..

# 2. 새 폴더 생성
> mkdir <폴더명>

# 3. 현재 디렉토리의 파일 및 폴더 목록 보기
> ls

# 4. 폴더 및 내용 삭제
> rm -r <폴더명>