BelieveCom

환경변수는 컴퓨터에서 자동으로 경로를 확인하고 유지 관리하는 변수입니다. 환경변수를 설정하면 간단하게 경로를 확인하고 연결할 수 있어 매우 편리합니다. 환경변수는 시스템 변수와 사용자 변수로 구분됩니다. 시스템 변수는 모든 사용자가 사용할 수 있는 변수이고, 사용자 변수는 로그인 대상으로 사용하는 변수입니다. 즉 모든 사용자가 자유롭게 사용하고 싶다면 시스템 변수에 등록하게 좋습니다. 오늘은 Windows11에서 환경 변수 등록 방법을 알아보겠습니다.

Windows11에서 환경변수를 등록하기 위해서는 다양한 방법이 있습니다. 먼저 기존에 사용하던 방법으로 알아보겠습니다. 탐색기를 사용해서 등록하는 방법으로 내 PC에서 마우스 우클릭을 해주세요. Windows11은 두 가지 메뉴를 확인할 수 있습니다. 하단에 있는 "속성" 메뉴를 선택해주세요.

"속성" 메뉴를 선택하면 시스템 정보를 확인할 수 있는 창이 출력됩니다. 장치 사양 아래쪽에 "고급 시스템 설정" 메뉴를 클릭해주세요.

시스템 속성 창이 출력되면 아래쪽에 있는 "환경 변수" 버튼을 클릭합니다.

시스템 변수, 사용자 변수 중에서 선택 후 "새로 만들기" 버튼을 사용해서 새 사용자 변수를 등록하면 됩니다.

이번에는 Windows11 검색 기능을 사용해서 환경 변수를 등록해보겠습니다. Windows11 하단에 있는 시작 버튼을 클릭하고 위쪽에 있는 검색에서 "시스템"을 입력합니다. 아래쪽에 "시스템 환경 변수 편집"을 확인하고 클릭해주세요.

위에서 확인한 "시스템 속성" 화면이 출력되면 하단에 있는 "환경 변수" 버튼을 클릭해서 동일하게 등록하시면 됩니다. 환경 변수 등록은 Windows를 사용하면서 정말 많이 사용하는 기능입니다. 다양한 프로그램 경로를 설정해서 자동으로 동작하게 하는 것이 주목적이지만, 자주 사용하는 경로 및 정보를 포함할 수 있어 잘 사용하면 정말 좋은 기능입니다.

감사합니다.

react native는 android, iOS를 동시게 개발할 수 있는 장점이 있습니다. 동시에 두 가지 디바이스를 적용할 수 있어 생산성이 정말 최고입니다. 오늘은 Windows 환경에서 react native 설치 및 실행 방법을 알아보겠습니다.

Chocolatey 설치

가장 먼저 Windows 환경에서 패키지를 설치할 수 있는 Chocolatey를 설치해주세요. 간단하게 다양한 패키지를 설치할 수 있는 좋은 프로그램입니다.

cmd 환경에서 아래 명령어를 입력해서 설치하면 됩니다.

@"%SystemRoot%\System32\WindowsPowerShell\v1.0\powershell.exe" -NoProfile -InputFormat None -ExecutionPolicy Bypass -Command "iex ((New-Object System.Net.WebClient).DownloadString('https://chocolatey.org/install.ps1'))" && SET "PATH=%PATH%;%ALLUSERSPROFILE%\chocolatey\bin"

명령어를 입력하면 자동으로 다운로드 후 설치가 진행됩니다.

choco -v를 사용해서 chocolatey 버전을 확인할 수 있습니다.

choco search 패키지를 입력하면 내용을 확인할 수 있습니다.

Nodejs 설치

react-native는 javascript를 사용하므로, javascript의 런타임 Nodejs를 설치해야 합니다. 기본적으로 개발환경이 구성되어 있다면 간단하게 버전 확인 후 설치 안되어 있다면 choco 명령어를 사용해서 설치합니다.

choco install -y nodejs.install

정상적으로 nodejs가 설치되어 있다면 node -v 명령어를 사용해서 버전을 확인할 수 있습니다.

react-native CLI 설치

이제 react-native를 실행할 수 있는 react-native CLI를 설치해야 합니다.

npm install -g react-native-cli 명령어를 사용해서 react-native-cli를 설치합니다.

정상적으로 설치되었다면 npx react-native -v 명령어를 사용해서 버전을 확인할 수 있습니다.

react-native project 생성

