리액트 네이티브 개발 환경 설정, 맥북 초보자 환영

리액트 네이티브는 페이스북이 개발한 크로스 플랫폼 모바일 애플리케이션 개발 프레임워크로, 하나의 코드베이스로 iOS와 Android 모두에서 작동하는 앱을 만들 수 있습니다. 이 글에서는 리액트 네이티브 개발 환경 설정 과정을 초보자도 쉽게 따라할 수 있도록 안내합니다.

0. Homebrew 설치

Mac 사용자라면 Homebrew(일명 “brew”)를 사용하여 Node.js와 Watchman을 설치할 수 있습니다. Homebrew는 macOS용 패키지 관리자로, 소프트웨어 설치와 관리를 간편하게 해줍니다. Homebrew에 대해 더 알고 싶다면 Homebrew 공식 웹사이트를 참고하세요. 아래 스크립트를 터미널에 붙여 넣으면 맥북에 Homebrew가 설치됩니다.

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

1. Node.js 설치

리액트 네이티브 개발을 위한 첫 걸음은 Node.js 설치입니다. Mac 사용자는 Homebrew를 이용하여 간편하게 Node.js를 설치할 수 있습니다. Windows 사용자는 Node.js 공식 웹사이트에서 직접 설치 프로그램을 다운로드할 수 있습니다. 아래 스크립트를 터미널에 입력하고 node를 설치한 뒤 버전을 확인해보세요. (2024년5월기준 v22.1.0)

brew install nodenode -v

2. Watchman 설치

Watchman은 파일 변경을 감지하고 자동으로 특정 작업을 수행하는 페이스북의 도구입니다. Watchman 공식 페이지에서 다른 설치 옵션을 찾아볼 수 있습니다. 아래 스크립트를 터미널에 입력하고 watchman을 설치하세요. watchman은 설치시 맥OS의 시스템 설정 로그인 항목으로 등록됩니다. 알림창이 뜨는데 걱정하지 마세요.

brew install watchman

3. React Native CLI 설치 및 프로젝트 생성

리액트 네이티브 개발 핵심 도구인 React Native CLI를 설치합니다. 최신 node는 npx 명령어로 바로 react-native 프로젝트를 설정할 수 있습니다. 아래 스크립트를 터미널에 입력하여 react-native를 설치하고 “AwesomeProject”으로 프로젝트를 생성하세요. (2024년5월기준 v0.74)

npx react-native@latest init AwesomeProject --skip-install

–skip-install 옵션은 yarn berry를 사용하고 있는 사용자를 위해 추가했습니다. 이 옵션을 줘야 프로젝트 설정을 문제없이 마칠 수 있습니다. 이 부분은 추후에 자세히 다루겠습니다. npm을 이용하는 사용자는 이 옵션을 넣을 필요가 없습니다.

4. 적합한 IDE 선택, VSCode 설치

Visual Studio Code와 같은 편리한 코드 에디터를 설치하여 리액트 네이티브 개발 환경을 완성하세요. Visual Studio Code는 공식 웹사이트에서 다운로드할 수 있습니다. iOS와 Android 개발 테스트를 위한 통합 도구도 설치할 예정입니다.

다음 글 안내

다음 글에서는 안드로이드를 위한 리액트 네이티브 개발 환경 설정 방법을 자세히 다룰 예정입니다. Android Studio 설치에서 시작하여 필요한 SDK 구성과 가상 디바이스 설정 방법까지 심층적으로 설명할 것이므로 기대해 주시고 댓글도 많이 남겨주세요. 👾

개발자 생산성 도구 글은 이곳으로

다음 글에서 계속…