BelieveCom

오늘은 리액트 네이티브(React Native)에서 Image Component 사용법을 알아보겠습니다. 앱에서 이미지는 정말 많이 사용되는 기능으로 다양한 방법으로 접근이 가능합니다.

먼저 App.js 파일을 클릭해서 파일을 오픈합니다.  리액트 네이티브(React Native)에서 Image Component를 사용할 수 있게 소스 상단에 있는 import를 사용해서 "Image"를 추가해주세요.

Image Component는 Network Image 리소스를 사용하는 방식과 직접 Image 리소스를 접근하는 방식으로 구분할 수 있습니다. 먼저 Network Image 리소스를 사용하기 위해서 Image Component를 설정하고 source에 주소를 입력합니다. 여기서 중요한 내용은 Network Image 리소스를 사용할 경우 반드시 style를 사용해서 크기를 지정해야 합니다. 크기를 지정하지 않으면 이미지가 화면에 출력되지 않습니다.

<Image
      source ={{uri:"https://reactnative.dev/img/tiny_logo.png"}}
      style={{width:300, height:300}} />

Android 디바이스를 갱신하면 React 로고 이미지를 확인할 수 있습니다. Image Component는 resizeMode 옵션에서  cover, contain, center, stretch, center, repeat 속성을 추가하면 다양한 이미지 크기 변경이 가능합니다.

두 번째 방법은 직접 Image 리소스를 사용하는 방법입니다. 먼저 Project 아래에 img 폴더를 생성합니다. 리액트 네이티브(React Native)는 다양한 디바이스에 앱을 구성하므로, 항상 공통 폴더를 사용해서 접근하는 게 편리합니다. 리소스에 사용할 이미지를 img 폴더에 복사합니다.

이제 require 함수를 사용해서 직접 리소스를 접근할 수 있습니다. Network Image 리소스와 다르게 크기를 지정하지 않아도 원본 크기로 이미지를 출력합니다. 소스 접근은 "./img" 상위폴더 경로를 사용해서 접근하면 됩니다. 폴더 생성이 불편하면 Project 폴더 아래 이미지를 저장해도 상관없습니다.

<Image source={require('./img/rnimg.png')}
                 style={{width:200, height:200}}/>

저장된 Image가 Android에 출력되는 것을 확인할 수 있습니다.

마지막으로 이미지를 가운데 출력하기 위한 방법을 알아보겠습니다. 이미지를 중앙에 위치하기 위해서 다양한 위치 조정 옵션을 사용하지만, 가장 쉽게 중앙에 위치하기 위해서는 View를 사용해서 이미지를 구성하면 됩니다. justifyContent, alignItems 옵션을 사용해서 중앙에 Component가 위치하게 적용하면 이미지가 중앙으로 이동합니다.

<View style={{
              justifyContent:'center',
              alignItems: 'center',
          }}>
              <Image
                  source ={{uri:"https://reactjs.org/logo-og.png"}}
                  style={{width:300, height:300}}
              />
          </View>

오늘은 리액트 네이티브(React Native)에서 많이 사용하는 Image Component 사용법을 공부했습니다. 중요한 내용은 Network 참조 시 크기 조정 부분만 기억하면 리액트 네이티브(React Native)에서 Image Component를 쉽게 사용할 수 있습니다. 감사합니다.

오늘은 React Native에서 Button 생성 및 이벤트 연동 방법을 알아보겠습니다. 매우 간단하게 등록할 수 있어 누구나 쉽게 개발이 가능합니다. 먼저 react-native int 명령어를 사용해서 Project를 만들어주세요.

생성된 Project를 Code 수정 프로그램을 사용해서 오픈해주세요. 메인 폴더 아래에 App.js 파일을 확인할 수 있습니다. App.js는 기본적인 React Native 구성 파일입니다.

먼저 Button, Alert를 사용하기 위해서 import를 설정합니다. App.js 파일 상단에 import 항목을 확인할 수 있습니다. 'react-native' import 항목에 Button, Alert를 추가합니다.

이제 간단하게 버튼을 생성하겠습니다. Header 아래쪽에 "<Button>"을 사용해서 버튼을 생성하고, title, color을 사용해서 버튼 스타일을 구성합니다. 이제 onPress 이벤트를 사용해서 Alert를 호출하게 구성해주세요.

<Button
       title="버튼"
       color="#f29477"
       onPress={() => Alert.alert('버튼 클릭 이벤트 발생')}
/>

onPress 이벤트는 버튼을 클릭하면 연결된 소스를 실행합니다. 버튼을 클릭하면 Alert 메시지가 출력됩니다.

react-native run-android 명령어를 사용해서 Android를 실행합니다. 기본 구조에서 아래쪽에 버튼을 확인할 수 있습니다. React-native는 수정 후 저장하면 바로 적용되므로, 매우 편리하게 개발할 수 있습니다.

버튼을 클릭하면 이벤트가 동작하면서 "버튼 클릭 이벤트 발생" 메시지가 출력됩니다. React Native를 사용해서 간단하게 버튼을 생성하고, 이벤트를 연동하는 방법을 공부했습니다. 감사합니다.

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

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

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

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

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

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

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

감사합니다.