[React Native] React Native Tools

cm961115·2022년 5월 18일
1

React-Native

목록 보기
7/9
post-thumbnail

📖 개요

이번엔 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.

대충 코드 디버깅과 빠른 코드 빌드를 할 수있다. 라고하는것.... 같다....


💡 공식 문서에는 시작전 다음과 같은 준비가 필요하다고 몇가지 당연한 소리를 한다.

  • 당연히 React Native 개발 환경이 갖춰져 있어야한다. (당연한 소리)
  • Android 환경에서 개발하려면 에뮬레이터가 있어야한다. (당연한 소리)
  • VS Code에서 사용시 MarketPlace에서 해당 extenstion을 설치해야 한다. (당연한 소리)
  • RN 프로젝트의 root 디렉토리를 연다. (당연한 소리)

⚙ 설치

설치는 간단하다. 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를 누르면,

아래와 같이 추가적인 설정을 할 수 있다.

🗒 참고

https://marketplace.visualstudio.com/items?itemName=msjsdiag.vscode-react-native#react-native-commands-in-the-command-palette

profile
프로젝트하며 공부했던거 끄적끄적...

1개의 댓글

comment-user-thumbnail
2022년 7월 30일

안녕하세요!
팀 클라썸의 Brand 입니다.

블로그 글을 읽고 제안드리고 싶어
이렇게 댓글 남기게 되었습니다.

강남역 도보 2분거리에 위치한 클라썸에서 React Native 앱 개발자를 채용하고 있습니다.(EO에서 유명했던 인터뷰 영상 기억하시나요?, 포브스 아시아 30세 이하 리더 30인에 선정된 이채린 대표가 이끄는 클라썸 입니다.)
EO 인터뷰 영상: https://www.youtube.com/watch?v=Cty3T3n5cP0&feature=emb_title

클라썸은 React Native로 안드로이드앱, iOS앱을 개발하고, TypeScript로 웹, 앱, 백엔드를 모두 개발하는 Series A 스타트업입니다. 스타트업의 극초기부터 M&A(넥스알), IPO(데브시스터즈)까지 이끌었던 개발 총괄님과 KAIST 출신의 개발자가 절반 이상일 정도로 인재 밀도가 높은 개발팀이 함께 일하고 있습니다.

현재 클라썸은 서울대, 연세대, KAIST, 삼성, LG인화원, 직방, 마켓컬리 등 전세계 32개국 6000여개 학교와 기업에서 사용 중입니다. 작년에 미국 실리콘밸리와 한국에서 Series A 투자를 유치하였고, 지난 분기에는 매출 4배를 달성하였습니다. ‘교육계의 슬랙'이라고 불리며 미국과 한국을 중심으로 빠르게 성장하고 있습니다.

구글 공인 세계적인 미래학자. 토마스 프레이 다빈치연구소 소장은 “2030년이 되면 온라인에서 세계 최고 규모의 회사는 이름을 들어보지 못한 교육회사가 될 것”이라고 예측했습니다. 매해마다 SaaS시장 및 온라인 교육시장 규모는 거대해지고 있고, 시장의 흐름이 클라썸에게도 매우 긍정적으로 흘러가고 있는 상황입니다.

클라썸 채용공고)
React Native 앱 개발 포지션
https://classum.career.greetinghr.com/o/12359

웹, 백엔드, AI관련 전직군 채용 포지션
careers.classum.com

혹시 괜찮으시다면, 시간 편하실 때 커피챗을 통해 클라썸에 대해 더 자세하게 소개 드리고자 합니다.
커피챗 언제든지 문의 주시고, 커피챗 전에도 궁금하신 점 있으시면 언제든지 편하게 연락 주세요. 감사합니다 :)

Brand
010-9139-5223
jsdalsee@gmail.com

답글 달기