BelieveCom

개발 테스트로 사용하던 JetBrains IntelliJ를 실행하니까, 어느 날부터 라이선스 갱신 메시지를 확인할 수 있었습니다. 무시하고 그냥 사용하면 실행 후 30분만 사용이 가능하다는 메시지를 확인할 수 있습니다. 구입도 좋지만, 먼저 라이선스 갱신 가능여부를 검색했습니다. 검색 결과 교육용 라이선스는 갱신이 가능하다는 것을 알았습니다. 그래서 오늘은 개발자에게 도움이되는 JetBrains IntelliJ 교육용 라이선스 갱신 방법을 알아보겠습니다.

JetBrains IntelliJ를 실행해서 라이선스 메뉴를 클릭하면 로그인 정보를 입력해서 라이선스를 갱신하는 화면을 확인할 수 있습니다. 아직 갱신 전이라면 로그인 정보를 입력하면, 유효하지 않는 라이선스라고 확인됩니다.

먼저 JetBrains 홈페이지에 로그인해서 라이선스 정보를 확인합니다. vaild through 항목을 확인하니까 사용 기간이 만료되었습니다. 이제 교육용 라이선스 갱신을 하기 위해서 "Renew my Education Pack" 항목을 클릭합니다.

라이선스 갱신을 위한 정보를 입력하고 제출하면 메일로 인증을 보냅니다.

JetBrains IntelliJ 갱신 요청한 메일로 인증을 보냈다는 메시지를 확인할 수 있습니다.

등록한 메일로 로그인해서 JetBrains에서 보낸 메일을 확인하면 링크를 클릭해서 갱신을 진행하라고 합니다.

링크를 클릭하면 정상적으로 JetBrains IntelliJ 교육용 라이선스 갱신이 완료됩니다.

JetBrains 홈페이지에 로그인해서 라이선스 정보를 확인하면 Valid Through 항목이 2024년으로 갱신된 것을 확인할 수 있습니다.

마지막으로 JetBrains IntelliJ를 실행 후 라이선스 메뉴를 클릭하고 로그인하면 정상적으로 JetBrains IntelliJ 교육용 라이선스가 갱신되어 사용 가능합니다. 학교 메일이 정상적으로 유지된다면 매년 갱신을 통해서 JetBrains IntelliJ 교육용 버전을 사용할 수 있어 개발에 많은 도움을 받을 수 있습니다. 아직도 JetBrains IntelliJ를 사용 전이라면 꼭 확인해주세요. 감사합니다.

오늘은 리액트 네이티브(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를 사용해서 간단하게 버튼을 생성하고, 이벤트를 연동하는 방법을 공부했습니다. 감사합니다.