BelieveCom

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" 오류가 발생하면 무조건 재 설치해주세요. 감사합니다.

데이터 정보가 점점 증가하면서 효율적인 검색 결과를 많은 개발자들이 추구하고 있습니다. 대부분 개발에 사용되는 정보는 데이터베이스(DataBase)에 저장됩니다. 하지만 검색, 분석 등 높은 리소스를 사용하는 작업일 경우 일반 데이터베이스(DataBase)는 효율이 많이 떨어지는 문제가 있습니다. 이를 보안하기 위해서 일반적인 검색엔진을 많이 사용합니다. 오늘은 검색엔진 중에서 무료로 사용이 가능한 엘라스틱서치(Elastic Search) 설치 방법을 알아보겠습니다.

엘라스틱서치(Elastic Search)는 Apache Lucene(아파치 루씬)기반의 Java 오픈소스 분산 검색 엔진입니다. 엘라스틱서치(Elastic Search)를 사용해서 Lucene 라이브러리를 단독으로 사용할 수 있게 되어, 방대한 양의 데이터를 신속하게 저장, 검색, 분석할 수 있습니다. 오늘은 간단하게 Windows에서 엘라스틱서치(Elastic Search) 최신 버전인 8.4 버전을 설치해보겠습니다.

엘라스틱서치(Elastic Search) 8.4 설치 방법

엘라스틱서치(Elastic Search)를 설치하기 위해서 위 사이트로 이동합니다.

버전을 확인하면 8.4.0으로 확인됩니다. "Windows" 버튼을 클릭해서 파일을 다운로드합니다.

350MB 정도 크기로 클릭과 동시에 다운로드됩니다.

압축된 파일을 C드라이브에 압축을 해제합니다. 다른 드라이브에 압축을 해제하면 경로 문제로 설정이 필요합니다. 처음이면 무조건 C 드라이브 압축 해제해주세요.

압축 해제 후 elasticsearch-8.4.0폴더 아래 bin폴더로 이동합니다.

Start Elasticsearch를 확인하면 bin 폴더 아래 elasticsearch 또는 elasticsearch.bat를 실행하라고 합니다. 둘 중 아무거나 실행해줍니다.

OpenJDK 실행에 따른 액세스 허용을 클릭하고 실행합니다. 정상적으로 실행되었다면, 브라우저를 실행해서 http://localhost:9200을 입력합니다. 엘라스틱서치(Elastic Search)는 기본 포트가 9200으로 설정됩니다.

엘라스틱서치(Elastic Search) 8.4 실행 인증 오류 해결 방법

그런데 실행 후 로그인 창이 출력되면서 확인이 불가능합니다.

무시하고 실행하면 "error" 메시지를 확인할 수 있습니다. 아무래도 인증에 문제가 있어 보입니다.

elasticearch-8.4.0 하위 config 폴더로 이동해서 elasticsearch.yml 설정 파일을 오픈합니다. Visual Studo Code가 설치되어 있으면 바로 실행이 가능하고, 설치 안되어 있다면 Notepad를 사용해서 오픈하면 됩니다.

elasticearch.yml파일 맨 아래쪽으로 이동해서 ssl 인증을 비활성화해주는 옵션을 입력합니다.

xpack.security.transport.ssl.enabled:false
xpach.security.enabled:false

elasticearch.yml 파일을 저장 후 elasticsearch.bat파일을 다시 실행합니다.

이제 오류 없이 엘라스틱서치(Elastic Search) 8.4버전이 정상적으로 실행됩니다.

http://localhost:9200 입력하면 엘라스틱서치(Elastic Search) 정보를 확인할 수 있습니다. 엘라스틱서치(Elastic Search) 8.4버전 부터는 인증 문제가 발생하므로, ssl 인증 관련 내용을 옵션 처리해서 실행하면 간단하게 실행 가능합니다. 시작이 반이므로 엘라스틱서치(Elastic Search)를 공부하고 싶다면 지금 바로 설치해보세요.

감사합니다.