TwentyTwentyOne

갓난애기도 배울 수 있는 React Native 가이드 ⑦ – 앱 완성 후 빌드 및 배포 전략 (Android & iOS)이제 앱은 완성됐습니다! 🎉다음 단계는 빌드(Build) 와 배포(Distribute) 입니다.이 글에서는 React Native CLI 방식으로 만든 앱을 Android와 iOS에서 빌드하고 테스트하는 방법,그리고 APK/IPA 파일을 만들어 실제 기기나 앱스토어에 배포하는 흐름을 차근차근 정리해드릴게요.✅ 1. React Native 앱 빌드 기본 개념플랫폼 출력물 설명Android.apk, .aabAndroid 설치 파일 / Play Store 제출용iOS.ipaiPhone 설치 파일 / App Store 제출용React Native CLI에서는 직접 네이티브 빌드 도구(Gra..

갓난애기도 배울 수 있는 React Native 가이드 ⑥ – FlatList와 상세 화면 연결하기 (실전 To-Do 앱 연동)앞서 우리는 FlatList로 할 일 목록을 만들고,React Navigation을 이용해 화면 전환 구조도 구현했습니다.이번 글에서는 이 둘을 연결해서,할 일 목록을 클릭하면 해당 상세 화면으로 이동하는 실전 To-Do 앱 기능을 완성해 봅니다.지금까지 배운 모든 내용을 실전에 적용하는 “통합 실습편”입니다! 🚀✅ 1. 준비: 프로젝트 디렉토리 구조/screens ├── HomeScreen.js └── DetailScreen.jsApp.js✅ 2. App.js – 네비게이션 설정import React from 'react';import { NavigationContaine..

갓난애기도 배울 수 있는 React Native 가이드 ⑤ – 화면 전환과 Stack Navigator 도입하기지금까지 우리는 단일 화면에서 입력, 버튼, 리스트 등을 구현해봤습니다.하지만 실제 앱은 여러 화면을 오가며 동작하죠.이번 글에서는 React Native에서 화면 전환(Navigation) 을 구현하는 대표 라이브러리인React Navigation의 Stack Navigator를 도입하여"할 일 목록 → 상세 화면"으로 전환되는 구조를 만들어 보겠습니다.✅ 1. React Navigation이란?React Native에는 기본 내비게이션 기능이 없기 때문에,React Navigation이라는 외부 라이브러리를 사용합니다.🚀 주요 기능Stack Navigator (화면 쌓기)Tab Naviga..

갓난애기도 배울 수 있는 React Native 가이드 ④ – FlatList로 리스트 뿌리기 (ToDo 앱 준비하기)앱에서 가장 자주 쓰이는 UI 중 하나는 바로 "리스트" 입니다.뉴스 앱, 쇼핑 앱, 메모 앱, 채팅 앱… 전부 리스트가 기본이죠!이번 글에서는 React Native에서 리스트를 표현하는 FlatList 컴포넌트를 실습을 통해 완전히 이해해보겠습니다.그리고 이것은 우리가 만들 To-Do 앱의 핵심 뼈대이기도 합니다 💪✅ 1. FlatList란?React Native에서 배열 형태의 데이터를 반복 렌더링해주는 기본 컴포넌트입니다.스크롤 가능한 성능 최적화된 리스트를 쉽게 만들 수 있어요.✅ 2. FlatList 기본 사용법import { FlatList, Text, View } from..

갓난애기도 배울 수 있는 React Native 가이드 ③ – 버튼, TextInput, 이벤트 핸들링 완전정복드디어 앱과 사용자 사이의 “대화”가 시작됩니다!이번 글에서는 버튼을 누르거나 텍스트를 입력하면 앱이 반응하는 기본 인터랙션을 실습해보겠습니다.이 기능들만 있어도 간단한 계산기, 로그인 창, 메모 앱을 만들 수 있어요.✅ 1. 버튼 만들기 – Button과 TouchableOpacity✅ 가장 기본적인 버튼import { Button } from 'react-native'; alert('버튼이 눌렸습니다!')}/>title: 버튼에 보일 텍스트onPress: 클릭 시 실행할 함수✅ 더 다양한 스타일을 원한다면? TouchableOpacityimport { TouchableOpacity, Text..

갓난애기도 배울 수 있는 React Native 가이드 ② – JSX, 컴포넌트, 스타일링 한 번에 끝내기설치도 끝났고, 앱도 실행했으니 이제 진짜 개발을 시작해볼 차례입니다!이번 글에서는 React Native 앱의 뼈대인 JSX 문법, 컴포넌트 구조, 그리고 스타일링 방법까지기초를 한 번에 정리해보겠습니다. 실습 중심으로 쉽게 따라오세요 😎✅ 1. JSX란 무엇인가?JSX(JavaScript + XML) 는 HTML처럼 보이지만, 사실은 JavaScript입니다.const App = () => { return ( Hello, React Native! );};JSX는 return() 안에서 XML처럼 마크업을 작성하게 해주는 문법입니다.하지만, 모든 JSX는 반드시 하나의 ..

갓난애기도 배울 수 있는 React Native 가이드 ① – React Native CLI 설치부터 첫 실행까지 (실무용 환경 구축)React Native를 실제로 앱스토어에 출시하거나, Bluetooth, 백그라운드 작업 등 네이티브 기능을 사용하려면React Native CLI 방식으로 시작해야 합니다.이번 글에서는 React Native CLI를 이용한 프로젝트 초기 설정부터 첫 앱 실행까지 전 과정을 안내합니다.macOS와 Windows 모두 대응하며, 자주 발생하는 에러 해결법도 포함했습니다.✅ 1. React Native CLI vs Expo CLI 잠깐 복습항목 React Native CLI설치 난이도⚠️ 어려움 (Xcode, Android SDK 필요)네이티브 기능 사용✅ 자유롭게 가능배..

React Native CLI vs Expo CLI – 무엇을 선택해야 할까?React Native 앱을 만들 때는 두 가지 시작 방식이 있습니다.React Native CLIExpo CLI각각의 장단점이 분명하기 때문에 개발 목적, 요구 기능, 배포 방식에 따라 선택해야 합니다.🧭 한눈에 보는 차이표항목 React Native CLI Expo CLI설치 난이도😵 복잡 (Xcode/Android Studio 필요)😄 아주 쉬움 (Node + 앱만 설치)네이티브 코드 작성✅ 가능 (Java/Kotlin, Swift/Obj-C)❌ 기본은 불가능 (EAS eject 필요)기능 확장성💪 완전 자유🙅 일부 제한 있음 (Bluetooth, Background task 등)앱 크기📦 작게 최적화 가능📦 ..