이번엔 VS Code의 extension인 react native tools
에 대해 알아보려 한다.
marketplace의 공식 문서에는 다음과 같이 나와있다.
This VS Code extension provides a development environment for React Native projects. Using this extension, you can debug your code and quickly run react-native commands from the command palette.
대충 코드 디버깅과 빠른 코드 빌드를 할 수있다. 라고하는것.... 같다....
💡 공식 문서에는 시작전 다음과 같은 준비가 필요하다고 몇가지 당연한 소리를 한다.
설치는 간단하다. VS Code의 Extenstions에서 react native tools
를 검색후 install
을 진행하면 된다.
💡 해당 extension은 프로젝트 루트에서 .vscode/.react 디렉토리를 사용하여 디버깅에 필요한 중간 파일을 저장한다. 일반적으로 이러한 파일은 디버그 세션이 끝난 후 제거되지만 이 디렉토리를 프로젝트의 .gitignore에 추가할 수 있다.
설치가 끝나면 아래 화면으로 이동하여 create a launch.json file.
을 선택한다.
그럼 아래와 같은 화면이 나오는데, 저기서 React Native
를 선택한다.
React Native
를 선택하면 아래와 같이 Debug Android
, Run Android
, Debug iOS
, Run iOS
등을 선택할 수 있다.
보통 mac에서 RN 개발을 진행 한다면 debug ios가 로그보기 편하다.
아래와 같이 OS별 디버깅 및 run을 할 수 있고,
Debug iOS 같은 경우는 아래 console에 디버깅이 log가 찍히는 걸 볼 수 있다.
개발시 아주 편리하다..
루트 디렉토리를 보면 .vscode/.react/launch.json
이 생성된 것을 볼 수 있다.
해당 파일을 열어보면 방금 전 설정한 값들이 코드로 적용되어 있는 것을 볼 수 있다.
추가적인 설정이 필요하다면 launch.json
파일 우측 하단부에 Add Configuration...
버튼을 눌러 설정할 수 있다.
해당 버튼을 누른 후 React Native
를 누르면,
아래와 같이 추가적인 설정을 할 수 있다.