따라하면 완성되어 있는 React Native 개발 환경 세팅 (Windows OS)

따라 하면 완성되어 있는 React Native 개발환경 세팅 (Windows OS) 포스팅 시작합니다.

제목 그대로 아래 과정을 그대로 따라 하면 윈도우 OS에서 Linux 환경을 조성하여 React Native로 개발할 수 있는 환경이 세팅되어 있을 거예요.

 

일단 쉬운 것부터 합시다. 

 

코드를 짜고 실행하는 코드 편집기와 실제 폰처럼 작동하는 에뮬레이터를 위한 소프트웨어 먼저 설치하도록 해요.

 

IDE 설치 (VSC & 안드로이드 스튜디오)

1. Visual Studio Code 설치 (IDE)

https://code.visualstudio.com/

Visual Studio Code - Code Editing. Redefined

 

2. 안드로이드 스튜디오 설치 (에뮬레이터 확인 용. 폰으로 확인할 경우 설치하지 않아도 됨.)

https://developer.android.com/studio?gclid=Cj0KCQjw4eaJBhDMARIsANhrQABqdHmeiGP4uLIhmpiD-7SyVpXubUpJpFu5N_4i27-9WfATbgxNfgQaAlWtEALw_wcB&gclsrc=aw.ds 

Download Android Studio and SDK tools  |  Android Developers

---

 

이제 본격적으로 윈도우에서 개발환경을 구축하기 위해 Linux 개발환경을 세팅할 차례입니다.

윈도우에서 Linux 개발환경 세팅

1. Windows Terminal 다운로드 (명령 프롬프트, PowerShell 및 WSL과 같은 명령 줄 도구 및 셸 사용자를 위한 최신의 빠르고 효율적이며 강력한 생산성의 터미널 응용 프로그램) : 개발환경을 세팅하면서 몇 가지 명령어를 입력해야 하는데, 이를 효과적으로 하기 위한 단계입니다.

 

https://www.microsoft.com/ko-kr/p/windows-terminal/9n0dx20hk701?rtc=1&activetab=pivot:overviewtab 

Windows Terminal 구매 - Microsoft Store ko-KR

 

2. WSL2 설치 (Windows Subsystem for Linux : 윈도우를 리눅스처럼 사용하게 해 줌)

 

WSL2 설치를 위한 Windows 환경 설정

1. Linux용 Windows 하위 시스템 사용 설정
① 직접 설정 방법 : 윈도우 시작 - "Windows 기능 켜기/끄기" 검색 - "Linux용 Windows 하위 시스템" 체크박스 체크 후 확인

② 코드로 설정 방법 : 터미널 또는 파워셀 관리자 권한 실행 후 코드 실행

dism.exe /online /enable-feature /featurename:Microsoft-Windows-Subsystem-Linux /all /norestart​

2. Virtual Machine (가상 머신 플랫폼) 사용 설정
① 직접 설정 방법 : 윈도우 시작 - "Windows 기능 켜기/끄기" 검색 - "가상 머신 플랫폼" 체크박스 체크 후 확인

② 코드로 설정 방법 : 터미널 또는 파워셀 관리자 권한 실행 후 코드 실행

dism.exe /online /enable-feature /featurename:VirtualMachinePlatform /all /norestart​

3. 위 두 가지 설정 체크 후 컴퓨터 재 부팅

4. Linux 커널 업데이트 패키지 다운로드 후 설치 파일 더블 클릭하여 설치

다운로드 링크 : https://wslstorestorage.blob.core.windows.net/wslblob/wsl_update_x64.msi

 

 

3. WSL2 기본 버전으로 설정

 

1. Windows Terminal(명령 프롬프트)에서 다음 코드 실행

wsl --set-default-version 2

 

2. 선택한 Linux 배포 설치 (우분투)
Microsoft Store 링크 :https://aka.ms/wslstore

① 위 Microsoft Store에 접속하여 Ubuntu 선택 후 설치한다.

2-1. 우분투 설치 완료 후 0x80370102 에러 날 때 해결 법
① 윈도우 시작 - "Windows 기능 켜기/끄기" 검색 - "Hyper-V" + "Hyper-V 관리도구" + "Hyper-V 플랫폼 - Hyper-V 서비스" 체크 후 다시 시작한다.

② 재부팅되는 과정에 서 Delete 키를 눌러 BIOS 화면에 진입한다.
③ BIOS 화면에서 우측 하단의 Advanced Mode > Advanced > CPU Configuration > SCM Mode를 Enabled로 설정한 후 다시 재부팅한다.
④ 우분투 설치 완료 후 Windows Terminal(명령 프롬프트)에서 상단 탭 우측의 아래 화살표를 누르면 Ubuntu를 선택할 수 있다.

