1. 개발하기 전에
기본적인 어플리케이션을 만들며 ReactNative(TypeScript) 에 익숙해지는 것이 이번 개발의 목표다.
필자는 주로 C/C++/C# 과 Unity 엔진을 통한 게임 개발을 해왔으며, 그 외에는 기본적인 HTML/CSS의 사용법과 python, Kotlin을 업무/세미나에서 조금 만져본 정도이다.
AI를 통해 빠르게 개발하고, 후에 AI와 공식 레퍼런스 등으로 크로스체크를 하며 진행할 예정이다.
기본적으로 환경설정에 필요한 것들을 어떻게 설치하는 지 등은 따로 기재하지 않을 예정이다. (이미 많은 분들이 정리해두고 있다.)
2. 필요한 것들
2-1. ReactNative
ReactNative를 TypeScript로 작성할 것이고, Expo CLI를 사용할 것이다.
왜 ReactNative냐는 얘기도 가끔 듣는데, 프론트엔드를 학습하기 위한 기술 스택 선정에 있어서 실제로 꽤 많은 고민을 했었다. 결론부터 말하면 그냥 쉽고 유행하고 있는 것 같아서 골랐다. 지금 당장 뭘 하냐는 큰 의미가 없다고 생각했다. 내가 빠르게 학습하고 어떤 프레임워크를 잡던 제대로 개발해낼 수 있는 인재가 되는게 더 중요하다고 느꼈다. 그 기술 스택의 차이는 나중에 가면 다 체감할 수 있는 부분이 아닐까.
ReactNative CLI와 Expo CLI를 비교하는 글은 많으니 여기서는 생략하도록 하겠다.
iOS와 Android 양쪽을 오가는 일이 많고 빠르게 ReactNative로 Output을 만들어내고 싶었기 때문에 이번에는 Expo CLI 를 사용해 네이티브 빌드쪽에서 골머리 썩는 일 없이 날먹할 예정이다.
2-2. Git
버전 관리를 위해 GitHub도 사용한다.
현업에서 사용했던 방식과 최대한 가깝게 사용할 예정이다.
(네이밍이라던지, 개발 단위에 따라 Branch를 어떻게 찢을 것인지 등등)
2-3. Node.js (나중에)
당분간은 프론트엔드 위주로 작업이 이어질 것 같아서 일단은 패스.
어느 정도 프론트엔드가 형태를 갖추면 API를 작성해 간단하게 데이터를 주고 받을 수 있는 정도의 구현을 할 예정.
3. 프로젝트 작성
npx create-expo-app YourProjectName --template expo-template-blank-typescript
프로젝트를 작성할 디렉토리로 이동해 위 커맨드를 입력하면 Expo CLI를 이용해 TypeScript를 사용하는 ReactNative 프로젝트를 생성할 수 있다. JavaScript로 생성할 때와는 달리, tsconfig.json 파일이 생성된다던지, 당연하지만 .js 파일이 아니라 .tsx 파일로 코드가 생성된다던지, 하여튼 TypeScript를 사용하기 위한 준비가 되어있다.
그런데 왜 .ts가 아니라 .tsx일까. 애초에, .tsx가 뭘까.
기본적으로 .ts도 .tsx도 TypeScript의 확장자가 맞다. 둘의 가장 큰 차이는 JSX(JavaScript XML)를 포함하고 있느냐, 아니냐이다. 컴포넌트를 표현하기 위해 React에서는 JSX을 사용하고 있기 때문에, React/ReactNative에서 TypeScript를 사용하면 .tsx에 작업을 해나가게 된다.
(<View>,<Button>,<Text> 등이 JSX를 요구하는 것들이라 생각하면 된다.)
cd YourProjectName
npx expo start
만들어진 프로젝트 디렉토리로 들어가 npx expo start를 입력하면 Terminal 화면에 로컬 서버로 들어가기 위한 QR 코드가 표시되고, 그걸 모바일 기기로 읽어들이면 곧장 내 모바일 기기에서 프로젝트가 구동되는 모습을 확인할 수 있다. (Expo Go 어플리케이션 설치 필요)
그 상태에서 코드를 수정하면, 실시간으로 변경점이 반영되기도 한다. 실제로 개발한 어플을 Expo를 통해 배포하게 되면 스토어 업데이트를 거치지 않고 코드 수정이 가능하기도 한 모양이다.
다음에는 당장 AI한테 Todo 앱을 만들기 위한 요건을 건내어 빠른 코딩 날먹을 하고 AI가 준 코드를 분석하며 ReactNative의 동작 원리의 파악과 Todo 앱의 개발을 진행해보자.
