본문 바로가기

리액트 네이티브10

리액트 네이티브 React Native | EAS를 통해 APK를 빌드하는 방법 ⭕ 리액트 네이티브 React Native | EAS를 통해 APK를 빌드하는 방법➡️ eas.json 파일 설정하기eas.json 파일은 프로젝트의 빌드 프로세스를 구성하기 위해 사용됩니다. 이 파일에서는 다양한 빌드 환경(예: 개발, 내부 릴리스 등)에 대한 설정을 정의할 수 있습니다. 각 환경은 특정 타깃(Android/iOS)에 대한 세부 사항을 설정할 수 있습니다. ➡️ 개발 빌드 설정개발 빌드 환경에서는 주로 디버깅과 개발을 목적으로 하는 APK를 생성합니다.buildType: 빌드 타입을 "apk"로 설정하여 Android APK 파일을 생성하도록 합니다.gradleCommand: Gradle을 사용한 빌드 명령을 지정합니다. 여기서 :app:assembleDebug는 디버그 버전의 앱을 .. 2024. 4. 26.

리액트 네이티브 React Native | React.createElement와 JSX ⭕ 리액트 네이티브 React Native | React.createElement와 JSX리액트 네이티브에서는 UI를 작성하기 위해 컴포넌트를 사용합니다. 텍스트를 표시하기 위해서는 Text 컴포넌트를 사용합니다. 이 때, React.createElement와 JSX는 컴포넌트를 생성하는 두 가지 주요 방법입니다. ➡️ React.createElement 함수React.createElement 함수는 가상 DOM 객체를 생성하는 데 사용됩니다. 이 함수는 세 개의 인자를 받습니다. 첫 번째 인자: 컴포넌트의 이름 (예: 'Text')두 번째 인자: 속성 객체 (props)세 번째 인자: 컴포넌트의 자식 요소예를 들어, 다음 코드는 Text 컴포넌트를 생성합니다.const virtualDOM = React.. 2024. 3. 20.

리액트 네이티브 React Native | JSX와 XML 마크업 언어 ⭕ 리액트 네이티브 React Native | JSX와 XML 마크업 언어리액트 네이티브(React Native)는 모바일 애플리케이션을 개발하기 위한 프레임워크로, XML 마크업 언어를 사용합니다. XML은 HTML의 부분집합으로, 태그나 속성을 자유롭게 확장할 수 있어 HTML보다 유연한 구조를 가집니다. ➡️ JSXJSX는 리액트 네이티브에서 사용되는 문법으로, JavaScript XML의 약자입니다. JSX는 JavaScript로 XML 형식의 코드를 작성할 수 있게 해줍니다. HTML과 달리 XML은 태그 이름을 자유롭게 정의할 수 있습니다 ➡️ 마크업 언어 문법마크업 언어의 기본 문법은 시작 태그와 끝 태그로 이루어집니다. 시작 태그는 형식으로 작성하고, 속성을 가질 수 있습니다. 속성은 항.. 2024. 3. 20.

리액트 네이티브 React Native | react 패키지 ⭕ 리액트 네이티브 React Native | react 패키지➡️ react 패키지리액트와 리액트 네이티브 프레임워크는 공통적으로 react 패키지를 사용합니다. 이 패키지는 애플리케이션의 가상 DOM 구조를 만들어주는 역할을 담당합니다. ➡️ react-native 패키지리액트 네이티브에서는 react-native 패키지가 사용됩니다. 이 패키지는 리액트 요소를 안드로이드 프레임워크나 iOS용 UIKit 프레임워크의 화면 UI 객체로 변환하는 역할을 합니다. ➡️ 브리지 방식 렌더링리액트에서는 자바스크립트를 사용하여 DOM 렌더링 과정을 직접 확인할 수 있습니다. 그러나 리액트 네이티브에서는 네이티브 렌더러의 동작을 코드로 확인할 수 없습니다. 이는 리액트 네이티브 프로젝트의 Android와 iOS .. 2024. 3. 19.

리액트 네이티브 React Native | 정적 HLTML과 동적 HTML ⭕ 리액트 네이티브 React Native | 정적 HLTML과 동적 HTML1997년, 마이크로소프트는 웹 기술의 새로운 패러다임을 발표했습니다. 이것이 정적 HTML에서 동적 HTML로의 전환입니다. 정적 HTML은 웹 서버에서 미리 작성된 HTML 문서를 클라이언트에게 전달하는 방식으로 동작했습니다. 그러나 마이크로소프트의 발표는 이러한 전통적인 방식을 벗어나, 웹 브라우저에서 자바스크립트 코드를 실행하여 동적으로 HTML을 생성하는 방식으로 웹 기술을 발전시켰습니다. ➡️ 정적 HLTML정적 HTML은 변하지 않는 콘텐츠를 제공하는 데에 적합했습니다. 그러나 동적 HTML은 사용자의 상호작용에 따라 콘텐츠를 동적으로 생성하고 업데이트할 수 있어서 웹 애플리케이션의 기능성과 사용자 경험을 향상했습니.. 2024. 3. 19.

