[React Native] React Native Tools

안녕하세요. 모리스입니다.😄

이번 포스트에서는 예전에 RN 개발할 때 유용하게 썼던 디버깅 툴 하나를 소개해 볼까 해요.

 

VSCode는 정말 다양하고 유용한 서드파티 extension들이 많이 있어서

VSCode로 React Native 개발할 때 유용하게 썼던거 같아요.

 

이번에 소개할 extension은 RN개발 시 디버깅을 편리하게 할 수 있는

React Native Tools에 대한 내용이에요.

 

자 그럼. React Native Tools에 대해 알아볼게요.

공식 마켓플레이스 문서에 따르면:

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.

즉,
✔ 코드 디버깅
✔ 명령어 실행
✔ 디바이스 런 등
React Native 개발에 꼭 필요한 기능들을 쉽게 VS Code 안에서 처리할 수 있다고 소개하고 있어요.

---

🧰 사용 전 준비 사항

공식 문서에서 설명하는 React Native Tools를 사용하기 위한 기본 전제 조건이예요.
사실상 대부분은 당연한 소리지만, 공식 문서에 나와 있으니..😅

• ✅ React Native 개발 환경이 이미 구성되어 있어야 합니다.
• ✅ Android 개발 시 에뮬레이터가 필요합니다.
• ✅ VS Code에서 해당 확장을 설치해야 합니다.
• ✅ React Native 프로젝트의 루트 디렉토리를 열어야 합니다.

💡 즉, 이미 RN 개발을 하고 있다면 따로 특별히 준비할 건 없습니다.

---

 

⚙ 설치 방법

• VS Code Extensions > react native tools를 검색

💡 이 확장은 .vscode/.react 디렉토리를 생성하여 디버깅 설정 파일을 저장합니다.
일반적으로 세션이 끝나면 자동으로 정리되지만, .gitignore에 추가해두는 것이 좋습니다.

 

extension을 추가한 후 .gitignore에 해당 extension을 추가해 두는게 좋아요. 그래야 git에서 변경점이라고 생각하지 않고 불필요한 commit 및 동료 개발자 분들과 충돌이 일어나지 않아요!

🛠 사용법

• 설치가 완료되면 아래와 같이 디버깅 탭(Debug View) >  create a launch.json file을 선택.

📌 React Native 디버깅 설정

이후 React Native를 선택

그럼 아래와 같이 다양한 실행 옵션이 표시돼요.

저 옵션들 중에서 원하는 옵션을 선택해 사용하면 돼요.

그럼 별도의 명령어 없이 VSCode의 실행만으로 원하는 플랫폼이 실행될 거예요.

👆 (요걸 하려면 아래 나오는 몇가지 설정이 더 필요해요!! 밑으로 ㄱㄱ)

• Debug Android
• Run Android
• Debug iOS
• Run iOS
  ...

---

✅ 디버그 시 콘솔 로그 확인

Debug iOS 또는 Debug Android를 선택하면
아래와 같이 VS Code 콘솔에서 로그 출력을 바로 확인할 수 있어요.

📌 debug 명령은 Metro 서버를 자동 실행하고, 앱도 연결된 디바이스(또는 시뮬레이터)에서 실행됩니다.
특히 Debug iOS는 macOS + iOS 조합에서 로그 확인이 간편합니다.

---

📂 .vscode/launch.json 파일

설정을 완료하면 프로젝트 루트의 .vscode/.react/launch.json 파일이 생성되는데,

해당 파일을 열면 방금 구성한 디버깅 옵션들이 코드 형태로 저장되어 있어요.

---

➕ 디버그 설정 추가하기

launch.json 파일 하단 우측에 있는 Add Configuration... 버튼을 클릭하면
새로운 디버깅 설정을 추가할 수 있어요.

선택 후 React Native를 선택하면,

추가 가능한 설정 목록이 나타나요.

여기서 원하는 항목을 골라 디버깅 상황별 설정을 커스터마이징 할 수 있어요,

---

📌 참고 문서

🔗 React Native Tools Extension (공식)

React Native Tools - Visual Studio Marketplace

 

잘 못되었거나 수정할 부분이 있다면 언제든 댓글로 혼내주시길 바랍니다.!!

오늘도 긴 글 읽어주셔서 감사합니다.😊