[React Native IDE] 이런게 나온다고?

react-native-gesture-handler, react-native-reanimated 등

유명하고 사용자들을 많이 보유하고 있는 라이브러리를 만든 software mansion에서 React Native IDE의 베타버전을 공개했다.

현재는 비공개로 베타회원만 사용이 가능하다.

베타로 사용해 보고싶다면 https://forms.gle/sZ5GzxYyFJKz3Q9r6 이 링크로 들어가서 양식을 제출하면 된다.

 

React Native IDE는 vscode의 익스텐션으로 출시가 된다.

베타버전은 무료이지만 나중에 릴리즈버전으로 출시된다면 어느 정도의 금액을 받을 것으로 예상된다.

 

충분히 금액을 지불하고 사용할 생각이 있다고 느꼈으며 어떤 기능이 있는지 알아보자

| IDE Panel

이제는 시뮬레이터를 vscode 내부에서 킬 수 있다.

기존에 지원되던 핫 리로딩 또한 당연히 지원된다.

vscode 상단에 IDE Panel을 클릭하면 실행이 된다.

이 공간에서 android / ios 시뮬레이터를 확인할 수 있다.

 

| Inspect

주로 웹을 개발하고 해당 엘리먼트가 어떤 속성을 가지고 있는지 어떤 태그를 사용하는지를 확인하려면 크롬 인스펙터를 사용한다.

지금까지 React Native로 개발을 할 때 해당 요소를 찾으려면 그 요소의 위치를 유추를 해서 찾던지 텍스트일 경우 텍스트를 검색해서

해당 요소를 찾고 지웠다가 되돌리며 확인 사살까지 한 뒤 수정을 해야 했다.

프로젝트의 단위가 커져버리면 위에 말했던 과정은 매우 오래 걸릴 수밖에 없다.

하지만 React Native IDE에서는 inspect 기능을 제공한다.

해당 요소를 클릭하면 코드의 위치로 커서를 이동시켜준다.

이제 위에 말했던 과정에 쏟을 시간은 필요가 없어질 것이다.

Panel의 좌측 하단에 모니터와 커서 모양의 버튼을 클릭하면 Inspect 모드에 진입하게 된다.

 

| Breakpoint

vscode의 코드 줄(숫자) 옆을 클릭하면 빨간 점이 하나 생긴다.

이것을 Breakpoint라고 한다.

나는 주로 사용해본 경험이 없지만 함수가 하나 실행 될 때 앱이 멈추거나 중단된다면 어떤 동작에서 에러가 발생했는지를 찾아야 한다.

이럴 때 한 줄 한줄 콘솔을 심어놓아 에러를 찾을 수 있지만 좋은 방법은 아니며 코드의 줄에 따라 노동의 강도가 늘어난다.

Breakpoint로 한줄 단위로 멈춰가며 대체 어디서 앱이 꺼지는지 확인해 볼 수 있다.

 

 

| Navigation

딥링크된 애플리케이션을 통합하여 경로로 이동할 수 있다.

Select Box처럼 생겼으며 선택 시 해당 페이지로 이동한다.

이 기능은 매우 유용하면서도 제일 궁금한 기능이기도 하다.

만약 param 값이 필요한 페이지 일 경우 어떻게 처리될 것인지 궁금해서 나오자마자 사용해보려고 한다.

하지만 해당 페이지를 들어가기 위한 과정을 최소화할 수 있으며 테스트와 개발 속도에 좋은 영향을 미칠 것이라고 생각한다.

 

 

| Logs

콘솔을 확인할 수 있는 탭이다.

이 기능은 사실 메트로, 플리퍼에서도 볼 수 있고 안드로이드 스튜디오와 xcode에서도 지원하는 기능이다.

자세히 어떤 기능이 있는지는 명시되어있지 않아서 확인해보지는 못했지만

콘솔이 어디서 출력되었는지 코드의 줄 위치도 표시된다. (플리퍼도 지원한다)

나는 계속 플리퍼를 사용하겠지만 하나의 애플리케이션 안에서 모두 확인할 수 있다는 것은 큰 장점인 것 같다.

 

 

| Preview

컴포넌트를 개발할 때 아주 유용한 기능이다.

지금까지 작은 단위로 컴포넌트를 만들 때 나는 빈 화면에 컴포넌트를 그려가면서 만들었다.

하지만 preview 기능은 아주 손쉽게 컴포넌트만 애뮬레이터에 띄울 수 있다.

preview라는 함수 안에 컴포넌트를 넣어주면 해당 컴포넌트만 애뮬레이터에 보인다.

 

 

| Device Setting

디바이스 내부에서 코드의 변동 없이 텍스트의 크기 또는 다크모드를 직접 조절하며 테스트할 수 있다.

직접 코드에서 pixel을 줄이고 늘려가며 테스트하지 않고 미리 그려 볼 수 있어서 더욱 편하게 테스트할 수 있을 것 같다.

하지만 직접 정의한 텍스트의 크기는 고정적이고 다크/라이트만 지원하기 때문에 깊게 테스트에 들어가려면 어쩔 수 없이 코드를 수정해야 할 것 같다.

 

 

| 정리

모든 기능이 정말 사용하기 좋다고 생각하지만

vscode 내부에서 너무 무겁지 않을까 우려가 된다.

나도 지금 베타신청을 넣어놓은 상태라 승인이 나면 바로 테스트해 볼 생각이다.

 

 

Software Mansion

 

React Native IDE