[챕터 1-3] IDE 설치 및 설정

설치 에디터는 둘중 하나를 선택하면 된다.

1. 웹스톰 (유료)

2. VSCode (무료)

(*) 기본적으로 VSCode 추천한다. 

하단 부분의 VSCode 설치/설정법 있으니 참조

---

 

에디터 설치 (WebStorm)

 

https://www.jetbrains.com/ko-kr/webstorm/

WebStorm: The Smartest JavaScript IDE by JetBrains

---

 

---

직접 단말기 연결 

 

PC 와 단말기 접속 해제 후

USB 드라이버 설치
https://local.sec.samsung.com/comLocal/support/down/kies_main.do?kind=usb

스마트폰과 PC 연결
(*) 연결 시 반드시 충전용 전용 케이블이 아닌 일반 정품 케이블로 연결할 것

소프트웨어 정보 - 빌드번호 검색해서 계속 클릭하면 개발자 모드가 켜진다.
시스템 > 개발자 옵션 > USB 디버깅 사용

단말기가 오프라인일 경우, 스마트폰에서도 허용을 한다.

결과 : 스마트폰에서도, 가상 앱에서도 화면이 나온다.

---

웹스톰 터미널

 

npm install typescript @types/react @types/react-native --save-dev

 

 

---

.prettierrc.js

 

module.exports = {
  //bracketSpacing: false,
  //jsxBracketSameLine: true,
  singleQuote: true,
  semi:true,
  useTabs: false,
  tabWidth:2,
//  trailingComma: 'all',
};

 

---

 

에디터 설치 (VSCode)

https://code.visualstudio.com/Download

Download Visual Studio Code - Mac, Linux, Windows

- 실행 후 확장 프로그램 설치 (Ctrl + Shift + X)

 

필수

1) ESLint
2) Reactjs Code Snippets
3) Prettier-Code formatter

4) React Native Tools

5) vscode-icons

6. vscode-styled-components

7. vscode-styled-components Extension

 

선택
1) eclipse keymap

2) React-Native /React/Redux snippets for es6/es7

3) ReactNativeNativeBaseSnippets

4) ES7 React/Redux/React-Native snippets

 

 

 

1. 코드 스타일 정리 : 코드 가독성 향상 들여쓰기
src/.prettierrc 파일 생성

module.exports = {
  //bracketSpacing: false,
  //jsxBracketSameLine: true,
  singleQuote: true,
  semi:true,
  useTabs: false,
  tabWidth:2,
//  trailingComma: 'all',
};

2. 저장 시 코드 자동 코드 정리
File - Preference - Settings : format on save 검색 후 체크

3. 새 소스파일 작성 시
src 디렉토리에 새 파일(test.js)을 만든 후, 
화살표 함수 컴포넌트 기본포멧 작성: rsc + 엔터
클래스형 컴포넌트 기본포멧 작성 : rcc + 엔터

 

---

VSCode 안드로이드 앱용 에뮬레이터

 

https://visualstudio.microsoft.com/ko/vs/msft-android-emulator/

Android 앱용 에뮬레이터 | Visual Studio