리액트 네이티브 React Native | 윈도우 개발 환경: Scoop, Node.js, JDK ⭕ 리액트 네이티브 React Native | 윈도우 개발 환경: Scoop, Node.js, JDK리액트 네이티브(React Native)는 모바일 앱 개발을 위한 프레임워크로, 개발자가 JavaScript를 사용하여 iOS와 안드로이드 양쪽 플랫폼을 위한 네이티브 앱을 개발할 수 있게 해 줍니다. 윈도우 서 리액트 네이티브 개발 환경을 설정하는 과정을 용이하게 만드는 중요한 도구 중 하나가 Scoop입니다. ➡️ Scoop 설치 과정Scoop은 윈도우용 커맨드 라인 인터페이스(CLI) 기반의 패키지 매니저로, 소프트웨어 설치와 관리를 간소화합니다. 특히 개발 도구와 라이브러리를 쉽게 설치하고 업데이트할 수 있는 기능을 제공하여, 수동 다운로드와 설치의 번거로움을 줄여줍니다.PowerShell 관리자 .. 2024. 3. 19.

리액트 네이티브 React Native | 개발 환경 ⭕ 리액트 네이티브 React Native | 개발 환경리액트 네이티브(React Native)는 모바일 앱 개발의 패러다임을 바꾼 크로스플랫폼 프레임워크입니다. 이 기술을 사용하여 개발자는 하나의 코드베이스로 iOS와 안드로이드 양쪽 플랫폼에서 실행 가능한 앱을 만들 수 있습니다. 그러나 각 운영 체제에 맞는 앱을 효과적으로 개발하기 위해서는 특정 개발 환경 설정이 필요합니다. ➡️ 개발 환경 구성리액트 네이티브의 개발 환경은 기본적으로 Node.js 기반으로, 이는 다양한 운영 체제에서 지원됩니다. 개발자는 Node.js를 설치한 후, 마이크로소프트가 오픈소스로 제공하는 비주얼 스튜디오 코드(Visual Studio Code) 같은 편집기를 사용하여 코드를 작성할 수 있습니다. 이는 윈도우, 맥, 리.. 2024. 3. 19.

리액트 네이티브 React Native | 브릿지(Bridge) 방식 ⭕ 리액트 네이티브 React Native | 브릿지(Bridge) 방식리액트 네이티브(React Native)는 모바일 앱 개발에 있어 혁신적인 접근 방식을 제시합니다. 이 플랫폼은 안드로이드와 iOS 개발을 위해 각각 자바(Java)와 오브젝트-C(Objective-C) 또는 스위프트(Swift)로 작성된 기존의 네이티브 프레임워크에 의존합니다. 안드로이드의 경우 안드로이드 프레임워크, iOS의 경우 UIKit 프레임워크가 이에 해당합니다. 이 두 프레임워크는 각각의 운영체제에서 GUI 구성요소를 다루는 데 필요한 다양한 뷰(View) 클래스를 제공합니다. ➡️ 브릿지(Bridge) 방식리액트 네이티브는 이러한 네이티브 프레임워크와 자바스크립트 엔진 간의 통신을 가능하게 하는 '브릿지' 방식을 채택합.. 2024. 3. 19.

리액트 네이티브 React Native | 크로스 플랫폼(Cross Platform) ⭕ 리액트 네이티브 React Native | 크로스 플랫폼(Cross Platform)리액트 네이티브(React Native)는 페이스북에 의해 2015년에 발표된 혁신적인 크로스플랫폼 모바일 앱 개발 프레임워크입니다. 이 기술은 모바일 앱 개발의 패러다임을 전환시키며, 개발자들에게 안드로이드와 iOS 운영체제를 위한 앱을 단일 코드베이스로 개발할 수 있는 능력을 부여합니다. 리액트 네이티브의 등장으로 인해, 웹 개발자들은 별도의 네이티브 언어 학습 없이도 효율적으로 모바일 앱을 개발할 수 있게 되었습니다. ➡️ 네이티브 앱 (Native App)네이티브 앱 개발은 각 운영체제별로 최적화된 성능과 사용자 경험을 제공하지만, 이는 개별 플랫폼마다 별도의 앱 개발을 필요로 합니다. 안드로이드 앱 개발에는 .. 2024. 3. 19.

리액트 네이티브 React Native | 리액트 기반 프레임 워크 ⭕ 리액트 네이티브 React Native | 리액트 기반 프레임 워크리액트 네이티브(React Native)는 페이스북이 개발한 크로스플랫폼 모바일 앱 개발 프레임워크로, 널리 사용되는 웹 개발 언어인 자바스크립트를 기반으로 합니다. 리액트 네이티브는 리액트와 기술적으로 약 10%만 공유하며, 주로 웹 브라우저 대상으로 동작하는 리액트와는 달리, HTML과 CSS를 사용하지 않고도 실행 가능한 앱을 만들 수 있다는 점에서 큰 차이를 보입니다. 이는 기존에 안드로이드 앱 개발에 사용되는 자바나 코틀린, iOS 앱 개발에 필요한 오브젝트C나 스위프트와 같은 언어에 비해 훨씬 접근성이 좋다고 할 수 있습니다. 그 결과, 리액트 네이티브는 개발자들에게 자바스크립트를 이용하여 네이티브 수준의 성능을 내는 모바일.. 2024. 3. 19.

이전 1 다음

티스토리툴바