본문 바로가기
Study/React Native

React Native 개발환경 구축하기(1)

by 얏옹이 2023. 11. 23.
반응형

React Native는 Meta(구 Facebook)에서 만든 크로스 플랫폼 언어이다.

 

Javascript 기반의 언어를 사용하고 있으며, 웹 개발 하듯이 앱개발을 할 수 있다는 장점과 방대한 커뮤니티를 지원하고 있다는 장점을 가지고 있다. 그만큼 점유율도 높고 사용자가 많아서 개발하다가 문제가 생기더라도 지원을 받을 수 있는 창구가 많다는 걸 의미한다.

 

바로 설치하러 가보자.

 

React Native 설치하러 가기

 

React Native · Learn once, write anywhere

A framework for building native apps using React

reactnative.dev

 

 

상단 메뉴에서 Development - Guide로 들어가보자

 

 

 

들어가면 상단에 Introduction이라는 문구와 함께 아래와 같은 링크가 존재한다.

 

React Native를 다루는 건 처음이기 때문에 차근차근 소개부터 들여다보자. 링크를 클릭하고 들어가 보자.

 

 

 

그럼 친절하게

 

모바일 개발이 처음이면 이면 Expo CLI를 사용하라고 알려주고 모바일 개발에 좀 익숙하다면 React Native CLI를 설치하라고 알려준다.

 

 

 

난 당연히 처음이기 때문에 Expo CLI를 사용해야겠다. 근데 CLI....? 익숙하다 익숙한 단어가 보인다. 설마 npm 설치인가...

 

 

음... 맞구만....

 

그렇다면 Node 설치가 선행적으로 필요하고, Node는 최신버전을 사용하라고 안내해 준다. Node 설치가 뭔지 모르겠다면

 

2023.07.11 - [Study/Vue.js] - Vue.js 개발환경 구축하기(feat. vs Code)

 

Vue.js 개발환경 구축하기(feat. vs Code)

일전에 Python 공부하면서 VS code를 설치했었는데 Vue.js 개발할때도 VS code를 많이 사용한다고한다. 따라서 Vscode로 Vue.JS 개발할수 있는 개발환경 구축을 해보겠다. 먼저 vs code 환경에서 vue.js를 사용

yat-ong.tistory.com

 

Vue 독학하면서 남겨놨던 Vue 개발환경 구축하기에 보면 Node 설치 및 npm 사용법에 대해서 나와있으니 참고 바란다.

 

반응형

 

그리고 역시... 개발툴은 Visual Studio Code를 이용하겠다. 왜? 가볍고 확장성 좋고 익숙하니까...

 

VS Code를 실행해 주자. 그리고 터미널을 실행해주자.

 

그리고 npm 설치 방법을 그대로 따라 해보자

 

 

음... 좋다 이걸 깔고 나서 VS code에서 지원하는 확장프로그램들도 살펴봐야겠다. 먼저 설치하자

 

 

쭉쭉쭉 설치가 되어가는 과정... 설치가 완료되면 완료됐다는 메시지가 출력된다.

 

 

여기까지는 Vue 프로젝트 생성했을 때와 동일한 거 같다.

 

VS code 워크스페이스 폴더에도 지정한 폴더명의 프로젝트가 생성되었다.

 

 

설치가 완료됐으니 해당 폴더로 이동한다음 npm run 명령어를 통해서 실행을 하라는 말인데.... IOS 앱개발을 목적으로 하다 보니 npm run ios라고 명령어를 실행하니... Xcode가 설치되어있어야 한다고 뜬다.

 

 

아... 이래서 IOS 개발자들이 맥북을 쓰나...?라는 생각이 드는 순간이었다.

 

일단 VS code 터미널을 이용하여 React Native 프로젝트를 만드는 데까지 성공했다.

 

다음 편에서 Xcode를 설치해 보거나 다른 방법이 있다면 다른 방법으로 개발을 진행해 보겠다.

 

반응형

'Study > React Native' 카테고리의 다른 글

React Native로 앱개발 독학하기  (2) 2023.11.22