Windows Terminal에서 상단 탭 우측의 아래 화살표를 누르면 Ubuntu를 선택 할 수있다.

⑤ New User Name과 New Password를 입력하라는 메시지가 뜨면 각각 입력한다. (Password는 입력창에 보이지 않음)
⑥ Windows terminal에 아래 코드를 입력해서 제대로 설치되었는지 확인한다.

wsl --list --verbose​

⑦ 이어서 아래 코드를 입력하여 WSL 2를 기본 아키텍처로 설정한다. 

wsl --set-default-version 2​

 

React Native 개발을 위한 세팅

nvm / node / npm 설치

1. Ubuntu 18.04 명령줄을 엽니다. (Windows Terminal에서 Ubuntu 선택)

2. 아래 명령을 사용하여 cURL(명령줄을 사용하여 인터넷에서 콘텐츠를 다운로드하는 데 사용되는 도구)를 설치합니다.

sudo apt-get install curl​

 3. 아래 명령을 사용하여 nvm을 설치합니다.

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.38.0/install.sh | bash​

4. 설치 후 터미널을 닫았다가 다시 켭니다.

5. 설치를 확인하려면 아래 명령을 입력합니다. 그러면 'nvm'이 반환됩니다. '명령을 찾을 수 없음' 메시지가 수신되거나 응답이 없으면 현재 터미널을 닫았다가 열고 다시 시도해 보세요. 

command -v nvm​

6. 아래 명령을 사용하여 현재 설치된 노드 버전을 나열합니다.

nvm ls​

7. 아래 명령을 사용하여 Node.js의 안정적인 최신 LTS 릴리스를 설치합니다(권장).

nvm install --lts​

8. 아래 명령을 사용하여 Node.js가 설치되어 있는지 여부 및 현재 기본 버전을 확인합니다.

node --version​

9. 마지막으로 아래 명령을 사용하여 npm이 설치되어 있는지 확인합니다.

npm --version​

 

Expo CLI 설치

1. 아래 명령 입력

expo CLI npm install -g expo-cli​

참고 링크 : https://reactnative.dev/docs/environment-setup

 

Remote - WSL 확장 설치 (Visual Studio Code와 WSL 연동)

1. 아래 링크 클릭하여 Remote - WSL 프로그램을 설치한다.
Remote - WSL - Visual Studio Marketplace

Remote - WSL - Visual Studio Marketplace

 

git 설치

1. 아래 명령 입력

sudo apt-get install git
git config --global user.name "유저 네임 입력"
git config --global user.email "유저 이메일 입력"

자 이렇게 하면 세팅은 모두 완료되었고, 개발할 프로젝트를 생성할 차례입니다.

 

프로젝트 생성 및 실행

1. 프로젝트 생성을 위해 아래 명령을 입력합니다.

expo init ProjectName
cd ProjectName
code .​

2. 생성한 프로젝트 실행을 위해 아래 명령을 입력합니다.

cd ProjectName
npm start

 

생성한 프로젝트와 git 연동

1. 아래 명령을 입력하여 git을 생성합니다.

git init​

2. 아래 명령을 입력하여 파일을 스테이지에 add 합니다.

git add . # 현재 디렉토리의 모든 변경사항을 스테이지에 올린다
git add ./src/components # components 디렉토리의 모든 변경사항을 스테이지에 올린다
git add ./src/components/Test.vue # 특정 파일의 변경사항만 스테이지에 올린다
git add -p # 변경된 사항을 하나하나 살펴보면서 스테이지에 올린다​

3. 아래 명령을 입력하여 커밋 메시지와 함께 파일을 커밋합니다. (커밋 메시지는 설명을 적으면 됩니다.)

git commit -m "커밋 메세지"​

4. 아래 명령을 입력하여 자신의 깃 주소를 연동합니다.

git remote add origin https://github.com/user/projectName.git​

5. 아래 명령을 입력하여 commit 한 파일들을 git에 push 합니다.
(아래 명령이 실행되지 않으면 master를 main으로 바꿔볼 수 있습니다.)

git push origin master​

 

이렇게 하면 깃 연동까지 끝이 납니다. 세팅이 간단한 작업은 아니어서 정리를 잘하려고 많은 정성을 들였습니다.

궁금하신 부분이 있으시면 댓글로 남겨주세요 :)

 

이상으로 따라 하면 완성되어 있는 React Native 개발환경 세팅 (Windows OS) 포스팅 마치겠습니다.

감사합니다.