이번에는 타입스크립트의 모듈에 대해 정리해 보겠습니다. 프로그래밍을 하다 보면 코드가 점점 길어지고 복잡해지기도 합니다. 예를 들어, React Native로 앱을 만들 때 화면을 구성하는 컴포넌트, 데이터를 가져오는 함수, 스타일을 정의하는 코드가 모두 한 파일에 있다면 나중에 수정하거나 협업할 때 머리가 아플 겁니다.이를 위해 모듈에 대해 고려해야 합니다. 모듈은 쉽게 말해 코드를 기능별로 쪼개서 파일 단위로 관리하는 방법입니다. 마치 책꽂이에 책을 주제별로 정리하듯 말이죠. TypeScript와 React Native로 배우는 모듈 시스템TypeScript에서 모듈은 JavaScript의 모듈 시스템을 기반으로 동작합니다. JavaScript에는 크게 두 가지 모듈 방식이 있는데, 바로 Common..

이번에는 TypeScript 코드를 다룰 때 타입 안전성을 높이고, 유지보수와 확장성을 강화하는 방법 중 "고급 타입" 활용에 대해 정리해 보겠습니다.  TypeScript 고급 타입 활용  유니온 타입과 인터섹션 타입TypeScript를 배우다 보면 타입을 직접 명시하는 방식이 눈에 띕니다. string이나 number 같은 기본 타입만으로는 복잡한 상황을 다루기에 부족한 경우가 있는데, 이때 유니온 타입( | )과 인터섹션 타입( & )을 사용할 수 있죠. 유니온 타입은 값이 여러 타입 중 하나일 수 있다는 걸 표현합니다. 예를 들어, 버튼이 "켜짐", "꺼짐", "로딩 중" 같은 상태를 가질 수 있다고 하면, React Native에서 이를 타입으로 나타내면 다음과 같습니다.type ButtonSt..

React Native로 앱을 개발할 때, 데이터 관리는 필수적입니다. 사실 거의 모든 응용서비스에서 필수죠. 이번에는 React에서 화면에 표시되는 텍스트, 숫자, 버튼의 상태 등은 모두 데이터이며, 이를 효과적으로 다루려면 상태 관리(State Management) 방법에 대해 정리해 보겠습니다.  데이터 처리와 API 연동  상태 관리(State Management)React Native로 앱을 만들다 보면 "데이터"라는 개념이 빠질 수 없어요. 화면에 보이는 숫자, 텍스트, 버튼의 상태 같은 것들이 바로 데이터인데, 이걸 잘 다루려면 상태 관리라는 기술을 알아야 합니다. 상태는 쉽게 말해 앱이 기억하고 있는 정보예요. 예를 들어, 버튼을 눌렀을 때 화면에 숫자가 1씩 늘어나게 하고 싶다면, 그 숫..

이번에는 React Native에서 화면 간 전환을 효과적으로 구현하는 방법에 살펴봅니다. React Navigation을 활용한 내비게이션 구현 방법을 정리하고, Stack Navigator와 Tab Navigator 설정 및 활용 방법에 대해 살펴보겠습니다.  내비게이션과 화면 전환  React NavigationReact Navigation은 React Native에서 화면 간 이동을 쉽게 처리할 수 있도록 도와주는 라이브러리입니다. React Navigation을 사용하면 Stack Navigation, Tab Navigation, Drawer Navigation 등 다양한 방식으로 화면을 전환할 수 있습니다. React Navigation의 주요 내비게이션 방식Stack Navigator: 화면..

이번에는 React Native의 기본 구조를 살펴보고, 입문자가 React Native 개발을 시작하는 데 필요한 기초를 다질 수 있도록 필요한 부분을 정리하려 합니다.React Native의 컴포넌트, JSX, Props와 State  React Native 주요 컴포넌트React Native는 컴포넌트(Component) 기반 개발을 중심으로 동작한다. 컴포넌트란 간단히 말해 UI를 구성하는 작은 단위의 블록입니다. 웹 개발에서 HTML 요소(예: , 등)를 사용하듯, React Native에서는 다양한 컴포넌트를 조합하여 앱의 UI를 구축합니다.   컴포넌트 기반 개발의 장점:재사용성(Reusability): 동일한 UI 요소를 여러 곳에서 사용할 수 있어 코드 중복을 줄일 수 있다.모듈화(Mo..

이번에는 React native 관련 두 번째로 개발 환경 설정에 대해 정리해 보겠습니다.  React Native 개발 환경  React Native 개발을 위한 필수 도구React Native로 앱을 개발하려면 몇 가지 필수 도구를 설치해야 합니다. 기본적으로 JavaScript 런타임 환경과 모바일 개발을 위한 도구가 필요합니다. 도구 설명 Node.jsJavaScript 실행 환경, npm 패키지 매니저 포함npm 또는 yarnJavaScript 라이브러리 및 패키지 관리 도구Expo CLI ReactReact Native 앱을 손쉽게 개발할 수 있도록 돕는 프레임워크React Native CLIExpo보다 더 자유로운 개발 환경을 제공하는 CLIAndroid StudioAndroid 앱 개발을..

이번부터는 모바일 앱 프로그래밍 언어에 대해 시작해 보려 합니다. iOS나 Android 플랫폼 각각에 전용됐던 프로그래밍 언어들이 얼마 전부터는 크로스플랫폼(Crossplatform)이라는 이름으로 하나의 프로그래밍 언어로 사용되게 되었죠. 오늘은 중 하나인 React Native라는 프로그래밍 언어에 대한 이야기를 시작하겠습니다.  모바일 앱 개발 초보자를 위한 React Native #1React Native는 2015년 페이스북(Meta)에서 처음 오픈소스로 공개된 모바일 앱 개발 프레임워크입니다. 원래 페이스북 내부에서는 ‘React’라는 웹용 라이브러리를 사용하여 빠르고 효율적인 사용자 인터페이스(UI)를 구성하고 있었는데, 이 React의 아이디어를 모바일 환경으로 확대해보고자 한 시도가 바..