react-native-cli이 정상적으로 설치되어 있다면 이제 react-native project를 생성해서 android 버전을 확인해야 합니다.

npx react-native init app2

react-native init 명령어를 사용해서 프로젝트를 생성합니다.

혹 실행 시 react 심벌이 아닌 텍스트 warning이 화면에서 보일 경우는 비정상적으로 react-native가 설치된 상태입니다.

https://believecom.tistory.com/781

위 내용을 참고해서 react-native를 재 설치하면 정상적으로 프로젝트를 생성할 수 있습니다.

정상적으로 프로젝트가 설치되면 react-native 심벌 이미지를 확인할 수 있습니다.

Visual Studio Code 설치

이제 생성된 소스를 확인하기 위해서 가장 간편하고 쉽게 사용할 수 있는 Visual Studio Code를 설치합니다.

https://visualstudio.microsoft.com/ko/downloads

하단에서 Visual Studio Code를 다운받아서 설치해주세요.

Visual Studio Code 설치 후 실행하면 파일 메뉴에서 "작업 영역에 폴더 추가"를 사용해서 생성된 react-native 프로젝트 폴더를 선택합니다.

android 폴더 하단에 있는 build.gradle 파일을 오픈해서 android 실행 버전을 확인합니다. buildToolsVersion 버전이 31 버전으로 실행되는 것을 확인할 수 있습니다. Visual Studio Code를 사용하면 쉽게 코드를 수정할 수 있어 매우 편리합니다. 가장 좋은 점은 iOS에서도 사용이 가능하고 다양한 plug in을 사용할 수 있습니다. 이제 버전을 확인했으니, android SDK를 설치해야 합니다.

Android SDK 설치

Android SDK를 설치하기 위해서 android Studio를 다운로드 후 설치해주세요.

https://developer.android.com/studio?hl=ko 

android Studio 설치 후 File -> Setting 메뉴를 선택해서 android SDK를 확인합니다.

Android API 31버전을 체크해서 SDK를 설치합니다.

정상적으로 설치되면 SDK 폴더에서 android 31 버전을 확인할 수 있습니다. 이제 AVD Manager를 사용해서 android 31 버전 Devices를 생성합니다.

정상적으로 Devices가 설치되면 android 화면을 확인할 수 있습니다. 이제 마지막으로 SDK 경로를 환경 변수에 저장합니다. 기본적으로 SDK 경로를 SDK 설치 시 상단에서 확인이 가능합니다.

새 사용자 변수를 클릭해서 ANDROID_HOME 변수 이름을 입력하고 변수 값에 SDK 경로를 등록해줍니다.

react-native androd 실행

이제 run-android 명령어를 사용해서 android 버전 react-native를 실행하겠습니다.

생성된 프로젝트 폴더로 이동해서 cmd를 실행합니다.

npx react-native run-android 명령어를 사용하면 실행 화면이 활성화되면서 Android를 구성합니다. 모든 구성이 완료되기까지는 매우 긴 시간이 필요합니다. 상위 버전에서는 Android를 별도 실행하지 않아도 자동으로 android Devices를 실행합니다.

모든 준비가 완료되면 실행된 android 화면에서 "Welcome to React Native" 앱 실행 화면을 확인할 수 있습니다. react native는 많은 설정이 필요하지만, 한번 설치하면 간단하게 업그레이드가 가능합니다. 생산성 높은 앱 개발 언어를 찾고 있다면 react-native Windows에 한번 설치해보세요. 감사합니다.

react native를 설치 후 프로젝트를 생성할 경우 정상적으로 react 화면이 출력되어야 합니다. 하지만 비정상적으로 react native가 설치되면 "cli.init is not a function" 오류가 발생합니다.

다양한 방법을 사용해도 react native 오류가 해결되지 않습니다. 해결 방법을 검색해보니 글로벌 환경 react native를 재 설치하라고 합니다. 그래서 먼저 기존 설치된 react native를 삭제합니다.

npm uninstall -g react-native-cli 명령어를 실행해서 기존 설치 환경을 모두 삭제합니다.

npm install -g react-native-cli 명령어를 실행해서 react native cli를 설치합니다.

npm install -g react-native 명령어를 사용해서 마지막 패키지를 설치하고 프로젝트를 다시 생성합니다.

npx react-native init app 프로젝트를 생성하면 정상적으로 react native 프로젝트가 생성됩니다. 간단하게 해결이 가능하므로 "cli.init is not a function" 오류가 발생하면 무조건 재 설치해주세요. 감사합니다.